:root {
  --bg: #deebf4;
  --surface: rgba(255, 255, 255, 0.94);
  --surface-soft: rgba(246, 250, 253, 0.96);
  --ink: #12202c;
  --muted: #516475;
  --line: rgba(0, 68, 120, 0.14);
  --line-strong: rgba(0, 68, 120, 0.24);
  --accent: #0068b4;
  --accent-2: #86bc22;
  --accent-3: #35338b;
  --accent-4: #096176;
  --accent-soft: rgba(0, 104, 180, 0.10);
  --ok: #218657;
  --warn: #b3781d;
  --danger: #d55a46;
  --shadow: 0 24px 56px rgba(16, 31, 48, 0.10), 0 8px 24px rgba(0, 104, 180, 0.06);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
}

/* Internal team chat: focused workspace with channels and private conversations. */
.team-chat-layout {
  display: grid;
  grid-template-columns: minmax(245px, 0.36fr) minmax(0, 1fr);
  min-height: 620px;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 20px;
  overflow: hidden;
  background: var(--ui-surface, var(--surface));
}

.team-chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-right: 1px solid var(--ui-border, var(--line));
  background: var(--ui-surface-alt, var(--surface-soft));
}

.team-chat-sidebar-head span,
.team-chat-group-label,
.team-chat-direct-form label > span {
  display: block;
  color: #58708a;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.team-chat-sidebar-head strong {
  display: block;
  margin-top: 5px;
  font-size: 16px;
  line-height: 1.3;
}

.team-chat-channel-list {
  display: grid;
  gap: 7px;
  align-content: start;
}

.team-chat-group-label {
  margin: 11px 0 2px;
}

.team-chat-channel {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 13px;
  background: transparent;
  color: #15283a;
  text-align: left;
  cursor: pointer;
}

.team-chat-channel:hover {
  background: var(--ui-surface-hover, var(--surface-soft));
  border-color: var(--ui-border, var(--line));
}

.team-chat-channel.is-active {
  border-color: var(--ui-accent, var(--accent));
  background: var(--ui-accent-soft, var(--accent-soft));
  box-shadow: none;
}

.team-chat-channel-icon {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 9px;
  background: var(--ui-accent-soft, var(--accent-soft));
  color: var(--ui-accent, var(--accent));
  font-weight: 900;
}

.team-chat-channel-copy {
  min-width: 0;
}

.team-chat-channel-copy strong,
.team-chat-channel-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-chat-channel-copy small {
  margin-top: 2px;
  color: #60758a;
  font-size: 12px;
}

.team-chat-direct-form {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ui-border, var(--line));
}

.team-chat-direct-form select {
  width: 100%;
  margin-top: 6px;
}

.team-chat-conversation {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  background: var(--ui-surface, var(--surface));
}

.team-chat-conversation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--ui-border, var(--line));
}

.team-chat-conversation-head h3 {
  margin: 2px 0 0;
  font-size: 22px;
}

.team-chat-conversation-head p {
  max-width: 360px;
  margin: 0;
  color: #58708a;
  font-size: 13px;
  text-align: right;
}

.team-chat-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 360px;
  max-height: 560px;
  padding: 22px 24px;
  overflow: auto;
  background: var(--ui-surface-alt, var(--surface-soft));
}

.team-chat-message {
  align-self: flex-start;
  max-width: min(76%, 650px);
  padding: 11px 14px;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 4px 15px 15px 15px;
  background: var(--ui-surface, var(--surface));
  box-shadow: none;
}

.team-chat-message.is-own {
  align-self: flex-end;
  border-color: var(--ui-accent, var(--accent));
  border-radius: 15px 4px 15px 15px;
  background: var(--ui-accent-soft, var(--accent-soft));
}

.team-chat-message-meta {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  color: #58708a;
  font-size: 12px;
}

.team-chat-message-meta strong { color: #17354b; }
.team-chat-message p { margin: 7px 0 0; line-height: 1.52; }

.team-chat-message-form {
  padding: 16px 24px 18px;
  border-top: 1px solid var(--ui-border, var(--line));
  background: var(--ui-surface-alt, var(--surface-soft));
}

.team-chat-message-form textarea { width: 100%; resize: vertical; }

.team-chat-compose-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
}

.team-chat-compose-actions span { color: #58708a; font-size: 12px; }

@media (max-width: 860px) {
  .team-chat-layout { grid-template-columns: 1fr; }
  .team-chat-sidebar { border-right: 0; border-bottom: 1px solid var(--ui-border, var(--line)); }
  .team-chat-direct-form { margin-top: 0; }
  .team-chat-message-list { max-height: 440px; }
  .team-chat-conversation-head { align-items: flex-start; flex-direction: column; gap: 8px; }
  .team-chat-conversation-head p { text-align: left; }
}

/* Kaufmännischer Bereich */
.commercial-view {
  --commercial-ink: #153044;
  --commercial-muted: #597184;
  --commercial-line: rgba(73, 125, 151, 0.22);
  --commercial-blue: #0876ae;
  --commercial-green: #6b9f32;
}

.commercial-page-head {
  align-items: flex-end;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--commercial-line);
}

.commercial-page-head h2 {
  margin: 0.18rem 0 0.3rem;
}

.commercial-summary {
  margin: 1.15rem 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commercial-finance-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0 1.25rem;
}

.commercial-finance-grid .metric-card {
  min-height: 7rem;
}

.commercial-finance-grid .metric-card small {
  display: block;
  margin-top: 0.25rem;
  color: var(--commercial-muted);
}

.commercial-profit-card {
  background: linear-gradient(140deg, rgba(236, 248, 228, 0.94), rgba(255, 255, 255, 0.9));
}

.commercial-profit-card.is-negative {
  color: #9b392d;
  background: linear-gradient(140deg, rgba(255, 235, 231, 0.95), rgba(255, 255, 255, 0.9));
}

.commercial-finance-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(21rem, 0.9fr);
  gap: 1rem;
  align-items: start;
}

.commercial-daily-table {
  min-width: 42rem;
}

.commercial-finance-open-card {
  padding: 0.85rem;
}

.commercial-summary .metric-card {
  min-height: 6.3rem;
  background:
    radial-gradient(circle at 100% 0, rgba(122, 178, 56, 0.15), transparent 45%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(231, 244, 250, 0.8));
}

.commercial-summary .metric-card strong {
  font-size: clamp(1.35rem, 2vw, 2rem);
}

.commercial-report-metric {
  border-color: rgba(179, 120, 29, 0.28) !important;
  background: linear-gradient(145deg, rgba(255, 251, 241, 0.96), rgba(245, 250, 238, 0.9)) !important;
}

.commercial-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.35rem;
  margin-bottom: 1rem;
  overflow: visible;
  border: 1px solid var(--commercial-line);
  border-radius: 1rem;
  background: rgba(224, 238, 246, 0.64);
}

.commercial-tab {
  appearance: none;
  border: 0;
  border-radius: 0.72rem;
  padding: 0.58rem 0.82rem;
  color: var(--commercial-muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.commercial-tab:hover,
.commercial-tab:focus-visible {
  color: var(--commercial-ink);
  background: rgba(255, 255, 255, 0.72);
}

.commercial-tab.is-active {
  color: #fff;
  background: linear-gradient(125deg, var(--commercial-blue), #087696 65%, var(--commercial-green));
  box-shadow: 0 0.45rem 1rem rgba(19, 101, 140, 0.2);
}

.commercial-tab-badge {
  display: inline-grid;
  min-width: 1.35rem;
  min-height: 1.35rem;
  margin-left: 0.3rem;
  padding: 0 0.3rem;
  place-items: center;
  border-radius: 999px;
  color: #7a4d0c;
  background: #fff0c8;
  font-size: 0.72rem;
}

.commercial-tab.is-active .commercial-tab-badge {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

.commercial-editor {
  margin-bottom: 1.2rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid var(--commercial-line);
  border-radius: 1.15rem;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.94), rgba(241, 248, 251, 0.88)),
    radial-gradient(circle at 100% 0, rgba(104, 163, 54, 0.15), transparent 42%);
  box-shadow: 0 0.75rem 2rem rgba(30, 83, 109, 0.09);
}

.commercial-document-basics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.commercial-recipient-card {
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: rgba(237, 246, 250, 0.65);
}

.commercial-recipient-card summary {
  padding: 0.9rem 1rem;
  color: var(--commercial-ink);
  font-weight: 800;
  cursor: pointer;
}

.commercial-recipient-card[open] summary {
  border-bottom: 1px solid var(--commercial-line);
}

.commercial-recipient-card .field-grid {
  padding: 1rem;
}

.commercial-position-toolbar {
  display: grid;
  grid-template-columns: minmax(16rem, 1fr) auto auto auto;
  gap: 0.65rem;
  align-items: end;
  padding: 0.8rem;
  border-radius: 0.9rem;
  background: rgba(214, 234, 243, 0.55);
}

.commercial-position-toolbar label {
  margin: 0;
}

.commercial-pricing-hint {
  align-self: center;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(82, 132, 58, 0.2);
  border-radius: 0.7rem;
  color: #315e24;
  background: rgba(235, 246, 226, 0.82);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.commercial-items-head,
.commercial-item-row {
  display: grid;
  grid-template-columns: minmax(12rem, 2.6fr) minmax(4.4rem, 0.62fr) minmax(4.8rem, 0.7fr) minmax(6.2rem, 0.85fr) minmax(5.8rem, 0.78fr) minmax(6.2rem, 0.85fr) minmax(5.1rem, 0.68fr) minmax(4.8rem, 0.65fr) minmax(6.2rem, 0.85fr) 2.4rem;
  gap: 0.5rem;
  align-items: end;
}

.commercial-items-head {
  padding: 0.7rem 0.75rem 0.45rem;
  color: var(--commercial-muted);
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.commercial-item-row {
  position: relative;
  margin-bottom: 0.55rem;
  padding: 0.72rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.82);
}

.commercial-item-row::before {
  content: attr(data-position);
  position: absolute;
  top: -0.45rem;
  left: -0.35rem;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  color: #fff;
  background: var(--commercial-blue);
  font-size: 0.7rem;
  font-weight: 900;
}

.commercial-item-row label span {
  display: none;
}

.commercial-purchase-field input,
.commercial-markup-field input {
  border-color: rgba(82, 132, 58, 0.25);
  background: rgba(241, 248, 235, 0.72);
}

.commercial-item-total {
  align-self: center;
  padding-bottom: 0.7rem;
  text-align: right;
  white-space: nowrap;
}

.commercial-item-remove {
  width: 2.25rem;
  height: 2.85rem;
  border: 1px solid rgba(195, 69, 53, 0.22);
  border-radius: 0.72rem;
  color: #b64132;
  background: rgba(255, 238, 234, 0.88);
  font-size: 1.35rem;
  cursor: pointer;
}

.commercial-totals {
  width: min(100%, 25rem);
  margin: 1rem 0 1.3rem auto;
  padding: 0.85rem 1rem;
  border-radius: 0.9rem;
  color: var(--commercial-ink);
  background: linear-gradient(135deg, rgba(225, 241, 247, 0.85), rgba(239, 248, 232, 0.88));
}

.commercial-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.commercial-totals .commercial-internal-total {
  color: #315e24;
  font-size: 0.86rem;
}

.commercial-total-gross {
  margin-top: 0.35rem;
  padding-top: 0.65rem !important;
  border-top: 2px solid rgba(10, 116, 158, 0.35);
  font-size: 1.12rem;
}

.commercial-toolbar {
  margin: 1rem 0;
}

.commercial-list {
  display: grid;
  gap: 0.7rem;
}

.commercial-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem 1rem;
  align-items: center;
  padding: 1rem 1.1rem;
  border: 1px solid var(--commercial-line);
  border-left: 4px solid var(--commercial-blue);
  border-radius: 0.95rem;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 0.4rem 1.1rem rgba(34, 78, 101, 0.06);
}

.commercial-card:hover {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.65rem 1.5rem rgba(34, 78, 101, 0.1);
}

.commercial-document-card.is-cancellation {
  border-left-color: #c45442;
  background: linear-gradient(120deg, rgba(255, 247, 244, 0.9), rgba(255, 255, 255, 0.8));
}

.commercial-document-card.is-cancelled {
  border-left-color: #8a98a1;
  background: rgba(241, 245, 247, 0.76);
}

.commercial-card-main {
  min-width: 0;
}

.commercial-card h4,
.commercial-card p {
  margin: 0.18rem 0;
}

.commercial-card p {
  color: var(--commercial-muted);
}

.commercial-card small {
  color: var(--commercial-muted);
}

.commercial-document-type {
  color: var(--commercial-blue);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.commercial-card-amount {
  font-size: 1.25rem;
  white-space: nowrap;
}

.commercial-card-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--commercial-line);
}

.commercial-card-actions .button {
  min-height: 2.35rem;
  padding: 0.5rem 0.75rem;
}

.commercial-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.85rem;
  color: var(--commercial-muted);
  font-size: 0.88rem;
  background: rgba(247, 251, 253, 0.82);
}

.commercial-pagination > div {
  display: flex;
  gap: 0.45rem;
}

.commercial-project-card {
  border-left-color: var(--commercial-green);
}

.commercial-template-card {
  border-left-color: #4c91ad;
}

.commercial-template-card.is-inactive {
  opacity: 0.62;
}

.commercial-bundle-editor {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: linear-gradient(135deg, rgba(235, 246, 250, 0.88), rgba(244, 249, 235, 0.82));
}

.commercial-bundle-editor .panel-head h4,
.commercial-bundle-editor .panel-head p { margin: 0.15rem 0; }

.commercial-bundle-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 0.32fr) auto;
  gap: 0.65rem;
  align-items: end;
}

.commercial-bundle-picker label { min-width: 0; margin: 0; }
.commercial-bundle-picker :is(input, select) { min-width: 0; width: 100%; }

.commercial-bundle-items { display: grid; gap: 0.45rem; }

.commercial-bundle-item {
  display: grid;
  grid-template-columns: minmax(12rem, 2fr) minmax(4.6rem, 0.45fr) minmax(4.8rem, 0.55fr) minmax(6.5rem, 0.7fr) auto auto;
  gap: 0.8rem;
  align-items: end;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(56, 119, 144, 0.2);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.76);
}

.commercial-bundle-item label { min-width: 0; margin: 0; }
.commercial-bundle-item :is(input, select) { min-width: 0; width: 100%; }
.commercial-bundle-item label span { display: block; margin-bottom: 0.25rem; color: var(--commercial-muted); font-size: 0.68rem; font-weight: 850; letter-spacing: 0.055em; text-transform: uppercase; }
.commercial-bundle-item > strong { align-self: center; white-space: nowrap; }
.commercial-bundle-item .button { align-self: center; }

.commercial-bundle-summary {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.7rem 0.8rem;
  border-radius: 0.7rem;
  color: #234c30;
  background: rgba(223, 242, 224, 0.76);
  font-size: 0.88rem;
}

.commercial-bundle-ids,
.commercial-bundle-ids > *,
.commercial-bundle-ids .commercial-document-ids-actions {
  min-width: 0;
  max-width: 100%;
}

.commercial-bundle-ids .commercial-document-ids-actions {
  flex: 1 1 34rem;
}

.commercial-bundle-ids .commercial-ids-search {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.button-compact { min-height: 2rem; padding: 0.35rem 0.6rem; font-size: 0.78rem; }

.commercial-report-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

.commercial-report-head h3,
.commercial-report-head p {
  margin: 0.2rem 0;
}

.commercial-report-head-actions {
  display: grid;
  justify-items: end;
  gap: 0.55rem;
}

.commercial-dialog {
  width: min(44rem, calc(100vw - 2rem));
  max-height: min(46rem, calc(100vh - 2rem));
  padding: 0;
  border: 1px solid var(--commercial-line);
  border-radius: 1rem;
  color: #172f40;
  background: #f9fcfd;
  box-shadow: 0 1.25rem 3.5rem rgba(9, 38, 56, 0.25);
}

.commercial-dialog::backdrop {
  background: rgba(7, 31, 45, 0.48);
}

.commercial-collection-form {
  max-height: inherit;
  overflow: auto;
  padding: 1.2rem;
}

.commercial-collection-reports {
  display: grid;
  gap: 0.55rem;
  max-height: 19rem;
  overflow: auto;
  padding: 0.2rem;
}

.commercial-collection-report {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.7rem;
  background: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.commercial-collection-report:hover {
  border-color: rgba(10, 116, 158, 0.45);
  background: #fff;
}

.commercial-collection-report input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.12rem;
}

.commercial-collection-report span {
  display: grid;
  gap: 0.2rem;
}

.commercial-collection-report small {
  color: #5a7181;
}

.commercial-ids-overview {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.45rem;
}

.commercial-ids-chip,
.commercial-billing-pill,
.commercial-material-source {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 850;
}

.commercial-ids-chip {
  padding: 0.42rem 0.65rem;
  color: #496172;
  border: 1px solid var(--commercial-line);
  background: rgba(244, 248, 250, 0.9);
}

.commercial-ids-chip.is-ready {
  color: #14613f;
  border-color: rgba(33, 134, 87, 0.24);
  background: rgba(231, 247, 238, 0.92);
}

.commercial-document-ids {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0.9rem 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--commercial-line);
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(242, 248, 250, 0.96), rgba(247, 251, 237, 0.96));
}

.commercial-document-ids strong,
.commercial-document-ids p {
  margin: 0;
}

.commercial-document-ids p {
  margin-top: 0.2rem;
  color: #5b7180;
  font-size: 0.82rem;
}

.commercial-document-ids-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
}

.commercial-ids-search {
  display: grid;
  gap: 0.2rem;
  min-width: 14rem;
}

.commercial-ids-search > label {
  color: #466375;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commercial-ids-search input {
  min-height: 2.45rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--commercial-line);
  border-radius: 8px;
  background: #fff;
}

.commercial-article-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.35rem);
  left: 0;
  width: min(34rem, 80vw);
  max-height: 20rem;
  overflow: auto;
  padding: 0.35rem;
  border: 1px solid var(--commercial-line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(14, 48, 67, 0.18);
}

.commercial-ids-search {
  position: relative;
}

.commercial-article-suggestion {
  display: grid;
  width: 100%;
  gap: 0.15rem;
  padding: 0.7rem;
  border: 0;
  border-bottom: 1px solid #dce7ed;
  color: #173143;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.commercial-article-suggestion:last-child {
  border-bottom: 0;
}

.commercial-article-suggestion:hover,
.commercial-article-suggestion:focus-visible {
  background: #eef7f4;
}

.commercial-article-suggestion small {
  color: #607887;
}

.admin-body .button.button-gc {
  color: #fff;
  border-color: #bd590d;
  background: linear-gradient(135deg, #d66a13, #bd4f0c);
}

.admin-body .button.button-weishaupt {
  color: #fff;
  border-color: #7b2730;
  background: linear-gradient(135deg, #8d3039, #63212a);
}

.commercial-report-list {
  display: grid;
  gap: 0.85rem;
}

.commercial-report-card {
  overflow: hidden;
  border: 1px solid var(--commercial-line);
  border-left: 4px solid #b3781d;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 0.55rem 1.4rem rgba(34, 78, 101, 0.07);
}

.commercial-report-card.is-draft {
  border-left-color: var(--commercial-blue);
}

.commercial-report-card.is-billed {
  border-left-color: var(--commercial-green);
}

.commercial-report-top,
.commercial-report-body,
.commercial-report-actions {
  padding: 0.9rem 1rem;
}

.commercial-report-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  background: linear-gradient(120deg, rgba(237, 247, 251, 0.72), rgba(247, 250, 242, 0.65));
}

.commercial-report-top h4,
.commercial-report-top p,
.commercial-report-body p {
  margin: 0.16rem 0;
}

.commercial-billing-pill {
  flex: 0 0 auto;
  padding: 0.42rem 0.68rem;
  color: #81540f;
  background: #fff2d6;
}

.commercial-report-card.is-draft .commercial-billing-pill {
  color: #075b82;
  background: #e4f4fb;
}

.commercial-report-card.is-billed .commercial-billing-pill {
  color: #14613f;
  background: #e7f7ee;
}

.commercial-report-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0.7rem 0;
}

.commercial-report-facts > div {
  padding: 0.58rem 0.68rem;
  border: 1px solid rgba(73, 125, 151, 0.15);
  border-radius: 0.7rem;
  background: rgba(242, 248, 251, 0.72);
}

.commercial-report-facts span,
.commercial-report-facts strong {
  display: block;
}

.commercial-report-facts span {
  margin-bottom: 0.12rem;
  color: var(--commercial-muted);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.commercial-report-work {
  padding: 0.75rem 0;
  color: var(--commercial-ink);
  line-height: 1.55;
}

.commercial-report-materials {
  display: grid;
  gap: 0.35rem;
}

.commercial-report-material-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.58rem 0.7rem;
  border-top: 1px solid rgba(73, 125, 151, 0.14);
}

.commercial-report-material-row small {
  display: block;
  color: var(--commercial-muted);
}

.commercial-material-source {
  margin-right: 0.35rem;
  padding: 0.18rem 0.42rem;
  color: #075b82;
  background: #e4f4fb;
}

.commercial-material-source.is-weishaupt {
  color: #8b2f1d;
  background: #ffebe5;
}

.commercial-report-price.is-missing {
  color: #a45c0d;
}

.commercial-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  border-top: 1px solid var(--commercial-line);
  background: rgba(244, 248, 250, 0.6);
}

.commercial-report-actions .button {
  min-height: 2.4rem;
  padding: 0.5rem 0.75rem;
}

.commercial-split {
  display: grid;
  grid-template-columns: minmax(19rem, 0.86fr) minmax(22rem, 1.14fr);
  gap: 1rem;
  align-items: start;
}

.commercial-split > * {
  min-width: 0;
}

.commercial-split.is-bundle-mode {
  grid-template-columns: minmax(0, 1fr);
}

.commercial-split.is-bundle-mode > .commercial-editor {
  position: static;
}

.commercial-split > .commercial-editor {
  position: sticky;
  top: 1rem;
}

.commercial-inventory-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 1rem 0;
}

.commercial-inventory-receipt {
  margin: 1rem 0;
}

.commercial-inventory-receipt form {
  padding: 1rem;
}

.commercial-inventory-table {
  min-width: 74rem;
}

.commercial-inventory-table .button {
  min-height: 2.15rem;
  padding: 0.4rem 0.62rem;
}

.commercial-inventory-movements {
  display: grid;
  gap: 0.5rem;
}

.commercial-inventory-movement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.76);
}

.commercial-inventory-movement small,
.commercial-inventory-movement p {
  display: block;
  margin: 0.12rem 0 0;
  color: var(--commercial-muted);
}

.commercial-inventory-movement p {
  grid-column: 1 / -1;
}

.commercial-inventory-movement .is-positive {
  color: #26703f;
}

.commercial-inventory-movement .is-negative {
  color: #a33d30;
}

.commercial-settings-form {
  max-width: 70rem;
}

.commercial-journal-actions,
.commercial-journal-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: end;
}

.commercial-journal-filter {
  margin: 0.9rem 0;
  padding: 0.85rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: rgba(237, 247, 251, 0.66);
}

.commercial-journal-filter label {
  min-width: 11rem;
  margin: 0;
}

.commercial-journal-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}

.commercial-postcalculation-summary {
  margin-top: 0.9rem;
}

.commercial-postcalculation-table {
  min-width: 84rem;
}

.commercial-postcalculation-table small {
  display: block;
  margin-top: 0.2rem;
  color: var(--commercial-muted);
  font-size: 0.74rem;
  line-height: 1.35;
}

.commercial-billing-pill.is-finalized {
  color: #14613f;
  background: #e7f7ee;
}

.commercial-billing-pill.is-unbilled {
  color: #81540f;
  background: #fff2d6;
}

.commercial-audit-export {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.7rem;
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid var(--commercial-line);
  border-radius: 1rem;
  background: linear-gradient(115deg, rgba(237, 247, 251, 0.86), rgba(247, 251, 237, 0.82));
}

.commercial-audit-export label {
  min-width: 11rem;
  margin: 0;
}

.commercial-audit-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.commercial-audit-info article {
  display: grid;
  gap: 0.28rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.76);
}

.commercial-audit-info span {
  color: var(--commercial-muted);
  line-height: 1.48;
}

.commercial-journal-table-wrap {
  overflow-x: auto;
  margin-bottom: 1rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: rgba(255, 255, 255, 0.78);
}

.commercial-journal-table {
  width: 100%;
  min-width: 68rem;
  border-collapse: collapse;
  font-size: 0.83rem;
}

.commercial-journal-table th,
.commercial-journal-table td {
  padding: 0.68rem 0.72rem;
  border-bottom: 1px solid var(--commercial-line);
  text-align: left;
  vertical-align: top;
}

.commercial-journal-table th {
  color: var(--commercial-muted);
  background: rgba(225, 241, 247, 0.82);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.commercial-journal-table .number {
  text-align: right;
  white-space: nowrap;
}

.commercial-journal-table tr.is-cancellation td {
  color: #923d30;
  background: rgba(255, 241, 237, 0.5);
}

.commercial-journal-link {
  padding: 0;
  border: 0;
  color: var(--commercial-blue);
  background: transparent;
  font: inherit;
  font-weight: 850;
  text-decoration: underline;
  cursor: pointer;
}

.commercial-dialog {
  width: min(92vw, 38rem);
  padding: 0;
  border: 1px solid rgba(64, 111, 135, 0.24);
  border-radius: 1.1rem;
  color: var(--commercial-ink);
  background: rgba(250, 253, 254, 0.98);
  box-shadow: 0 1.6rem 4rem rgba(18, 48, 64, 0.3);
}

.commercial-dialog::backdrop {
  background: rgba(14, 35, 47, 0.55);
  backdrop-filter: blur(4px);
}

.commercial-dialog form {
  padding: 1.25rem;
}

.commercial-dialog h3,
.commercial-dialog p {
  margin: 0.2rem 0;
}

.commercial-mail-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.8rem;
  color: var(--commercial-muted);
  background: rgba(237, 246, 250, 0.65);
  font-size: 0.84rem;
  font-weight: 750;
}

.commercial-mail-attachments span {
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  color: var(--commercial-ink);
  background: rgba(255, 255, 255, 0.84);
}

.commercial-settings-form h4 {
  margin: 0.9rem 0 0;
}

.commercial-document-design .notice {
  margin: 0 1rem;
}

.commercial-design-layout {
  display: block;
  padding: 1rem;
}

.commercial-design-fields {
  min-width: 0;
}

.commercial-design-type-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.commercial-design-type-tabs button {
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--commercial-line);
  border-radius: 999px;
  color: var(--commercial-ink);
  background: rgba(255, 255, 255, 0.76);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.commercial-design-type-tabs button.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(125deg, var(--commercial-blue), #087696 65%, var(--commercial-green));
}

.commercial-document-title-field {
  display: block;
  margin: 0 1rem 1rem;
}

.commercial-layout-editor {
  margin-top: 0.25rem;
}

.commercial-layout-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  align-items: baseline;
  margin-bottom: 0.75rem;
  color: var(--commercial-muted);
  font-size: 0.82rem;
}

.commercial-layout-toolbar strong {
  color: var(--commercial-ink);
}

.commercial-layout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-left: auto;
}

.commercial-layout-actions .button {
  margin: 0;
  padding: 0.48rem 0.7rem;
  font-size: 0.78rem;
}

.commercial-layout-workspace {
  display: grid;
  grid-template-columns: minmax(28rem, 1.2fr) minmax(18rem, 0.55fr);
  gap: 1rem;
  align-items: start;
}

.commercial-design-preview {
  --commercial-document-primary: #0b779f;
  --commercial-document-accent: #78b91c;
  position: sticky;
  top: 1rem;
  aspect-ratio: 210 / 297;
  min-height: 34rem;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--commercial-line);
  border-top: 0.35rem solid var(--commercial-document-primary);
  border-radius: 0.9rem;
  background: #e7eef2;
  box-shadow: 0 0.75rem 1.6rem rgba(30, 83, 109, 0.1);
}

.commercial-design-pdf {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.commercial-pdf-preview-status {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.7rem;
  color: var(--commercial-ink);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.4rem 1rem rgba(30, 83, 109, 0.16);
  font-weight: 800;
  font-size: 0.78rem;
}

.commercial-layout-block-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin: 0 0 0.85rem;
}

.commercial-layout-list-button {
  min-height: 2rem;
  padding: 0.38rem 0.6rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.6rem;
  color: var(--commercial-ink);
  background: #fff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.commercial-layout-list-button:hover,
.commercial-layout-list-button.is-selected {
  border-color: var(--commercial-document-primary);
  color: #fff;
  background: var(--commercial-document-primary);
}

.commercial-layout-list-button.is-hidden {
  color: #7b8d99;
  text-decoration: line-through;
  opacity: 0.72;
}

.commercial-layout-block {
  position: absolute;
  z-index: 1;
  display: block;
  min-width: 2.5rem;
  margin: 0;
  padding: 0.42rem;
  overflow: hidden;
  border: 1px dashed transparent;
  border-radius: 0.38rem;
  color: #172533;
  background: transparent;
  font: inherit;
  line-height: 1.35;
  cursor: grab;
  touch-action: none;
}

/* The editor uses the HTML hidden attribute as the single source of truth. */
.commercial-layout-block[hidden] {
  display: none !important;
}

.commercial-layout-block:hover,
.commercial-layout-block.is-selected {
  z-index: 2;
  border-color: var(--commercial-document-accent);
  background: rgba(255, 255, 255, 0.76);
  box-shadow: 0 0.35rem 0.9rem rgba(30, 83, 109, 0.14);
}

.commercial-layout-block:active {
  cursor: grabbing;
}

.commercial-layout-block small,
.commercial-layout-block strong {
  display: block;
}

.commercial-layout-block small,
.commercial-layout-block[data-layout-block="footer"] {
  color: var(--commercial-muted);
  font-size: 0.76rem;
  line-height: 1.45;
}

.commercial-layout-block[data-layout-block="logo"] {
  display: grid;
  min-height: 4rem;
  place-items: center;
  color: var(--commercial-muted);
}

.commercial-layout-block[data-layout-block="logo"] img {
  max-width: 100%;
  max-height: 3.4rem;
  object-fit: contain;
}

.commercial-layout-block[data-layout-block="title"] {
  color: var(--commercial-document-primary);
  font-weight: 900;
}

.commercial-layout-block[data-layout-block="table"] {
  padding: 0.55rem;
  border-top: 1.35rem solid var(--commercial-document-primary);
  color: #52697a;
  background: rgba(255, 255, 255, 0.62);
}

.commercial-layout-block[data-layout-block="table"] span {
  display: block;
  margin-bottom: 0.45rem;
  color: #fff;
  transform: translateY(-1.14rem);
  font-size: 0.64rem;
  font-weight: 800;
}

.commercial-layout-block[data-layout-block="table"] i {
  display: block;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-bottom: 1px solid #d6e1e8;
}

.commercial-layout-block[data-layout-block="totals"] {
  padding-top: 0.7rem;
  border-top: 0.18rem solid var(--commercial-document-primary);
  font-size: 0.75rem;
}

.commercial-layout-block[data-layout-block="footer"] {
  border-top: 0.18rem solid var(--commercial-document-accent);
}

.commercial-layout-custom-block {
  white-space: pre-wrap;
}

.commercial-layout-image-block {
  display: grid;
  place-items: center;
  padding: 0.18rem;
  background: rgba(255, 255, 255, 0.5);
}

.commercial-layout-image-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.commercial-layout-properties {
  padding: 1rem;
  border: 1px solid var(--commercial-line);
  border-radius: 0.9rem;
  background: rgba(237, 246, 250, 0.72);
}

.commercial-layout-properties h5,
.commercial-layout-properties p {
  margin: 0;
}

.commercial-layout-properties p {
  margin: 0.35rem 0 0.9rem;
  color: var(--commercial-muted);
  font-size: 0.82rem;
}

.commercial-pricing-settings {
  align-items: stretch;
}

.commercial-formula {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(82, 132, 58, 0.2);
  border-radius: 0.8rem;
  color: #315e24;
  background: rgba(235, 246, 226, 0.68);
}

.commercial-formula span {
  color: var(--commercial-muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.commercial-prefix-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1280px) {
  .commercial-summary,
  .commercial-finance-grid,
  .commercial-inventory-summary,
  .commercial-document-basics,
  .commercial-prefix-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .commercial-items-head {
    display: none;
  }

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

  .commercial-audit-info {
    grid-template-columns: 1fr;
  }

  .commercial-layout-workspace {
    grid-template-columns: 1fr;
  }

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

  .commercial-finance-columns {
    grid-template-columns: 1fr;
  }

  .commercial-item-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .commercial-item-row label span {
    display: block;
  }

  .commercial-item-description {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .commercial-summary,
  .commercial-finance-grid,
  .commercial-inventory-summary,
  .commercial-document-basics,
  .commercial-prefix-grid,
  .commercial-split,
  .commercial-position-toolbar {
    grid-template-columns: 1fr;
  }

  .commercial-split > .commercial-editor {
    position: static;
  }

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

  .commercial-item-total {
    text-align: left;
  }

  .commercial-card {
    grid-template-columns: 1fr;
  }

  .commercial-card-amount {
    justify-self: start;
  }

  .commercial-summary,
  .commercial-report-facts {
    grid-template-columns: 1fr 1fr;
  }

  .commercial-journal-summary {
    grid-template-columns: 1fr 1fr;
  }

  .commercial-journal-filter > * {
    width: 100%;
  }

  .commercial-audit-export > * {
    width: 100%;
  }

  .commercial-report-head,
  .commercial-report-top {
    display: block;
  }

  .commercial-report-head-actions {
    justify-items: start;
    margin-top: 0.7rem;
  }

  .commercial-ids-overview {
    justify-content: flex-start;
    margin-top: 0.7rem;
  }

  .commercial-billing-pill {
    width: fit-content;
    margin-top: 0.55rem;
  }

  .commercial-report-material-row {
    grid-template-columns: 1fr;
  }
}

.existing-customer-picker {
  padding: 14px;
  border: 1px solid rgba(0, 104, 180, 0.18);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232, 245, 252, 0.9), rgba(245, 250, 242, 0.86));
}

.existing-customer-picker small {
  color: var(--muted);
  line-height: 1.45;
}

.tenant-shell {
  width: min(1440px, calc(100% - 32px));
  padding: 28px 0 56px;
}

.tenant-header {
  display: flex;
  justify-content: space-between;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1rem;
}

.tenant-header h1,
.tenant-header p {
  margin: 0.2rem 0;
}

.tenant-grid {
  display: grid;
  grid-template-columns: minmax(20rem, 0.85fr) minmax(32rem, 1.3fr);
  gap: 1rem;
  align-items: start;
}

.tenant-list-panel,
.tenant-editor-panel {
  min-width: 0;
}

.tenant-dashboard-panel {
  margin: 1rem 0;
}

.tenant-dashboard-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.tenant-dashboard-card {
  display: grid;
  gap: 0.8rem;
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.7);
}

.tenant-dashboard-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.75rem;
}

.tenant-dashboard-card-head strong,
.tenant-dashboard-card-head small {
  display: block;
}

.tenant-dashboard-card-head small {
  margin-top: 0.25rem;
  color: var(--muted);
}

.tenant-dashboard-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.tenant-dashboard-meta span {
  min-width: 0;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.35;
}

.tenant-dashboard-meta b {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--ink);
  font-size: 0.67rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html[data-theme="dark"] .tenant-dashboard-card,
html[data-theme="dark"] .tenant-dashboard-meta span {
  border-color: #345264;
  color: #b9cbd5;
  background: linear-gradient(145deg, #182c38, #132530);
}

html[data-theme="dark"] .tenant-dashboard-meta b {
  color: #e6f0f4;
}

.superadmin-security-panel {
  margin-top: 1rem;
}

.security-check-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.security-check-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.68);
}

.security-check-card strong,
.security-check-card small {
  display: block;
}

.security-check-card small { color: var(--muted); margin-top: 0.2rem; }

.security-check-flags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.tenant-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.tenant-card {
  display: grid;
  gap: 0.32rem;
  width: 100%;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0.8rem;
  color: var(--ink);
  text-align: left;
  background: rgba(255, 255, 255, 0.75);
  cursor: pointer;
}

.tenant-card:hover,
.tenant-card:focus-visible {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0.7rem 1.3rem rgba(16, 57, 80, 0.12);
}

.tenant-card small {
  color: var(--muted);
}

.tenant-status {
  width: fit-content;
  padding: 0.24rem 0.46rem;
  border-radius: 999px;
  color: #7a5518;
  font-size: 0.7rem;
  font-weight: 800;
  background: #fff2d6;
}

.tenant-status.is-active {
  color: #14613f;
  background: #e7f7ee;
}

.tenant-status.is-suspended {
  color: #a93d30;
  background: #fff0ed;
}

.tenant-status.is-draft {
  color: #74551a;
  background: #fff2d6;
}

.tenant-status.is-published {
  color: #14613f;
  background: #e7f7ee;
}

.tenant-status.is-archived {
  color: #536173;
  background: #eef1f4;
}

.update-grid {
  grid-template-columns: minmax(20rem, 0.78fr) minmax(36rem, 1.55fr);
}

.update-list {
  display: grid;
  gap: 0.8rem;
}

.update-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.78);
}

.update-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1rem;
}

.update-card h3,
.update-card p {
  margin: 0.3rem 0;
}

.update-card p {
  color: var(--muted);
}

.update-notes {
  margin-top: 0.85rem !important;
  padding: 0.75rem;
  border-radius: 0.55rem;
  white-space: pre-wrap;
  color: var(--ink) !important;
  background: rgba(19, 79, 108, 0.07);
}

.update-notes.is-empty { font-style: italic; }

.update-meta {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 0.65rem 1rem;
  margin: 0.85rem 0;
  color: var(--muted);
}

.update-meta div { min-width: 0; }
.update-meta dt { margin-bottom: 0.18rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.update-meta dd { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.update-meta code { font-size: 0.76rem; }

@media (max-width: 900px) {
  .update-grid { grid-template-columns: 1fr; }
  .update-card-head { display: grid; }
  .update-meta { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .tenant-grid { grid-template-columns: 1fr; }
  .tenant-dashboard-meta { grid-template-columns: 1fr; }
  .tenant-header { display: grid; }
  .security-check-card { align-items: start; flex-direction: column; }
  .security-check-flags { justify-content: start; }
}

.admin-nav-link--field {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.field-body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  color: #142432;
  background:
    linear-gradient(135deg, rgba(5, 54, 80, 0.96), rgba(0, 104, 180, 0.9) 42%, rgba(105, 155, 54, 0.82)) top / 100% 220px no-repeat,
    linear-gradient(180deg, #eaf1f4, #f7fafb 55%, #edf3f5);
}

.field-shell {
  width: min(1180px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 54px;
}

.field-shell,
.field-job-content,
.field-job-details,
.field-completion-form,
.field-time-panel,
.field-detail-block,
.field-supplier-card,
.field-material-row,
.field-service-template-row,
.field-maintenance-check-row {
  min-width: 0;
}

.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 142px;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(9, 38, 56, 0.18);
}

.field-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.field-brand-mark {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  color: #fff;
  background: #0d2d3f;
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: inset 0 -4px 0 #78b82a;
}

.field-brand h1 {
  margin: 3px 0;
  font-size: clamp(28px, 5vw, 42px);
  line-height: 1;
}

.field-brand p {
  margin: 0;
  color: var(--muted);
}

.field-header-actions,
.field-job-actions,
.field-contact-actions,
.field-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.field-upload-action {
  display: inline-flex;
  margin-top: 12px;
}

.commercial-document-attachments {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line, #cdddeb);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(238, 249, 255, .72), rgba(250, 255, 244, .72));
}

.commercial-document-attachments p {
  margin: 4px 0 0;
  color: var(--muted, #52697a);
}

.commercial-document-attachment-actions,
.commercial-document-attachment-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.commercial-document-attachment-files > span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line, #cdddeb);
}

.commercial-document-attachment-files .button {
  min-height: 32px;
  padding: 5px 9px;
}

.field-filter-bar {
  position: sticky;
  z-index: 20;
  top: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 18px 0;
  padding: 7px;
  border-radius: 14px;
  background: #0d2d3f;
  box-shadow: 0 12px 26px rgba(9, 38, 56, 0.18);
}

.field-filter {
  min-height: 42px;
  padding: 8px 16px;
  border: 0;
  border-radius: 9px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}

.field-filter.is-active {
  color: #0d2d3f;
  background: #fff;
  box-shadow: inset 0 -3px 0 #78b82a;
}

.field-sync-state {
  margin-left: auto;
  padding: 0 12px;
  color: #bcd1dc;
  font-size: 12px;
  font-weight: 700;
}

.field-sync-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: #78b82a;
}

.field-sync-state.is-busy::before {
  background: #efad42;
  animation: field-pulse 1s infinite;
}

.field-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.field-time-panel {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
  padding: 18px;
  border: 1px solid rgba(13, 45, 63, 0.18);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(239, 247, 244, 0.88));
  box-shadow: 0 12px 28px rgba(18, 47, 63, 0.08);
}

.field-time-head,
.field-time-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.field-time-head h2,
.field-time-head p {
  margin: 3px 0 0;
}

.field-time-head p {
  color: var(--muted);
}

.field-time-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.field-time-summary article {
  display: grid;
  gap: 3px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(247, 251, 252, 0.9);
  border: 1px solid rgba(0, 68, 120, 0.10);
}

.field-time-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field-time-summary strong {
  font-size: 18px;
}

.field-time-warnings {
  display: grid;
  gap: 8px;
}

.field-time-warnings .notice {
  margin: 0;
}

.field-time-manual {
  border-top: 1px solid rgba(0, 68, 120, 0.12);
  padding-top: 12px;
}

.field-time-manual summary {
  cursor: pointer;
  font-weight: 800;
}

.field-time-manual-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.field-time-manual-form label {
  display: grid;
  gap: 6px;
}

.field-time-entries {
  display: grid;
  gap: 8px;
}

.field-time-entry-head,
.field-time-entry {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(100px, 0.7fr) minmax(110px, 0.7fr) auto;
  align-items: center;
  gap: 10px;
}

.field-time-entry-head {
  color: var(--muted);
  font-size: 12px;
}

.field-time-entry {
  padding: 11px 12px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
}

.field-time-entry > div {
  display: grid;
  gap: 3px;
}

.field-time-entry > div span {
  color: var(--muted);
  font-size: 13px;
}

.field-time-wide {
  grid-column: span 3;
}

.field-summary article {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 17px;
  border: 1px solid #d4e0e5;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
}

.field-summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field-summary strong {
  font-size: 24px;
}

.field-booking-list {
  display: grid;
  gap: 14px;
}

.field-job-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #cfdde3;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 12px 30px rgba(18, 47, 63, 0.09);
}

.field-job-card.is-completed {
  opacity: 0.86;
}

.field-job-order {
  display: grid;
  place-items: start center;
  padding-top: 24px;
  color: #fff;
  background: #0d2d3f;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 800;
  box-shadow: inset -4px 0 0 #78b82a;
}

.field-job-content {
  min-width: 0;
  padding: 20px;
}

.field-job-head,
.field-completion-head,
.field-material-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.field-job-head h2,
.field-completion-head h3,
.field-completed-report h3 {
  margin: 3px 0;
}

.field-job-head p,
.field-completion-head p {
  margin: 0;
  color: var(--muted);
}

.field-status {
  display: inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  color: #8b5a14;
  background: #fff4df;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field-status.is-completed {
  color: #1f7748;
  background: #e9f7ef;
}

.field-job-address {
  margin: 13px 0;
  padding: 11px 13px;
  border-left: 4px solid #0084c7;
  border-radius: 0 9px 9px 0;
  background: #eef6fa;
  font-weight: 700;
}

.field-job-details {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #d6e1e6;
}

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

.field-detail-block {
  padding: 15px;
  border-radius: 11px;
  background: #f2f6f8;
}

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

.field-detail-block h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.field-detail-block p {
  margin: 4px 0;
  color: #405665;
  line-height: 1.55;
}

.field-problem {
  color: #142432 !important;
  font-size: 16px;
  font-weight: 700;
}

.field-contact-actions a {
  color: #0068b4;
  font-weight: 800;
}

.field-completion-form,
.field-completed-report {
  display: grid;
  gap: 15px;
  margin-top: 16px;
  padding: 18px;
  border: 1px solid #bdd4df;
  border-radius: 13px;
  background: linear-gradient(145deg, #eef7fb, #f5f9f1);
}

.field-completion-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.field-completion-form input,
.field-completion-form select,
.field-completion-form textarea {
  width: 100%;
  border-color: #bfd0d9;
  background: #fff;
}

.field-signature-section {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #c4d9e2;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.field-mru-protocol,
.field-report-mru {
  display: grid;
  gap: 10px;
  padding: 15px;
  border: 1px solid #b9d8ca;
  border-radius: 12px;
  background: linear-gradient(135deg, #f1fbf6, #f8fcf8);
}

.field-mru-protocol-preview {
  display: grid;
  gap: 8px;
  color: #385867;
}

.field-mru-protocol-preview > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.field-mru-value {
  padding: 5px 8px;
  border: 1px solid #cce4d7;
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
}

.field-report-mru h4 {
  margin: 0;
}

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

.field-signature-card {
  display: grid;
  gap: 9px;
  padding: 13px;
  border: 1px solid #d3e0e6;
  border-radius: 10px;
  background: #f9fcfd;
}

.field-signature-label {
  margin: 0;
  color: #193c50;
  font-weight: 900;
}

.field-signature-pad {
  position: relative;
  overflow: hidden;
  min-height: 128px;
  border: 1px dashed #87aabd;
  border-radius: 9px;
  background: #fff;
}

.field-signature-pad.is-signed {
  border-style: solid;
  border-color: #20865a;
}

.field-signature-pad canvas {
  display: block;
  width: 100%;
  height: 128px;
  touch-action: none;
  cursor: crosshair;
}

.field-signature-pad > span {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  color: #78909d;
  font-size: 12px;
  pointer-events: none;
}

.field-signature-pad.is-signed > span {
  display: none;
}

.field-signature-actions {
  display: flex;
  justify-content: flex-end;
}

.field-report-signatures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-top: 4px;
}

.field-report-signatures h4 {
  grid-column: 1 / -1;
  margin: 0;
}

.field-report-signature {
  margin: 0;
  padding: 9px;
  border: 1px solid #d3e0e6;
  border-radius: 9px;
  background: #fff;
}

.field-report-signature img {
  display: block;
  width: 100%;
  height: 90px;
  object-fit: contain;
  background: #fff;
}

.field-report-signature figcaption {
  margin-top: 6px;
  color: #52697a;
  font-size: 12px;
  font-weight: 800;
}

.field-body .button.button-gc {
  color: #fff;
  border-color: #d14f00;
  background: #e45a00;
  box-shadow: 0 8px 18px rgba(190, 75, 0, 0.2);
}

.field-body .button.button-weishaupt {
  color: #fff;
  border-color: #8e2730;
  background: linear-gradient(135deg, #76212a, #a83b42);
  box-shadow: 0 8px 18px rgba(118, 33, 42, 0.2);
}

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

.field-supplier-card {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px solid #bfd3dd;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.field-supplier-card.is-gc {
  border-top: 3px solid #e45a00;
}

.field-supplier-card.is-weishaupt {
  border-top: 3px solid #8e2730;
}

.field-supplier-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.field-supplier-head > div:first-child {
  display: grid;
  gap: 2px;
}

.field-supplier-head small {
  color: #647681;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.field-supplier-card .field-gc-status {
  margin-top: 0;
}

.field-material-source {
  display: inline-flex;
  margin-left: 5px;
  padding: 2px 6px;
  border-radius: 999px;
  color: #526875;
  background: #e8eff3;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.field-material-source.is-gc {
  color: #994108;
  background: #fff0e6;
}

.field-material-source.is-weishaupt {
  color: #7b222a;
  background: #f9e9eb;
}

.admin-completion-report {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding: 12px;
  border-left: 4px solid #78a940;
  border-radius: 0 10px 10px 0;
  background: #edf7f1;
}

.admin-completion-report p,
.admin-completion-report small {
  margin: 0;
  line-height: 1.5;
}

.admin-completion-report span,
.admin-completion-report small {
  color: var(--muted);
}

.admin-completion-report .is-warning {
  color: #985d0d;
}

.field-gc-hint {
  margin: -7px 0 0;
  color: #5a6d78;
  font-size: 12px;
  line-height: 1.45;
}

.field-gc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.field-gc-status {
  display: grid;
  gap: 3px;
  margin-top: -5px;
  padding: 12px 14px;
  border: 1px solid #bfd3dd;
  border-left-width: 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.field-gc-status strong,
.field-gc-status span {
  display: block;
}

.field-gc-status span {
  color: #4a606e;
  font-size: 13px;
  line-height: 1.45;
}

.field-gc-status.is-ready {
  border-left-color: #0076b8;
}

.field-gc-status.is-waiting {
  border-left-color: #d58b1d;
  background: #fff9ec;
}

.field-gc-status.is-imported {
  border-left-color: #4f9b62;
  background: #edf8f0;
}

.field-gc-status.is-error {
  border-left-color: #d65440;
  background: #fff1ed;
}

.field-draft-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  color: #647680;
  background: #edf2f4;
  font-size: 11px;
  font-weight: 800;
}

.field-draft-state::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8ea0aa;
  content: "";
}

.field-draft-state.is-saving::before {
  background: #d58b1d;
  animation: field-pulse 1s ease-in-out infinite;
}

.field-draft-state.is-saved::before {
  background: #4f9b62;
}

.field-draft-state.is-error {
  color: #a63f31;
  background: #fff0ec;
}

.field-draft-state.is-error::before {
  background: #d65440;
}

.field-article-finder {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #c7dbe4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.field-article-finder small,
.field-article-finder .field-section-label {
  display: block;
}

.field-article-finder small {
  margin-top: 2px;
  color: var(--muted);
}

.field-section-label {
  font-weight: 900;
}

.field-article-search-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.field-article-search-row .button {
  min-height: 48px;
}

.field-article-search-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.field-article-result {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid #c8d9e2;
  border-radius: 9px;
  color: #142432;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.field-article-result:hover,
.field-article-result:focus-visible {
  border-color: #0076b8;
  background: #eef7fb;
}

.field-article-result span,
.field-article-result small {
  overflow-wrap: anywhere;
}

.field-article-result small,
.field-article-empty {
  color: var(--muted);
}

.field-article-empty {
  margin: 0;
  padding: 8px 2px;
  font-size: 13px;
}

.field-service-template-picker {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #c7dbe4;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(236, 248, 242, 0.92), rgba(255, 255, 255, 0.82));
}

.field-maintenance-checklist {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #b8d9c9;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(235, 247, 240, 0.94), rgba(255, 255, 255, 0.86));
}

.field-maintenance-checklist-list {
  display: grid;
  gap: 8px;
}

.field-maintenance-check-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(140px, 0.7fr) minmax(180px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 9px;
  border: 1px solid rgba(46, 116, 83, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
}

.field-maintenance-check-row .field-follow-up-toggle {
  padding: 0;
  background: transparent;
}

.field-service-template-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.field-service-template-head small {
  color: var(--muted);
}

.field-service-template-add {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
}

.field-service-template-add .button {
  min-height: 48px;
}

.field-service-template-list {
  display: grid;
  gap: 8px;
}

.field-service-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px auto;
  gap: 8px;
  align-items: end;
  padding: 11px;
  border: 1px solid #b8d9c9;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.field-service-template-info {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field-service-template-info strong,
.field-service-template-info span {
  overflow-wrap: anywhere;
}

.field-service-template-info span,
.field-service-template-empty {
  color: var(--muted);
  font-size: 13px;
}

.field-service-template-empty {
  margin: 0;
  padding: 3px 2px 0;
}

.field-service-template-row label {
  font-size: 12px;
}

.field-service-template-row .button {
  min-height: 46px;
}

.field-material-head span,
.field-material-head small {
  display: block;
}

.field-material-head small {
  margin-top: 3px;
  color: var(--muted);
}

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

.field-material-row {
  display: grid;
  grid-template-columns: 1fr 2fr 90px 100px auto;
  gap: 8px;
  align-items: end;
  padding: 11px;
  border: 1px solid #d2dfe5;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
}

.field-material-row label {
  font-size: 12px;
}

.field-article-number-field {
  position: relative;
}

.field-article-suggestions {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  left: 0;
  display: grid;
  width: min(440px, 82vw);
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #b9ced9;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 15px 32px rgba(22, 52, 68, 0.18);
}

.field-article-suggestions button {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid #e0e9ed;
  color: #142432;
  text-align: left;
  background: transparent;
  cursor: pointer;
}

.field-article-suggestions button:hover,
.field-article-suggestions button:focus-visible {
  background: #eef7fb;
}

.field-article-suggestions span {
  color: #536a77;
  font-weight: 600;
}

.field-material-row .button {
  min-height: 46px;
}

.field-follow-up-toggle {
  grid-template-columns: auto 1fr !important;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: #fff;
}

.field-follow-up-toggle input {
  width: auto;
}

.field-complete-button {
  min-height: 54px;
  font-size: 16px;
}

.field-completed-report > p {
  margin: 0;
  line-height: 1.6;
}

.ids-launch-body {
  display: grid;
  min-height: 100vh;
  margin: 0;
  padding: 24px;
  place-items: center;
  background:
    radial-gradient(circle at top left, rgba(0, 118, 184, 0.2), transparent 42%),
    linear-gradient(145deg, #edf5f8, #f7f8f3);
}

.ids-launch-card {
  width: min(100%, 620px);
  padding: clamp(24px, 6vw, 48px);
  border: 1px solid #c6d9e1;
  border-top: 4px solid #e45a00;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 22px 60px rgba(22, 52, 68, 0.18);
}

.ids-launch-card.is-success {
  border-top-color: #4f9b62;
}

.ids-launch-card.is-error {
  border-top-color: #d65440;
}

.ids-launch-card h1 {
  margin: 5px 0 12px;
}

.ids-launch-card p {
  color: #405665;
  line-height: 1.6;
}

@keyframes field-pulse {
  50% { opacity: 0.35; transform: scale(0.82); }
}

/* iPad portrait is usually 768 CSS pixels wide and needs its own compact layout. */
@media (max-width: 900px) {
  .field-shell {
    width: min(100% - 24px, 1180px);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(34px, env(safe-area-inset-bottom));
  }

  .field-header {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 19px;
  }

  .field-header-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-header-actions .button {
    width: 100%;
    min-width: 0;
  }

  .field-filter-bar {
    top: 4px;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .field-filter,
  .field-sync-state {
    flex: 0 0 auto;
  }

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

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

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

  .field-time-entry-head {
    display: none;
  }

  .field-time-entry {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .field-time-entry > :nth-child(2),
  .field-time-entry > :nth-child(3) {
    justify-self: start;
  }

  .field-detail-grid,
  .field-supplier-grid,
  .field-signature-grid,
  .field-report-signatures,
  .field-maintenance-check-row {
    grid-template-columns: 1fr;
  }

  .field-detail-wide,
  .field-report-signatures h4 {
    grid-column: auto;
  }

  .field-job-actions .button,
  .field-attachment-list .button,
  .field-gc-actions .button {
    flex: 1 1 170px;
    min-width: 0;
  }

  .field-service-template-head,
  .field-supplier-head,
  .field-material-head {
    align-items: stretch;
    flex-direction: column;
  }

  .field-gc-actions {
    justify-content: stretch;
  }

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

  .field-material-row label:nth-child(2),
  .field-material-row .button {
    grid-column: 1 / -1;
  }

  .field-service-template-add,
  .field-service-template-row,
  .field-article-search-row {
    grid-template-columns: 1fr;
  }

  .field-service-template-row .button,
  .field-article-search-row .button {
    width: 100%;
  }

  .field-completion-form input,
  .field-completion-form select,
  .field-completion-form textarea,
  .field-time-panel input {
    font-size: 16px;
  }
}

@media (max-width: 760px) {
  .field-supplier-grid {
    grid-template-columns: 1fr;
  }

  .field-supplier-head {
    display: grid;
  }
  .field-shell {
    width: min(100% - 18px, 1180px);
    padding-top: 9px;
  }

  .field-header,
  .field-job-head,
  .field-completion-head,
  .field-material-head {
    align-items: stretch;
    flex-direction: column;
  }

  .field-header {
    padding: 18px;
  }

  .field-brand {
    align-items: flex-start;
  }

  .field-header-actions .button {
    flex: 1 1 auto;
  }

  .field-filter-bar {
    top: 4px;
    overflow-x: auto;
  }

  .field-filter {
    flex: 0 0 auto;
  }

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

  .field-summary article {
    align-items: flex-start;
    flex-direction: column;
    padding: 12px;
  }

  .field-job-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .field-job-order {
    padding-top: 20px;
    font-size: 14px;
  }

  .field-job-content {
    padding: 15px;
  }

  .field-job-actions .button,
  .field-completion-head .button-gc,
  .field-gc-actions,
  .field-gc-actions .button {
    flex: 1 1 100%;
    width: 100%;
  }

  .field-gc-actions {
    justify-content: stretch;
  }

  .field-detail-grid {
    grid-template-columns: 1fr;
  }

  .field-detail-wide {
    grid-column: auto;
  }

  .field-signature-grid,
  .field-report-signatures {
    grid-template-columns: 1fr;
  }

  .field-report-signatures h4 {
    grid-column: auto;
  }

  .field-material-row {
    grid-template-columns: 1fr 1fr;
  }

  .field-maintenance-check-row {
    grid-template-columns: 1fr;
  }

  .field-article-search-row {
    grid-template-columns: 1fr;
  }

  .field-service-template-head {
    align-items: stretch;
    flex-direction: column;
  }

  .field-service-template-add,
  .field-service-template-row {
    grid-template-columns: 1fr;
  }

  .field-service-template-row .button {
    width: 100%;
  }

  .field-material-row label:nth-child(2),
  .field-material-row .button {
    grid-column: 1 / -1;
  }

  .field-material-row .button {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  position: relative;
  min-height: 100vh;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background-image:
    linear-gradient(180deg, rgba(246, 251, 255, 0.30), rgba(236, 244, 250, 0.42) 52%, rgba(228, 238, 247, 0.52) 100%),
    radial-gradient(760px 340px at 4% 0%, rgba(0, 104, 180, 0.12), transparent 70%),
    radial-gradient(680px 320px at 96% 4%, rgba(134, 188, 34, 0.10), transparent 72%),
    radial-gradient(640px 280px at 50% 100%, rgba(53, 51, 139, 0.08), transparent 74%),
    url("/background-neuruppin.jpg");
  background-position: center, 4% 0, 96% 4%, 50% 100%, center;
  background-size: auto, auto, auto, auto, cover;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, scroll, fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.5;
}

body::before {
  top: 96px;
  right: 6%;
  width: 240px;
  height: 240px;
  background: rgba(0, 104, 180, 0.18);
}

body::after {
  bottom: 80px;
  left: 4%;
  width: 220px;
  height: 220px;
  background: rgba(134, 188, 34, 0.16);
}

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

button,
input,
select,
textarea {
  font: inherit;
}

code {
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.92em;
}

.page-shell {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100% - 24px));
  margin: 0 auto;
  padding: 24px 0 40px;
}

.hero-nav,
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-nav {
  margin-bottom: 16px;
}

.hero-nav a,
.footer-links a,
.prose a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.hero-nav a[aria-current="page"],
.footer-links a[aria-current="page"] {
  font-weight: 700;
}

.hero,
.panel,
.detail-box,
.service-box,
.slot-block,
.metric-card,
.booking-card,
.slot-day-group {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(249, 252, 255, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.panel::before,
.detail-box::before,
.service-box::before,
.slot-block::before,
.metric-card::before,
.booking-card::before,
.slot-day-group::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, rgba(0, 104, 180, 0.9), rgba(134, 188, 34, 0.85), rgba(9, 97, 118, 0.82));
  opacity: 0.72;
}

.hero {
  position: relative;
  overflow: hidden;
  padding: 24px;
  margin-bottom: 20px;
  background:
    linear-gradient(145deg, rgba(240, 247, 251, 0.70), rgba(228, 238, 245, 0.60)),
    radial-gradient(340px 180px at 0% 0%, rgba(0, 104, 180, 0.18), transparent 70%),
    radial-gradient(340px 180px at 100% 0%, rgba(134, 188, 34, 0.16), transparent 72%),
    radial-gradient(420px 180px at 52% 115%, rgba(53, 51, 139, 0.10), transparent 76%);
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-4));
  opacity: 0.78;
}

.hero-compact .hero-copy {
  max-width: 72ch;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  font-weight: 700;
}

h1 {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1;
  margin-bottom: 12px;
}

h2 {
  font-size: clamp(24px, 3vw, 30px);
}

h3 {
  font-size: 18px;
}

.hero-copy,
.panel-head p,
.service-box-head p,
.slot-head p,
.field-help,
.notice,
.booking-details,
.load-card-line {
  color: var(--muted);
}

.secret-preview {
  display: block;
  margin-top: 6px;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 0.84rem;
  color: var(--ink);
  word-break: break-all;
}

.hero-copy {
  max-width: 60ch;
  margin: 0 0 16px;
  line-height: 1.65;
}

.hero-meta,
.booking-actions,
.actions,
.recommendation-list,
.booking-actions,
.booking-card-meta,
.booking-card-header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-pill,
.status-pill,
.recommendation-pill,
.load-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(241, 248, 252, 0.98), rgba(231, 240, 246, 0.92)),
    rgba(236, 244, 248, 0.88);
}

.hero-pill,
.recommendation-pill {
  color: var(--ink);
}

.layout,
.admin-layout {
  display: grid;
  gap: 20px;
}

.layout {
  grid-template-columns: minmax(0, 1fr) 360px;
  align-items: start;
}

.admin-layout {
  grid-template-columns: 320px minmax(0, 1fr);
}

.admin-shell {
  width: min(1240px, calc(100% - 24px));
}

.admin-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: end;
  gap: 20px;
}

.admin-header-copy {
  display: grid;
  gap: 10px;
}

.admin-session-card {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(246, 250, 253, 0.64));
}

.admin-session-card strong {
  font-size: 22px;
  line-height: 1.1;
}

.admin-session-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-nav {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-bottom: 20px;
}

.admin-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 700;
  background: rgba(255, 255, 255, 0.72);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nav-count-badge,
.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.nav-count-badge {
  margin-left: 8px;
}

.admin-nav-link.is-active,
.admin-nav-link[aria-current="page"] {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent-4) 54%, var(--accent-2));
}

.admin-app-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.admin-sidebar,
.admin-content,
.settings-stack {
  display: grid;
  gap: 20px;
}

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

.admin-view {
  display: grid;
  gap: 20px;
}

.legal-layout {
  display: grid;
  gap: 20px;
}

.preview-panel {
  position: sticky;
  top: 20px;
}

.preview-panel .panel-head {
  flex-direction: column;
  align-items: flex-start;
}

.preview-panel .panel-head p {
  max-width: none;
}

.preview-panel .preview-grid {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.panel {
  padding: 22px;
}

.legal-panel {
  display: grid;
  gap: 18px;
}

.panel-head,
.slot-head,
.service-box-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-head {
  margin-bottom: 18px;
}

.compact-head {
  justify-content: flex-start;
  gap: 6px;
  margin-bottom: 12px;
}

.compact-head h4 {
  margin: 0;
}

.panel-head p,
.slot-head p,
.service-box-head p {
  margin: 0;
  line-height: 1.55;
  max-width: 34ch;
}

.booking-form,
.stack-form {
  display: grid;
  gap: 16px;
}

.booking-form-maintenance {
  opacity: 0.72;
}

.form-block {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.72), rgba(243, 249, 253, 0.64));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.68);
}

.field-grid,
.service-fields,
.preview-grid,
.summary-grid {
  display: grid;
  gap: 14px;
}

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

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

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

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

label {
  display: grid;
  gap: 8px;
}

label span {
  font-size: 14px;
  font-weight: 600;
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.76);
}

.toggle-field input {
  width: auto;
  min-height: auto;
  margin: 0;
  padding: 0;
}

.toggle-field span {
  font-size: 14px;
  font-weight: 600;
}

input,
select,
textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: rgba(0, 104, 180, 0.44);
  box-shadow: 0 0 0 5px rgba(0, 104, 180, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

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

.field-help {
  line-height: 1.55;
}

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

.blocked-period-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(160px, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) max-content;
  gap: 12px;
  align-items: end;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.58);
}

.blocked-period-remove {
  justify-self: end;
  align-self: end;
  min-height: 42px;
  padding: 10px 16px;
  color: var(--danger);
  border: 1px solid rgba(213, 90, 70, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 250, 248, 0.96), rgba(255, 243, 240, 0.92)),
    rgba(255, 247, 245, 0.95);
  box-shadow: 0 8px 18px rgba(213, 90, 70, 0.10);
}

.blocked-period-remove:hover {
  box-shadow: 0 10px 20px rgba(213, 90, 70, 0.14);
}

.blocked-period-remove:active {
  box-shadow: 0 6px 14px rgba(213, 90, 70, 0.10);
}

.mail-account-block {
  display: grid;
  gap: 12px;
  margin-top: 6px;
}

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

.mail-account-row {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.58);
}

.mail-account-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.mail-account-grid {
  margin-top: 2px;
}

.attachment-list {
  display: grid;
  gap: 10px;
  margin-top: -4px;
}

.attachment-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 250, 253, 0.82));
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
}

.button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--accent-4) 54%, var(--accent-2));
  box-shadow: 0 12px 24px rgba(0, 104, 180, 0.22);
  cursor: pointer;
  transition: transform 0.16s ease, opacity 0.16s ease, box-shadow 0.16s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 104, 180, 0.24);
}

.button:active {
  transform: translateY(0);
  box-shadow: 0 10px 20px rgba(0, 104, 180, 0.18);
}

.button:disabled {
  opacity: 0.56;
  cursor: wait;
  transform: none;
}

.button.is-busy {
  padding-right: 44px;
}

.button.is-busy::after {
  content: "";
  position: absolute;
  right: 16px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.38);
  border-top-color: rgba(255, 255, 255, 0.96);
  animation: button-spin 0.8s linear infinite;
}

.button-secondary.is-busy::after {
  border-color: rgba(18, 32, 44, 0.18);
  border-top-color: rgba(18, 32, 44, 0.72);
}

.button-secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 253, 0.76)),
    rgba(250, 252, 254, 0.70);
  box-shadow: 0 10px 22px rgba(0, 104, 180, 0.06);
}

.button-danger {
  background: linear-gradient(135deg, var(--danger), #c64d3a);
}

.service-box,
.slot-block,
.detail-box {
  padding: 16px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(248, 251, 254, 0.74), rgba(240, 246, 251, 0.66)),
    rgba(245, 249, 252, 0.62);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.footer-meta {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

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

.footer-credit {
  font-size: 13px;
  opacity: 0.92;
}

.service-box {
  display: grid;
  gap: 14px;
}

.slot-block {
  display: grid;
  gap: 14px;
}

.slot-summary {
  margin: 0;
  line-height: 1.55;
  color: var(--muted);
}

.recommendation-list {
  align-items: center;
}

.recommendation-pill {
  color: var(--accent-2);
  border-color: rgba(134, 188, 34, 0.22);
  background: linear-gradient(180deg, rgba(247, 252, 238, 0.98), rgba(239, 248, 224, 0.94));
}

.admin-body .recommendation-pill {
  color: var(--ui-accent, var(--accent));
  border-color: var(--ui-accent, var(--accent));
  background: var(--ui-accent-soft, var(--accent-soft));
}

.slot-day-groups {
  display: grid;
  gap: 10px;
}

.slot-day-group {
  overflow: hidden;
}

.slot-day-group summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: background 0.18s ease;
}

.slot-day-group summary::-webkit-details-marker {
  display: none;
}

.slot-day-group:hover summary {
  background: rgba(0, 104, 180, 0.03);
}

.slot-day-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.slot-day-title {
  display: grid;
  gap: 4px;
}

.slot-day-title strong {
  font-size: 16px;
}

.slot-day-title small {
  color: var(--muted);
  line-height: 1.45;
}

.slot-day-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.slot-time-list {
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
  border-top: 1px solid rgba(18, 32, 44, 0.08);
}

.slot-time-option {
  position: relative;
}

.slot-time-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.slot-time-option span {
  display: block;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 251, 254, 0.70)),
    rgba(250, 252, 254, 0.66);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.slot-time-option:hover span {
  border-color: var(--line-strong);
  box-shadow: 0 10px 20px rgba(0, 104, 180, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.slot-time-option input:checked + span {
  border-color: rgba(0, 104, 180, 0.34);
  background:
    linear-gradient(180deg, rgba(237, 246, 254, 0.98), rgba(239, 248, 229, 0.94)),
    rgba(0, 104, 180, 0.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(0, 104, 180, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.slot-option-copy {
  display: grid;
  gap: 4px;
}

.slot-option-copy strong {
  font-size: 15px;
}

.slot-option-copy small {
  color: var(--muted);
  line-height: 1.45;
}

.slot-recommendation {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.86);
}

.slot-recommendation-success {
  color: var(--ok);
  border-color: rgba(33, 134, 87, 0.20);
  background: linear-gradient(180deg, rgba(242, 251, 245, 0.98), rgba(234, 247, 239, 0.94));
}

.slot-recommendation-warning {
  color: var(--warn);
  border-color: rgba(179, 120, 29, 0.20);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(252, 243, 225, 0.94));
}

.slot-recommendation-muted {
  color: var(--accent-2);
  border-color: rgba(53, 51, 139, 0.12);
  background: linear-gradient(180deg, rgba(243, 244, 254, 0.98), rgba(237, 240, 252, 0.94));
}

.load-pill.level-hoch,
.status-pill.rejected {
  color: var(--danger);
  border-color: rgba(213, 90, 70, 0.16);
  background: linear-gradient(180deg, rgba(255, 241, 237, 0.98), rgba(255, 232, 228, 0.92));
}

.load-pill.level-mittel,
.status-pill.pending {
  color: var(--warn);
  border-color: rgba(179, 120, 29, 0.16);
  background: linear-gradient(180deg, rgba(255, 248, 236, 0.98), rgba(255, 240, 215, 0.92));
}

.load-pill.level-niedrig,
.status-pill.confirmed {
  color: var(--ok);
  border-color: rgba(33, 134, 87, 0.16);
  background: linear-gradient(180deg, rgba(239, 250, 244, 0.98), rgba(230, 247, 237, 0.92));
}

.status-pill.completed {
  color: var(--accent-2);
  border-color: rgba(53, 51, 139, 0.18);
  background: linear-gradient(180deg, rgba(236, 237, 252, 0.98), rgba(228, 229, 248, 0.92));
}

.metric-card {
  display: grid;
  gap: 6px;
  padding: 16px;
  min-width: 0;
  border-color: rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 251, 254, 0.62));
}

.preview-grid .metric-card:nth-child(5n + 1),
.summary-grid .metric-card:nth-child(5n + 1) {
  background: linear-gradient(180deg, rgba(237, 246, 254, 0.70), rgba(248, 252, 255, 0.64));
}

.preview-grid .metric-card:nth-child(5n + 2),
.summary-grid .metric-card:nth-child(5n + 2) {
  background: linear-gradient(180deg, rgba(244, 250, 236, 0.70), rgba(250, 253, 247, 0.64));
}

.preview-grid .metric-card:nth-child(5n + 3),
.summary-grid .metric-card:nth-child(5n + 3) {
  background: linear-gradient(180deg, rgba(241, 242, 254, 0.70), rgba(249, 250, 255, 0.64));
}

.metric-card span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric-card strong {
  font-size: clamp(18px, 3vw, 24px);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.compact-list,
.steps {
  margin: 0;
  padding-left: 18px;
  line-height: 1.65;
}

.compact-list li + li,
.steps li + li {
  margin-top: 6px;
}

.notice {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.74), rgba(245, 250, 253, 0.66));
  line-height: 1.6;
  box-shadow: 0 14px 28px rgba(15, 42, 74, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.notice p {
  margin: 0;
}

.notice p + p {
  margin-top: 10px;
}

.notice-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.notice.success {
  color: var(--ok);
  border-color: rgba(33, 134, 87, 0.18);
  background:
    linear-gradient(180deg, rgba(244, 252, 247, 0.98), rgba(237, 249, 242, 0.94)),
    rgba(241, 250, 245, 0.96);
}

.notice.error {
  color: var(--danger);
  border-color: rgba(213, 90, 70, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 247, 244, 0.98), rgba(255, 239, 235, 0.94)),
    rgba(255, 244, 242, 0.96);
}

.notice.pending {
  color: var(--accent);
  border-color: rgba(0, 104, 180, 0.18);
  background:
    linear-gradient(180deg, rgba(242, 248, 255, 0.98), rgba(234, 244, 255, 0.94)),
    rgba(239, 247, 255, 0.96);
}

.notice.warning {
  color: #9a630f;
  border-color: rgba(215, 141, 25, 0.24);
  background: linear-gradient(135deg, rgba(255, 250, 237, 0.96), rgba(255, 244, 219, 0.88));
}

.toast-stack {
  position: fixed;
  z-index: 10000;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  align-content: end;
  gap: 10px;
  width: min(390px, calc(100vw - 32px));
  max-height: min(520px, calc(100dvh - 36px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  padding: 14px 14px 14px 16px;
  border: 1px solid rgba(197, 215, 225, 0.92);
  border-left: 5px solid #2787a8;
  border-radius: 14px;
  color: #183143;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 18px 42px rgba(11, 43, 64, 0.22);
  pointer-events: auto;
  animation: toast-in 240ms cubic-bezier(.2, .9, .2, 1) both;
}

.toast strong { font-size: 0.84rem; letter-spacing: 0.03em; text-transform: uppercase; }
.toast span { grid-column: 1; font-size: 0.92rem; line-height: 1.42; }
.toast button { grid-column: 2; grid-row: 1 / span 2; align-self: start; border: 0; padding: 0 2px; color: inherit; background: transparent; font-size: 1.35rem; line-height: 1; cursor: pointer; }
.toast-success { border-left-color: #4f9b62; }
.toast-warning { border-left-color: #d18a21; }
.toast-error { border-left-color: #d65440; }
.toast-pending { border-left-color: #287fa7; }
.toast.is-leaving { animation: toast-out 180ms ease-in both; }

@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }

.notice-maintenance {
  color: var(--accent-2);
  border-color: rgba(53, 51, 139, 0.18);
  background:
    linear-gradient(180deg, rgba(241, 243, 255, 0.98), rgba(233, 238, 255, 0.94)),
    rgba(239, 242, 255, 0.96);
}

.hidden {
  display: none !important;
}

.booking-list {
  display: grid;
  gap: 14px;
}

.admin-body .customer-create-panel,
.admin-body .maintenance-editor {
  border-color: rgba(0, 104, 180, 0.22);
  background:
    linear-gradient(135deg, rgba(237, 247, 253, 0.96), rgba(248, 251, 246, 0.94)),
    #f5f9fb;
}

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

.admin-body .maintenance-metric {
  min-height: 96px;
}

.admin-body .maintenance-metric.is-overdue {
  border-color: rgba(213, 90, 70, 0.24);
  background: linear-gradient(180deg, rgba(255, 246, 243, 0.98), rgba(253, 238, 233, 0.9));
}

.admin-body .maintenance-metric.is-due-soon {
  border-color: rgba(201, 132, 29, 0.24);
  background: linear-gradient(180deg, rgba(255, 250, 239, 0.98), rgba(252, 243, 222, 0.9));
}

.admin-body .maintenance-metric.is-active {
  border-color: rgba(43, 137, 88, 0.22);
  background: linear-gradient(180deg, rgba(241, 251, 246, 0.98), rgba(230, 246, 238, 0.9));
}

.maintenance-toolbar {
  justify-content: space-between;
}

.maintenance-list {
  display: grid;
  gap: 14px;
}

.maintenance-contract-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 18px;
  border: 1px solid #d7e1e5;
  border-left: 5px solid #86a9bc;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 24px rgba(16, 31, 48, 0.07);
}

.maintenance-contract-card.is-overdue {
  border-left-color: #c9513f;
}

.maintenance-contract-card.is-due,
.maintenance-contract-card.is-due-soon {
  border-left-color: #c9851d;
}

.maintenance-contract-card.is-paused,
.maintenance-contract-card.is-ended {
  border-left-color: #81909c;
  opacity: 0.82;
}

.maintenance-contract-main,
.maintenance-contract-head,
.maintenance-contract-head > div {
  min-width: 0;
}

.maintenance-contract-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.maintenance-contract-head h3 {
  margin: 4px 0;
  color: var(--admin-navy);
}

.maintenance-contract-head p,
.maintenance-contract-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.maintenance-contract-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.maintenance-contract-facts span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f3f7f9;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.maintenance-contract-facts strong {
  color: var(--ink);
  font-size: 12px;
}

.maintenance-contract-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(0, 104, 180, 0.35);
  background: rgba(235, 245, 251, 0.7);
}

.maintenance-contract-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 150px;
}

.maintenance-contract-actions .button {
  width: 100%;
  white-space: nowrap;
}

.maintenance-due-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #cad8df;
  border-radius: 999px;
  background: #f3f7f9;
  color: #536674;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.maintenance-due-badge.is-overdue {
  border-color: rgba(201, 81, 63, 0.26);
  background: #fff0ec;
  color: #a63f30;
}

.maintenance-due-badge.is-due,
.maintenance-due-badge.is-due-soon {
  border-color: rgba(201, 133, 29, 0.28);
  background: #fff7e7;
  color: #8a5a12;
}

.maintenance-due-badge.is-paused,
.maintenance-due-badge.is-ended {
  background: #eef2f4;
  color: #687783;
}

.customer-section-card--maintenance {
  border-color: rgba(43, 137, 88, 0.16);
  background: linear-gradient(180deg, rgba(247, 252, 249, 0.94), rgba(237, 247, 242, 0.82));
}

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

.asset-picker small {
  display: block;
  margin-top: 6px;
}

.admin-body #refresh-bookings.has-live-update {
  border-color: rgba(0, 123, 177, 0.58);
  background: linear-gradient(135deg, #edf8ff, #f3fae9);
  box-shadow: 0 0 0 3px rgba(122, 184, 57, 0.16), 0 8px 18px rgba(19, 65, 86, 0.14);
  animation: live-update-pulse 1.8s ease-in-out infinite;
}

@keyframes live-update-pulse {
  50% { box-shadow: 0 0 0 5px rgba(122, 184, 57, 0.08), 0 8px 18px rgba(19, 65, 86, 0.14); }
}

.customer-asset-item {
  align-items: center;
}

.customer-asset-item p {
  margin: 5px 0 0;
  color: var(--muted);
}

.customer-asset-item small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}

.customer-asset-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.customer-maintenance-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #d9e4e2;
  background: rgba(255, 255, 255, 0.82);
}

.customer-maintenance-item > div {
  display: grid;
  gap: 4px;
}

.customer-maintenance-item span,
.customer-maintenance-item small {
  color: var(--muted);
}

@media (max-width: 980px) {
  .commercial-document-ids {
    align-items: flex-start;
    flex-direction: column;
  }

  .commercial-document-ids-actions {
    justify-content: flex-start;
  }

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

  .maintenance-contract-card {
    grid-template-columns: 1fr;
  }

  .maintenance-contract-actions {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: 0;
  }

  .maintenance-contract-actions .button {
    width: auto;
  }

  .maintenance-contract-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .maintenance-summary,
  .maintenance-contract-facts {
    grid-template-columns: 1fr;
  }

  .maintenance-contract-head,
  .customer-maintenance-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .maintenance-contract-actions,
  .maintenance-contract-actions .button {
    width: 100%;
  }

  .customer-asset-actions {
    justify-content: flex-start;
  }
}

.booking-list.history-focus > .booking-card:not(.history-open) {
  display: none;
}

.day-plan-toolbar,
.day-plan-date-field,
.day-plan-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.day-plan-toolbar {
  align-items: end;
  justify-content: flex-end;
}

.day-plan-date-field {
  min-width: 220px;
}

.day-plan-date-field span {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.day-plan-summary {
  margin-bottom: 16px;
}

.day-plan-list {
  display: grid;
  gap: 14px;
}

.day-plan-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 253, 0.94));
  box-shadow: 0 14px 28px rgba(15, 42, 74, 0.06);
}

.day-plan-base-card,
.day-plan-return-card {
  background: linear-gradient(180deg, rgba(247, 250, 253, 0.98), rgba(241, 246, 250, 0.94));
}

.day-plan-card-head {
  justify-content: space-between;
}

.day-plan-card-head h3 {
  margin: 4px 0 0;
}

.day-plan-card-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.day-plan-sequence {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(0, 104, 180, 0.08);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.day-plan-route {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 68, 120, 0.08);
  font-weight: 500;
  line-height: 1.45;
}

.day-plan-route.is-ok {
  color: var(--ok);
  border-color: rgba(114, 168, 67, 0.14);
  background: linear-gradient(180deg, rgba(247, 251, 248, 0.82), rgba(241, 248, 243, 0.72));
}

.day-plan-route.is-warning {
  color: var(--warn);
  background: linear-gradient(180deg, rgba(255, 249, 240, 0.98), rgba(252, 243, 225, 0.94));
}

.day-plan-route.is-danger {
  color: var(--danger);
  border-color: rgba(213, 90, 70, 0.18);
  background: linear-gradient(180deg, rgba(255, 246, 242, 0.98), rgba(255, 237, 231, 0.94));
}

.day-plan-details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.day-plan-actions {
  margin-top: 2px;
}

.day-plan-linked {
  box-shadow: 0 0 0 2px rgba(0, 104, 180, 0.22), 0 18px 32px rgba(0, 104, 180, 0.14);
}

.admin-login-body {
  min-height: 100vh;
}

.admin-login-shell {
  width: min(100% - 24px, 980px);
  padding-top: 42px;
}

.admin-login-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px);
  gap: 24px;
  align-items: stretch;
}

.admin-login-copy {
  display: grid;
  align-content: center;
  gap: 12px;
}

.admin-login-copy h1 {
  margin: 0;
}

.admin-login-panel {
  align-self: stretch;
}

.calendar-toolbar {
  align-items: center;
  flex-wrap: wrap;
}

.calendar-month-label {
  min-width: 180px;
  text-align: center;
  font-size: 18px;
}

.calendar-summary {
  margin-bottom: 16px;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}

.calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.calendar-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.82);
}

.calendar-legend-dot.is-pending {
  border-color: transparent;
  background: var(--ui-warning, var(--warn));
}

.calendar-legend-dot.is-confirmed {
  border-color: transparent;
  background: var(--ui-success, var(--ok));
}

.calendar-legend-dot.is-completed {
  border-color: transparent;
  background: var(--ui-accent, var(--accent));
}

.calendar-legend-dot.is-absence {
  border-color: transparent;
  background: var(--ui-danger, var(--danger));
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.calendar-weekdays span {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendar-day {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 150px;
  padding: 14px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 253, 0.86));
  box-shadow: 0 10px 22px rgba(15, 42, 74, 0.06);
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.calendar-day:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 42, 74, 0.10);
  border-color: rgba(0, 104, 180, 0.18);
}

.calendar-day.is-outside {
  opacity: 0.55;
}

.calendar-day.is-today {
  border-color: rgba(0, 104, 180, 0.30);
  box-shadow: 0 0 0 2px rgba(0, 104, 180, 0.14), 0 16px 28px rgba(15, 42, 74, 0.08);
}

.calendar-day.has-absences {
  border-color: rgba(175, 79, 62, 0.22);
}

.calendar-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.calendar-day-head strong {
  font-size: 22px;
}

.calendar-day-head span {
  color: var(--muted);
  font-size: 12px;
}

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

.calendar-booking-chip {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.82);
}

.calendar-booking-chip strong {
  font-size: 12px;
}

.calendar-booking-chip span {
  font-size: 13px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.calendar-booking-chip.is-pending {
  border-color: rgba(215, 141, 25, 0.20);
  background: linear-gradient(180deg, rgba(255, 249, 238, 0.98), rgba(251, 243, 224, 0.92));
}

.calendar-booking-chip.is-confirmed {
  border-color: rgba(37, 145, 92, 0.18);
  background: linear-gradient(180deg, rgba(243, 251, 246, 0.98), rgba(234, 247, 239, 0.92));
}

.calendar-booking-chip.is-completed {
  border-color: rgba(0, 104, 180, 0.16);
  background: linear-gradient(180deg, rgba(241, 248, 253, 0.98), rgba(233, 243, 251, 0.92));
}

.calendar-booking-chip.is-rejected {
  border-color: rgba(203, 84, 67, 0.18);
  background: linear-gradient(180deg, rgba(255, 247, 244, 0.98), rgba(255, 238, 234, 0.92));
}

.calendar-absence-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(175, 79, 62, 0.20);
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 248, 245, 0.98), rgba(253, 236, 231, 0.92));
  color: #8c4238;
  font-size: 11px;
  line-height: 1.25;
}

.calendar-absence-chip strong {
  min-width: 0;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-absence-chip span {
  color: inherit;
  font-size: 11px;
  font-weight: 700;
}

.calendar-day-more {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.audit-list {
  display: grid;
  gap: 14px;
}

.audit-item {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 253, 0.9));
  box-shadow: 0 14px 28px rgba(15, 42, 74, 0.06);
}

.audit-item-head,
.audit-item-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.audit-item-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 72ch;
}

.audit-item-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.audit-item-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(245, 249, 252, 0.9);
}

.admin-users-list {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.admin-user-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 253, 0.72));
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.06);
}

.admin-user-card-head,
.admin-user-card-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-user-card-head p,
.admin-user-card-meta {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.admin-body[data-admin-role="office"] [data-admin-only] {
  display: none !important;
}

.employee-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
}

.employee-management-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  gap: 18px;
  align-items: start;
}

.employee-management-roster,
.employee-editor,
.employee-absence-section,
.employee-qualification-section,
.employee-time-section {
  padding: 18px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(239, 247, 250, 0.68));
}

.employee-editor {
  margin: 0;
}

.employee-role-selector {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px 14px;
  border: 1px solid rgba(0, 94, 146, 0.18);
  border-radius: 16px;
  background: rgba(245, 250, 252, 0.72);
}

.employee-role-selector legend {
  padding: 0 5px;
  font-weight: 700;
}

.employee-role-selector p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.employee-role-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.employee-role-options label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid rgba(0, 94, 146, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  font-weight: 700;
}

.section-label-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.section-label-row h3,
.section-label-row p {
  margin: 0;
}

.section-label-row p {
  max-width: 48ch;
  color: var(--muted);
  line-height: 1.5;
}

.employee-absence-section {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.employee-qualification-section,
.employee-time-section {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.employee-qualification-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.employee-qualification-form label,
.employee-time-toolbar label {
  display: grid;
  gap: 6px;
}

.employee-qualification-list,
.employee-time-list {
  display: grid;
  gap: 12px;
}

.employee-qualification-card,
.employee-time-card,
.employee-time-event {
  display: grid;
  gap: 10px;
  padding: 15px 16px;
  border: 1px solid rgba(0, 68, 120, 0.11);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.76);
}

.employee-qualification-card > div:first-child {
  display: grid;
  gap: 5px;
}

.employee-qualification-card strong {
  font-size: 16px;
}

.employee-qualification-card p,
.employee-qualification-card small,
.employee-time-note,
.employee-time-event p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.employee-time-toolbar {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.employee-time-toolbar label {
  min-width: 190px;
  flex: 1 1 220px;
}

.employee-time-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.employee-time-warnings {
  display: grid;
  gap: 8px;
}

.employee-time-warnings .notice {
  margin: 0;
}

.employee-time-closure {
  display: grid;
  gap: 8px;
}

.employee-time-closure .notice {
  margin: 0;
}

.emergency-settings-block {
  display: grid;
  gap: 14px;
}

.emergency-duty-users {
  padding: 14px;
  border: 1px solid rgba(0, 104, 167, 0.18);
  border-radius: 12px;
  background: rgba(237, 246, 249, 0.74);
}

.emergency-duty-users > p {
  margin: 5px 0 12px;
}

.employee-duty-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.employee-duty-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 11px;
  border: 1px solid #cbd8de;
  border-radius: 9px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
}

.employee-duty-option:has(input:checked) {
  border-color: rgba(96, 154, 39, 0.65);
  background: rgba(233, 245, 218, 0.9);
}

.system-backup-panel {
  display: grid;
  gap: 14px;
}

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

.database-backup-item {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid #d4e0e5;
  border-radius: 12px;
  background: #fbfcfd;
}

.database-backup-item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.database-backup-item-head p,
.database-backup-verification {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.employee-time-form {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px dashed rgba(0, 104, 180, 0.24);
  border-radius: 16px;
  background: rgba(244, 250, 252, 0.72);
}

.section-label-row.compact-row {
  margin-bottom: 0;
}

.section-label-row h4 {
  margin: 0;
}

.employee-time-card-main {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(2, minmax(100px, 0.7fr)) auto;
  align-items: center;
  gap: 14px;
}

.employee-time-card-main p,
.employee-time-card-main span {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.employee-time-card-main > div:not(:first-child) {
  display: grid;
  gap: 2px;
}

.employee-time-card-main > div:not(:first-child) span {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.employee-time-events {
  display: grid;
  gap: 10px;
}

.employee-time-event {
  grid-template-columns: minmax(150px, 0.8fr) minmax(0, 1.2fr);
  align-items: baseline;
}

.employee-time-event span {
  color: var(--muted);
  font-size: 13px;
}

.employee-time-event p {
  grid-column: 1 / -1;
}

.employee-time-legal-note {
  margin: 0;
}

.employee-absence-form {
  display: grid;
  grid-template-columns: minmax(180px, 1.3fr) minmax(140px, 1fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.employee-absence-form label {
  display: grid;
  gap: 6px;
}

.employee-absence-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.employee-absence-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 68, 120, 0.1);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.74);
}

.employee-absence-card strong,
.employee-absence-card p {
  margin: 0;
}

.employee-absence-card p {
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.5;
}

.mail-center-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.customer-center-layout {
  grid-template-columns: 1fr;
  gap: 20px;
}

.customer-history-grid {
  display: grid;
  gap: 18px;
}

.customer-center-layout .mail-thread-list-wrap,
.customer-center-layout .mail-thread-detail {
  min-width: 0;
  width: 100%;
}

.customer-center-layout .mail-thread-list {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: stretch;
}

.mail-thread-list.is-focused {
  grid-template-columns: 1fr;
}

.customer-focus-bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(0, 104, 180, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 249, 252, 0.78));
  box-shadow: 0 10px 22px rgba(15, 42, 74, 0.06);
}

.customer-focus-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.customer-focus-copy strong {
  font-size: 15px;
}

.customer-focus-copy span {
  color: var(--muted);
  line-height: 1.5;
}

.customer-detail-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.customer-detail-copy,
.customer-detail-sections,
.customer-detail-actions {
  min-width: 0;
}

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

.customer-detail-copy h4 {
  margin: 6px 0 0;
}

.customer-detail-contact,
.customer-detail-address {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.customer-detail-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.customer-detail-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.customer-fact-card,
.customer-section-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 253, 0.72));
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.06);
}

.customer-section-card--profile {
  gap: 12px;
}

.customer-section-card--warning {
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(255, 248, 242, 0.82), rgba(247, 241, 232, 0.72)),
    radial-gradient(180px 90px at 100% 0%, rgba(179, 120, 29, 0.10), transparent 72%);
}

.customer-profile-inline {
  margin-top: 12px;
  max-width: 560px;
}

.customer-profile-preview,
.booking-profile-preview {
  display: grid;
  gap: 10px;
}

.customer-profile-status-card {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(245, 249, 252, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.customer-profile-status-card.is-warning {
  border-color: rgba(179, 120, 29, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 251, 245, 0.92), rgba(250, 244, 234, 0.84)),
    radial-gradient(160px 80px at 100% 0%, rgba(179, 120, 29, 0.10), transparent 72%);
}

.customer-profile-status-card.is-danger {
  border-color: rgba(213, 90, 70, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 246, 244, 0.92), rgba(251, 238, 235, 0.84)),
    radial-gradient(160px 80px at 100% 0%, rgba(213, 90, 70, 0.10), transparent 72%);
}

.customer-profile-status-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.customer-profile-status-card strong,
.customer-profile-status-card p,
.customer-profile-status-card small {
  margin: 0;
}

.customer-profile-status-card p,
.customer-profile-status-card small {
  color: var(--muted);
  line-height: 1.55;
}

.booking-profile-panel {
  margin-top: 14px;
}

.booking-profile-shell {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(245, 249, 252, 0.74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.mail-thread-card-badges {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.customer-fact-card span,
.customer-profile-item span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.customer-fact-card strong,
.customer-profile-item strong {
  font-size: 16px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.customer-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.customer-profile-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(0, 68, 120, 0.08);
  background: rgba(255, 255, 255, 0.7);
}

.customer-booking-list,
.customer-message-list {
  max-height: 520px;
  overflow: auto;
  padding-right: 4px;
}

.customer-directory-card .mail-thread-card-meta {
  align-items: flex-start;
}

.customer-directory-card .mail-thread-card-meta span:first-child,
.customer-directory-card .mail-thread-card-subject,
.customer-directory-card .mail-thread-card-preview {
  overflow-wrap: anywhere;
}

.customer-directory-card .mail-thread-card-preview {
  -webkit-line-clamp: 2;
}

.mail-thread-list-wrap {
  display: grid;
  gap: 14px;
}

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

.mail-thread-detail {
  min-height: 240px;
  min-width: 0;
}

.mail-thread-shell {
  display: grid;
  gap: 18px;
}

.mail-thread-header,
.mail-thread-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.mail-thread-header-copy h4,
.mail-thread-section-head h5 {
  margin: 0;
}

.mail-thread-header-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

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

.mail-summary-card {
  display: grid;
  gap: 8px;
  padding: 16px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(246, 250, 253, 0.72));
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.06);
}

.mail-summary-card span {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mail-summary-card strong {
  font-size: 16px;
  line-height: 1.35;
}

.mail-summary-card small {
  color: var(--muted);
  line-height: 1.55;
}

.mail-thread-section {
  display: grid;
  gap: 12px;
}

.mail-thread-message-list {
  display: grid;
  gap: 12px;
  max-height: 820px;
  overflow: auto;
  padding-right: 4px;
}

.mail-thread-form {
  max-width: 860px;
}

.mail-thread-card {
  display: grid;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 250, 253, 0.68));
  box-shadow: 0 12px 24px rgba(15, 42, 74, 0.08);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mail-thread-card:hover,
.mail-thread-card.is-active {
  border-color: rgba(0, 104, 180, 0.24);
  box-shadow: 0 18px 32px rgba(0, 104, 180, 0.12);
  transform: translateY(-1px);
}

.mail-thread-card-head,
.mail-thread-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mail-thread-card-meta,
.mail-thread-card-preview {
  color: var(--muted);
  line-height: 1.55;
}

.mail-thread-card-subject {
  font-weight: 700;
  color: var(--text);
}

.mail-thread-card-preview {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.archive-toolbar,
.archive-pagination-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.archive-toolbar {
  margin-bottom: 14px;
}

.archive-search-field,
.archive-page-size-field {
  display: grid;
  gap: 8px;
}

.archive-search-field {
  flex: 1 1 320px;
}

.archive-search-field input,
.archive-page-size-field select {
  min-height: 48px;
}

.archive-page-size-field {
  flex: 0 0 180px;
}

.archive-result-info {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.archive-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.archive-page-indicator {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 251, 254, 0.68));
  color: var(--text);
  box-shadow: 0 10px 24px rgba(15, 42, 74, 0.08);
}

.button-small {
  min-height: 42px;
  padding: 0 16px;
}

.booking-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.booking-card-header,
.booking-card-meta {
  align-items: center;
  justify-content: space-between;
}

.status-pill {
  min-height: 32px;
}

.booking-details {
  display: grid;
  gap: 8px;
  line-height: 1.55;
}

.booking-inline-status {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.booking-inline-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: rgba(255, 255, 255, 0.86);
}

.booking-inline-status-pill.is-neutral {
  color: var(--muted);
}

.booking-inline-status-pill.is-success {
  color: var(--ok);
  border-color: rgba(33, 134, 87, 0.20);
  background: rgba(236, 248, 241, 0.86);
}

.booking-inline-status-pill.is-warning {
  color: var(--warn);
  border-color: rgba(179, 120, 29, 0.20);
  background: rgba(255, 248, 237, 0.88);
}

.booking-inline-status-pill.is-danger {
  color: var(--danger);
  border-color: rgba(213, 90, 70, 0.22);
  background: rgba(255, 241, 238, 0.88);
}

.booking-inline-status-success .booking-inline-status-pill {
  color: var(--ok);
  border-color: rgba(33, 134, 87, 0.20);
  background: rgba(236, 248, 241, 0.86);
}

.booking-inline-status-warning .booking-inline-status-pill {
  color: var(--warn);
  border-color: rgba(179, 120, 29, 0.20);
  background: rgba(255, 248, 237, 0.88);
}

.booking-inline-status-danger .booking-inline-status-pill {
  color: var(--danger);
  border-color: rgba(213, 90, 70, 0.22);
  background: rgba(255, 241, 238, 0.88);
}

.booking-inline-status-muted .booking-inline-status-pill {
  color: var(--muted);
}

.booking-inline-meta {
  color: var(--muted);
  font-size: 12px;
}

.booking-inline-note-preview {
  margin-top: 4px;
  color: var(--muted);
}

.attachment-section {
  display: grid;
  gap: 10px;
  margin-top: 4px;
}

.attachment-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.attachment-section-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.attachment-grid.is-compact {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
}

.attachment-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(246, 250, 253, 0.86));
  box-shadow: 0 10px 22px rgba(15, 42, 74, 0.05);
  color: inherit;
  text-decoration: none;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.attachment-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(15, 42, 74, 0.09);
  border-color: rgba(0, 104, 180, 0.18);
}

.attachment-card.is-compact {
  padding: 8px;
  border-radius: 16px;
}

.attachment-image-wrap {
  display: block;
  overflow: hidden;
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  background: rgba(234, 240, 246, 0.9);
}

.attachment-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attachment-file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 88px;
  border-radius: 14px;
  border: 1px dashed rgba(0, 68, 120, 0.16);
  background: linear-gradient(180deg, rgba(244, 248, 252, 0.96), rgba(237, 244, 249, 0.9));
  color: var(--accent);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.attachment-card-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.attachment-card-meta strong,
.attachment-card-meta small {
  overflow-wrap: anywhere;
}

.attachment-card-meta strong {
  font-size: 13px;
  line-height: 1.4;
}

.attachment-card-meta small {
  color: var(--muted);
  font-size: 12px;
}

.booking-progress {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: linear-gradient(180deg, rgba(251, 253, 255, 0.74), rgba(241, 247, 252, 0.54));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  --progress-done: #68ad74;
  --progress-current: #f08a24;
  --progress-expired: #dd4e4e;
  --progress-line: rgba(0, 68, 120, 0.14);
}

.booking-progress-waiting {
  background:
    linear-gradient(180deg, rgba(255, 251, 244, 0.78), rgba(247, 241, 228, 0.52)),
    radial-gradient(180px 90px at 100% 0%, rgba(179, 120, 29, 0.12), transparent 72%);
  --progress-line: linear-gradient(90deg, #68ad74 0%, #68ad74 66%, #f08a24 66%, #f08a24 100%);
}

.booking-progress-confirmed {
  background:
    linear-gradient(180deg, rgba(244, 252, 247, 0.78), rgba(232, 244, 237, 0.52)),
    radial-gradient(180px 90px at 100% 0%, rgba(33, 134, 87, 0.12), transparent 72%);
  --progress-line: linear-gradient(90deg, #68ad74 0%, #68ad74 100%);
}

.booking-progress-expired,
.booking-progress.is-expired-live {
  background:
    linear-gradient(180deg, rgba(255, 245, 245, 0.82), rgba(249, 233, 233, 0.56)),
    radial-gradient(180px 90px at 100% 0%, rgba(221, 78, 78, 0.14), transparent 72%);
  --progress-line: linear-gradient(90deg, #68ad74 0%, #68ad74 66%, #dd4e4e 66%, #dd4e4e 100%);
}

.booking-progress::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(0, 104, 180, 0.7), rgba(134, 188, 34, 0.55), rgba(9, 97, 118, 0.44));
  opacity: 0.75;
}

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

.booking-progress-head strong {
  display: block;
  font-size: 16px;
  line-height: 1.2;
  color: var(--ink);
}

.booking-progress-head p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.5;
  max-width: 58ch;
  font-size: 14px;
}

.booking-progress-badge {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: rgba(18, 32, 44, 0.84);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booking-progress-lock-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: -2px;
}

.booking-progress-lock-label,
.booking-progress-lock-deadline {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.booking-progress-lock-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.booking-progress-lock-value {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.booking-progress-lock-value.is-confirmed {
  color: var(--progress-done);
}

.booking-progress-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  padding-top: 2px;
}

.booking-progress-steps::before {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(16.666% + 18px);
  right: calc(16.666% + 18px);
  height: 2px;
  border-radius: 999px;
  background: var(--progress-line);
  animation: bookingLinePulse 3.4s ease-in-out infinite;
}

.booking-progress-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 22px auto;
  gap: 12px;
  align-items: start;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.booking-progress-step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 0;
  justify-self: center;
  border-radius: 999px;
  border: 2px solid rgba(0, 68, 120, 0.16);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 10px rgba(15, 42, 74, 0.08);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.booking-progress-step-copy {
  display: grid;
  gap: 2px;
  width: 100%;
  text-align: center;
}

.booking-progress-step-copy strong {
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
}

.booking-progress-step-copy span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.booking-progress-step.is-done .booking-progress-step-marker {
  border-color: rgba(33, 134, 87, 0.18);
  background: var(--progress-done);
}

.booking-progress-step.is-current .booking-progress-step-marker {
  border-color: rgba(240, 138, 36, 0.18);
  background: var(--progress-current);
  box-shadow: 0 0 0 4px rgba(240, 138, 36, 0.10), 0 4px 10px rgba(15, 42, 74, 0.08);
  animation: bookingDotAttention 2.4s ease-in-out infinite;
}

.booking-progress-step.is-expired .booking-progress-step-marker,
.booking-progress.is-expired-live .booking-progress-step:last-child .booking-progress-step-marker {
  border-color: rgba(221, 78, 78, 0.18);
  background: var(--progress-expired);
  box-shadow: 0 0 0 4px rgba(221, 78, 78, 0.10), 0 4px 10px rgba(15, 42, 74, 0.08);
  animation: bookingDotAlert 2.1s ease-in-out infinite;
}

.booking-progress-step.is-done .booking-progress-step-copy strong,
.booking-progress-step.is-current .booking-progress-step-copy strong,
.booking-progress-step.is-expired .booking-progress-step-copy strong {
  color: var(--ink);
}

.booking-progress.is-expired-live .booking-progress-badge,
.booking-progress-expired .booking-progress-badge {
  color: #b93838;
  border-color: rgba(221, 78, 78, 0.18);
  background: rgba(255, 255, 255, 0.82);
}

.booking-progress.is-expired-live .booking-progress-lock-value,
.booking-progress-expired .booking-progress-lock-value {
  color: #b93838;
}

.booking-progress.is-expired-live .booking-progress-step:last-child .booking-progress-step-copy span,
.booking-progress-expired .booking-progress-step.is-expired .booking-progress-step-copy span {
  color: #b93838;
}

@keyframes bookingDotAttention {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(240, 138, 36, 0.08), 0 4px 10px rgba(15, 42, 74, 0.08);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(240, 138, 36, 0.14), 0 5px 12px rgba(15, 42, 74, 0.10);
  }
}

@keyframes bookingDotAlert {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px rgba(221, 78, 78, 0.08), 0 4px 10px rgba(15, 42, 74, 0.08);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(221, 78, 78, 0.16), 0 5px 12px rgba(15, 42, 74, 0.10);
  }
}

@keyframes bookingLinePulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.9;
  }
}

.booking-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.booking-action-toolbar {
  display: grid;
  gap: 12px;
}

.booking-actions-primary {
  align-items: center;
}

.booking-more-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.booking-more-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 11px 18px;
  border: 1px solid rgba(0, 68, 120, 0.14);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(242, 248, 253, 0.9));
  box-shadow: 0 12px 24px rgba(16, 31, 48, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: var(--ink);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.booking-more-summary::-webkit-details-marker {
  display: none;
}

.booking-more-summary::after {
  content: "▾";
  font-size: 12px;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.booking-more-actions[open] .booking-more-summary::after {
  transform: rotate(180deg);
}

.booking-actions-more-panel {
  padding-top: 2px;
}

.booking-card.history-open .booking-details {
  display: none;
}

.archive-customer-card.history-open .archive-customer-summary {
  display: none;
}

.booking-history-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-note-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-tag-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-share-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-assignment-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-attachment-panel {
  display: grid;
  gap: 14px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 68, 120, 0.12);
}

.booking-tag-shell,
.booking-share-shell,
.booking-assignment-shell,
.booking-note-shell {
  display: grid;
  gap: 14px;
}

.booking-assignment-shell label {
  display: grid;
  gap: 6px;
}

.booking-share-meta {
  color: var(--muted);
  line-height: 1.55;
}

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

.booking-share-target {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 254, 0.84));
}

.booking-share-target-copy {
  display: grid;
  gap: 4px;
}

.booking-share-target-copy strong,
.booking-share-target-copy p {
  margin: 0;
}

.booking-share-target-copy p {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.booking-tag-options,
.booking-tag-preview,
.booking-note-list {
  display: grid;
  gap: 12px;
}

.booking-tag-options {
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  align-items: start;
}

.tag-option {
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 68, 120, 0.14);
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-weight: 700;
  box-shadow: 0 8px 16px rgba(15, 42, 74, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.tag-option:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 104, 180, 0.22);
  box-shadow: 0 12px 18px rgba(0, 104, 180, 0.12);
}

.tag-option.is-active {
  border-color: var(--ui-accent, var(--accent));
  background: var(--ui-accent-soft, var(--accent-soft));
  color: var(--ui-text, var(--ink));
}

.booking-tag-preview,
.booking-tag-inline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.booking-tag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(0, 104, 180, 0.14);
  background: rgba(240, 247, 251, 0.88);
  color: var(--accent);
  font-weight: 700;
  line-height: 1.2;
}

.booking-tag-inline {
  display: grid;
  gap: 8px;
}

.booking-tag-empty {
  color: var(--muted);
}

.internal-note-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0, 68, 120, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(246, 250, 253, 0.74));
  box-shadow: 0 10px 18px rgba(15, 42, 74, 0.04);
}

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

.internal-note-head span {
  color: var(--muted);
  font-size: 12px;
}

.internal-note-body {
  color: var(--ink);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.booking-history-shell,
.booking-history-grid,
.history-column {
  display: grid;
  gap: 14px;
}

.booking-history-head,
.booking-history-actions,
.message-head,
.history-booking-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.booking-history-head h4,
.history-column h5 {
  margin: 0;
}

.booking-history-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.booking-history-grid {
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 1.3fr);
}

.history-booking-list,
.history-message-list {
  display: grid;
  gap: 10px;
}

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

.history-customer-card,
.history-customer-card-inner {
  display: grid;
  gap: 10px;
}

.history-booking-item,
.message-item {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(246, 250, 253, 0.82));
}

.history-booking-item.is-current {
  border-color: rgba(0, 104, 180, 0.28);
  box-shadow: inset 0 0 0 1px rgba(0, 104, 180, 0.12);
}

.archive-booking-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 254, 0.88));
}

.message-incoming {
  border-left: 4px solid var(--ui-success, var(--ok));
}

.message-outgoing {
  border-left: 4px solid var(--ui-accent, var(--accent));
}

.message-incoming .message-head strong::after {
  content: " Kundenantwort";
}

.message-head,
.history-booking-meta {
  font-size: 13px;
  color: var(--muted);
}

.message-body {
  line-height: 1.65;
  color: var(--text);
}

.history-mail-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 68, 120, 0.12);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(247, 251, 254, 0.84));
}

.mail-recipient-lock-note {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.admin-session-timer {
  margin: 8px 0 0;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 104, 180, 0.08);
  color: var(--accent);
  font-weight: 700;
}

.status-pill.archived {
  color: var(--accent-4);
  background: linear-gradient(180deg, rgba(238, 247, 251, 0.96), rgba(230, 243, 248, 0.92));
  border-color: rgba(9, 97, 118, 0.18);
}

.detail-list {
  margin-top: 4px;
}

.status-layout {
  display: grid;
}

.status-layout .panel {
  display: grid;
  gap: 18px;
}

.status-layout .panel-head {
  margin-bottom: 0;
}

.status-history {
  display: grid;
  gap: 12px;
}

.history-item {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(253, 254, 255, 0.72), rgba(244, 249, 253, 0.64));
}

.history-time {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.calendar-item {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(18, 32, 44, 0.08);
}

.calendar-item code,
.notice code {
  word-break: break-all;
}

.prose {
  display: grid;
  gap: 18px;
}

.prose h2 {
  margin-bottom: 10px;
  font-size: clamp(20px, 2.6vw, 26px);
}

.prose p,
.prose ul {
  margin: 0;
  line-height: 1.75;
}

.prose ul {
  padding-left: 20px;
}

.prose li + li {
  margin-top: 8px;
}

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

.legal-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(18, 32, 44, 0.08);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(252, 254, 255, 0.72), rgba(244, 249, 253, 0.64));
}

.address-block {
  font-style: normal;
  line-height: 1.7;
}

.link-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
}

.legal-note {
  color: var(--muted);
  font-size: 14px;
}

.template-help {
  margin: 0;
}

.template-help code {
  display: inline-flex;
  margin: 4px 8px 0 0;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(0, 104, 180, 0.08);
  border: 1px solid rgba(0, 104, 180, 0.12);
}

.admin-body {
  background-image:
    linear-gradient(180deg, rgba(240, 246, 250, 0.98), rgba(229, 237, 245, 0.98)),
    radial-gradient(680px 280px at 0% 0%, rgba(0, 104, 180, 0.10), transparent 72%),
    radial-gradient(640px 260px at 100% 0%, rgba(134, 188, 34, 0.08), transparent 74%),
    radial-gradient(520px 240px at 50% 100%, rgba(53, 51, 139, 0.06), transparent 78%);
  background-position: center, 0 0, 100% 0, 50% 100%;
  background-size: auto, auto, auto, auto;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, scroll, scroll, scroll;
}

.admin-body::before,
.admin-body::after {
  display: none;
}

.admin-body .hero,
.admin-body .panel,
.admin-body .detail-box,
.admin-body .metric-card,
.admin-body .booking-card,
.admin-body .site-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 253, 0.96));
  border-color: rgba(0, 68, 120, 0.14);
  box-shadow: 0 16px 30px rgba(16, 31, 48, 0.08), 0 4px 14px rgba(0, 104, 180, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.admin-body .booking-card,
.admin-body .metric-card {
  content-visibility: auto;
  contain-intrinsic-size: 320px;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  background: rgba(255, 255, 255, 0.99);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus,
.admin-body .button:hover {
  transform: none;
}

.admin-body .button {
  box-shadow: 0 10px 20px rgba(0, 104, 180, 0.18);
}

.admin-body .button-secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 252, 0.94)),
    rgba(250, 252, 254, 0.92);
}

.admin-body .booking-list {
  gap: 14px;
}

.admin-body .history-customer-card-inner,
.admin-body .history-mail-form,
.admin-body .message-item {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 253, 0.88));
}

.admin-body .notice {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@keyframes button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 980px) {
  .layout,
  .admin-layout,
  .admin-app-layout,
  .admin-header,
  .mail-center-layout,
  .admin-login-hero {
    grid-template-columns: 1fr;
  }

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

  .calendar-weekdays {
    display: none;
  }

  .mail-thread-summary-grid {
    grid-template-columns: 1fr;
  }

  .customer-center-layout {
    grid-template-columns: 1fr;
  }

  .blocked-period-row {
    grid-template-columns: 1fr 1fr;
  }

  .preview-panel {
    position: static;
  }

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

@media (max-width: 720px) {
  .page-shell {
    width: min(100% - 20px, 1080px);
    padding-top: 18px;
  }

  .hero,
  .panel {
    padding: 18px;
  }

  .form-block {
    padding: 16px;
  }

  .field-grid,
  .service-fields,
  .preview-grid,
  .summary-grid,
  .calendar-grid {
    grid-template-columns: 1fr;
  }

  .panel-head,
  .slot-head,
  .service-box-head,
  .admin-nav,
  .day-plan-toolbar,
  .day-plan-card-head,
  .archive-toolbar,
  .archive-pagination-head,
  .mail-thread-header,
  .customer-detail-head,
  .mail-thread-section-head,
  .slot-day-summary,
  .booking-history-head,
  .booking-history-actions,
  .message-head,
  .audit-item-head,
  .audit-item-meta,
  .history-booking-meta,
  .booking-card-header,
  .booking-card-meta,
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-history-grid {
    grid-template-columns: 1fr;
  }

  .customer-detail-facts,
  .customer-profile-grid {
    grid-template-columns: 1fr;
  }

  .blocked-period-row {
    grid-template-columns: 1fr;
  }

  .day-plan-details {
    grid-template-columns: 1fr;
  }

  .booking-progress-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .booking-progress-steps {
    grid-template-columns: 1fr;
  }

  .booking-progress-steps::before {
    display: none;
  }

  .archive-page-size-field,
  .archive-search-field {
    width: 100%;
    flex-basis: 100%;
  }

  .mail-thread-message-list {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .admin-nav-link {
    width: 100%;
  }

  .booking-actions .button,
  .actions .button {
    width: 100%;
  }

  .booking-share-target {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Variant A parity for the mobile field workspace. */
html[data-theme="light"] .field-body {
  --field-app: #f4f5f9;
  --field-surface: #ffffff;
  --field-surface-alt: #f4f5f9;
  --field-surface-hover: #e8eaef;
  --field-border: #e5e7ee;
  --field-border-strong: #ccced9;
  --field-text: #131418;
  --field-text-secondary: #333743;
  --field-text-muted: #898c96;
  --field-accent: #6366f1;
  --field-accent-hover: #4f52e9;
  --field-accent-soft: #eceefd;
  --field-success: #1a8754;
  --field-danger: #d63b45;
}
html[data-theme="dark"] .field-body {
  --field-app: #0d0e11;
  --field-surface: #16171c;
  --field-surface-alt: #0f1013;
  --field-surface-hover: #1c1e24;
  --field-border: #242731;
  --field-border-strong: #333743;
  --field-text: #f4f5f9;
  --field-text-secondary: #a0a3b1;
  --field-text-muted: #6e7280;
  --field-accent: #6366f1;
  --field-accent-hover: #4f52e9;
  --field-accent-soft: #26284f;
  --field-success: #34b374;
  --field-danger: #ef5f68;
}
html[data-theme] .field-body .field-header,
html[data-theme] .field-body .field-filter-bar,
html[data-theme] .field-body :is(.field-time-panel, .field-job-card, .field-job-details, .field-detail-block, .field-completion-form, .field-completed-report, .field-supplier-card, .field-material-row, .field-service-template-row, .field-maintenance-check-row, .field-summary > *, .field-time-summary > *, .field-time-entry) {
  border-radius: 8px !important;
}
html[data-theme] .field-body .field-filter.is-active { color: #fff !important; background: var(--field-accent) !important; box-shadow: none !important; }
html[data-theme] .field-body .field-theme-toggle { width: 50px !important; min-width: 50px !important; height: 30px !important; min-height: 30px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; }
html[data-theme] .field-body .field-theme-toggle .theme-switch-track { width: 50px !important; height: 30px !important; border: 1px solid var(--field-border-strong) !important; border-radius: 999px !important; background: var(--field-surface-alt) !important; }
html[data-theme] .field-body .field-theme-toggle .theme-switch-thumb { top: 3px !important; left: 3px !important; width: 22px !important; height: 22px !important; background: var(--field-accent) !important; }
html[data-theme] .field-body .field-theme-toggle.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }

/* Final precedence layer: keep legacy teal surfaces out of Variant A. */
html[data-theme="dark"] .admin-body :is(
  .customer-detail-head, .customer-detail-sections, .customer-profile-inline,
  .customer-profile-preview, .customer-fact-card, .customer-profile-item, .booking-profile-preview,
  .booking-key-facts, .booking-progress, .booking-progress-lock,   .booking-quick-signal, .booking-quick-fact, .booking-full-details, .booking-more-summary,
  .booking-details, .callback-list-pane, .callback-detail-panel, .maintenance-detail-panel,
  .maintenance-contract-meta > *, .maintenance-contract-note, .commercial-article-suggestions,
  .commercial-article-suggestion, .commercial-bundle-item, .commercial-journal-table-wrap,
  .team-chat-message-list, .team-chat-compose, .mail-thread-content, .mail-thread-message,
  .audit-meta, .audit-item, .settings-section, .settings-subsection
) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .customer-fact-grid > *, .customer-profile-item, .booking-key-facts > *, .booking-quick-fact,
  .booking-progress-step, .maintenance-contract-meta > *, .commercial-article-suggestion,
  .team-chat-channel, .team-chat-direct-target, .mail-thread-content, .audit-meta
) { background: var(--ui-surface-alt) !important; }

/* Last mailcenter override: remove every remaining petrol surface. */
html[data-theme="dark"] .admin-body :is(
  .mail-center-layout, .mail-center-layout--inbox, .mailbox, .mail-inbox,
  .mailbox-command-bar, .mail-inbox-sidebar, .mail-thread-detail,
  .mail-thread-section, .mail-thread-content, .mail-thread-message,
  .mail-thread-message-list, .mail-thread-form, .history-mail-form,
  .mail-attachment-picker, .message-item
) {
  border-color: var(--ui-border) !important;
  background-color: var(--ui-surface-alt) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .mail-thread-form > label, .mail-thread-account, .mail-thread-context > span,
  .mail-account-filter, .mail-thread-card, .message-item .message-head
) {
  border-color: var(--ui-border-strong) !important;
  background-color: var(--ui-sidebar) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body .mail-thread-card.is-active {
  border-color: var(--ui-accent) !important;
  background-color: var(--ui-accent-soft) !important;
}

/* The top-bar switch is deliberately simple: only a compact sun/moon slider. */
html[data-theme] .admin-body .theme-toggle--topbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track {
  position: relative !important;
  display: block !important;
  width: 48px !important;
  height: 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before,
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after {
  position: absolute;
  top: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--ui-text-muted);
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar :is(.theme-switch-sun, .theme-switch-moon) { display: none !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-thumb {
  position: absolute !important;
  z-index: 1;
  top: 3px !important;
  left: 3px !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .18s ease !important;
}
html[data-theme] .admin-body .theme-toggle--topbar.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }
html[data-theme] .admin-body .theme-toggle--topbar:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px !important; }

/* Final full-workspace theme backgrounds. Keep the graphic behind every admin
   view rather than on the page body, which is covered by the application grid. */



/* Maintenance contracts: reference layout shared by both themes. */
html[data-theme="dark"] .admin-body {
  --maintenance-panel: #16171c;
  --maintenance-panel-raised: #383a40;
  --maintenance-panel-selected: #26284f;
  --maintenance-note: #0f1013;
}
html[data-theme="light"] .admin-body {
  --maintenance-panel: #ffffff;
  --maintenance-panel-raised: #f7f9fc;
  --maintenance-panel-selected: #f1f0ff;
  --maintenance-note: #f7f9fc;
}
html[data-theme] .admin-body [data-admin-view="maintenance"] {
  min-width: 0;
}
html[data-theme] .admin-body [data-admin-view="maintenance"] > .panel-head {
  min-height: 48px;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
}
html[data-theme] .admin-body [data-admin-view="maintenance"] > .panel-head h2 {
  font-size: 22px !important;
  letter-spacing: -.02em;
}
html[data-theme] .admin-body [data-admin-view="maintenance"] > .panel-head p {
  max-width: none;
  font-size: 13px;
}
html[data-theme] .admin-body .maintenance-kpi-bar {
  margin-bottom: 14px !important;
  border-radius: 6px !important;
  background: var(--maintenance-panel) !important;
}
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric {
  min-height: 72px !important;
  padding: 12px 18px !important;
}
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric span {
  font-size: 10px !important;
}
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric strong {
  font-size: 22px !important;
}
html[data-theme] .admin-body .maintenance-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 460px) !important;
  gap: 16px !important;
  align-items: start;
}
html[data-theme] .admin-body .maintenance-toolbar {
  display: grid !important;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 210px) auto minmax(max-content, auto) auto !important;
  min-height: 0 !important;
  margin-bottom: 6px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .maintenance-toolbar label {
  min-width: 0;
}
html[data-theme] .admin-body .maintenance-toolbar :is(input, select, .button) {
  min-height: 38px !important;
  border-radius: 5px !important;
}
html[data-theme] .admin-body .maintenance-filter-button {
  padding-inline: 14px !important;
}
html[data-theme] .admin-body .maintenance-toolbar-count {
  align-self: end;
  padding: 10px 2px;
  color: var(--ui-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}
html[data-theme] .admin-body .maintenance-result-info {
  display: none;
}
html[data-theme] .admin-body .maintenance-list {
  gap: 8px !important;
}
html[data-theme] .admin-body .maintenance-contract-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px !important;
  padding: 14px 16px 12px !important;
  overflow: visible;
  border-radius: 6px !important;
  background: var(--maintenance-panel) !important;
}
html[data-theme] .admin-body .maintenance-contract-row:hover {
  border-color: var(--ui-border-strong) !important;
  background: var(--maintenance-panel-raised) !important;
  transform: none !important;
}
html[data-theme] .admin-body .maintenance-contract-row.is-selected {
  border-color: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-border)) !important;
  background: var(--maintenance-panel-selected) !important;
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
}
html[data-theme] .admin-body .maintenance-row-heading {
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) minmax(150px, .7fr) auto;
  gap: 16px;
  align-items: start;
}
html[data-theme] .admin-body .maintenance-row-copy h3 {
  margin: 3px 0 2px !important;
  font-size: 16px !important;
  line-height: 1.25;
}
html[data-theme] .admin-body .maintenance-row-copy p {
  font-size: 12px !important;
}
html[data-theme] .admin-body .maintenance-row-priority {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  padding-top: 5px;
}
html[data-theme] .admin-body .maintenance-due-badge,
html[data-theme] .admin-body .maintenance-status-label {
  min-height: 23px !important;
  padding: 3px 7px !important;
  border-radius: 5px !important;
  font-size: 10px !important;
}
html[data-theme] .admin-body .maintenance-row-actions {
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 7px !important;
}
html[data-theme] .admin-body .maintenance-row-actions .button {
  min-height: 32px !important;
  padding: 6px 10px !important;
  border-radius: 5px !important;
  white-space: nowrap;
}
html[data-theme] .admin-body .maintenance-row-facts {
  grid-template-columns: minmax(130px, .75fr) minmax(120px, .65fr) minmax(230px, 1.55fr) minmax(130px, .7fr) !important;
  gap: 0 !important;
  border-top: 1px solid var(--ui-border);
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .maintenance-row-facts span {
  min-height: 47px;
  padding: 8px 14px;
  border-right: 1px solid var(--ui-border);
  font-size: 12px !important;
}
html[data-theme] .admin-body .maintenance-row-facts span:first-child { padding-left: 0; }
html[data-theme] .admin-body .maintenance-row-facts span:last-child { border-right: 0; }
html[data-theme] .admin-body .maintenance-row-facts b {
  margin-bottom: 3px !important;
  font-size: 10px !important;
}
html[data-theme] .admin-body .maintenance-row-note {
  margin: 0 !important;
  padding: 0 0 0 10px !important;
  border-left: 2px solid var(--ui-accent) !important;
  color: var(--ui-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45;
  background: transparent !important;
}
html[data-theme] .admin-body .maintenance-row-note span {
  margin-right: 7px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .maintenance-action-menu {
  right: 14px !important;
  bottom: 12px !important;
  min-width: 190px;
  border-radius: 6px !important;
  background: var(--maintenance-panel-raised) !important;
}
html[data-theme] .admin-body .maintenance-detail-panel {
  position: sticky !important;
  top: 12px !important;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - 110px);
  max-height: calc(100vh - 110px) !important;
  border-radius: 7px !important;
  background: var(--maintenance-panel) !important;
}
html[data-theme] .admin-body .maintenance-detail-head {
  padding: 18px 20px 12px !important;
}
html[data-theme] .admin-body .maintenance-detail-head h3 {
  font-size: 20px !important;
}
html[data-theme] .admin-body .maintenance-detail-status {
  padding: 0 20px 12px !important;
}
html[data-theme] .admin-body .maintenance-detail-tabs {
  display: flex !important;
  gap: 20px !important;
  margin: 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .maintenance-detail-tabs button {
  min-height: 38px !important;
  padding: 0 0 10px !important;
  border-radius: 0 !important;
  color: var(--ui-text-secondary) !important;
  font-size: 12px !important;
}
html[data-theme] .admin-body .maintenance-detail-tabs button.is-active {
  border-bottom: 2px solid var(--ui-accent) !important;
  color: var(--ui-text) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .maintenance-detail-content {
  flex: 1 1 auto;
  min-height: 0 !important;
  padding: 18px 20px !important;
}
html[data-theme] .admin-body .maintenance-detail-keyvalues {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 20px;
  margin: 0;
}
html[data-theme] .admin-body .maintenance-detail-keyvalues > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .maintenance-detail-keyvalues dt {
  color: var(--ui-text-muted);
  font-size: 12px;
}
html[data-theme] .admin-body .maintenance-detail-keyvalues dd {
  min-width: 0;
  margin: 0;
  color: var(--ui-text);
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
html[data-theme] .admin-body .maintenance-detail-note {
  padding: 12px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .maintenance-detail-actions {
  position: relative;
  flex: 0 0 auto;
  min-height: 64px;
  padding: 12px 20px 16px !important;
  border-top: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .maintenance-detail-actions .button {
  min-height: 34px !important;
  border-radius: 5px !important;
}
html[data-theme] .admin-body .maintenance-detail-more-wrap { position: relative; }
html[data-theme] .admin-body .maintenance-detail-action-menu {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  min-width: 205px;
  padding: 5px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 6px;
  background: var(--maintenance-panel-raised);
  box-shadow: 0 14px 28px rgba(0, 0, 0, .20);
}
html[data-theme] .admin-body .maintenance-detail-action-menu button {
  padding: 8px 10px;
  border: 0;
  border-radius: 4px;
  color: var(--ui-text);
  text-align: left;
  background: transparent;
  cursor: pointer;
}
html[data-theme] .admin-body .maintenance-detail-action-menu button:hover { background: var(--ui-surface-hover); }
html[data-theme] .admin-body .maintenance-detail-action-menu span { height: 1px; margin: 4px; background: var(--ui-border); }
html[data-theme] .admin-body .maintenance-detail-action-menu .is-danger { color: var(--ui-danger); }

@media (max-width: 1240px) {
  html[data-theme] .admin-body .maintenance-workspace { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] .admin-body .maintenance-detail-panel { position: relative !important; top: auto !important; min-height: 0; max-height: none !important; }
}
@media (max-width: 840px) {
  html[data-theme] .admin-body .maintenance-toolbar { grid-template-columns: minmax(0, 1fr) minmax(160px, 190px) auto !important; }
  html[data-theme] .admin-body .maintenance-toolbar .archive-search-field { grid-column: 1 / -1; }
  html[data-theme] .admin-body .maintenance-toolbar-count { display: none; }
  html[data-theme] .admin-body .maintenance-row-heading { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-theme] .admin-body .maintenance-row-priority { grid-column: 1; padding-top: 0; }
  html[data-theme] .admin-body .maintenance-row-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  html[data-theme] .admin-body .maintenance-row-facts { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body .maintenance-row-facts span:nth-child(2) { border-right: 0; }
  html[data-theme] .admin-body .maintenance-row-facts span:nth-child(-n + 2) { border-bottom: 1px solid var(--ui-border); }
  html[data-theme] .admin-body .maintenance-row-facts span:first-child { padding-left: 0; }
}
@media (max-width: 600px) {
  html[data-theme] .admin-body .maintenance-kpi-bar { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric:nth-child(2) { border-right: 0 !important; }
  html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--ui-border) !important; }
  html[data-theme] .admin-body .maintenance-toolbar { grid-template-columns: minmax(0, 1fr) auto !important; }
  html[data-theme] .admin-body .maintenance-filter-button { display: none; }
  html[data-theme] .admin-body .maintenance-row-heading { grid-template-columns: 1fr; gap: 9px; }
  html[data-theme] .admin-body .maintenance-row-actions { grid-column: auto; grid-row: auto; justify-content: flex-start; }
  html[data-theme] .admin-body .maintenance-row-facts,
  html[data-theme] .admin-body .maintenance-detail-keyvalues { grid-template-columns: 1fr !important; }
  html[data-theme] .admin-body .maintenance-row-facts span { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--ui-border); }
  html[data-theme] .admin-body .maintenance-row-facts span:last-child { border-bottom: 0; }
  html[data-theme] .admin-body .maintenance-detail-keyvalues > div { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* One subtle canvas per theme: same structure, only colors/assets differ.
   The strong overlay keeps every work area legible in both themes. */
html[data-theme] body.admin-body {
  background-color: var(--ui-app) !important;
  background-image: none !important;
}

html[data-theme="dark"] body.admin-body .admin-main-frame {
  background-color: transparent !important;
  background-image:
    radial-gradient(900px 480px at 88% -12%, rgba(109, 94, 240, .13), transparent 70%),
    radial-gradient(720px 420px at -6% 30%, rgba(109, 94, 240, .06), transparent 70%) !important;
}

html[data-theme="light"] body.admin-body .admin-main-frame {
  background-color: transparent !important;
  background-image:
    radial-gradient(900px 480px at 88% -12%, rgba(109, 94, 240, .08), transparent 70%),
    radial-gradient(720px 420px at -6% 30%, rgba(109, 94, 240, .04), transparent 70%) !important;
}

html[data-theme] body.admin-body .admin-main-frame {
  background-position: center, center !important;
  background-size: auto, auto !important;
  background-repeat: no-repeat, no-repeat !important;
  background-attachment: fixed, fixed !important;
}

@media (max-width: 720px) {
  html[data-theme] body.admin-body .admin-main-frame {
    background-attachment: scroll, scroll !important;
    background-position: center top, center top !important;
  }
}

/* Slot suggestions need the same neutral dark surfaces as the rest of the admin. */
html[data-theme="dark"] .admin-body :is(.slot-day-group, .slot-day-group[open] summary, .slot-time-list) {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .slot-day-group summary:hover {
  background: var(--ui-surface-hover) !important;
}
html[data-theme="dark"] .admin-body .slot-time-option span {
  color: var(--ui-text) !important;
  border-color: var(--ui-border) !important;
  background: var(--ui-surface-alt) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .slot-time-option:hover span,
html[data-theme="dark"] .admin-body .slot-time-option input:checked + span {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: none !important;
}

/* Keep the command search neutral too; teal is reserved for no surface in Variant A. */
html[data-theme="dark"] .admin-body .admin-global-search {
  background: var(--ui-surface-alt) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .admin-global-search input {
  background: var(--ui-app) !important;
  color: var(--ui-text) !important;
}
html[data-theme="dark"] .admin-body .admin-global-search kbd {
  background: var(--ui-sidebar) !important;
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text-secondary) !important;
}

/* Callback list follows the same full-width workspace model as maintenance. */
html[data-theme] .admin-body .callback-summary {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  margin: 0 0 16px !important;
}
html[data-theme] .admin-body .callback-metric.is-attention {
  border-left-color: #e6a23c !important;
}
html[data-theme="dark"] .admin-body :is(.callback-workspace, .callback-list-pane) {
  background: transparent !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body .callback-toolbar {
  background: var(--ui-surface-alt) !important;
  border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .admin-body .callback-toolbar :is(input, select) {
  background: var(--ui-app) !important;
}
html[data-theme] .admin-body .callback-workspace:has(.callback-detail-panel.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .callback-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body .callback-toolbar { grid-template-columns: 1fr 1fr !important; }
  html[data-theme] .admin-body .callback-toolbar > :first-child { grid-column: 1 / -1; }
}

/* Mailcenter: neutral Discord-like surfaces, no legacy teal or green gradients. */
html[data-theme="dark"] .admin-body .mail-center-layout--inbox {
  background: transparent !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .mailbox-command-bar, .mail-inbox-sidebar, .mail-thread-detail,
  .mail-thread-content, .mail-thread-message-list, .mail-thread-message,
  .mail-thread-form, .mail-attachment-picker
) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-alt) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .mail-account-filter, .mail-thread-card, .mail-thread-form > label,
  .mail-thread-account, .mail-thread-context > span
) {
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
  background: var(--ui-sidebar) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .mail-account-filter:is(:hover, :focus-visible, .is-active),
html[data-theme="dark"] .admin-body .mail-thread-card:is(:hover, .is-active) {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .mailbox-command-copy > span, .mail-account-filter-meta,
  .mail-thread-result, .mail-thread-card-route, .mail-thread-detail p,
  .mail-thread-form small
) { color: #a0a3b1 !important; }

html[data-theme="dark"] .admin-body :is(.admin-shell, .admin-main-frame, .admin-app-layout, .admin-content, .admin-view) {
  background: transparent !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(.admin-command-bar, .admin-nav) {
  background: var(--ui-sidebar) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .customer-detail-head, .customer-detail-sections, .customer-profile-inline,
  .booking-key-facts, .booking-progress, .booking-progress-lock,   .callback-list-pane, .callback-detail-panel, .maintenance-detail-panel, .maintenance-workspace,
  .commercial-article-suggestions, .team-chat-message-list, .mail-thread-content, .audit-item,
  .settings-section, .settings-subsection, .day-plan-workspace
) { background-color: #16171c !important; }
html[data-theme="dark"] .admin-body :is(
  .customer-fact-grid > *, .customer-profile-item, .booking-key-facts > *, .booking-quick-fact,
  .booking-progress-step, .maintenance-contract-meta > *, .commercial-article-suggestion,
  .team-chat-channel, .team-chat-direct-target, .mail-thread-message, .audit-meta
) { background-color: #101116 !important; }

html[data-theme="light"] .admin-body :is(.admin-shell, .admin-main-frame, .admin-app-layout, .admin-content, .admin-view) { background: transparent !important; }
html[data-theme="light"] .admin-body .admin-command-bar { background: rgba(255, 255, 255, .92) !important; }
html[data-theme="light"] .admin-body .admin-nav { background: #ffffff !important; }
html[data-theme="light"] .admin-body :is(.panel, .booking-card, .customer-directory-card, .customer-detail-section, .maintenance-contract-row, .audit-item, .commercial-card, .mail-thread-card) {
  background: #ffffff !important;
}

/* Variant A cleanup: legacy teal panels may never leak into the final theme. */
html[data-theme="dark"] .admin-body :is(
  .customer-detail-head,
  .customer-detail-sections,
  .customer-profile-inline,
  .customer-profile-preview,
  .customer-fact-card,
  .customer-profile-item,
  .booking-profile-preview,
  .booking-key-facts,
  .booking-progress,
  .booking-progress-lock,
    .booking-quick-signal,
  .booking-quick-fact,
  .booking-full-details,
  .booking-more-summary,
  .booking-details,
  .callback-list-pane,
  .callback-detail-panel,
  .maintenance-detail-panel,
  .maintenance-contract-meta > *,
  .maintenance-contract-note,
  .commercial-article-suggestions,
  .commercial-article-suggestion,
  .commercial-bundle-item,
  .commercial-journal-table-wrap,
  .team-chat-message-list,
  .team-chat-compose,
  .mail-thread-content,
  .mail-thread-message,
  .audit-meta,
  .audit-item,
  .settings-section,
  .settings-subsection
) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .customer-fact-grid > *,
  .customer-profile-item,
  .booking-key-facts > *,
  .booking-quick-fact,
  .booking-progress-step,
  .maintenance-contract-meta > *,
  .commercial-article-suggestion,
  .team-chat-channel,
  .team-chat-direct-target,
  .mail-thread-content,
  .audit-meta
) {
  background: var(--ui-surface-alt) !important;
}
html[data-theme="dark"] .admin-body :is(.notice, .notice.success, .success-message) {
  background-image: none !important;
}

/* One compact, predictable theme switch. The symbol layer is intentionally hidden. */
html[data-theme] .admin-body .theme-toggle--topbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track {
  position: relative !important;
  display: block !important;
  width: 48px !important;
  height: 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before,
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after {
  position: absolute;
  top: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--ui-text-muted);
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar :is(.theme-switch-sun, .theme-switch-moon) { display: none !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-thumb {
  position: absolute !important;
  z-index: 1;
  top: 3px !important;
  left: 3px !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .18s ease !important;
}
html[data-theme] .admin-body .theme-toggle--topbar.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }
html[data-theme] .admin-body .theme-toggle--topbar:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px !important; }

/* The wiki is a first-class Variant A page, not a legacy standalone document. */
html[data-theme] .wiki-body {
  min-height: 100dvh;
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  color: var(--wiki-text);
  background: var(--wiki-app);
}
html[data-theme="dark"] .wiki-body {
  --wiki-app: #0d0e11;
  --wiki-surface: #16171c;
  --wiki-surface-alt: #0f1013;
  --wiki-border: #242731;
  --wiki-text: #f4f5f9;
  --wiki-text-secondary: #a0a3b1;
  --wiki-text-muted: #6e7280;
  --wiki-accent: #6366f1;
}
html[data-theme="light"] .wiki-body {
  --wiki-app: #f4f5f9;
  --wiki-surface: #ffffff;
  --wiki-surface-alt: #f4f5f9;
  --wiki-border: #e5e7ee;
  --wiki-text: #131418;
  --wiki-text-secondary: #333743;
  --wiki-text-muted: #898c96;
  --wiki-accent: #6366f1;
}
html[data-theme] .wiki-shell { width: min(1240px, calc(100% - 48px)) !important; margin: 0 auto !important; padding: 30px 0 46px !important; }
html[data-theme] .wiki-body :is(.wiki-hero, .wiki-search-panel, .wiki-section, .wiki-help-note) {
  border: 1px solid var(--wiki-border) !important;
  border-radius: 8px !important;
  color: var(--wiki-text) !important;
  background: var(--wiki-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .wiki-hero { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; padding: 28px !important; }
html[data-theme] .wiki-hero :is(h1, h2, h3) { color: var(--wiki-text) !important; }
html[data-theme] .wiki-hero p,
html[data-theme] .wiki-section-head p,
html[data-theme] .wiki-card p,
html[data-theme] .wiki-search-panel p { color: var(--wiki-text-secondary) !important; }
html[data-theme] .wiki-hero .eyebrow,
html[data-theme] .wiki-section .eyebrow { color: var(--wiki-text-muted) !important; }
html[data-theme] .wiki-hero-actions .button-secondary { border-color: var(--wiki-border) !important; color: var(--wiki-text) !important; background: var(--wiki-surface-alt) !important; }
html[data-theme] .wiki-hero-actions .button { border-color: var(--wiki-accent) !important; background: var(--wiki-accent) !important; }
html[data-theme] .wiki-search-panel { margin-top: 16px !important; padding: 18px 20px !important; background: var(--wiki-surface-alt) !important; }
html[data-theme] .wiki-search-panel input { border-color: var(--wiki-border) !important; color: var(--wiki-text) !important; background: var(--wiki-surface) !important; box-shadow: none !important; }
html[data-theme] .wiki-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
html[data-theme] .wiki-jump-nav a { padding: 8px 11px; border: 1px solid var(--wiki-border); border-radius: 5px; color: var(--wiki-text-secondary); background: var(--wiki-surface-alt); text-decoration: none; }
html[data-theme] .wiki-jump-nav a:hover { color: #fff; border-color: var(--wiki-accent); background: var(--wiki-accent); }
html[data-theme] .wiki-section { margin-top: 14px !important; padding: 22px !important; }
html[data-theme] .wiki-card { border: 1px solid var(--wiki-border) !important; border-radius: 7px !important; color: var(--wiki-text) !important; background: var(--wiki-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .wiki-card h3 { color: var(--wiki-text) !important; }
html[data-theme] .wiki-effect { color: var(--wiki-text-muted) !important; }
html[data-theme] .wiki-body .theme-toggle--floating {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  z-index: 20;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid var(--wiki-border) !important;
  border-radius: 7px !important;
  color: var(--wiki-text) !important;
  background: var(--wiki-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-track { display: block; width: 20px; height: 20px; margin: auto; }
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-thumb { display: none; }
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-sun,
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-moon { fill: currentColor; }
html[data-theme] .wiki-body .theme-toggle--floating.is-dark .theme-switch-sun { display: none; }
html[data-theme] .wiki-body .theme-toggle--floating:not(.is-dark) .theme-switch-moon { display: none; }
@media (max-width: 720px) {
  html[data-theme] .wiki-shell { width: min(100% - 24px, 1240px) !important; padding-top: 16px !important; }
  html[data-theme] .wiki-hero { align-items: flex-start; flex-direction: column; padding: 20px !important; }
  html[data-theme] .wiki-search-panel { grid-template-columns: 1fr !important; }
}

/* Variant A final geometry must stay after all legacy rules. */
html[data-theme] .admin-body .admin-header { display: none !important; }
html[data-theme] .admin-body .admin-shell { padding-bottom: 36px !important; }
html[data-theme] .admin-body .admin-command-bar { min-height: 68px !important; margin: 0 -20px 0 !important; padding: 14px 20px !important; background: var(--ui-sidebar) !important; backdrop-filter: none !important; }
html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(280px, 420px) auto !important; min-height: 38px !important; border-radius: 6px !important; }
html[data-theme] .admin-body .admin-main-frame { width: 100% !important; padding: 22px 0 0 !important; background: transparent !important; }
html[data-theme] .admin-body .admin-content { width: 100% !important; min-width: 0; }
html[data-theme] .admin-body .admin-view { display: block; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .admin-view > .panel-head { min-height: 54px; margin: 0 0 12px !important; padding: 0 0 13px !important; border-bottom: 1px solid var(--ui-border) !important; }
html[data-theme] .admin-body .admin-view > .panel-head h2 { margin: 0 !important; font-size: 22px !important; letter-spacing: -.03em; }
html[data-theme] .admin-body .admin-view > .panel-head p { margin: 4px 0 0 !important; font-size: 12px !important; }
html[data-theme] .admin-body .admin-view > .panel-head .button { min-height: 36px; padding: 8px 13px; border-radius: 6px !important; }

html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 0 !important; margin: 0 0 16px !important; overflow: hidden; border: 1px solid var(--ui-border) !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) { min-height: 82px; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-right: 1px solid var(--ui-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):last-child { border-right: 0 !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) strong { margin-top: 5px; color: var(--ui-text) !important; font-size: 24px !important; }

html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) { min-height: 54px; margin: 0 0 12px !important; padding: 8px !important; border: 1px solid var(--ui-border) !important; border-radius: 7px !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .archive-toolbar { display: flex !important; align-items: end; justify-content: space-between; gap: 10px; }
html[data-theme] .admin-body .archive-toolbar > label:first-child { margin-right: auto; }
html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) :is(label, input, select) { margin: 0 !important; }

html[data-theme] .admin-body :is(.booking-list, .maintenance-list, .callback-list-pane .booking-list) { gap: 8px !important; }
html[data-theme] .admin-body .booking-card { padding: 14px 16px !important; border: 1px solid var(--ui-border) !important; border-left: 3px solid var(--ui-accent) !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body .booking-card :is(.booking-key-facts, .booking-progress, .booking-progress-lock) { border-radius: 5px !important; }
html[data-theme] .admin-body .booking-card .booking-key-facts { margin-block: 10px !important; }
html[data-theme] .admin-body .booking-actions { gap: 7px !important; }
html[data-theme] .admin-body .booking-actions .button { min-height: 34px; padding: 7px 11px; border-radius: 5px !important; }

html[data-theme] .admin-body :is(.maintenance-workspace, .callback-workspace) { gap: 16px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel) { top: 84px !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body :is(.maintenance-detail-tabs, .callback-detail-tabs) { border-radius: 5px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-tabs button, .callback-detail-tabs button).is-active { color: #fff !important; background: var(--ui-accent) !important; box-shadow: none !important; }
html[data-theme] .admin-body .site-footer { min-height: 62px; margin-top: 32px !important; padding-inline: 16px !important; border-radius: 7px !important; }

@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-command-bar { min-height: 58px !important; margin-inline: -10px !important; padding: 10px !important; }
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(0, 1fr) !important; width: 100%; }
  html[data-theme] .admin-body .admin-global-search kbd, html[data-theme] .admin-body .admin-command-actions > :not(.theme-toggle--topbar):not(.admin-primary-action) { display: none !important; }
  html[data-theme] .admin-body .admin-command-actions { gap: 6px; }
  html[data-theme] .admin-body .admin-primary-action { white-space: nowrap; }
  html[data-theme] .admin-body .admin-main-frame { padding-top: 14px !important; }
  html[data-theme] .admin-body .admin-view > .panel-head { align-items: flex-start; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar { align-items: stretch; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar > label { width: 100%; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):nth-child(2n) { border-right: 0 !important; }
}

/* Variant A workspace geometry: flat command center, not the former card-based admin shell. */
html[data-theme] .admin-body .admin-header { display: none !important; }
html[data-theme] .admin-body .admin-shell { padding-bottom: 36px !important; }
html[data-theme] .admin-body .admin-command-bar {
  min-height: 68px !important;
  margin: 0 -20px 0 !important;
  padding: 14px 20px !important;
  background: var(--ui-sidebar) !important;
}
html[data-theme] .admin-body .admin-global-search {
  grid-template-columns: auto minmax(280px, 420px) auto !important;
  min-height: 38px !important;
  border-radius: 6px !important;
}
html[data-theme] .admin-body .admin-main-frame { width: 100% !important; padding: 22px 0 0 !important; background: transparent !important; }
html[data-theme] .admin-body .admin-content { width: 100% !important; min-width: 0; }
html[data-theme] .admin-body .admin-view {
  display: block;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .admin-view > .panel-head {
  min-height: 54px;
  margin: 0 0 12px !important;
  padding: 0 0 13px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
html[data-theme] .admin-body .admin-view > .panel-head h2 { margin: 0 !important; font-size: 22px !important; letter-spacing: -.03em; }
html[data-theme] .admin-body .admin-view > .panel-head p { margin: 4px 0 0 !important; font-size: 12px !important; }
html[data-theme] .admin-body .admin-view > .panel-head .button { min-height: 36px; padding: 8px 13px; border-radius: 6px !important; }

html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: 0 !important;
  margin: 0 0 16px !important;
  overflow: hidden;
  border: 1px solid var(--ui-border) !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) {
  min-height: 82px;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):last-child { border-right: 0 !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) strong { margin-top: 5px; color: var(--ui-text) !important; font-size: 24px !important; }

html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) {
  min-height: 54px;
  margin: 0 0 12px !important;
  padding: 8px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 7px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .archive-toolbar { display: flex !important; align-items: end; justify-content: space-between; gap: 10px; }
html[data-theme] .admin-body .archive-toolbar > label:first-child { margin-right: auto; }
html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) :is(label, input, select) { margin: 0 !important; }

html[data-theme] .admin-body :is(.booking-list, .maintenance-list, .callback-list-pane .booking-list) { gap: 8px !important; }
html[data-theme] .admin-body .booking-card {
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-accent) !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body .booking-card :is(.booking-key-facts, .booking-progress, .booking-progress-lock) { border-radius: 5px !important; }
html[data-theme] .admin-body .booking-card .booking-key-facts { margin-block: 10px !important; }
html[data-theme] .admin-body .booking-actions { gap: 7px !important; }
html[data-theme] .admin-body .booking-actions .button { min-height: 34px; padding: 7px 11px; border-radius: 5px !important; }

html[data-theme] .admin-body :is(.maintenance-workspace, .callback-workspace) { gap: 16px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel) {
  top: 84px !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body :is(.maintenance-detail-tabs, .callback-detail-tabs) { border-radius: 5px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-tabs button, .callback-detail-tabs button).is-active { color: #fff !important; background: var(--ui-accent) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.maintenance-contract-row, .callback-list-pane .booking-card) { border-radius: 7px !important; }

html[data-theme] .admin-body .site-footer {
  min-height: 62px;
  margin-top: 32px !important;
  padding-inline: 16px !important;
  border-radius: 7px !important;
}

@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-command-bar { min-height: 58px !important; margin-inline: -10px !important; padding: 10px !important; }
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(0, 1fr) !important; width: 100%; }
  html[data-theme] .admin-body .admin-global-search kbd,
  html[data-theme] .admin-body .admin-command-actions > :not(.theme-toggle--topbar):not(.admin-primary-action) { display: none !important; }
  html[data-theme] .admin-body .admin-command-actions { gap: 6px; }
  html[data-theme] .admin-body .admin-primary-action { white-space: nowrap; }
  html[data-theme] .admin-body .admin-main-frame { padding-top: 14px !important; }
  html[data-theme] .admin-body .admin-view > .panel-head { align-items: flex-start; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar { align-items: stretch; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar > label { width: 100%; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):nth-child(2n) { border-right: 0 !important; }
}

/* Command center redesign: a single admin palette replaces the legacy light-card overrides. */
html[data-theme="dark"] .admin-body {
  --cc-canvas: #0b0f17;
  --cc-sidebar: #0a0e16;
  --cc-surface: #151b26;
  --cc-surface-raised: #1b2230;
  --cc-surface-hover: #222b3a;
  --cc-border: #293344;
  --cc-border-strong: #39465a;
  --cc-text: #f5f7fa;
  --cc-text-muted: #9ca6b5;
  --cc-text-faint: #898c96;
  --cc-primary: #7c3aed;
  --cc-primary-hover: #8b5cf6;
  --cc-primary-soft: rgba(124, 58, 237, 0.16);
  --cc-blue: #4f8cff;
  --cc-green: #32b67a;
  --cc-orange: #f2a93b;
  --cc-red: #ef5a5a;
  color: var(--cc-text);
  background:
    radial-gradient(880px 520px at 88% -12%, rgba(91, 56, 185, 0.13), transparent 66%),
    radial-gradient(620px 400px at 16% 108%, rgba(29, 93, 150, 0.09), transparent 70%),
    var(--cc-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] .admin-body .admin-shell {
  width: auto;
  max-width: none;
  min-height: 100vh;
  margin: 0 0 0 228px;
  padding: 16px 22px 30px;
}

html[data-theme="dark"] .admin-body :is(h1, h2, h3, h4, h5, strong, summary) {
  color: var(--cc-text) !important;
}

html[data-theme="dark"] .admin-body :is(p, small, label, li, td, .muted, .field-help, .panel-head p) {
  color: var(--cc-text-muted) !important;
}

html[data-theme="dark"] .admin-body .admin-command-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  margin: -16px -22px 18px;
  padding: 10px 22px;
  border-bottom: 1px solid rgba(41, 51, 68, 0.9);
  background: rgba(11, 15, 23, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

html[data-theme="dark"] .admin-body .admin-global-search {
  display: grid;
  grid-template-columns: auto minmax(180px, 350px) auto;
  align-items: center;
  gap: 9px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cc-border);
  border-radius: 9px;
  color: var(--cc-text-muted);
  background: #121824;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

html[data-theme="dark"] .admin-body .admin-global-search:focus-within {
  border-color: rgba(139, 92, 246, 0.75);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.14);
}

html[data-theme="dark"] .admin-body .admin-global-search input {
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0 !important;
  color: var(--cc-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px;
}

html[data-theme="dark"] .admin-body .admin-global-search kbd {
  padding: 2px 5px;
  border: 1px solid var(--cc-border-strong);
  border-radius: 4px;
  color: var(--cc-text-faint);
  background: #0d131e;
  font-size: 10px;
}

html[data-theme="dark"] .admin-body .admin-command-icon { font-size: 19px; line-height: 1; }
html[data-theme="dark"] .admin-body .admin-command-actions { display: flex; align-items: center; gap: 8px; }

html[data-theme="dark"] .admin-body .admin-topbar-icon,
html[data-theme="dark"] .admin-body .theme-toggle--topbar {
  display: grid;
  place-items: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 1px solid var(--cc-border) !important;
  border-radius: 8px;
  color: var(--cc-text-muted) !important;
  background: #151b26 !important;
  box-shadow: none !important;
  font-size: 15px;
}

html[data-theme="dark"] .admin-body .admin-topbar-icon:hover,
html[data-theme="dark"] .admin-body .theme-toggle--topbar:hover {
  color: var(--cc-text) !important;
  border-color: var(--cc-border-strong) !important;
  background: var(--cc-surface-hover) !important;
}

html[data-theme="dark"] .admin-body .theme-toggle--topbar .theme-switch-track {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  background: none;
}
html[data-theme="dark"] .admin-body .theme-toggle--topbar .theme-switch-thumb { display: none; }
html[data-theme="dark"] .admin-body .theme-toggle--topbar .theme-switch-sun { display: none; }
html[data-theme="dark"] .admin-body .theme-toggle--topbar .theme-switch-moon { display: block; }
html[data-theme="dark"] .admin-body .admin-primary-action {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c3aed, #6955dc) !important;
  box-shadow: 0 8px 20px rgba(91, 56, 185, 0.3) !important;
}

html[data-theme="dark"] .admin-body .admin-primary-action:hover { background: linear-gradient(135deg, #8b5cf6, #7565ec) !important; }

html[data-theme="dark"] .admin-body .admin-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 228px;
  margin: 0;
  padding: 16px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-right: 1px solid var(--cc-border);
  border-radius: 0;
  background: linear-gradient(180deg, #0a0e16, #0c111a 78%, #0a0e16) !important;
  box-shadow: 18px 0 44px rgba(0, 0, 0, 0.16);
}

html[data-theme="dark"] .admin-body .admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin: 0 4px 24px;
  color: var(--cc-text) !important;
}
html[data-theme="dark"] .admin-body .admin-brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(145deg, #7c3aed, #4f46e5);
  box-shadow: 0 8px 18px rgba(91, 56, 185, 0.38);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.06em;
}
html[data-theme="dark"] .admin-body .admin-brand strong { display: block; font-size: 14px; letter-spacing: -0.02em; }
html[data-theme="dark"] .admin-body .admin-brand small { display: block; margin-top: 1px; color: var(--cc-text-faint) !important; font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; }
html[data-theme="dark"] .admin-body .admin-nav-group-label {
  display: block;
  margin: 0 9px 8px;
  color: var(--cc-text-faint) !important;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-theme="dark"] .admin-body .admin-nav-link {
  position: relative;
  justify-content: flex-start;
  min-height: 37px;
  margin: 1px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--cc-text-muted) !important;
  background: transparent !important;
  box-shadow: none;
  font-size: 12px;
  font-weight: 650;
}

html[data-theme="dark"] .admin-body .admin-nav-link::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 10px;
  border: 1px solid currentColor;
  border-radius: 2px;
  opacity: 0.72;
}
html[data-theme="dark"] .admin-body .admin-nav-link:hover { color: var(--cc-text) !important; background: rgba(255,255,255,0.045) !important; }
html[data-theme="dark"] .admin-body .admin-nav-link.is-active,
html[data-theme="dark"] .admin-body .admin-nav-link[aria-current="page"] {
  color: #f7f4ff !important;
  border-color: rgba(124, 58, 237, 0.2);
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.34), rgba(92, 66, 190, 0.14)) !important;
  box-shadow: inset 2px 0 0 #9c7cff;
}
html[data-theme="dark"] .admin-body .admin-nav-link.is-active::before,
html[data-theme="dark"] .admin-body .admin-nav-link[aria-current="page"]::before { border-color: #b79cff; background: #b79cff; }
html[data-theme="dark"] .admin-body .nav-count-badge { min-width: 18px; min-height: 18px; margin-left: auto; padding: 0 5px; border-radius: 6px; background: #d65353; font-size: 10px; }
html[data-theme="dark"] .admin-body .admin-nav-footer {
  display: grid;
  gap: 4px;
  margin: auto 4px 0;
  padding: 14px 9px 5px;
  border-top: 1px solid var(--cc-border);
}
html[data-theme="dark"] .admin-body .admin-nav-footer strong { font-size: 12px; }
html[data-theme="dark"] .admin-body .admin-nav-footer > span:last-child { color: var(--cc-text-faint) !important; font-size: 11px; }

html[data-theme="dark"] .admin-body .admin-header {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 94px;
  margin-bottom: 16px;
  padding: 18px 20px;
  border: 1px solid var(--cc-border) !important;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(27, 34, 48, 0.98), rgba(19, 25, 36, 0.98)) !important;
  box-shadow: none;
}
html[data-theme="dark"] .admin-body .admin-header::before,
html[data-theme="dark"] .admin-body .admin-header::after { display: none; }
html[data-theme="dark"] .admin-body .admin-header h1 { margin: 2px 0 4px; color: var(--cc-text) !important; font-size: clamp(24px, 2.2vw, 31px); }
html[data-theme="dark"] .admin-body .admin-header .eyebrow { margin-bottom: 4px; color: #a78bfa !important; font-size: 10px; }
html[data-theme="dark"] .admin-body .admin-header .hero-copy { font-size: 13px; line-height: 1.4; }
html[data-theme="dark"] .admin-body .admin-session-card { min-width: 240px; padding: 6px 0 6px 20px; border: 0; border-left: 1px solid var(--cc-border); border-radius: 0; background: transparent !important; }
html[data-theme="dark"] .admin-body .admin-session-card strong { font-size: 14px; }
html[data-theme="dark"] .admin-body .admin-session-card p { max-width: 230px; font-size: 11px; }
html[data-theme="dark"] .admin-body .admin-session-timer { padding: 5px 8px; border: 1px solid rgba(50, 182, 122, 0.22); border-radius: 6px; color: #91e3b9 !important; background: rgba(50, 182, 122, 0.10); font-size: 10px; }

html[data-theme="dark"] .admin-body .admin-app-layout { display: block; }
html[data-theme="dark"] .admin-body.is-authenticated .admin-sidebar { display: none; }
html[data-theme="dark"] .admin-body .admin-content,
html[data-theme="dark"] .admin-body .admin-view,
html[data-theme="dark"] .admin-body .settings-stack { gap: 14px; }

html[data-theme="dark"] .admin-body :is(.panel, .form-block, .service-box, .slot-block, .detail-box, .booking-card, .mail-thread-card, .mail-thread-detail, .mail-thread-list-wrap, .customer-directory-card, .customer-detail-section, .customer-section-card, .customer-profile-status-card, .maintenance-contract-card, .day-plan-card, .day-plan-base-card, .day-plan-return-card, .audit-item, .employee-absence-card, .employee-qualification-card, .employee-time-card, .commercial-card, .commercial-editor, .commercial-pane, .commercial-document-card, .commercial-item-row, .commercial-bundle-item, .commercial-bundle-editor, .commercial-tabs, .commercial-toolbar, .commercial-position-toolbar, .commercial-totals, .commercial-document-ids, .settings-subsection, .settings-auxiliary-panel, .system-backup-panel, .booking-actions-more-panel, .booking-assignment-panel, .booking-attachment-panel, .booking-history-panel, .booking-note-panel, .booking-profile-panel, .booking-share-panel) {
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
  background: var(--cc-surface) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
}
html[data-theme="dark"] .admin-body :is(.booking-quick-fact, .customer-fact-card, .customer-profile-panel, .customer-fact-grid > *, .maintenance-contract-meta > *, .employee-summary-card, .employee-time-summary > *, .commercial-stat-card, .commercial-summary-card, .mail-summary-card, .mail-account-switcher, .team-chat-channel, .team-chat-direct-target, .attachment-section, .field-section, .field-maintenance-checklist, .field-signature-card, .field-signature-section, .field-supplier-card) {
  border-color: var(--cc-border) !important;
  color: var(--cc-text) !important;
  background: #161e2a !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(.booking-quick-fact, .customer-fact-card, .customer-fact-grid > *, .maintenance-contract-meta > *, .employee-summary-card, .employee-time-summary > *, .commercial-stat-card, .commercial-summary-card) :is(strong, span, small, p) { color: var(--cc-text-muted) !important; }
html[data-theme="dark"] .admin-body :is(.booking-quick-fact, .customer-fact-card, .commercial-stat-card) strong { color: var(--cc-text) !important; }
html[data-theme="dark"] .admin-body .panel { padding: 18px; border-radius: 12px; }
html[data-theme="dark"] .admin-body :is(.panel, .booking-card, .metric-card, .detail-box)::before { display: none; }
html[data-theme="dark"] .admin-body .panel-head { align-items: flex-start; gap: 12px; margin-bottom: 14px; }
html[data-theme="dark"] .admin-body .panel-head h2 { font-size: 22px; letter-spacing: -0.03em; }
html[data-theme="dark"] .admin-body .panel-head h3 { font-size: 16px; }
html[data-theme="dark"] .admin-body .panel-head p { max-width: 70ch; margin-top: 3px; font-size: 12px; line-height: 1.45; }

html[data-theme="dark"] .admin-body .metric-card,
html[data-theme="dark"] .admin-body .work-queue-item,
html[data-theme="dark"] .admin-body .calendar-summary .metric-card,
html[data-theme="dark"] .admin-body .maintenance-metric {
  min-height: 78px;
  padding: 14px;
  border: 1px solid var(--cc-border) !important;
  border-radius: 10px;
  color: var(--cc-text) !important;
  background: linear-gradient(145deg, #1a2230, #151b26) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .metric-card span,
html[data-theme="dark"] .admin-body .work-queue-item :is(span, small) { color: var(--cc-text-muted) !important; font-size: 10px; }
html[data-theme="dark"] .admin-body .metric-card strong,
html[data-theme="dark"] .admin-body .work-queue-item strong { color: var(--cc-text) !important; font-size: 26px; }
html[data-theme="dark"] .admin-body .work-queue-item.work-queue-attention { border-left: 3px solid var(--cc-orange) !important; }
html[data-theme="dark"] .admin-body .work-queue-item.work-queue-success { border-left: 3px solid var(--cc-green) !important; }
html[data-theme="dark"] .admin-body .work-queue-item.work-queue-danger { border-left: 3px solid var(--cc-red) !important; }

html[data-theme="dark"] .admin-body :is(input, select, textarea) {
  border-color: var(--cc-border-strong) !important;
  color: var(--cc-text) !important;
  background: #0f1520 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(input, select, textarea)::placeholder { color: var(--cc-text-faint) !important; }
html[data-theme="dark"] .admin-body :is(input, select, textarea):focus { border-color: var(--cc-primary-hover) !important; box-shadow: 0 0 0 3px var(--cc-primary-soft) !important; }
html[data-theme="dark"] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label, .field-grid > label:not(.toggle-field)) {
  border-color: var(--cc-border) !important;
  background: #161d29 !important;
}
html[data-theme="dark"] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label, .field-grid > label:not(.toggle-field)) > span { color: var(--cc-text-faint) !important; }
html[data-theme="dark"] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label) :is(input, select, textarea) { background: transparent !important; }
html[data-theme="dark"] .admin-body .toggle-field { border-color: var(--cc-border) !important; background: #161d29 !important; }

html[data-theme="dark"] .admin-body .button {
  min-height: 36px;
  padding: 8px 12px;
  border: 1px solid rgba(124, 58, 237, 0.62);
  border-radius: 8px;
  color: #fff !important;
  background: linear-gradient(135deg, #7435de, #5f4ec9) !important;
  box-shadow: 0 8px 18px rgba(61, 37, 130, 0.22) !important;
  font-size: 12px;
  font-weight: 720;
}
html[data-theme="dark"] .admin-body .button:hover { border-color: #a78bfa; background: linear-gradient(135deg, #8750ed, #7060df) !important; transform: translateY(-1px); }
html[data-theme="dark"] .admin-body .button-secondary,
html[data-theme="dark"] .admin-body .button-call { border-color: var(--cc-border-strong) !important; color: var(--cc-text) !important; background: #1a2230 !important; box-shadow: none !important; }
html[data-theme="dark"] .admin-body .button-secondary:hover,
html[data-theme="dark"] .admin-body .button-call:hover { border-color: #58677d !important; background: var(--cc-surface-hover) !important; }
html[data-theme="dark"] .admin-body .button-danger { border-color: #aa3e50 !important; background: linear-gradient(135deg, #ad3e51, #8b2e40) !important; }
html[data-theme="dark"] .admin-body .button:disabled { color: #8c97a7 !important; border-color: var(--cc-border) !important; background: #202836 !important; opacity: 0.65; }

html[data-theme="dark"] .admin-body :is(.settings-section-nav, .commercial-tabs, .archive-toolbar, .day-plan-toolbar, .calendar-legend) {
  border-color: var(--cc-border) !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme="dark"] .admin-body .settings-section-tab,
html[data-theme="dark"] .admin-body .commercial-tab { color: var(--cc-text-muted) !important; }
html[data-theme="dark"] .admin-body .settings-section-tab.is-active,
html[data-theme="dark"] .admin-body .commercial-tab.is-active { color: #fff !important; background: var(--cc-primary-soft) !important; box-shadow: inset 0 -2px 0 var(--cc-primary); }

html[data-theme="dark"] .admin-body .booking-card { padding: 16px; border-left: 3px solid var(--cc-blue) !important; border-radius: 10px; }
html[data-theme="dark"] .admin-body .booking-card:hover { border-color: #56667c !important; background: var(--cc-surface-raised) !important; }
html[data-theme="dark"] .admin-body :is(.booking-key-facts, .booking-progress, .booking-progress-lock, .booking-progress-step, .booking-quick-signal, .status-pill, .badge) { border-color: var(--cc-border) !important; color: var(--cc-text-muted) !important; background: var(--ui-surface-alt) !important; }
html[data-theme="dark"] .admin-body .status-pill.confirmed { border-color: rgba(50,182,122,.45) !important; color: #8fe2b6 !important; background: rgba(50,182,122,.13) !important; }
html[data-theme="dark"] .admin-body .status-pill.pending { border-color: rgba(242,169,59,.44) !important; color: #ffd287 !important; background: rgba(242,169,59,.12) !important; }
html[data-theme="dark"] .admin-body .status-pill.rejected { border-color: rgba(239,90,90,.45) !important; color: #ffa2a2 !important; background: rgba(239,90,90,.12) !important; }

html[data-theme="dark"] .admin-body .calendar-toolbar { gap: 8px; }
html[data-theme="dark"] .admin-body .calendar-month-label { min-width: 170px; color: var(--cc-text) !important; font-size: 14px; text-align: center; }
html[data-theme="dark"] .admin-body .calendar-weekdays { gap: 6px; margin-bottom: 6px; }
html[data-theme="dark"] .admin-body .calendar-weekdays span { padding: 0 8px; color: var(--cc-text-faint) !important; font-size: 10px; }
html[data-theme="dark"] .admin-body .calendar-grid { gap: 6px; }
html[data-theme="dark"] .admin-body .calendar-day {
  gap: 8px;
  min-height: 132px;
  padding: 10px;
  border-color: var(--cc-border) !important;
  border-radius: 8px;
  color: var(--cc-text) !important;
  background: #151b26 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .calendar-day:hover { border-color: #4e5c72 !important; background: #1a2230 !important; box-shadow: 0 10px 22px rgba(0,0,0,.18) !important; }
html[data-theme="dark"] .admin-body .calendar-day.is-today { border-color: #7c5cf1 !important; box-shadow: inset 0 0 0 1px rgba(124,58,237,.32) !important; }
html[data-theme="dark"] .admin-body .calendar-day-head strong { font-size: 16px; }
html[data-theme="dark"] .admin-body .calendar-day-head span,
html[data-theme="dark"] .admin-body .calendar-day-more { color: var(--cc-text-faint) !important; font-size: 10px; }
html[data-theme="dark"] .admin-body .calendar-booking-chip { border-color: rgba(79,140,255,.4) !important; border-radius: 6px; color: #dceaff !important; background: rgba(57,111,203,.18) !important; }
html[data-theme="dark"] .admin-body .calendar-booking-chip.is-pending { border-color: rgba(242,169,59,.48) !important; background: rgba(170,111,20,.18) !important; }
html[data-theme="dark"] .admin-body .calendar-booking-chip.is-confirmed { border-color: rgba(50,182,122,.5) !important; background: rgba(33,130,88,.18) !important; }
html[data-theme="dark"] .admin-body .calendar-booking-chip.is-completed { border-color: rgba(124,58,237,.5) !important; background: rgba(92,60,177,.19) !important; }
html[data-theme="dark"] .admin-body .calendar-absence-chip { border-color: rgba(239,90,90,.5) !important; color: #ffb0b0 !important; background: rgba(168,54,67,.18) !important; }
html[data-theme="dark"] .admin-body .calendar-booking-chip { cursor: pointer; transition: transform 150ms ease, filter 150ms ease; }
html[data-theme="dark"] .admin-body .calendar-booking-chip:hover,
html[data-theme="dark"] .admin-body .calendar-booking-chip:focus-visible { outline: 0; filter: brightness(1.16); transform: translateY(-1px); }
html[data-theme="dark"] .admin-body .calendar-detail-panel {
  position: fixed;
  z-index: 80;
  top: 72px;
  right: 22px;
  width: min(380px, calc(100vw - 270px));
  max-height: calc(100vh - 94px);
  padding: 18px;
  overflow-y: auto;
  border: 1px solid var(--cc-border-strong);
  border-radius: 12px;
  color: var(--cc-text);
  background: linear-gradient(160deg, #1b2230, #141b27);
  box-shadow: -18px 24px 50px rgba(0, 0, 0, 0.36);
  animation: calendar-detail-in 180ms ease both;
}
html[data-theme="dark"] .admin-body .calendar-detail-panel.hidden { display: none; }
html[data-theme="dark"] .admin-body .calendar-detail-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html[data-theme="dark"] .admin-body .calendar-detail-head .eyebrow { margin-bottom: 4px; color: #a78bfa !important; font-size: 9px; }
html[data-theme="dark"] .admin-body .calendar-detail-head h3 { font-size: 17px; line-height: 1.3; }
html[data-theme="dark"] .admin-body .calendar-detail-close { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; border: 1px solid var(--cc-border); border-radius: 7px; color: var(--cc-text-muted); background: #111722; font-size: 20px; cursor: pointer; }
html[data-theme="dark"] .admin-body .calendar-detail-close:hover { color: var(--cc-text); background: var(--cc-surface-hover); }
html[data-theme="dark"] .admin-body .calendar-detail-list { display: grid; gap: 0; margin: 14px 0 18px; border-top: 1px solid var(--cc-border); }
html[data-theme="dark"] .admin-body .calendar-detail-list > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--cc-border); }
html[data-theme="dark"] .admin-body .calendar-detail-list :is(dt, dd) { margin: 0; font-size: 12px; line-height: 1.45; }
html[data-theme="dark"] .admin-body .calendar-detail-list dt { color: var(--cc-text-faint); }
html[data-theme="dark"] .admin-body .calendar-detail-list dd { color: var(--cc-text-muted); overflow-wrap: anywhere; }
html[data-theme="dark"] .admin-body .calendar-detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-theme="dark"] .admin-body .calendar-detail-actions .button { display: grid; place-items: center; min-width: 0; text-align: center; text-decoration: none; }
@keyframes calendar-detail-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }

html[data-theme="dark"] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card) { border-color: var(--cc-border) !important; background: #171e2a !important; box-shadow: none !important; }
html[data-theme="dark"] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card):hover,
html[data-theme="dark"] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card).is-active { border-color: #6c55d1 !important; background: #1d2533 !important; }
html[data-theme="dark"] .admin-body :is(.mail-message-card, .team-chat-message, .message-attachment-card, .attachment-card) { border-color: var(--cc-border) !important; color: var(--cc-text) !important; background: var(--ui-surface-alt) !important; }
html[data-theme="dark"] .admin-body :is(.mail-thread-list-wrap, .mail-thread-detail, .team-chat-layout, .team-chat-conversation) { min-height: 0; }

html[data-theme="dark"] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) { border-color: var(--cc-border) !important; color: var(--cc-text) !important; background: var(--cc-surface) !important; }
html[data-theme="dark"] .admin-body :is(th, .commercial-journal-table thead th) { color: var(--cc-text-muted) !important; background: var(--ui-surface-alt) !important; }
html[data-theme="dark"] .admin-body :is(td, .commercial-journal-table td) { border-color: var(--cc-border) !important; color: var(--cc-text-muted) !important; background: transparent !important; }
html[data-theme="dark"] .admin-body .notice { border-color: var(--cc-border) !important; color: var(--cc-text-muted) !important; background: var(--ui-surface-alt) !important; }
html[data-theme="dark"] .admin-body .notice.success { border-color: rgba(50,182,122,.42) !important; color: #b7f0d2 !important; background: rgba(30,104,72,.22) !important; }
html[data-theme="dark"] .admin-body .notice.error { border-color: rgba(239,90,90,.45) !important; color: #ffd1d1 !important; background: rgba(129,38,49,.25) !important; }

/* Responsive behaviour is theme-neutral: both themes share the same structure. */
@media (max-width: 900px) {
  html[data-theme] .admin-body .calendar-detail-panel { top: 66px; right: 12px; width: min(390px, calc(100vw - 24px)); max-height: calc(100vh - 78px); }
}

@media (max-width: 640px) {
  html[data-theme] .admin-body .admin-command-bar { gap: 8px; }
  html[data-theme] .admin-body .admin-command-actions { gap: 5px; }
  html[data-theme] .admin-body .admin-primary-action { width: 38px; min-width: 38px; overflow: hidden; padding: 0; font-size: 0; }
  html[data-theme] .admin-body .admin-primary-action::before { content: "+"; font-size: 20px; }
  html[data-theme] .admin-body .panel { padding: 14px; }
  html[data-theme] .admin-body .calendar-grid { min-width: 680px; overflow: auto; }
}

/* Customer fields use compact inset labels instead of generic form boxes. */
.booking-page .booking-form .field-grid > label:not(.toggle-field) {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 9px 13px 8px;
  border: 1px solid #c8d6dd;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.82);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.booking-page .booking-form .field-grid > label:not(.toggle-field):focus-within {
  border-color: var(--booking-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 106, 167, 0.1);
}

.booking-page .booking-form .field-grid > label:not(.toggle-field) > span {
  color: #587080;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.35;
  text-transform: uppercase;
}

.booking-page .booking-form .field-grid > label:not(.toggle-field) > input,
.booking-page .booking-form .field-grid > label:not(.toggle-field) > select,
.booking-page .booking-form .field-grid > label:not(.toggle-field) > textarea {
  min-height: 34px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}

.booking-page .booking-form .field-grid > label:not(.toggle-field) > input:focus,
.booking-page .booking-form .field-grid > label:not(.toggle-field) > select:focus,
.booking-page .booking-form .field-grid > label:not(.toggle-field) > textarea:focus {
  box-shadow: none;
}

.booking-page .booking-form .field-grid > label:not(.toggle-field) > textarea {
  min-height: 112px;
  padding-top: 8px;
}

.booking-page .booking-form input[type="file"] {
  font-size: 13px;
}

.booking-page .booking-form input[type="file"]::file-selector-button {
  margin: 0 10px 0 0;
  padding: 8px 11px;
  border: 0;
  border-radius: 8px;
  color: var(--booking-navy);
  background: #e6eef2;
  font-weight: 700;
  cursor: pointer;
}

.booking-page .booking-form .field-grid > label .field-help {
  padding-top: 7px;
  border-top: 1px solid rgba(16, 43, 61, 0.08);
}

.booking-page .form-block[data-booking-step="0"] > .field-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.booking-page .contact-half {
  grid-column: span 2;
}

.booking-page .contact-street {
  grid-column: span 3;
}

.booking-page .contact-house,
.booking-page .contact-postal {
  grid-column: span 1;
}

.booking-page .contact-city {
  grid-column: span 3;
}

.booking-page .field-divider {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 -2px;
  color: #536b79;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.booking-page .field-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(16, 43, 61, 0.12);
}

/* Admin workspace refresh */
.admin-body {
  --admin-paper: #ffffff;
  --admin-soft: #f3f6f7;
  --admin-navy: #102b3d;
  --admin-blue: #006aa7;
  --admin-green: #6366f1;
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  background: #e9eff2;
}

.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4 {
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  letter-spacing: -0.025em;
}

.admin-body .admin-shell {
  width: min(1360px, calc(100% - 32px));
  padding: 24px 0 30px;
}

.admin-body .hero,
.admin-body .panel,
.admin-body .detail-box,
.admin-body .metric-card,
.admin-body .booking-card,
.admin-body .site-footer {
  border: 1px solid #cfdae0;
  border-radius: 14px;
  background: var(--admin-paper);
  box-shadow: 0 10px 28px rgba(16, 43, 61, 0.08);
}

.admin-body .hero::before,
.admin-body .hero::after,
.admin-body .panel::before,
.admin-body .detail-box::before,
.admin-body .metric-card::before,
.admin-body .booking-card::before,
.admin-body .service-box::before,
.admin-body .slot-block::before,
.admin-body .slot-day-group::before,
.admin-body .site-footer::before {
  display: none;
}

.admin-body .admin-hero {
  min-height: auto;
  padding: 24px;
  border-left: 5px solid var(--admin-blue);
}

.admin-body .admin-header {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: center;
  gap: 28px;
}

.admin-body .admin-header h1 {
  margin-bottom: 4px;
  color: var(--admin-navy);
  font-size: clamp(32px, 4vw, 46px);
}

.admin-body .admin-header .hero-copy {
  margin: 0;
  font-size: 15px;
}

.admin-body .admin-session-card {
  gap: 5px;
  padding: 16px 18px;
  border: 0;
  border-left: 1px solid #d6e0e4;
  border-radius: 0;
  background: transparent;
}

.admin-body .admin-session-card strong {
  color: var(--admin-navy);
  font-size: 18px;
}

.admin-body .admin-session-card p {
  font-size: 13px;
  line-height: 1.45;
}

.admin-body .admin-session-timer {
  width: fit-content;
  padding: 6px 10px;
  border-radius: 7px;
  color: #47671b;
  background: #edf4e3;
  font-size: 12px;
  font-weight: 800;
}

.admin-body .admin-nav {
  position: sticky;
  top: 10px;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  gap: 3px;
  margin-bottom: 18px;
  padding: 7px;
  overflow-x: auto;
  border-color: var(--admin-navy);
  border-radius: 12px;
  background: var(--admin-navy);
  scrollbar-width: thin;
}

.admin-body .admin-nav-link {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 9px 13px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.74);
  background: transparent;
  font-size: 13px;
  transition: color 0.16s ease, background 0.16s ease;
}

.admin-body .admin-nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.admin-body .admin-nav-link.is-active,
.admin-body .admin-nav-link[aria-current="page"] {
  color: var(--admin-navy);
  background: #fff;
  box-shadow: inset 0 -3px 0 var(--admin-green);
}

/* Internal wiki: compact, searchable reference for office and field staff. */
.wiki-body {
  min-height: 100vh;
  margin: 0;
  color: #153041;
  background: linear-gradient(135deg, #e9f1f4 0%, #f8f7ef 46%, #eaf4ed 100%);
}

.wiki-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 28px 0 44px;
}

.wiki-hero,
.wiki-search-panel,
.wiki-section,
.wiki-help-note {
  border: 1px solid #c9dbe2;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 34px rgba(15, 43, 61, 0.08);
}

.wiki-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 5vw, 48px);
  border-top: 4px solid #75a91f;
  background: linear-gradient(125deg, #102b3d 0%, #174d66 68%, #44785c 100%);
  color: #fff;
}

.wiki-hero h1,
.wiki-section h2 {
  margin: 4px 0 8px;
}

.wiki-hero h1 { font-size: clamp(32px, 5vw, 54px); }
.wiki-hero p { max-width: 650px; margin: 0; color: rgba(255, 255, 255, 0.84); }
.wiki-hero .eyebrow { color: var(--wiki-text-muted, #cce6b1); }
.wiki-hero-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.wiki-hero-actions .button-secondary { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.1); }

.wiki-search-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: end; margin-top: 18px; padding: 20px 22px; }
.wiki-search-panel label { display: grid; gap: 6px; font-weight: 800; }
.wiki-search-panel input { min-height: 48px; }
.wiki-search-panel p { margin: 0 0 10px; color: #58707e; font-size: 14px; }

.wiki-jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.wiki-jump-nav a { padding: 8px 13px; border: 1px solid var(--wiki-border, #c8dbe4); border-radius: 999px; color: var(--wiki-text-secondary, #174d66); background: var(--wiki-surface, rgba(255,255,255,.68)); font-weight: 800; font-size: 13px; text-decoration: none; }
.wiki-jump-nav a:hover { border-color: var(--wiki-accent, #6366f1); color: var(--wiki-text, #102b3d); }

.wiki-section { margin-top: 18px; padding: 24px; }
.wiki-section-head { margin-bottom: 17px; }
.wiki-section-head h2 { color: #102b3d; font-size: 28px; }
.wiki-section-head p { margin: 0; color: #56707f; }
.wiki-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 12px; }
.wiki-card { display: grid; align-content: start; gap: 9px; min-height: 190px; padding: 18px; border: 1px solid #d3e0e5; border-top: 3px solid #67a9c7; border-radius: 12px; background: linear-gradient(155deg, #fff 0%, #f5f9f8 100%); }
.wiki-card:nth-child(3n + 2) { border-top-color: #75a91f; }
.wiki-card:nth-child(3n) { border-top-color: #d28a32; }
.wiki-card h3 { margin: 0; color: #102b3d; font-size: 17px; }
.wiki-card p { margin: 0; color: #415c6b; font-size: 14px; line-height: 1.55; }
.wiki-effect { margin-top: auto; padding-top: 10px; border-top: 1px solid #dce7ea; color: #21667c; font-size: 12px; font-weight: 800; line-height: 1.4; }
.wiki-section-empty { display: none; }
.wiki-help-note { margin-top: 18px; padding: 18px 22px; border-left: 5px solid #d58b1d; color: #3f5865; line-height: 1.55; }

@media (max-width: 680px) {
  .wiki-shell { width: min(100% - 20px, 1180px); padding-top: 10px; }
  .wiki-hero { align-items: start; flex-direction: column; border-radius: 14px; }
  .wiki-search-panel { grid-template-columns: 1fr; border-radius: 14px; }
  .wiki-search-panel p { margin: 0; }
  .wiki-section { padding: 18px; border-radius: 14px; }
  .wiki-card { min-height: 0; }
}

.admin-body .admin-app-layout {
  grid-template-columns: 270px minmax(0, 1fr);
  gap: 18px;
}

.admin-body .admin-sidebar,
.admin-body .admin-content,
.admin-body .settings-stack,
.admin-body .admin-view {
  gap: 16px;
}

.admin-body .panel {
  padding: 20px;
}

.admin-body .panel-head {
  margin-bottom: 16px;
}

.admin-body .panel-head h2 {
  color: var(--admin-navy);
  font-size: clamp(24px, 3vw, 30px);
}

.admin-body .panel-head p {
  font-size: 13px;
}

.admin-body.is-authenticated .login-panel #admin-login > label,
.admin-body.is-authenticated .login-panel #admin-login > .actions > button[type="submit"] {
  display: none;
}

.admin-body.is-authenticated .login-panel #admin-login {
  gap: 10px;
}

.admin-body.is-authenticated .login-panel #admin-login > .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-body.is-authenticated .login-panel #admin-login > .actions .button {
  min-width: 0;
  width: 100%;
  padding: 10px;
}

.admin-body .admin-summary-panel .summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.admin-body .admin-summary-panel .metric-card,
.admin-body .admin-summary-panel .metric-card:nth-child(n) {
  min-height: 76px;
  padding: 12px;
  border: 1px solid #d7e1e5;
  border-radius: 10px;
  background: var(--admin-soft);
  box-shadow: none;
}

.admin-body .admin-summary-panel .metric-card span {
  font-size: 9px;
}

.admin-body .admin-summary-panel .metric-card strong {
  color: var(--admin-navy);
  font-size: 22px;
}

.admin-body .button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: var(--admin-blue);
  box-shadow: 0 7px 16px rgba(0, 91, 145, 0.16);
}

.admin-body .button:hover {
  background: #005b91;
  box-shadow: 0 9px 18px rgba(0, 91, 145, 0.2);
}

.admin-body .button-secondary {
  color: var(--admin-navy);
  border-color: #c9d6dc;
  background: #f7f9fa;
  box-shadow: none;
}

.admin-body .button-secondary:hover {
  background: #eaf0f3;
  box-shadow: none;
}

.admin-body .button-danger {
  color: #fff;
  background: #c95240;
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd8de;
  border-radius: 9px;
  background: #f8fafb;
  box-shadow: none;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: var(--admin-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 106, 167, 0.1);
}

.admin-body .settings-grid > label:not(.toggle-field),
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field),
.admin-body .admin-login-panel > label,
.admin-body #admin-login > label,
.admin-body .archive-toolbar > label,
.admin-body .day-plan-toolbar > label,
.admin-body .mail-thread-form > label {
  display: grid;
  align-content: start;
  gap: 1px;
  min-width: 0;
  padding: 8px 11px 7px;
  border: 1px solid #cbd8de;
  border-radius: 10px;
  background: #f8fafb;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.admin-body .settings-grid > label:not(.toggle-field):focus-within,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field):focus-within,
.admin-body .admin-login-panel > label:focus-within,
.admin-body #admin-login > label:focus-within,
.admin-body .archive-toolbar > label:focus-within,
.admin-body .day-plan-toolbar > label:focus-within,
.admin-body .mail-thread-form > label:focus-within {
  border-color: var(--admin-blue);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0, 106, 167, 0.09);
}

.admin-body .settings-grid > label:not(.toggle-field) > span,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field) > span,
.admin-body .admin-login-panel > label > span,
.admin-body #admin-login > label > span,
.admin-body .archive-toolbar > label > span,
.admin-body .day-plan-toolbar > label > span,
.admin-body .mail-thread-form > label > span {
  color: #5e7480;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.admin-body .settings-grid > label:not(.toggle-field) > input,
.admin-body .settings-grid > label:not(.toggle-field) > select,
.admin-body .settings-grid > label:not(.toggle-field) > textarea,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field) > input,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field) > select,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field) > textarea,
.admin-body .admin-login-panel > label > input,
.admin-body #admin-login > label > input,
.admin-body .archive-toolbar > label > input,
.admin-body .archive-toolbar > label > select,
.admin-body .day-plan-toolbar > label > input,
.admin-body .mail-thread-form > label > input,
.admin-body .mail-thread-form > label > textarea {
  min-height: 31px;
  padding: 4px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.admin-body .settings-grid > label:not(.toggle-field) > textarea,
.admin-body #admin-booking-form .field-grid > label:not(.toggle-field) > textarea,
.admin-body .mail-thread-form > label > textarea {
  min-height: 105px;
  padding-top: 7px;
}

.admin-body .toggle-field {
  min-height: 48px;
  padding: 10px 12px;
  border-color: #cbd8de;
  border-radius: 10px;
  background: #f8fafb;
}

.admin-body .toggle-field input[type="checkbox"] {
  appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 23px;
  min-height: 23px;
  border: 0;
  border-radius: 999px;
  background: radial-gradient(circle at 11px 50%, #fff 0 7px, transparent 8px), #9dafb8;
  box-shadow: inset 0 0 0 1px rgba(16, 43, 61, 0.12);
  cursor: pointer;
}

.admin-body .toggle-field input[type="checkbox"]:checked {
  background: radial-gradient(circle at calc(100% - 11px) 50%, #fff 0 7px, transparent 8px), var(--admin-green);
}

.admin-body .form-block {
  padding: 18px;
  border: 1px solid #d5e0e4;
  border-radius: 12px;
  background: #f8fafb;
  box-shadow: none;
}

.admin-body .booking-card {
  padding: 18px;
  border-left: 4px solid #78a8bd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(16, 43, 61, 0.07);
}

.admin-body .booking-progress {
  border-radius: 10px;
  box-shadow: none;
}

.admin-body .settings-section-nav {
  display: flex;
  gap: 4px;
  padding: 5px;
  overflow-x: auto;
  border: 1px solid #cfdbe0;
  border-radius: 11px;
  background: #eaf0f2;
  scrollbar-width: thin;
}

.admin-body .settings-section-tab {
  appearance: none;
  flex: 0 0 auto;
  min-height: 38px;
  padding: 8px 12px;
  border: 0;
  border-radius: 7px;
  color: #5d727e;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.admin-body .settings-section-tab.is-active {
  color: #fff;
  background: var(--admin-navy);
  box-shadow: inset 0 -3px 0 var(--admin-green);
}

.admin-body .settings-overview-head {
  align-items: center;
  padding-bottom: 2px;
}

.admin-body .settings-subsection {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #d8e4e8;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(247, 251, 252, 0.94), rgba(239, 247, 242, 0.72));
}

.admin-body .settings-subsection > .panel-head {
  margin: 0;
}

.admin-body .settings-backup-compact {
  margin-bottom: 2px;
}

.admin-body .settings-auxiliary-panel {
  animation: admin-section-in 0.2s ease both;
}

.admin-body #admin-settings.has-section-tabs > .form-block {
  display: none;
}

.admin-body #admin-settings.has-section-tabs > .form-block.is-settings-active {
  display: grid;
  animation: admin-section-in 0.2s ease both;
}

.admin-body #admin-settings.has-section-tabs > .actions {
  justify-content: flex-end;
  padding-top: 4px;
}

@keyframes admin-section-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.admin-login-body {
  display: grid;
  place-items: center;
  background: #e9eff2;
}

.admin-login-body .admin-login-shell {
  width: min(940px, calc(100% - 28px));
  padding: 24px 0;
}

.admin-login-body .admin-login-hero {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 410px);
  gap: 0;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: var(--admin-navy);
  box-shadow: 0 24px 60px rgba(16, 43, 61, 0.2);
}

.admin-login-body .admin-login-copy {
  padding: 40px;
}

.admin-login-body .admin-login-copy .eyebrow,
.admin-login-body .admin-login-copy .hero-copy {
  color: rgba(255, 255, 255, 0.68);
}

.admin-login-body .admin-login-copy h1 {
  color: #fff;
  font-size: clamp(38px, 5vw, 52px);
}

.admin-login-body .admin-login-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 10px;
  color: var(--admin-navy);
  background: #fff;
  box-shadow: inset 0 -4px 0 var(--admin-green);
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  font-weight: 800;
}

.admin-login-body .admin-login-panel {
  align-content: center;
  margin: 0;
  padding: 28px;
  border: 0;
  border-radius: 13px;
  background: #fff;
  box-shadow: none;
}

.admin-login-body .admin-login-panel .actions,
.admin-login-body .admin-login-panel .button {
  width: 100%;
}

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

  .admin-body .admin-content {
    order: 1;
  }

  .admin-body .admin-sidebar {
    order: 2;
  }

  .admin-body .admin-sidebar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  }

  .admin-login-body .admin-login-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

.admin-body.is-authenticated .admin-summary-panel .panel-head p {
  display: none;
}

@media (max-width: 720px) {
  .booking-page .form-block[data-booking-step="0"] > .field-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .booking-page .contact-half {
    grid-column: 1 / -1;
  }

  .booking-page .contact-street,
  .booking-page .contact-city {
    grid-column: span 2;
  }

  .booking-page .contact-house,
  .booking-page .contact-postal {
    grid-column: span 1;
  }

  .admin-body .admin-shell {
    width: min(100% - 16px, 1360px);
    padding-top: 8px;
  }

  .admin-body .admin-hero,
  .admin-body .panel {
    padding: 16px;
    border-radius: 12px;
  }

  .admin-body .admin-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .admin-session-card {
    padding: 12px 0 0;
    border-top: 1px solid #d6e0e4;
    border-left: 0;
  }

  .admin-body .admin-nav {
    flex-direction: row;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }

  .admin-body .admin-nav-link {
    width: auto;
  }

  .admin-body .admin-sidebar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .admin-summary-panel .summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .admin-body .settings-section-nav {
    position: sticky;
    top: 92px;
    z-index: 10;
  }

  .admin-body .settings-stack > .panel:first-child {
    overflow: visible;
  }

  .admin-login-body .admin-login-shell {
    width: min(100% - 18px, 940px);
  }

  .admin-login-body .admin-login-copy {
    padding: 26px 20px 22px;
  }

  .admin-login-body .admin-login-panel {
    padding: 22px 18px;
  }
}

/* Public booking page: quiet, workmanlike and focused on the three-step flow. */
.booking-page {
  --booking-paper: #f7f6f2;
  --booking-paper-soft: #eef3f5;
  --booking-navy: #102b3d;
  --booking-blue: #006aa7;
  --booking-green: #75a91f;
  overflow-x: hidden;
  font-family: "Aptos", "Trebuchet MS", sans-serif;
  background-image:
    linear-gradient(180deg, rgba(228, 236, 240, 0.46), rgba(227, 235, 239, 0.62)),
    url("/background-neuruppin.jpg");
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.booking-page::before,
.booking-page::after {
  display: none;
}

.booking-page .page-shell {
  width: min(1160px, calc(100% - 40px));
  padding: 36px 0 28px;
}

.booking-page h1,
.booking-page h2,
.booking-page h3 {
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  letter-spacing: -0.025em;
}

.booking-page .hero,
.booking-page .panel,
.booking-page .form-block,
.booking-page .service-box,
.booking-page .slot-block,
.booking-page .metric-card,
.booking-page .detail-box,
.booking-page .slot-day-group,
.booking-page .site-footer {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.booking-page .hero,
.booking-page .panel {
  border: 1px solid rgba(16, 43, 61, 0.12);
  border-radius: 20px;
  background: rgba(247, 246, 242, 0.96);
  box-shadow: 0 18px 48px rgba(16, 43, 61, 0.14);
}

.booking-page .hero::before,
.booking-page .panel::before {
  height: 3px;
  background: linear-gradient(90deg, var(--booking-blue) 0 76%, var(--booking-green) 76% 100%);
  opacity: 1;
}

.booking-page .booking-hero {
  max-width: 920px;
  padding: 30px 34px 32px;
  margin-bottom: 22px;
  background:
    linear-gradient(100deg, rgba(247, 246, 242, 0.98) 0 64%, rgba(234, 241, 244, 0.96) 100%);
}

.booking-page .booking-hero::after {
  display: none;
}

.booking-page .hero-brand-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.booking-page .brand-mark {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  color: #fff;
  background: var(--booking-navy);
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.03em;
  box-shadow: inset 0 -3px 0 var(--booking-green);
}

.booking-page .eyebrow,
.booking-page .section-kicker {
  margin: 0;
  color: #547080;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.booking-page .booking-hero h1 {
  max-width: 18ch;
  margin-bottom: 14px;
  color: var(--booking-navy);
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.02;
  overflow-wrap: break-word;
}

.booking-page .hero-copy {
  max-width: 58ch;
  margin-bottom: 20px;
  color: #405968;
  font-size: 17px;
  line-height: 1.6;
}

.booking-page .hero-meta {
  align-items: center;
  gap: 12px 22px;
}

.booking-page .hero-pill {
  justify-content: flex-start;
  min-height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--booking-navy);
  background: transparent;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.booking-page .hero-pill::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-right: 9px;
  border-radius: 50%;
  background: var(--booking-green);
  box-shadow: 0 0 0 4px rgba(117, 169, 31, 0.14);
}

.booking-page .hero-assurance {
  color: #5b6d77;
  font-size: 13px;
}

.booking-page .layout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 22px;
}

.booking-page .booking-panel {
  padding: 28px 32px 32px;
}

.booking-page .booking-panel > .panel-head {
  align-items: end;
  margin-bottom: 4px;
  padding-bottom: 24px;
}

.booking-page .panel-head h2 {
  margin-top: 5px;
  color: var(--booking-navy);
  font-size: clamp(26px, 3vw, 34px);
}

.booking-page .booking-panel > .panel-head > p {
  max-width: 30ch;
  padding-left: 18px;
  border-left: 2px solid var(--booking-green);
  color: #536b79;
  font-size: 14px;
}

.booking-page .booking-form {
  gap: 0;
}

.booking-page .form-block {
  gap: 22px;
  padding: 28px 0 30px;
  border: 0;
  border-top: 1px solid rgba(16, 43, 61, 0.14);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.booking-page .form-section-head {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.booking-page .step-number {
  display: grid;
  place-items: center;
  width: 44px;
  height: 34px;
  border-left: 4px solid var(--booking-blue);
  color: var(--booking-blue);
  background: #e7f0f4;
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.booking-page .form-block.is-complete .step-number {
  border-color: var(--booking-green);
  color: #4d7610;
  background: #edf4e3;
}

.booking-page .form-section-head h3 {
  color: var(--booking-navy);
  font-size: 21px;
}

.booking-page .form-section-head p {
  margin: 5px 0 0;
  color: #607482;
  font-size: 14px;
  line-height: 1.5;
}

.booking-page .field-grid,
.booking-page .service-fields {
  gap: 16px;
}

.booking-page label {
  gap: 7px;
}

.booking-page label span {
  color: #243e4d;
  font-size: 13px;
  font-weight: 700;
}

.booking-page input,
.booking-page select,
.booking-page textarea {
  min-height: 52px;
  padding: 13px 14px;
  border: 1px solid #c8d6dd;
  border-radius: 10px;
  color: var(--booking-navy);
  background: #fff;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.booking-page input:focus,
.booking-page select:focus,
.booking-page textarea:focus {
  border-color: var(--booking-blue);
  box-shadow: 0 0 0 3px rgba(0, 106, 167, 0.12);
  transform: none;
}

.booking-page textarea {
  min-height: 130px;
}

.booking-page .field-help {
  color: #607482;
  font-size: 13px;
}

.booking-page .service-box {
  gap: 18px;
  padding: 20px;
  border: 1px solid #d2dfe4;
  border-radius: 14px;
  background: var(--booking-paper-soft);
  box-shadow: none;
}

.booking-page .service-box::before,
.booking-page .slot-block::before,
.booking-page .metric-card::before,
.booking-page .detail-box::before,
.booking-page .slot-day-group::before,
.booking-page .site-footer::before {
  display: none;
}

.booking-page .service-box-head h3 {
  font-size: 17px;
}

.booking-page .button {
  min-height: 50px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  background: var(--booking-blue);
  box-shadow: 0 8px 18px rgba(0, 86, 137, 0.18);
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.booking-page .button:hover {
  background: #005b91;
  box-shadow: 0 10px 22px rgba(0, 86, 137, 0.22);
  transform: translateY(-1px);
}

.booking-page .button:active {
  transform: translateY(0);
}

.booking-page .button-secondary {
  color: var(--booking-navy);
  border-color: #c8d6dd;
  background: #fff;
  box-shadow: none;
}

.booking-page .button-secondary:hover {
  background: #edf3f6;
  box-shadow: none;
}

.booking-page .slot-block {
  gap: 16px;
  padding: 20px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.booking-page .slot-head {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(16, 43, 61, 0.12);
}

.booking-page .slot-head h3 {
  color: var(--booking-navy);
}

.booking-page .slot-day-group {
  border: 1px solid #ccd9df;
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.booking-page .slot-day-group summary {
  padding: 15px 16px;
}

.booking-page .slot-day-group[open] summary {
  background: #edf3f5;
}

.booking-page .slot-time-option span {
  border: 1px solid #d3dee3;
  border-radius: 10px;
  background: #fff;
  box-shadow: none;
}

.booking-page .slot-time-option:hover span {
  border-color: #8eabb9;
  box-shadow: none;
}

.booking-page .slot-time-option input:checked + span {
  border-color: var(--booking-blue);
  background: #e9f3f7;
  box-shadow: inset 4px 0 0 var(--booking-green);
  transform: none;
}

.booking-page .recommendation-pill,
.booking-page .load-pill,
.booking-page .slot-recommendation {
  border-radius: 6px;
  box-shadow: none;
}

.booking-page .submit-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 8px;
  padding: 20px;
  border-radius: 14px;
  color: #fff;
  background: var(--booking-navy);
}

.booking-page .submit-bar p {
  max-width: 47ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  line-height: 1.55;
}

.booking-page .submit-bar .button {
  flex: 0 0 auto;
  color: var(--booking-navy);
  background: #fff;
  box-shadow: none;
}

.booking-page .submit-bar .button:hover {
  background: #edf4e4;
}

.booking-page .preview-panel {
  top: 22px;
  padding: 26px 24px;
  border-color: rgba(16, 43, 61, 0.2);
  color: #fff;
  background: var(--booking-navy);
  box-shadow: 0 18px 48px rgba(16, 43, 61, 0.22);
}

.booking-page .preview-panel::before {
  background: linear-gradient(90deg, var(--booking-blue) 0 70%, var(--booking-green) 70% 100%);
}

.booking-page .preview-panel .panel-head {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

.booking-page .preview-panel .section-kicker {
  color: #a8c96c;
}

.booking-page .preview-panel .panel-head h2 {
  margin-top: 2px;
  color: #fff;
}

.booking-page .preview-panel .panel-head p:last-child {
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}

.booking-page .preview-panel .preview-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.booking-page .preview-panel .metric-card,
.booking-page .preview-panel .metric-card:nth-child(n) {
  gap: 5px;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.booking-page .preview-panel .metric-wide {
  grid-column: 1 / -1;
}

.booking-page .preview-panel .metric-card span {
  color: rgba(255, 255, 255, 0.56);
  font-size: 10px;
  letter-spacing: 0.13em;
}

.booking-page .preview-panel .metric-card strong {
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
}

.booking-page .preview-panel .detail-box {
  margin-top: 20px;
  padding: 2px 0 2px 16px;
  border: 0;
  border-left: 3px solid var(--booking-green);
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.booking-page .preview-panel .detail-box h3 {
  margin-bottom: 7px;
  font-size: 16px;
}

.booking-page .preview-panel .compact-list {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  line-height: 1.55;
}

.booking-page .notice {
  border: 1px solid #cad8de;
  border-radius: 10px;
  background: #f2f6f7;
  box-shadow: none;
}

.booking-page .site-footer {
  margin-top: 22px;
  padding: 18px 4px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 1px 5px rgba(16, 43, 61, 0.7);
}

.booking-page .footer-meta,
.booking-page .footer-meta strong,
.booking-page .footer-links {
  color: #fff;
}

.booking-page .footer-links a {
  text-decoration-thickness: 1px;
}

@media (max-width: 980px) {
  .booking-page .layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-page .preview-panel {
    position: static;
  }
}

@media (max-width: 720px) {
  .booking-page {
    background-attachment: scroll;
  }

  .booking-page .page-shell {
    width: min(100% - 20px, 1160px);
    padding: 18px 0 22px;
  }

  .booking-page .booking-hero,
  .booking-page .booking-panel,
  .booking-page .preview-panel {
    padding: 22px 18px;
    border-radius: 16px;
  }

  .booking-page .booking-hero h1 {
    max-width: 100%;
    font-size: clamp(31px, 9vw, 42px);
    line-height: 1.06;
  }

  .booking-page .hero-brand-row {
    margin-bottom: 16px;
  }

  .booking-page .hero-meta,
  .booking-page .booking-panel > .panel-head,
  .booking-page .submit-bar {
    align-items: stretch;
    flex-direction: column;
  }

  .booking-page .hero-assurance {
    padding-left: 18px;
  }

  .booking-page .booking-panel > .panel-head > p {
    max-width: none;
    padding: 10px 0 0;
    border-top: 1px solid rgba(16, 43, 61, 0.12);
    border-left: 0;
  }

  .booking-page .form-block {
    padding: 24px 0 26px;
  }

  .booking-page .form-section-head {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
  }

  .booking-page .step-number {
    width: 40px;
  }

  .booking-page .service-box {
    padding: 16px;
  }

  .booking-page .booking-actions .button,
  .booking-page .submit-bar .button {
    width: 100%;
  }

  .booking-page .slot-day-summary {
    align-items: flex-start;
  }

  .booking-page .preview-panel .preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .booking-page .site-footer {
    padding-left: 2px;
    padding-right: 2px;
  }
}

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

/* Dark interface: a dedicated slate-and-teal palette, not an inverted light theme. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.45rem;
  padding: 0.42rem 0.65rem;
  border: 1px solid rgba(104, 143, 160, 0.42);
  border-radius: 999px;
  color: #1a4255;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0.45rem 1.1rem rgba(27, 66, 84, 0.12);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 0.65rem 1.3rem rgba(27, 66, 84, 0.18); }
.theme-toggle svg { width: 1rem; height: 1rem; fill: currentColor; }
.admin-session-card .theme-toggle { margin-top: 0.75rem; }
.field-header-actions .theme-toggle,
.hero-brand-row .theme-toggle,
.wiki-hero-actions .theme-toggle { margin-left: auto; }
.theme-toggle--floating { position: fixed; z-index: 100; top: 0.9rem; right: 0.9rem; }

html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body {
  color: #e6f0f4;
  background: #0d1b24;
}

html[data-theme="dark"] .admin-body,
html[data-theme="dark"] .field-body,
html[data-theme="dark"] .public-body,
html[data-theme="dark"] .wiki-body,
html[data-theme="dark"] .offer-body,
html[data-theme="dark"] .ids-launch-body {
  color: #e6f0f4;
  background:
    radial-gradient(800px 460px at 100% -12%, rgba(25, 142, 165, 0.17), transparent 68%),
    radial-gradient(620px 380px at -8% 22%, rgba(113, 157, 61, 0.13), transparent 72%),
    #0d1b24;
}

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, strong, th, label, summary) { color: #f2f8fa; }
html[data-theme="dark"] :is(p, small, li, td, .muted, .field-help, .panel-head p) { color: #b7c8d1; }
html[data-theme="dark"] a:not(.button) { color: #72c6eb; }

html[data-theme="dark"] :is(.hero, .panel, .detail-box, .metric-card, .booking-card, .site-footer, .login-panel, .admin-summary-panel, .field-header, .field-time-panel, .field-job-card, .field-completion-form, .field-completed-report, .mail-thread-card, .customer-fact-card, .customer-section-card, .customer-profile-item, .wiki-search-panel, .wiki-section, .wiki-help-note, .ids-launch-card, .offer-card, .status-card, .commercial-card, .commercial-editor, .commercial-pane, .commercial-recipient-card, .commercial-document-attachments, .commercial-pagination, .commercial-item-row, .commercial-bundle-item) {
  border-color: #345264 !important;
  color: #e6f0f4;
  background: linear-gradient(145deg, #182c38, #132530) !important;
  box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.2);
}

html[data-theme="dark"] :is(.admin-login-panel, .admin-user-card, .archive-customer-card, .attachment-card, .booking-actions-more-panel, .booking-assignment-panel, .booking-attachment-panel, .booking-history-panel, .booking-note-panel, .booking-panel, .booking-profile-panel, .booking-share-panel, .customer-create-panel, .customer-detail-section, .customer-directory-card, .customer-profile-status-card, .day-plan-base-card, .day-plan-card, .day-plan-return-card, .employee-absence-card, .employee-absence-form, .employee-absence-section, .employee-qualification-card, .employee-qualification-form, .employee-qualification-section, .employee-time-card, .employee-time-form, .employee-time-section, .field-maintenance-checklist, .field-section, .field-signature-card, .field-signature-section, .field-supplier-card, .legal-card, .legal-panel, .mail-summary-card, .mail-thread-form, .mail-thread-section, .maintenance-contract-card, .preview-panel, .service-box, .settings-auxiliary-panel, .settings-section, .settings-subsection, .system-backup-panel, .tenant-card, .tenant-editor-panel, .tenant-list-panel) {
  border-color: #345264 !important;
  color: #e6f0f4;
  background: linear-gradient(145deg, #182c38, #132530) !important;
}

html[data-theme="dark"] .admin-body .admin-hero,
html[data-theme="dark"] .booking-hero,
html[data-theme="dark"] .wiki-hero {
  border-color: #3a6273 !important;
  background: linear-gradient(118deg, #183542, #132a36 62%, #1a3946) !important;
}

html[data-theme="dark"] .admin-session-card {
  border-color: #3a6273 !important;
  background: linear-gradient(145deg, #18303b, #172b31) !important;
}

html[data-theme="dark"] .admin-body .admin-nav {
  border-color: #34596b;
  background: linear-gradient(115deg, #102733, #0d202a 62%, #153542);
  box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.28);
}

html[data-theme="dark"] .admin-body .admin-nav-link:not(.is-active) { color: #c8dce4; background: rgba(255, 255, 255, 0.055); }
html[data-theme="dark"] .admin-body .admin-nav-link:not(.is-active):hover { color: #fff; background: rgba(111, 191, 219, 0.17); }
html[data-theme="dark"] .admin-body .admin-nav-link.is-active,
html[data-theme="dark"] .admin-body .admin-nav-link[aria-current="page"] { color: #fff; background: #24566a; }

html[data-theme="dark"] :is(input, select, textarea) {
  border-color: #416478 !important;
  color: #edf6f8 !important;
  background: #10232d !important;
  box-shadow: none;
}
html[data-theme="dark"] :is(input, select, textarea)::placeholder { color: #839ca9; }
html[data-theme="dark"] :is(input, select, textarea):focus { border-color: #53b9df !important; box-shadow: 0 0 0 3px rgba(83, 185, 223, 0.18) !important; }

html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] .button-call,
html[data-theme="dark"] .theme-toggle {
  border-color: #4a7183 !important;
  color: #e8f3f6 !important;
  background: linear-gradient(145deg, #203b49, #19323e) !important;
}
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button-call:hover,
html[data-theme="dark"] .theme-toggle:hover { border-color: #6dc6e6 !important; background: #264c5c !important; }
html[data-theme="dark"] .button { box-shadow: 0 0.4rem 0.9rem rgba(0, 0, 0, 0.2); }

html[data-theme="dark"] .commercial-position-toolbar,
html[data-theme="dark"] .commercial-bundle-editor,
html[data-theme="dark"] .commercial-totals,
html[data-theme="dark"] .commercial-document-ids,
html[data-theme="dark"] .commercial-toolbar,
html[data-theme="dark"] .commercial-tabs,
html[data-theme="dark"] .commercial-bundle-summary {
  border-color: #3b6475 !important;
  color: #dcecf1;
  background: linear-gradient(135deg, #17313e, #1a332f) !important;
}
html[data-theme="dark"] .commercial-internal-total,
html[data-theme="dark"] .commercial-bundle-summary { color: #b9df91 !important; }
html[data-theme="dark"] .commercial-card:hover,
html[data-theme="dark"] .mail-thread-card:hover { background: #1c1e24 !important; }
html[data-theme="dark"] .mail-thread-card.is-active { background: #26284f !important; }
html[data-theme="dark"] .commercial-document-card.is-cancellation { border-left-color: #e06b56; background: linear-gradient(145deg, #3a2528, #1c2931) !important; }
html[data-theme="dark"] .commercial-document-card.is-cancelled { border-left-color: #75909d; background: #172a34 !important; }
html[data-theme="dark"] .commercial-items-head { color: #a9bfca; }
html[data-theme="dark"] .commercial-purchase-field input,
html[data-theme="dark"] .commercial-markup-field input { border-color: #5a815b !important; background: #162f2c !important; }

html[data-theme="dark"] :is(table, .commercial-journal-table, .commercial-daily-table) { border-color: #365666; color: #e3eef2; }
html[data-theme="dark"] :is(th, .commercial-journal-table thead th) { background: #193540 !important; color: #eaf5f8 !important; }
html[data-theme="dark"] :is(td, .commercial-journal-table td) { border-color: #2d4a59 !important; }

html[data-theme="dark"] :is(.notice, .notice.success, .notice.info) { border-color: #3d7662; color: #c7eadb !important; background: #15352f !important; }
html[data-theme="dark"] :is(.notice.warning, .notice.error) { border-color: #8a5a42; color: #ffd5b5 !important; background: #3b2724 !important; }
html[data-theme="dark"] .status-pill,
html[data-theme="dark"] .badge { border-color: #4e7180; background: #213c49; color: #e5f2f5; }

html[data-theme="dark"] .booking-page::before { opacity: 0.25; }
html[data-theme="dark"] .booking-page .booking-form .field-grid > label:not(.toggle-field) { border-color: #3b5f70; background: #142934; }
html[data-theme="dark"] .booking-page .booking-form .field-grid > label:not(.toggle-field):focus-within { border-color: #58bee1; background: #16323f; }
html[data-theme="dark"] .wiki-card { border-color: #242731; background: #16171c; }
html[data-theme="dark"] .wiki-jump-nav a { border-color: #333743; color: #a0a3b1; background: #101116; }
html[data-theme="dark"] .wiki-card p,
html[data-theme="dark"] .wiki-section-head p,
html[data-theme="dark"] .wiki-search-panel p { color: #b7c8d1; }

@media (max-width: 760px) {
  .commercial-bundle-picker { grid-template-columns: 1fr; }
  .commercial-bundle-item { grid-template-columns: 1fr auto; }
  .commercial-bundle-item .button { grid-column: 1 / -1; }
  .commercial-bundle-summary { align-items: flex-start; flex-direction: column; }
}

/* Progressive booking keeps the request compact and avoids a long form wall. */
.booking-page .booking-stepper {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 8px;
  padding: 6px;
  border: 1px solid #d1dde2;
  border-radius: 14px;
  background: #e9eff2;
}

.booking-page .booking-stepper[hidden] {
  display: none;
}

.booking-page .booking-step {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 52px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  color: #607482;
  background: transparent;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.booking-page .booking-step span {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #b9cbd3;
  border-radius: 8px;
  color: #526a78;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 800;
}

.booking-page .booking-step strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.booking-page .booking-step.is-active {
  color: var(--booking-navy);
  background: #fff;
  box-shadow: 0 4px 12px rgba(16, 43, 61, 0.08);
}

.booking-page .booking-step.is-active span {
  border-color: var(--booking-blue);
  color: #fff;
  background: var(--booking-blue);
}

.booking-page .booking-step.is-complete:not(.is-active) {
  color: #446a16;
}

.booking-page .booking-step.is-complete:not(.is-active) span {
  border-color: #9abb68;
  color: #446a16;
  background: #edf4e3;
}

.booking-page .booking-step:disabled {
  cursor: default;
  opacity: 0.58;
}

.booking-page .booking-form.is-wizard .form-block {
  display: none;
}

.booking-page .booking-form.is-wizard .form-block.is-active {
  display: grid;
  animation: booking-step-in 0.22s ease both;
}

.booking-page .booking-form.is-wizard .form-section-head {
  grid-template-columns: minmax(0, 1fr);
  padding-right: min(12vw, 90px);
}

.booking-page .booking-form.is-wizard .form-section-head h3 {
  font-size: clamp(24px, 3vw, 30px);
}

.booking-page .booking-form.is-wizard .form-block.is-active {
  padding-top: 30px;
  border-top: 0;
}

.booking-page .step-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 22px;
  border-top: 1px solid rgba(16, 43, 61, 0.12);
}

.booking-page .step-actions[hidden] {
  display: none;
}

.booking-page .step-actions-end {
  justify-content: flex-end;
}

.booking-page .step-actions > span {
  margin-right: auto;
  color: #607482;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booking-page .booking-actions.step-actions {
  flex-wrap: nowrap;
}

.booking-page .booking-actions.step-actions .button:last-child {
  margin-left: auto;
}

@keyframes booking-step-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 720px) {
  .booking-page .booking-stepper {
    position: sticky;
    top: 8px;
    z-index: 5;
    gap: 4px;
    margin-left: -8px;
    margin-right: -8px;
    box-shadow: 0 8px 20px rgba(16, 43, 61, 0.12);
  }

  .booking-page .booking-step {
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 7px 6px;
  }

  .booking-page .booking-step span {
    width: 27px;
    height: 27px;
  }

  .booking-page .booking-step strong {
    font-size: 11px;
  }

  .booking-page .booking-form.is-wizard .form-section-head {
    padding-right: 0;
  }

  .booking-page .step-actions,
  .booking-page .booking-actions.step-actions {
    align-items: stretch;
    flex-direction: column-reverse;
  }

  .booking-page .step-actions .button,
  .booking-page .booking-actions.step-actions .button {
    width: 100%;
    margin-left: 0;
  }

  .booking-page .step-actions > span {
    margin: 0;
    text-align: center;
  }
}

/* Booking interface refinement: grouped inputs, direct service choices and calm slot selection. */
.booking-page .contact-sections {
  display: grid;
  gap: 26px;
}

.booking-page .contact-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.booking-page .contact-section legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  margin-bottom: 10px;
  padding: 0;
}

.booking-page .contact-section legend > span {
  color: var(--booking-navy);
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.booking-page .contact-section legend > small {
  color: #667b87;
  font-size: 12px;
}

.booking-page .contact-input-grid {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #cbd8de;
  border-radius: 15px;
  background: #cbd8de;
}

.booking-page .contact-person-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-page .contact-address-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.booking-page .contact-input-grid > label {
  display: grid;
  align-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 72px;
  padding: 11px 15px 9px;
  background: rgba(255, 255, 255, 0.95);
  transition: background 0.18s ease, box-shadow 0.18s ease;
}

.booking-page .contact-input-grid > label:focus-within {
  position: relative;
  z-index: 1;
  background: #fff;
  box-shadow: inset 4px 0 0 var(--booking-blue);
}

.booking-page .contact-input-grid > label > span {
  color: #607482;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.booking-page .contact-input-grid > label > span small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.booking-page .contact-input-grid > label > input {
  width: 100%;
  min-height: 34px;
  padding: 3px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}

.booking-page .contact-input-grid > label > input:focus {
  box-shadow: none;
}

.booking-page .contact-customer-number {
  grid-column: 1 / -1;
}

.booking-page .contact-address-grid .contact-street {
  grid-column: span 4;
}

.booking-page .contact-address-grid .contact-house,
.booking-page .contact-address-grid .contact-postal {
  grid-column: span 2;
}

.booking-page .contact-address-grid .contact-city {
  grid-column: span 4;
}

.booking-page .contact-section-note {
  margin: 9px 2px 0;
  color: #607482;
  font-size: 12px;
  line-height: 1.5;
}

.booking-page .service-request-grid {
  grid-template-columns: minmax(0, 1fr);
}

.booking-page .service-category-control {
  position: relative;
  display: grid;
  gap: 12px;
}

.booking-page .service-choice-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.booking-page .service-choice-head strong {
  color: var(--booking-navy);
  font-size: 16px;
}

.booking-page .service-choice-head span {
  color: #667b87;
  font-size: 12px;
}

.booking-page .service-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.booking-page .service-choice {
  appearance: none;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  min-height: 86px;
  padding: 13px 14px;
  border: 1px solid #cad8de;
  border-radius: 12px;
  color: var(--booking-navy);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 4px 12px rgba(16, 43, 61, 0.04);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.booking-page .service-choice:hover {
  border-color: #90aeba;
  background: #fff;
  box-shadow: 0 8px 18px rgba(16, 43, 61, 0.08);
  transform: translateY(-1px);
}

.booking-page .service-choice:focus-visible {
  outline: 3px solid rgba(0, 106, 167, 0.18);
  outline-offset: 2px;
}

.booking-page .service-choice.is-selected {
  border-color: var(--booking-blue);
  background: #edf5f7;
  box-shadow: inset 4px 0 0 var(--booking-green);
}

.booking-page .service-choice-index {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #4f6876;
  background: #e7eef1;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.booking-page .service-choice.is-selected .service-choice-index {
  color: #fff;
  background: var(--booking-blue);
}

.booking-page .service-choice-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.booking-page .service-choice-copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.booking-page .service-choice-copy small,
.booking-page .service-choice-duration {
  color: #607482;
  font-size: 11px;
  line-height: 1.4;
}

.booking-page .service-choice-duration {
  max-width: 70px;
  text-align: right;
}

.booking-page .service-choice-grid .service-choice:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.booking-page .service-category-control.is-enhanced .service-category-fallback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.booking-page .service-box .service-fields {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid #ccd9df;
  border-radius: 12px;
  background: #ccd9df;
}

.booking-page .service-box .service-fields > label:not(.toggle-field) {
  min-height: 68px;
  padding: 9px 13px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.booking-page .service-box .service-fields > label:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.booking-page .briefing-field {
  border-color: #b9ccd4 !important;
  box-shadow: inset 4px 0 0 var(--booking-blue);
}

.booking-page .attachment-dropzone {
  padding: 18px !important;
  border: 1px dashed #8eabb9 !important;
  background: #f4f8f9 !important;
  box-shadow: none !important;
}

.booking-page .attachment-dropzone > span small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.booking-page .slot-day-groups {
  gap: 12px;
}

.booking-page .slot-day-group {
  border-color: #c7d6dc;
  border-radius: 14px;
}

.booking-page .slot-day-group summary {
  position: relative;
  padding: 17px 48px 17px 18px;
}

.booking-page .slot-day-group summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 18px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: #4e6876;
  background: #e2ecef;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-50%);
}

.booking-page .slot-day-group[open] summary::after {
  content: "−";
}

.booking-page .slot-time-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
  background: #f3f7f8;
}

.booking-page .slot-time-option > input + .slot-option-copy {
  display: grid;
  gap: 7px;
  min-height: 150px;
  padding: 15px;
  border: 1px solid #cad8de;
  border-radius: 12px;
  background: #fff;
}

.booking-page .slot-time-option .slot-option-time-row {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.booking-page .slot-time-option .slot-option-time-row strong {
  color: var(--booking-navy);
  font-size: 23px;
  letter-spacing: -0.03em;
}

.booking-page .slot-time-option .slot-option-arrival-label {
  color: #627783;
  font-size: 10px;
  line-height: 1.3;
  text-transform: uppercase;
}

.booking-page .slot-time-option .slot-option-window {
  color: #294757;
  font-size: 12px;
  font-weight: 700;
}

.booking-page .slot-time-option .slot-option-meta {
  margin-top: auto;
  padding-top: 7px;
  border-top: 1px solid #e0e7ea;
  color: #667b87;
  font-size: 11px;
}

.booking-page .slot-time-option .slot-recommendation {
  padding: 4px 8px;
  color: #4b681d;
  background: #edf4e3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.booking-page .slot-time-option input:checked + .slot-option-copy {
  border-color: var(--booking-blue);
  background: #edf5f7;
  box-shadow: inset 4px 0 0 var(--booking-green), 0 8px 18px rgba(16, 43, 61, 0.08);
}

.booking-page .slot-more-days {
  display: flex;
  justify-content: center;
  padding-top: 4px;
}

.booking-page .slot-more-days .button {
  min-height: 44px;
  padding: 10px 16px;
}

.booking-page .selected-slot-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 17px 18px;
  border: 1px solid #9bbf6b;
  border-radius: 14px;
  background: #f0f6e8;
}

.booking-page .selected-slot-summary.hidden {
  display: none;
}

.booking-page .selected-slot-check {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--booking-green);
}

.booking-page .selected-slot-check::before {
  content: "";
  width: 14px;
  height: 8px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translateY(-2px) rotate(-45deg);
}

.booking-page .selected-slot-summary div {
  display: grid;
  gap: 3px;
}

.booking-page .selected-slot-summary small {
  color: #607482;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.booking-page .selected-slot-summary strong {
  color: var(--booking-navy);
  font-size: 16px;
}

.booking-page .selected-slot-summary p {
  margin: 0;
  color: #526a77;
  font-size: 12px;
}

.booking-page .submit-bar .button:disabled {
  color: rgba(16, 43, 61, 0.54);
  background: #dce4e7;
  cursor: not-allowed;
}

/* Admin command center: visible priorities first, full detail only on demand. */
.admin-body .admin-app-layout {
  grid-template-columns: 238px minmax(0, 1fr);
}

.admin-body .admin-hero {
  padding: 18px 22px;
}

.admin-body .admin-header h1 {
  font-size: clamp(28px, 3vw, 38px);
}

.admin-body #admin-config-note {
  max-width: 72ch;
  color: #53707e;
  font-size: 12px;
  line-height: 1.5;
}

.admin-body .booking-work-queue {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.admin-body .work-queue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid #d4dfe3;
  border-left: 4px solid #91a5ae;
  border-radius: 10px;
  background: #f7f9fa;
}

.admin-body .work-queue-item > strong {
  grid-row: span 2;
  color: var(--admin-navy);
  font-size: 26px;
  line-height: 1;
}

.admin-body .work-queue-item > span {
  color: var(--admin-navy);
  font-size: 12px;
  font-weight: 800;
}

.admin-body .work-queue-item > small {
  overflow: hidden;
  color: #667b87;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-body .work-queue-attention {
  border-left-color: #e4932f;
  background: #fff8ec;
}

.admin-body .work-queue-waiting {
  border-left-color: #c6a03d;
  background: #fbf8ee;
}

.admin-body .work-queue-success {
  border-left-color: #6d9f55;
  background: #f1f7ef;
}

.admin-body .work-queue-danger {
  border-left-color: #c95240;
  background: #fff3f0;
}

.admin-body .archive-toolbar {
  margin-bottom: 14px;
  padding: 8px;
  border: 1px solid #d7e1e5;
  border-radius: 11px;
  background: #f4f7f8;
}

.admin-body .booking-card {
  gap: 11px;
  padding: 16px;
}

.admin-body .booking-card-header {
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e7ea;
}

.admin-body .booking-card-header h3 {
  font-size: 20px;
}

.admin-body .booking-card-meta {
  justify-content: flex-start;
  gap: 6px 14px;
  color: #637985;
  font-size: 12px;
}

.admin-body .booking-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #d4dfe3;
  border-radius: 11px;
  background: #d4dfe3;
}

.admin-body .booking-quick-fact {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  min-height: 92px;
  padding: 12px 13px;
  background: #f7f9fa;
}

.admin-body .booking-quick-fact-primary {
  background: #eef5f7;
  box-shadow: inset 4px 0 0 var(--admin-blue);
}

.admin-body .booking-quick-fact > span {
  color: #687e89;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-body .booking-quick-fact > strong {
  overflow-wrap: anywhere;
  color: var(--admin-navy);
  font-size: 14px;
  line-height: 1.35;
}

.admin-body .booking-quick-fact > small {
  color: #617783;
  font-size: 11px;
  line-height: 1.4;
}

.admin-body .booking-quick-problem {
  grid-column: 1 / -1;
  min-height: auto;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #fff;
}

.admin-body .booking-quick-problem > strong {
  font-weight: 500;
}

.admin-body .booking-quick-signals {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-body .booking-quick-signal {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  border: 1px solid #d2dde2;
  border-radius: 7px;
  color: #526a77;
  background: #f5f8f9;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-body .booking-quick-signal-danger {
  color: #a33c2f;
  border-color: #ecc1ba;
  background: #fff1ee;
}

.admin-body .booking-quick-signal-warning {
  color: #95621b;
  border-color: #ead3ac;
  background: #fff8eb;
}

.admin-body .booking-quick-signal-success {
  color: #4f751e;
  border-color: #cbdcaf;
  background: #f0f6e8;
}

.admin-body .booking-quick-signal-info {
  color: #075f91;
  border-color: #b9d5e3;
  background: #edf6fa;
}

.admin-body .booking-full-details {
  overflow: hidden;
  border: 1px solid #d7e1e5;
  border-radius: 10px;
  background: #f8fafb;
}

.admin-body .booking-full-details > summary {
  position: relative;
  padding: 11px 42px 11px 13px;
  color: #304c5c;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}

.admin-body .booking-full-details > summary::-webkit-details-marker {
  display: none;
}

.admin-body .booking-full-details > summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 14px;
  font-size: 18px;
  transform: translateY(-50%);
}

.admin-body .booking-full-details[open] > summary::after {
  content: "−";
}

.admin-body .booking-full-details .booking-details {
  gap: 6px;
  padding: 13px;
  border-top: 1px solid #d7e1e5;
  color: #496372;
  font-size: 12px;
}

.admin-body .booking-progress {
  gap: 10px;
  padding: 12px 14px;
  border-radius: 11px;
}

.admin-body .booking-progress-head strong {
  font-size: 14px;
}

.admin-body .booking-progress-head p {
  margin-top: 3px;
  font-size: 12px;
}

.admin-body .booking-progress-step-copy strong {
  font-size: 12px;
}

.admin-body .booking-action-toolbar {
  gap: 8px;
  padding-top: 2px;
}

.admin-body .booking-actions-primary {
  gap: 7px;
}

.admin-body .booking-actions-primary .button {
  min-height: 40px;
  padding: 8px 13px;
}

.admin-body .button-primary-action {
  order: -2;
  box-shadow: inset 0 -3px 0 rgba(117, 169, 31, 0.7), 0 7px 16px rgba(0, 91, 145, 0.16);
}

.admin-body .booking-more-summary {
  padding: 9px 13px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 12px;
}

.admin-body .booking-more-actions[open] .booking-actions-more-panel {
  margin-top: 7px;
  padding: 10px;
  border: 1px solid #d7e1e5;
  border-radius: 10px;
  background: #f5f8f9;
}

.admin-body .booking-card.history-open > .booking-quick-grid,
.admin-body .booking-card.history-open > .booking-quick-signals,
.admin-body .booking-card.history-open > .booking-progress,
.admin-body .booking-card.history-open > .booking-full-details {
  display: none;
}

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

  .admin-body .booking-work-queue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .booking-page .contact-section legend,
  .booking-page .service-choice-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .booking-page .contact-person-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-page .contact-address-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .booking-page .contact-address-grid .contact-street,
  .booking-page .contact-address-grid .contact-city {
    grid-column: span 2;
  }

  .booking-page .contact-address-grid .contact-house,
  .booking-page .contact-address-grid .contact-postal {
    grid-column: span 1;
  }

  .booking-page .service-choice-grid,
  .booking-page .slot-time-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .booking-page .service-choice-grid .service-choice:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .booking-page .service-choice {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .booking-page .service-choice-duration {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }

  .booking-page .slot-day-summary {
    gap: 8px;
  }

  .booking-page .slot-day-meta > small {
    display: none;
  }

  .booking-page .selected-slot-summary {
    grid-template-columns: 34px minmax(0, 1fr);
    padding: 14px;
  }

  .booking-page .selected-slot-check {
    width: 34px;
    height: 34px;
  }

  .admin-body .booking-work-queue {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .archive-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: visible;
  }

  .admin-body .archive-toolbar > label {
    width: 100%;
    max-width: none;
  }

  .admin-body .booking-quick-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-body .booking-quick-problem {
    grid-column: auto;
  }

  .admin-body .booking-actions-primary .button {
    width: auto;
  }
}

/* Mailcenter: kompakte Postfach- und Verlaufsansicht. */
.mail-center-head {
  align-items: flex-end;
}

.mail-center-actions {
  justify-content: flex-end;
}

.mailbox-command-bar {
  display: grid;
  grid-template-columns: minmax(170px, 0.7fr) minmax(0, 2fr) auto;
  gap: 14px;
  align-items: center;
  margin: 2px 0 18px;
  padding: 14px;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 20px;
  background: var(--ui-surface, var(--surface));
  box-shadow: none;
}

.mailbox-command-copy {
  display: grid;
  gap: 4px;
}

.mailbox-command-copy > span,
.mail-thread-result {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mailbox-command-copy > strong {
  font-size: 14px;
  line-height: 1.35;
}

.mail-account-switcher {
  display: flex;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.mail-account-filter {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  flex: 0 0 min(220px, 72vw);
  min-width: 150px;
  padding: 10px 12px;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 14px;
  color: var(--ui-text, var(--ink));
  background: var(--ui-surface-alt, var(--surface-soft));
  box-shadow: none;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.mail-account-filter:hover,
.mail-account-filter:focus-visible {
  border-color: var(--ui-accent, var(--accent));
  box-shadow: none;
  outline: 0;
  transform: translateY(-1px);
}

.mail-account-filter.is-active {
  border-color: var(--ui-accent, var(--accent));
  background: var(--ui-accent-soft, var(--accent-soft));
  box-shadow: none;
}

.mail-account-filter-title,
.mail-account-filter-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-account-filter-title {
  font-weight: 800;
}

.mail-account-filter-meta {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
}

.mail-account-filter .count-badge {
  align-self: center;
}

.mail-center-layout--inbox {
  grid-template-columns: minmax(320px, 380px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.mail-inbox-sidebar {
  min-width: 0;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 14px;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 20px;
  background: var(--ui-surface-alt, var(--surface-soft));
  box-shadow: none;
}

.mail-thread-list-tools {
  display: flex;
  align-items: end;
  gap: 8px;
}

.mail-thread-list-tools .archive-search-field {
  min-width: 0;
}

.mail-thread-list-tools .button {
  flex: 0 0 auto;
  min-height: 44px;
}

.mail-thread-list-tools .button.is-active {
  border-color: var(--ui-accent, var(--accent));
  color: var(--ui-accent, var(--accent));
  background: var(--ui-accent-soft, var(--accent-soft));
}

.mail-thread-result {
  min-height: 16px;
  margin: 2px 2px 8px;
}

.mail-inbox-sidebar .mail-thread-list {
  max-height: min(62vh, 700px);
  overflow: auto;
  padding: 2px 4px 2px 0;
  scrollbar-width: thin;
}

.mail-thread-card {
  gap: 8px;
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(15, 42, 74, 0.06);
}

.mail-thread-card.is-unread {
  border-left: 4px solid #0a83bd;
  padding-left: 11px;
  background: linear-gradient(135deg, rgba(232, 247, 253, 0.94), rgba(255, 255, 255, 0.9));
}

.mail-thread-card-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
}

.mail-thread-account {
  max-width: 72%;
  overflow: hidden;
  border: 1px solid rgba(0, 104, 180, 0.15);
  border-radius: 999px;
  background: rgba(225, 242, 250, 0.76);
  color: #1c597b;
  padding: 3px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-thread-detail {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(0, 68, 120, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(134, 188, 34, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 250, 253, 0.82));
  box-shadow: 0 16px 32px rgba(15, 42, 74, 0.07);
}

.mail-center-empty-state {
  display: grid;
  place-content: center;
  min-height: 250px;
  padding: 28px;
  border: 1px dashed rgba(0, 104, 180, 0.22);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
}

.mail-center-empty-state strong {
  color: var(--ink);
  font-size: 18px;
}

.mail-center-empty-state p {
  max-width: 360px;
  margin: 8px 0 0;
  line-height: 1.55;
}

.mail-thread-shell {
  gap: 14px;
}

.mail-thread-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-thread-context > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  padding: 7px 9px;
  border: 1px solid rgba(0, 68, 120, 0.1);
  border-radius: 10px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  line-height: 1.4;
}

.mail-thread-context strong {
  color: var(--ink);
}

.mail-thread-section {
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(0, 68, 120, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.6);
}

.mail-thread-message-list {
  max-height: min(42vh, 460px);
}

.mail-thread-message-list .message-head-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mail-message-account {
  max-width: 180px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 104, 180, 0.08);
  color: #1c597b;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-sender-field {
  position: relative;
}

.mail-sender-field small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.offer-body {
  min-height: 100vh;
  margin: 0;
  color: #122536;
  background:
    radial-gradient(circle at top right, rgba(128, 191, 86, 0.26), transparent 34%),
    radial-gradient(circle at top left, rgba(0, 118, 184, 0.2), transparent 42%),
    #edf4f5;
}

.offer-shell {
  width: min(100% - 32px, 860px);
  margin: 0 auto;
  padding: 56px 0;
}

.offer-card {
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(50, 104, 132, 0.22);
  border-top: 4px solid #0080b8;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 24px 65px rgba(22, 52, 68, 0.15);
}

.offer-head,
.offer-meta,
.offer-item,
.offer-total,
.offer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.offer-head h1,
.offer-items h2,
.offer-response h2 {
  margin: 4px 0 8px;
}

.offer-head p,
.offer-meta,
.offer-copy p,
.offer-item span,
.offer-footer {
  color: #52697a;
}

.offer-meta {
  flex-wrap: wrap;
  justify-content: flex-start;
  padding: 12px 0 22px;
  border-bottom: 1px solid #d5e1e6;
  font-size: 14px;
}

.offer-status {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  background: #edf7f0;
  color: #247047;
  font-weight: 800;
}

.offer-status.is-rejected,
.offer-status.is-expired {
  background: #fff0ed;
  color: #b74336;
}

.offer-copy {
  padding: 20px 0;
  line-height: 1.65;
}

.offer-copy p {
  margin: 0 0 10px;
}

.offer-items {
  overflow: hidden;
  border: 1px solid #d5e1e6;
  border-radius: 16px;
}

.offer-items h2 {
  margin: 0;
  padding: 16px 18px;
  font-size: 17px;
  background: #eef7fa;
}

.offer-item {
  align-items: flex-start;
  padding: 15px 18px;
  border-top: 1px solid #e1ebee;
}

.offer-item div {
  display: grid;
  gap: 3px;
}

.offer-total {
  margin-top: 16px;
  padding: 18px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(120deg, #006fae, #1b8b79);
}

.offer-total strong {
  font-size: 24px;
}

.offer-response {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 20px;
  border: 1px solid #c7dbe4;
  border-radius: 16px;
  background: #f7fbfc;
}

.offer-response label {
  display: grid;
  gap: 6px;
}

.offer-response textarea {
  min-height: 100px;
}

.offer-footer {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 22px;
  font-size: 14px;
}

@media (max-width: 560px) {
  .offer-shell { width: min(100% - 20px, 860px); padding: 18px 0; }
  .offer-card { border-radius: 18px; }
  .offer-head, .offer-item, .offer-total { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 1040px) {
  .employee-management-layout {
    grid-template-columns: 1fr;
  }

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

  .employee-qualification-form,
  .employee-time-card-main,
  .field-time-manual-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .field-time-wide {
    grid-column: span 2;
  }

  .field-time-entry-head,
  .field-time-entry {
    grid-template-columns: 1fr 1fr;
  }

  .mailbox-command-bar {
    grid-template-columns: 1fr;
  }

  .mail-center-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 820px) {
  .mail-center-layout--inbox {
    grid-template-columns: 1fr;
  }

  .mail-inbox-sidebar .mail-thread-list {
    max-height: 420px;
  }

  .mail-thread-detail {
    padding: 14px;
  }
}

@media (max-width: 560px) {
  .employee-summary-grid,
  .employee-absence-form,
  .employee-qualification-form,
  .employee-time-summary,
  .field-time-summary,
  .field-time-manual-form {
    grid-template-columns: 1fr;
  }

  .field-time-wide {
    grid-column: auto;
  }

  .field-time-entry-head,
  .field-time-entry {
    grid-template-columns: 1fr;
  }

  .section-label-row,
  .employee-absence-card {
    align-items: flex-start;
    flex-direction: column;
  }

  .employee-time-card-main,
  .employee-time-event {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .employee-time-event p {
    grid-column: auto;
  }

  .mail-thread-list-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .mail-thread-list-tools .button {
    width: 100%;
  }

  .mailbox-command-bar,
  .mail-inbox-sidebar,
  .mail-thread-detail {
    border-radius: 16px;
  }
}

@media (min-width: 1280px) {
  .admin-body .admin-shell {
    width: min(calc(100% - 40px), 1880px);
  }

  .admin-body .admin-app-layout {
    grid-template-columns: 268px minmax(0, 1fr);
    gap: 20px;
  }

  .admin-body .admin-sidebar .login-panel .panel-head,
  .admin-body .admin-sidebar .admin-summary-panel .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .admin-body .admin-sidebar .login-panel .panel-head p {
    max-width: none;
    margin: 0;
  }

  .admin-body .admin-sidebar .login-panel #admin-login > .actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-body .admin-sidebar .admin-summary-panel .metric-card {
    min-height: 78px;
    padding: 11px;
  }

  .admin-body .admin-sidebar .admin-summary-panel .metric-card span {
    font-size: 8px;
    letter-spacing: 0.045em;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
}

/* Light interface polish: clearer hierarchy without changing the existing workflow. */
.admin-body {
  background:
    radial-gradient(920px 420px at 100% -8%, rgba(0, 119, 180, 0.08), transparent 70%),
    radial-gradient(760px 360px at -8% 20%, rgba(134, 188, 34, 0.08), transparent 68%),
    #edf3f6;
}

.admin-body .admin-hero {
  position: relative;
  overflow: hidden;
  border-color: #c7d9e1;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.98), rgba(244, 250, 252, 0.96)),
    #fff;
}

.admin-body .admin-session-card {
  border-left: 1px solid #d9e5e9;
  border-radius: 12px;
  background: linear-gradient(135deg, #f6fbfd, #f1f8ed);
}

.admin-body .admin-nav {
  align-items: center;
  border-color: #c7d9e1;
  background: linear-gradient(115deg, #14354a, #102b3d 62%, #174258);
  box-shadow: 0 12px 26px rgba(16, 43, 61, 0.14);
}

.admin-body .admin-nav-link:not(.is-active) {
  border-color: transparent;
  color: #d9e8ee;
  background: rgba(255, 255, 255, 0.06);
}

.admin-body .admin-nav-link:not(.is-active):hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.admin-body .admin-nav-link.is-active,
.admin-body .admin-nav-link[aria-current="page"] {
  box-shadow: none;
}

.admin-body .panel,
.admin-body .detail-box,
.admin-body .metric-card,
.admin-body .booking-card,
.admin-body .site-footer {
  border-color: #cedce2;
  box-shadow: 0 10px 26px rgba(28, 55, 69, 0.07);
}

.admin-body .metric-card {
  background: linear-gradient(145deg, #fff, #f4f8f9);
}

.admin-body .booking-card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.admin-body .booking-card:hover {
  border-color: #a8cad8;
  box-shadow: 0 16px 34px rgba(28, 72, 91, 0.13);
  transform: translateY(-1px);
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  border-color: #cbdbe1;
  background: #fbfdfe;
}

.admin-body input:focus,
.admin-body select:focus,
.admin-body textarea:focus {
  border-color: #0082b7;
  box-shadow: 0 0 0 3px rgba(0, 130, 183, 0.14);
}

.admin-body .button {
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.admin-body .button:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.admin-body .button:active {
  transform: translateY(0);
  box-shadow: none;
}

.button-call {
  border-color: #9ecddb !important;
  color: #075b79 !important;
  background: linear-gradient(135deg, #edfaff, #f2faf4) !important;
}

.button-call:hover {
  border-color: #5eafc9 !important;
  background: linear-gradient(135deg, #e4f7fd, #eaf8ed) !important;
}

.mail-thread-card,
.customer-fact-card,
.customer-section-card,
.customer-profile-item {
  border-color: #d4e1e6;
  background: linear-gradient(145deg, #fff, #f6fafb);
}

.mail-thread-card:hover,
.mail-thread-card.is-active {
  border-color: #8ec5db;
  background: linear-gradient(135deg, #f1fbff, #f7fbed);
  box-shadow: 0 10px 22px rgba(20, 92, 122, 0.1);
}

.field-header,
.field-time-panel,
.field-job-card,
.field-completion-form,
.field-completed-report {
  border-color: #c9dde4;
  box-shadow: 0 12px 28px rgba(22, 59, 77, 0.09);
}

.field-job-card {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.field-job-card:hover {
  border-color: #91c6da;
  box-shadow: 0 16px 32px rgba(22, 81, 106, 0.13);
}

@media (prefers-reduced-motion: reduce) {
  .admin-body .booking-card,
  .admin-body .button,
  .field-job-card {
    transition: none;
  }
}

/* Final dark-theme layer. Kept last so feature-specific styles cannot reintroduce white surfaces. */
.theme-toggle.theme-toggle--floating {
  position: fixed !important;
  z-index: 1200;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: block;
  width: 58px !important;
  min-width: 58px !important;
  height: 32px;
  min-height: 32px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px;
  background: transparent !important;
  box-shadow: 0 7px 22px rgba(10, 28, 38, 0.24) !important;
  overflow: visible;
}

.theme-switch-track {
  position: relative;
  display: block;
  width: 58px;
  height: 32px;
  border: 1px solid #b9ccd5;
  border-radius: 999px;
  color: #315466;
  background: #edf4f7;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.theme-switch-track svg { position: absolute; top: 8px; width: 14px; height: 14px; fill: currentColor; }
.theme-switch-sun { left: 8px; }
.theme-switch-moon { right: 8px; }
.theme-switch-thumb {
  position: absolute;
  z-index: 2;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(16, 45, 60, 0.26);
  transition: transform 0.22s ease, background 0.22s ease;
}

.theme-toggle.is-dark .theme-switch-track { border-color: #507386; color: #c6dce6; background: #173440; }
.theme-toggle.is-dark .theme-switch-thumb { transform: translateX(26px); background: #8dcf3f; }

html[data-theme="dark"] {
  --bg: #0d1b24;
  --surface: #172b36;
  --surface-soft: #132630;
  --ink: #eef6f8;
  --muted: #b8cbd3;
  --line: rgba(126, 171, 190, 0.3);
  --line-strong: rgba(126, 184, 208, 0.48);
  --commercial-ink: #eef6f8;
  --commercial-muted: #b8cbd3;
  --commercial-line: rgba(126, 171, 190, 0.3);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .admin-body,
html[data-theme="dark"] .public-body,
html[data-theme="dark"] .field-body,
html[data-theme="dark"] .wiki-body,
html[data-theme="dark"] .offer-body,
html[data-theme="dark"] .ids-launch-body { color: #eaf3f6 !important; background-color: #0d1b24 !important; }

html[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6, strong, label, summary, legend) { color: #f1f7f9 !important; }
html[data-theme="dark"] :is(p, small, li, dd, dt, .field-help, .muted, .panel-head p) { color: #b9cad2 !important; }

html[data-theme="dark"] :is(
  .team-chat-layout, .team-chat-sidebar, .team-chat-conversation, .team-chat-conversation-head,
  .team-chat-message-list, .team-chat-message-form, .team-chat-channel,
  .mail-center-layout, .mailbox, .mail-inbox, .mail-thread-list, .mail-thread-section,
  .booking-list, .archive-booking-list, .customer-booking-list, .history-booking-list,
  .calendar-day, .calendar-day-list, .day-plan-list, .maintenance-list,
  .admin-users-list, .employee-time-list, .employee-absence-list, .employee-qualification-list,
  .commercial-list, .commercial-layout-list, .commercial-layout-block-list,
  .attachment-section, .booking-attachment-panel, .booking-history-panel, .booking-note-panel,
  .booking-share-panel, .booking-tag-panel, .field-section, .form-section,
  dialog, .dialog, .modal, .modal-card
) {
  border-color: #355566 !important;
  color: #eaf3f6 !important;
  background-color: #142832 !important;
  background-image: none !important;
}

html[data-theme="dark"] :is(
  .team-chat-message, .team-chat-channel.is-active, .team-chat-channel:hover,
  .customer-directory-card, .customer-profile-status-card, .archive-customer-card,
  .history-customer-card, .maintenance-contract-card, .employee-time-card,
  .employee-absence-card, .employee-qualification-card, .admin-user-card,
  .day-plan-card, .day-plan-base-card, .day-plan-return-card,
  .commercial-finance-open-card, .commercial-report-card, .tenant-card,
  .attachment-card, .field-signature-card, .field-supplier-card,
  .booking-actions-more-panel, .booking-assignment-panel
) {
  border-color: #3a5d6f !important;
  color: #eaf3f6 !important;
  background: #1a303b !important;
}

html[data-theme="dark"] .team-chat-message.is-own { border-color: #5e8f69 !important; background: #1c3b35 !important; }
html[data-theme="dark"] .team-chat-message-meta,
html[data-theme="dark"] .team-chat-message-meta strong,
html[data-theme="dark"] .team-chat-channel-copy strong,
html[data-theme="dark"] .team-chat-channel-copy small,
html[data-theme="dark"] .team-chat-sidebar-head span,
html[data-theme="dark"] .team-chat-group-label,
html[data-theme="dark"] .team-chat-compose-actions span,
html[data-theme="dark"] .team-chat-conversation-head p { color: #bdd0d9 !important; }
html[data-theme="dark"] .team-chat-channel-icon { color: #80d0ee !important; background: #214656 !important; }
html[data-theme="dark"] .team-chat-message-list { background-image: radial-gradient(circle at 0 0, rgba(109, 184, 210, 0.12) 1px, transparent 1px) !important; background-size: 20px 20px !important; }

html[data-theme="dark"] :is(input, select, textarea, option) { color: #edf6f8 !important; background-color: #0f222c !important; }
html[data-theme="dark"] input:-webkit-autofill { -webkit-text-fill-color: #edf6f8; -webkit-box-shadow: 0 0 0 1000px #0f222c inset; }
html[data-theme="dark"] :is(.metric-card, .customer-fact-card) span { color: #a9c0ca !important; }
html[data-theme="dark"] :is(.notice, .commercial-bundle-summary) strong { color: inherit !important; }

html[data-theme="dark"] .commercial-bundle-item { background: #19313c !important; }
html[data-theme="dark"] .commercial-bundle-item label span { color: #b6c9d2 !important; }
html[data-theme="dark"] .commercial-article-suggestions { border-color: #3b6071 !important; background: #132a35 !important; box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34) !important; }
html[data-theme="dark"] .commercial-article-suggestion { color: #eaf3f6 !important; background: #19313c !important; border-color: #345666 !important; }
html[data-theme="dark"] .commercial-article-suggestion:hover { background: #224454 !important; }

@media (max-width: 900px) {
  .theme-toggle.theme-toggle--floating { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
  .commercial-bundle-item { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 0.42fr); }
  .commercial-bundle-description { grid-column: 1 / -1; }
  .commercial-bundle-item > strong { justify-self: start; }
  .commercial-bundle-item .button { justify-self: end; }
  .commercial-bundle-ids .commercial-document-ids-actions { grid-template-columns: 1fr 1fr; }
  .commercial-bundle-ids .commercial-ids-search { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .theme-toggle.theme-toggle--floating { transform: scale(0.92); transform-origin: top right; }
  .commercial-bundle-item { grid-template-columns: 1fr 1fr; padding: 0.75rem; }
  .commercial-bundle-item label { min-width: 0; }
  .commercial-bundle-item input,
  .commercial-bundle-item select { width: 100%; min-width: 0; }
  .commercial-bundle-item > strong { align-self: center; }
  .commercial-bundle-ids .commercial-document-ids-actions { grid-template-columns: 1fr; }
  .commercial-bundle-ids .commercial-ids-search { grid-column: auto; }
  .team-chat-layout { min-height: 0; }
  .team-chat-sidebar { max-height: 42vh; overflow: auto; }
  .team-chat-message-list { min-height: 280px; max-height: 48vh; padding: 14px; }
  .team-chat-message { max-width: 90%; }
  .team-chat-message-form { padding: 12px 14px; }
}

/* Dark admin completeness: inner modules must not retain light surfaces. */
html[data-theme="dark"] .admin-body {
  --ink: #eef6f8;
  --text: #dbe8ed;
  --muted: #adc2cc;
  --admin-navy: #eef6f8;
}

html[data-theme="dark"] .admin-body :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #333743 !important;
  color: #f4f5f9 !important;
  background-color: #101116 !important;
  background-image: none !important;
  -webkit-text-fill-color: #f4f5f9;
}

html[data-theme="dark"] .admin-body :is(input, textarea)::placeholder { color: #90a8b3 !important; opacity: 1; }

html[data-theme="dark"] .admin-body :is(
  .mail-thread-detail, .customer-focus-bar, .history-customer-card-inner,
  .history-mail-form, .history-booking-item, .message-item, .booking-profile-shell,
  .mail-thread-context > span, .employee-management-roster, .employee-editor,
  .employee-role-selector, .employee-role-options label, .employee-time-event,
  .emergency-duty-users, .employee-duty-option, .database-backup-item,
  .commercial-journal-filter, .commercial-journal-table-wrap,
  .commercial-audit-export, .commercial-audit-info article,
  .commercial-inventory-movement
) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background-color: #101116 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body :is(
  .customer-section-card--warning, .customer-profile-status-card.is-warning,
  .customer-profile-status-card.is-danger
) {
  border-color: #665846 !important;
  color: #f1f5f6 !important;
  background: #2c2d2a !important;
}

html[data-theme="dark"] .admin-body .maintenance-contract-facts span {
  border: 1px solid #242731;
  color: #a0a3b1 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body .maintenance-contract-facts strong { color: #f0f7f9 !important; }
html[data-theme="dark"] .admin-body .maintenance-contract-note {
  border-left-color: #6366f1 !important;
  color: #a0a3b1 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body .employee-role-options label:has(input:checked),
html[data-theme="dark"] .admin-body .employee-duty-option:has(input:checked) {
  border-color: #6366f1 !important;
  color: #f4f5f9 !important;
  background: #26284f !important;
}

html[data-theme="dark"] .admin-body :is(
  .mail-thread-header-copy p, .customer-detail-contact, .customer-detail-address,
  .customer-focus-copy span, .message-head, .history-booking-meta,
  .employee-qualification-card p, .employee-qualification-card small,
  .employee-time-note, .employee-time-event p, .employee-time-event span,
  .employee-absence-card p, .maintenance-contract-head p,
  .maintenance-contract-note
) { color: #b8cbd3 !important; }

html[data-theme="dark"] .admin-body .commercial-journal-table-wrap { background: #10242e !important; }
html[data-theme="dark"] .admin-body .commercial-journal-table tbody tr,
html[data-theme="dark"] .admin-body .commercial-journal-table tbody td {
  color: #a0a3b1 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body .commercial-journal-table tbody tr:nth-child(even) td { background: #172f3a !important; }
html[data-theme="dark"] .admin-body .commercial-journal-table tbody tr.is-cancellation td {
  color: #f2c3ba !important;
  background: #35262a !important;
}

html[data-theme="dark"] .admin-body .commercial-journal-table tbody tr.is-correction td {
  color: #d4eaf3 !important;
  background: #173542 !important;
}

html[data-theme="dark"] .admin-body .commercial-journal-link { color: #78cef0 !important; }
html[data-theme="dark"] .admin-body .commercial-journal-filter > label > span { color: #c8d8df !important; }

html[data-theme="dark"] .admin-body :is(
  .customer-fact-card, .customer-profile-item, .mail-summary-card,
  .employee-summary-grid .metric-card, .commercial-journal-summary .metric-card
) {
  border-color: #242731 !important;
  background: #16171c !important;
}

@media (max-width: 760px) {
  html[data-theme="dark"] .admin-body .maintenance-contract-facts { grid-template-columns: 1fr 1fr; }
  html[data-theme="dark"] .admin-body .commercial-journal-filter { padding: 0.7rem; }
  html[data-theme="dark"] .admin-body .commercial-journal-filter > * { min-width: 0; width: 100%; }
}

@media (max-width: 480px) {
  html[data-theme="dark"] .admin-body .maintenance-contract-facts { grid-template-columns: 1fr; }
}

/* Dark admin and field surfaces that are created dynamically after page load. */
html[data-theme="dark"] .admin-body :is(
  .work-queue-item, .archive-toolbar, .booking-quick-grid,
  .booking-quick-fact, .booking-full-details, .booking-full-details .booking-details,
  .booking-progress, .booking-progress-waiting, .booking-progress-confirmed,
  .booking-progress-expired, .booking-more-summary
) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background-color: #16171c !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body .booking-quick-fact-primary { background: #17333f !important; }
html[data-theme="dark"] .admin-body .booking-quick-problem { background: #122731 !important; }
html[data-theme="dark"] .admin-body .booking-card-header,
html[data-theme="dark"] .admin-body .booking-full-details .booking-details { border-color: #365a6b !important; }

html[data-theme="dark"] .admin-body :is(
  .booking-card-meta, .booking-quick-fact > span, .booking-quick-fact > small,
  .booking-full-details > summary, .booking-full-details .booking-details,
  .work-queue-item > small
) { color: #b7cbd4 !important; }

html[data-theme="dark"] .admin-body :is(
  .booking-quick-fact > strong, .work-queue-item > strong,
  .work-queue-item > span
) { color: #f0f7f9 !important; }

html[data-theme="dark"] .admin-body .booking-quick-signal {
  border-color: #333743 !important;
  color: #a0a3b1 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body .booking-quick-signal-danger { border-color: #8e5750 !important; color: #ffc9c1 !important; background: #3a282b !important; }
html[data-theme="dark"] .admin-body .booking-quick-signal-warning { border-color: #8b7042 !important; color: #ffe0a5 !important; background: #3a3021 !important; }
html[data-theme="dark"] .admin-body .booking-quick-signal-success { border-color: #527c5a !important; color: #cce8d0 !important; background: #1e382c !important; }
html[data-theme="dark"] .admin-body .booking-quick-signal-info { border-color: #49778a !important; color: #c9e8f4 !important; background: #173442 !important; }

html[data-theme="dark"] .admin-body .booking-progress-confirmed { background: #1c382f !important; }
html[data-theme="dark"] .admin-body .booking-progress-waiting { background: #392f21 !important; }
html[data-theme="dark"] .admin-body .booking-progress-expired,
html[data-theme="dark"] .admin-body .booking-progress.is-expired-live { background: #3b272a !important; }
html[data-theme="dark"] .admin-body .booking-progress-badge {
  border-color: #333743 !important;
  color: #f4f5f9 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body :is(
  .booking-progress-head p, .booking-progress-lock-label,
  .booking-progress-lock-deadline, .booking-progress-step-copy span
) { color: #bed0d7 !important; }

html[data-theme="dark"] .field-body :is(
  .field-time-summary article, .field-summary article, .field-time-entry,
  .field-time-manual, .field-time-manual-form, .field-job-details,
  .field-detail-block, .field-material-row, .field-service-template-row,
  .field-maintenance-check-row
) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #16171c !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .field-body :is(
  .field-time-summary span, .field-time-entry > div span,
  .field-time-entry-head, .field-time-head p, .field-summary span
) { color: #b9ccd4 !important; }

html[data-theme="dark"] .field-body :is(.field-time-summary strong, .field-summary strong) { color: #f0f7f9 !important; }
html[data-theme="dark"] .field-body .field-time-manual { border-color: #365a6b !important; }
html[data-theme="dark"] .field-body .field-status { border-color: #53786c !important; background: #1d382e !important; color: #d4ebd8 !important; }

/* Dark-mode surface completion: these elements own their light background directly. */
html[data-theme="dark"] .admin-body :is(
  .form-block, .settings-section-nav, .settings-subsection,
  .settings-auxiliary-panel, .service-duration-block, .emergency-settings-block,
  .archive-toolbar, .day-plan-toolbar, .booking-work-queue
) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #16171c !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body :is(
  .settings-grid > label:not(.toggle-field),
  #admin-booking-form .field-grid > label:not(.toggle-field),
  .archive-toolbar > label, .day-plan-toolbar > label,
  .mail-thread-form > label, .admin-login-panel > label, #admin-login > label,
  .toggle-field
) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #101116 !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body :is(
  .settings-grid > label:not(.toggle-field),
  #admin-booking-form .field-grid > label:not(.toggle-field),
  .archive-toolbar > label, .day-plan-toolbar > label,
  .mail-thread-form > label, .admin-login-panel > label, #admin-login > label
):focus-within {
  border-color: #6366f1 !important;
  background: #0f1013 !important;
  box-shadow: 0 0 0 3px rgba(96, 195, 229, 0.15) !important;
}

html[data-theme="dark"] .admin-body :is(
  .settings-grid > label:not(.toggle-field) > span,
  #admin-booking-form .field-grid > label:not(.toggle-field) > span,
  .archive-toolbar > label > span, .day-plan-toolbar > label > span,
  .mail-thread-form > label > span, .admin-login-panel > label > span,
  #admin-login > label > span
) { color: #b9d0da !important; }

html[data-theme="dark"] .admin-body .settings-section-nav { padding: 5px !important; }
html[data-theme="dark"] .admin-body .settings-section-tab { color: #bcd0d8 !important; background: transparent !important; }
html[data-theme="dark"] .admin-body .settings-section-tab:hover { color: #f2f8fa !important; background: #1e3b48 !important; }
html[data-theme="dark"] .admin-body .settings-section-tab.is-active {
  color: #f4f5f9 !important;
  background: #26284f !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body :is(.archive-search-field, .archive-page-size-field) { color: #a0a3b1 !important; }

html[data-theme="dark"] .field-body .field-job-address {
  border-left-color: #6366f1 !important;
  color: #f4f5f9 !important;
  background: #101116 !important;
}

html[data-theme="dark"] .field-body :is(.field-summary article, .field-time-summary article) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #16171c !important;
  box-shadow: none !important;
}

/* Public booking wizard: grouped contact fields and stepper need their own dark surfaces. */
html[data-theme="dark"] .booking-page :is(.hero-assurance, .hero-pill, .booking-panel > .panel-head > p) {
  color: #b9d0da !important;
}

html[data-theme="dark"] .booking-page .booking-stepper {
  border-color: #365b6c !important;
  background: #152b36 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .booking-page .booking-step {
  color: #bdd0d9 !important;
  background: transparent !important;
}

html[data-theme="dark"] .booking-page .booking-step span {
  border-color: #456b7c !important;
  color: #c5d8df !important;
  background: #19323e !important;
}

html[data-theme="dark"] .booking-page .booking-step.is-active {
  color: #f3f9fa !important;
  background: #1d3a47 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
}

html[data-theme="dark"] .booking-page .booking-step.is-active span {
  border-color: #36a9da !important;
  color: #fff !important;
  background: #087fb5 !important;
}

html[data-theme="dark"] .booking-page .booking-step.is-complete:not(.is-active) { color: #bada92 !important; }
html[data-theme="dark"] .booking-page .booking-step.is-complete:not(.is-active) span { border-color: #5f9150 !important; color: #d9efc5 !important; background: #234331 !important; }

html[data-theme="dark"] .booking-page :is(
  .contact-input-grid, .service-choice-grid, .slot-day-group,
  .selected-slot-summary, .preview-grid
) {
  border-color: #365a6b !important;
  background: #365a6b !important;
}

html[data-theme="dark"] .booking-page .contact-input-grid > label {
  color: #eaf3f6 !important;
  background: #18313d !important;
}

html[data-theme="dark"] .booking-page .contact-input-grid > label:focus-within {
  background: #1b3946 !important;
  box-shadow: inset 4px 0 0 #42bce7 !important;
}

html[data-theme="dark"] .booking-page :is(
  .contact-section legend > span, .contact-section legend > small,
  .contact-input-grid > label > span, .contact-section-note,
  .form-section-head p, .step-actions > span, .field-help
) { color: #b9d0da !important; }

html[data-theme="dark"] .booking-page :is(.form-section-head h3, .contact-section legend) { color: #f1f7f9 !important; }
html[data-theme="dark"] .booking-page .step-number { border-left-color: #42bce7 !important; color: #bfe8f6 !important; background: #193440 !important; }
html[data-theme="dark"] .booking-page .form-block.is-complete .step-number { border-left-color: #8bcf3f !important; color: #d9efc5 !important; background: #21412f !important; }

/* Audit entries are rendered after page load and therefore need an explicit dark card style. */
html[data-theme="dark"] .admin-body .audit-item {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #16171c !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body .audit-item-head p,
html[data-theme="dark"] .admin-body .audit-item-meta { color: #bcd0d9 !important; }

html[data-theme="dark"] .admin-body .audit-item-meta span {
  border-color: #242731 !important;
  color: #a0a3b1 !important;
  background: #101116 !important;
}

/* Mail center has its own command and inbox surfaces. */
html[data-theme="dark"] .admin-body :is(.mailbox-command-bar, .mail-inbox-sidebar, .mail-thread-detail) {
  border-color: #242731 !important;
  color: #f4f5f9 !important;
  background: #16171c !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body .mail-account-filter {
  border-color: #242731 !important;
  color: #a0a3b1 !important;
  background: #16171c !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .admin-body .mail-account-filter:hover,
html[data-theme="dark"] .admin-body .mail-account-filter:focus-visible,
html[data-theme="dark"] .admin-body .mail-account-filter.is-active {
  border-color: #6366f1 !important;
  color: #f4f5f9 !important;
  background: #26284f !important;
  box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .admin-body :is(
  .mailbox-command-copy > span, .mail-account-filter-meta,
  .mail-thread-result, .mail-thread-card-route
) { color: #b9cfd8 !important; }

html[data-theme="dark"] .admin-body .mail-thread-account {
  border-color: #333743 !important;
  color: #a0a3b1 !important;
  background: #1b3a48 !important;
}

/* Mailcenter attachment controls follow the inbox layout and stay usable on touch devices. */
.mail-attachment-picker {
  display: grid;
  gap: 10px;
  padding: 13px;
  border: 1px dashed rgba(0, 104, 180, 0.26);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(235, 247, 252, 0.74), rgba(248, 252, 243, 0.7));
}

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

.mail-attachment-picker-head > div {
  display: grid;
  gap: 3px;
}

.mail-attachment-picker-head strong {
  color: var(--ink);
  font-size: 13px;
}

.mail-attachment-picker-head small,
.mail-attachment-empty {
  color: var(--muted);
  font-size: 12px;
}

.mail-attachment-add-button {
  flex: 0 0 auto;
  cursor: pointer;
}

.mail-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mail-attachment-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: min(100%, 240px);
  padding: 7px 8px;
  border: 1px solid rgba(0, 68, 120, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.mail-attachment-chip-icon {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  min-height: 28px;
  border-radius: 7px;
  color: #075b8d;
  background: rgba(0, 104, 180, 0.11);
  font-size: 10px;
  font-weight: 800;
}

.mail-attachment-chip-copy {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.mail-attachment-chip-copy strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-attachment-chip-copy small { color: var(--muted); font-size: 11px; }

.mail-attachment-remove {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  color: #9a321f;
  background: rgba(211, 79, 56, 0.12);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.mail-attachment-remove:hover,
.mail-attachment-remove:focus-visible { background: rgba(211, 79, 56, 0.22); outline: 0; }

.mail-thread-message-list .attachment-section {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 68, 120, 0.1);
}

html[data-theme="dark"] .admin-body .mail-attachment-picker {
  border-color: #416b7e !important;
  background: #101116 !important;
}

html[data-theme="dark"] .admin-body .mail-attachment-picker :is(strong, small, .mail-attachment-empty) {
  color: #d6e5eb !important;
}

html[data-theme="dark"] .admin-body .mail-attachment-chip {
  border-color: #333743 !important;
  background: #142b36 !important;
}

html[data-theme="dark"] .admin-body .mail-attachment-chip-icon {
  color: #bfe6f2 !important;
  background: #1d4657 !important;
}

html[data-theme="dark"] .admin-body .mail-attachment-remove {
  color: #ffd6cf !important;
  background: #552c2b !important;
}

@media (max-width: 680px) {
  .mail-attachment-picker-head { align-items: stretch; flex-direction: column; }
  .mail-attachment-add-button { text-align: center; }
  .mail-attachment-chip { min-width: 100%; }
}



html[data-theme] .admin-body,
html[data-theme] .admin-body * { box-sizing: border-box; }
html[data-theme] .admin-body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ui-text);
  background: var(--ui-app) !important;
}
html[data-theme] .admin-body h1,
html[data-theme] .admin-body h2,
html[data-theme] .admin-body h3,
html[data-theme] .admin-body h4 { color: var(--ui-text) !important; font-family: inherit; font-weight: 650; letter-spacing: -0.025em; }
html[data-theme] .admin-body :is(p, small, .muted, .field-help, .panel-head p) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .admin-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
html[data-theme] .admin-body svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

html[data-theme] .admin-body .admin-shell { width: auto; max-width: none; min-height: 100vh; margin: 0 0 0 208px; padding: 12px 20px 28px; }
html[data-theme] .admin-body .admin-command-bar {
  position: sticky; top: 0; z-index: 60; min-height: 52px; margin: -12px -20px 14px; padding: 8px 20px;
  border-bottom: 1px solid var(--ui-border); background: color-mix(in srgb, var(--ui-app) 92%, transparent) !important;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
html[data-theme] .admin-body .admin-global-search { min-height: 34px; border-color: var(--ui-border); border-radius: 5px; color: var(--ui-text-muted); background: var(--ui-surface-alt); box-shadow: none; }
html[data-theme] .admin-body .admin-global-search:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 2px var(--ui-accent-soft); }
html[data-theme] .admin-body .admin-command-icon { width: 15px; height: 15px; }
html[data-theme] .admin-body .admin-global-search input { color: var(--ui-text) !important; background: transparent !important; font-size: 12px; }
html[data-theme] .admin-body .admin-global-search kbd { border-color: var(--ui-border); border-radius: 3px; color: var(--ui-text-muted); background: transparent; }
html[data-theme] .admin-body .admin-topbar-icon,
html[data-theme] .admin-body .theme-toggle--topbar { width: 34px; min-width: 34px; height: 34px; min-height: 34px; border-color: var(--ui-border) !important; border-radius: 5px; color: var(--ui-text-secondary) !important; background: var(--ui-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .admin-body .admin-topbar-icon:hover,
html[data-theme] .admin-body .theme-toggle--topbar:hover { color: var(--ui-text) !important; border-color: var(--ui-border-strong) !important; background: var(--ui-surface-hover) !important; transform: none; }
html[data-theme] .admin-body .admin-topbar-icon svg { width: 15px; height: 15px; }
html[data-theme] .admin-body .admin-primary-action { min-height: 34px; padding: 7px 12px; border-radius: 5px; border-color: var(--ui-accent) !important; background: var(--ui-accent) !important; box-shadow: none !important; font-size: 12px; }
html[data-theme] .admin-body .admin-primary-action:hover { background: var(--ui-accent-hover) !important; transform: none; }

html[data-theme] .admin-body .admin-nav {
  position: fixed; inset: 0 auto 0 0; z-index: 70; display: flex; flex-direction: column; align-items: stretch; width: 208px; margin: 0; padding: 14px 9px;
  overflow-y: auto; overflow-x: hidden; border: 0; border-right: 1px solid var(--ui-border); border-radius: 0; background: var(--ui-sidebar) !important; box-shadow: none !important;
}
html[data-theme] .admin-body .admin-brand { margin: 0 7px 20px; color: var(--ui-text) !important; }
html[data-theme] .admin-body .admin-brand-mark { width: 32px; height: 32px; border-radius: 6px; background: var(--ui-accent); box-shadow: none; }
html[data-theme] .admin-body .admin-brand strong { color: var(--ui-text) !important; font-size: 13px; }
html[data-theme] .admin-body .admin-brand small { color: var(--ui-text-muted) !important; }
html[data-theme] .admin-body .admin-nav-group-label { margin: 0 9px 6px; color: var(--ui-text-muted) !important; font-size: 9px; }
html[data-theme] .admin-body .admin-nav-link { gap: 9px; min-height: 34px; margin: 1px 0; padding: 7px 9px; border: 0; border-left: 2px solid transparent; border-radius: 4px; color: var(--ui-text-secondary) !important; background: transparent !important; font-size: 12px; font-weight: 600; }
html[data-theme] .admin-body .admin-nav-link::before { display: none; }
html[data-theme] .admin-body .admin-nav-link svg { flex: 0 0 auto; width: 15px; height: 15px; }
html[data-theme] .admin-body .admin-nav-link:hover { color: var(--ui-text) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .admin-nav-link.is-active,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] { border-left-color: var(--ui-accent); color: var(--ui-text) !important; background: var(--ui-accent-soft) !important; box-shadow: none; }
html[data-theme] .admin-body .nav-count-badge { min-width: 17px; min-height: 17px; margin-left: auto; border-radius: 4px; background: var(--ui-danger); font-size: 9px; }
html[data-theme] .admin-body .admin-nav-footer { margin: auto 6px 0; padding: 12px 4px 2px; border-top-color: var(--ui-border); }
html[data-theme] .admin-body .admin-nav-footer strong { color: var(--ui-text) !important; }
html[data-theme] .admin-body .admin-nav-footer > span:last-child { color: var(--ui-text-muted) !important; }

html[data-theme] .admin-body .admin-header { grid-template-columns: minmax(0, 1fr) auto; min-height: 76px; margin-bottom: 12px; padding: 6px 0 14px; border: 0 !important; border-bottom: 1px solid var(--ui-border) !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .admin-header h1 { margin: 1px 0 3px; font-size: 24px; }
html[data-theme] .admin-body .admin-header .eyebrow { margin: 0 0 3px; color: var(--ui-text-muted) !important; font-size: 9px; }
html[data-theme] .admin-body .admin-header .hero-copy { color: var(--ui-text-secondary) !important; font-size: 12px; }
html[data-theme] .admin-body .admin-session-card { min-width: 230px; padding: 3px 0 3px 16px; border: 0; border-left: 1px solid var(--ui-border); border-radius: 0; background: transparent !important; }
html[data-theme] .admin-body .admin-session-card strong { color: var(--ui-text) !important; font-size: 13px; }
html[data-theme] .admin-body .admin-session-card p { font-size: 11px; }
html[data-theme] .admin-body .admin-session-timer { border: 1px solid color-mix(in srgb, var(--ui-success) 35%, var(--ui-border)); border-radius: 4px; color: var(--ui-success) !important; background: color-mix(in srgb, var(--ui-success) 8%, transparent); font-size: 10px; }

html[data-theme] .admin-body .admin-app-layout { display: block; }
html[data-theme] .admin-body.is-authenticated .admin-sidebar { display: none; }
html[data-theme] .admin-body .admin-content,
html[data-theme] .admin-body .admin-view,
html[data-theme] .admin-body .settings-stack { gap: 12px; }
html[data-theme] .admin-body .admin-view { padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .panel { padding: 14px; border-color: var(--ui-border) !important; border-radius: 6px; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.panel, .detail-box, .service-box, .slot-block, .metric-card, .booking-card, .site-footer)::before,
html[data-theme] .admin-body :is(.panel, .detail-box, .service-box, .slot-block, .metric-card, .booking-card, .site-footer)::after { display: none !important; }
html[data-theme] .admin-body .panel-head { gap: 10px; margin-bottom: 12px; }
html[data-theme] .admin-body .panel-head h2 { font-size: 20px; }
html[data-theme] .admin-body .panel-head h3 { font-size: 15px; }
html[data-theme] .admin-body .panel-head p { max-width: 70ch; font-size: 12px; line-height: 1.4; }

html[data-theme] .admin-body :is(.metric-card, .work-queue-item, .calendar-summary .metric-card, .maintenance-metric) { min-height: 56px; padding: 10px 12px; border: 1px solid var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.metric-card span, .work-queue-item span, .work-queue-item small) { color: var(--ui-text-secondary) !important; font-size: 10px; }
html[data-theme] .admin-body :is(.metric-card strong, .work-queue-item strong) { color: var(--ui-text) !important; font-size: 21px; }
html[data-theme] .admin-body .work-queue-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; }
html[data-theme] .admin-body .work-queue-item small { grid-column: 2; }
html[data-theme] .admin-body .work-queue-item.work-queue-attention { border-left: 3px solid var(--ui-warning) !important; }
html[data-theme] .admin-body .work-queue-item.work-queue-success { border-left: 3px solid var(--ui-success) !important; }
html[data-theme] .admin-body .work-queue-item.work-queue-danger { border-left: 3px solid var(--ui-danger) !important; }

html[data-theme] .admin-body :is(input, select, textarea) { min-height: 34px; border-color: var(--ui-border-strong) !important; border-radius: 5px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; font-size: 12px; }
html[data-theme] .admin-body textarea { min-height: 86px; }
html[data-theme] .admin-body :is(input, select, textarea)::placeholder { color: var(--ui-text-muted) !important; }
html[data-theme] .admin-body :is(input, select, textarea):focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 2px var(--ui-accent-soft) !important; }
html[data-theme] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label, .field-grid > label:not(.toggle-field)) { padding: 6px 9px; border-color: var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label, .field-grid > label:not(.toggle-field)) > span { color: var(--ui-text-muted) !important; font-size: 9px; }
html[data-theme] .admin-body :is(.settings-grid > label:not(.toggle-field), #admin-booking-form .field-grid > label:not(.toggle-field), .admin-login-panel > label, #admin-login > label, .archive-toolbar > label, .day-plan-toolbar > label, .mail-thread-form > label) :is(input, select, textarea) { min-height: 25px; background: transparent !important; }
html[data-theme] .admin-body .toggle-field { min-height: 40px; padding: 8px 10px; border-color: var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface-alt) !important; }

html[data-theme] .admin-body .button { min-height: 34px; padding: 7px 11px; border: 1px solid var(--ui-accent); border-radius: 5px; color: #fff !important; background: var(--ui-accent) !important; box-shadow: none !important; font-size: 12px; font-weight: 650; }
html[data-theme] .admin-body .button:hover { border-color: var(--ui-accent-hover); background: var(--ui-accent-hover) !important; box-shadow: none !important; transform: none; }
html[data-theme] .admin-body .button-secondary,
html[data-theme] .admin-body .button-call { border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .button-secondary:hover,
html[data-theme] .admin-body .button-call:hover { border-color: var(--ui-border-strong) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .button-danger { border-color: var(--ui-danger) !important; background: var(--ui-danger) !important; }
html[data-theme] .admin-body .button:disabled { color: var(--ui-text-muted) !important; border-color: var(--ui-border) !important; background: var(--ui-surface-hover) !important; }

html[data-theme] .admin-body :is(.form-block, .service-box, .booking-card, .mail-thread-card, .mail-thread-detail, .mail-thread-list-wrap, .customer-directory-card, .customer-detail-section, .customer-section-card, .customer-profile-status-card, .customer-profile-panel, .maintenance-contract-card, .day-plan-card, .day-plan-base-card, .day-plan-return-card, .audit-item, .employee-absence-card, .employee-qualification-card, .employee-time-card, .commercial-card, .commercial-editor, .commercial-pane, .commercial-document-card, .commercial-item-row, .commercial-bundle-item, .commercial-bundle-editor, .commercial-tabs, .commercial-toolbar, .commercial-position-toolbar, .commercial-totals, .commercial-document-ids, .settings-subsection, .settings-auxiliary-panel, .system-backup-panel, .booking-actions-more-panel, .booking-assignment-panel, .booking-attachment-panel, .booking-history-panel, .booking-note-panel, .booking-profile-panel, .booking-share-panel) { border-color: var(--ui-border) !important; border-radius: 6px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body .booking-card { padding: 13px 14px; border-left: 3px solid var(--ui-accent) !important; }
html[data-theme] .admin-body .booking-card:hover { background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .booking-card-header { padding-bottom: 9px; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: 1.1fr 1.1fr 1.35fr minmax(200px, 2fr); gap: 0; margin: 10px 0 8px; border: 1px solid var(--ui-border); border-radius: 5px; overflow: hidden; }
html[data-theme] .admin-body .booking-quick-fact { min-height: 0; padding: 9px 11px; border: 0 !important; border-right: 1px solid var(--ui-border) !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .booking-quick-fact:last-child { border-right: 0 !important; }
html[data-theme] .admin-body .booking-quick-fact :is(span, small) { color: var(--ui-text-muted) !important; font-size: 10px; }
html[data-theme] .admin-body .booking-quick-fact strong { color: var(--ui-text) !important; font-size: 12px; line-height: 1.35; }
html[data-theme] .admin-body .booking-progress { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .admin-body .booking-progress::before { display: none !important; }
html[data-theme] .admin-body .booking-actions { gap: 7px; }
html[data-theme] .admin-body .booking-action-toolbar { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--ui-border); }
html[data-theme] .admin-body .booking-actions-more-panel { padding: 0; border: 0 !important; background: transparent !important; }

html[data-theme] .admin-body :is(.settings-section-nav, .commercial-tabs, .archive-toolbar, .day-plan-toolbar, .calendar-legend) { padding: 6px; border-color: var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .admin-body .settings-section-tab,
html[data-theme] .admin-body .commercial-tab { min-height: 30px; padding: 6px 9px; border-radius: 4px; color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .settings-section-tab.is-active,
html[data-theme] .admin-body .commercial-tab.is-active { color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: inset 0 -2px 0 var(--ui-accent); }

html[data-theme] .admin-body .calendar-grid { gap: 5px; }
html[data-theme] .admin-body .calendar-weekdays { gap: 5px; margin-bottom: 5px; }
html[data-theme] .admin-body .calendar-weekdays span { color: var(--ui-text-muted) !important; font-size: 10px; }
html[data-theme] .admin-body .calendar-day { min-height: 118px; padding: 8px; border-color: var(--ui-border) !important; border-radius: 5px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body .calendar-day:hover { border-color: var(--ui-border-strong) !important; background: var(--ui-surface-alt) !important; box-shadow: none !important; transform: none; }
html[data-theme] .admin-body .calendar-day.is-today { border-color: var(--ui-accent) !important; box-shadow: inset 0 0 0 1px var(--ui-accent) !important; }
html[data-theme] .admin-body .calendar-booking-chip { border-radius: 4px; }
html[data-theme] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card) { border-color: var(--ui-border) !important; border-radius: 5px; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card):hover,
html[data-theme] .admin-body :is(.mail-thread-card, .customer-directory-card, .archive-customer-card).is-active { border-color: var(--ui-accent) !important; background: var(--ui-surface-alt) !important; }

html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) { border-color: var(--ui-border) !important; color: var(--ui-text) !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body :is(th, .commercial-journal-table thead th) { color: var(--ui-text-secondary) !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body :is(td, .commercial-journal-table td) { border-color: var(--ui-border) !important; color: var(--ui-text-secondary) !important; background: transparent !important; }
html[data-theme] .admin-body :is(tr:hover td, .commercial-journal-table tbody tr:hover td) { background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .notice { border-color: var(--ui-border) !important; border-radius: 5px; color: var(--ui-text-secondary) !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .notice.success { border-color: color-mix(in srgb, var(--ui-success) 48%, var(--ui-border)) !important; color: var(--ui-success) !important; background: color-mix(in srgb, var(--ui-success) 8%, var(--ui-surface)) !important; }
html[data-theme] .admin-body .notice.error { border-color: color-mix(in srgb, var(--ui-danger) 48%, var(--ui-border)) !important; color: var(--ui-danger) !important; background: color-mix(in srgb, var(--ui-danger) 8%, var(--ui-surface)) !important; }

@media (max-width: 1040px) {
  html[data-theme] .admin-body .admin-shell { margin-left: 190px; padding-left: 14px; padding-right: 14px; }
  html[data-theme] .admin-body .admin-nav { width: 190px; }
  html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .admin-body .booking-quick-fact:nth-child(2) { border-right: 0 !important; }
}
@media (max-width: 820px) {
  html[data-theme] .admin-body .admin-shell { margin: 0; padding: 9px 10px 24px; }
  html[data-theme] .admin-body .admin-command-bar { margin: -9px -10px 10px; padding: 8px 10px; }
  html[data-theme] .admin-body .admin-nav { position: sticky; top: 51px; flex-direction: row; width: auto; min-height: 48px; margin-bottom: 10px; padding: 6px; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--ui-border); border-radius: 5px; }
  html[data-theme] .admin-body :is(.admin-brand, .admin-nav-group-label, .admin-nav-footer) { display: none; }
  html[data-theme] .admin-body .admin-nav-link { flex: 0 0 auto; min-height: 32px; }
  html[data-theme] .admin-body .admin-header { grid-template-columns: 1fr; min-height: auto; }
  html[data-theme] .admin-body .admin-session-card { display: none; }
}
@media (max-width: 620px) {
  html[data-theme] .admin-body .admin-command-bar { gap: 7px; }
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  html[data-theme] .admin-body .admin-global-search kbd,
  html[data-theme] .admin-body .admin-topbar-icon { display: none; }
  html[data-theme] .admin-body .admin-primary-action { width: 36px; min-width: 36px; padding: 0; font-size: 0; }
  html[data-theme] .admin-body .admin-primary-action::before { content: "+"; font-size: 18px; }
  html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: 1fr; }
  html[data-theme] .admin-body .booking-quick-fact { border-right: 0 !important; border-bottom: 1px solid var(--ui-border) !important; }
  html[data-theme] .admin-body .booking-quick-fact:last-child { border-bottom: 0 !important; }
}

/* Theme finish: explicit surfaces prevent legacy component colors from leaking into either mode. */


html[data-theme] .admin-body .booking-quick-grid,
html[data-theme] .admin-body .booking-full-details,
html[data-theme] .admin-body .booking-details,
html[data-theme] .admin-body .booking-progress,
html[data-theme] .admin-body .booking-more-summary,
html[data-theme] .admin-body .customer-fact-card,
html[data-theme] .admin-body .customer-profile-item,
html[data-theme] .admin-body .customer-section-card,
html[data-theme] .admin-body .customer-profile-status-card,
html[data-theme] .admin-body .settings-section,
html[data-theme] .admin-body .field-time-panel,
html[data-theme] .admin-body .field-job-card,
html[data-theme] .admin-body .field-completion-form,
html[data-theme] .admin-body .field-completed-report,
html[data-theme] .admin-body .mailbox-command-bar,
html[data-theme] .admin-body .mail-inbox-sidebar,
html[data-theme] .admin-body .mail-thread-detail,
html[data-theme] .admin-body .audit-item {
  color: var(--ui-text) !important;
  background: var(--ui-surface-alt) !important;
  border-color: var(--ui-border) !important;
  box-shadow: none !important;
}

html[data-theme] .admin-body :is(
  .booking-quick-grid, .booking-full-details, .booking-details, .booking-progress,
  .booking-more-summary, .booking-quick-signals, .customer-fact-card,
  .customer-profile-item, .customer-section-card, .customer-profile-status-card,
  .settings-section, .field-time-panel, .field-job-card, .field-completion-form,
  .field-completed-report, .mailbox-command-bar, .mail-inbox-sidebar,
  .mail-thread-detail, .audit-item
) :is(strong, b, h2, h3, h4, dt, label) {
  color: var(--ui-text) !important;
  opacity: 1 !important;
}

html[data-theme] .admin-body :is(
  .booking-quick-grid, .booking-full-details, .booking-details, .booking-progress,
  .booking-more-summary, .booking-quick-signals, .customer-fact-card,
  .customer-profile-item, .customer-section-card, .customer-profile-status-card,
  .settings-section, .field-time-panel, .field-job-card, .field-completion-form,
  .field-completed-report, .mailbox-command-bar, .mail-inbox-sidebar,
  .mail-thread-detail, .audit-item
) :is(span, p, small, dd, li) {
  color: var(--ui-text-secondary) !important;
  opacity: 1 !important;
}

html[data-theme] .admin-body .booking-quick-grid { background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .booking-quick-fact { background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .booking-quick-fact :is(span, small) { color: var(--ui-text-muted) !important; }
html[data-theme] .admin-body .booking-progress { background: var(--ui-surface) !important; }
html[data-theme] .admin-body .booking-progress .booking-progress-step-copy strong { color: var(--ui-text) !important; }
html[data-theme] .admin-body .booking-progress .booking-progress-step-copy span { color: var(--ui-text-secondary) !important; }

html[data-theme] .admin-body .admin-shell {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-bottom: 18px;
}
html[data-theme] .admin-body .admin-app-layout { width: 100%; min-width: 0; }
html[data-theme] .admin-body .site-footer {
  display: flex;
  flex: 0 0 auto;
  min-height: 58px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  overflow: visible;
  border: 0 !important;
  border-top: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  color: var(--ui-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme] .admin-body .site-footer :is(strong, span, a) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .site-footer strong { color: var(--ui-text) !important; }
html[data-theme] .admin-body .footer-links { gap: 14px; }
html[data-theme] .admin-body .admin-nav-footer {
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 10px;
  background: var(--ui-sidebar);
}
html[data-theme] .admin-body .admin-nav-footer strong,
html[data-theme] .admin-body .admin-nav-footer > span:last-child {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-height: 760px) and (min-width: 821px) {
  html[data-theme] .admin-body .admin-nav-footer { display: none; }
}

@media (max-width: 820px) {
  html[data-theme] .admin-body .site-footer { align-items: flex-start; padding-bottom: 6px; }
}

/* One theme switch geometry in every workspace. */
html[data-theme] .theme-toggle--topbar,
html[data-theme] .field-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 58px !important;
  min-width: 58px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  color: var(--ui-text-secondary, #56667a) !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .theme-toggle--topbar .theme-switch-track,
html[data-theme] .field-theme-toggle .theme-switch-track {
  position: relative;
  display: block;
  width: 54px !important;
  height: 28px !important;
  border: 1px solid var(--ui-border, #c8d2df) !important;
  border-radius: 14px;
  color: var(--ui-text-secondary, #56667a) !important;
  background: var(--ui-surface-alt, #f7f9fc) !important;
}
html[data-theme] .theme-toggle--topbar .theme-switch-track svg,
html[data-theme] .field-theme-toggle .theme-switch-track svg {
  position: absolute;
  top: 6px;
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8;
}
html[data-theme] .theme-toggle--topbar .theme-switch-sun,
html[data-theme] .field-theme-toggle .theme-switch-sun { left: 7px; display: block !important; }
html[data-theme] .theme-toggle--topbar .theme-switch-moon,
html[data-theme] .field-theme-toggle .theme-switch-moon { right: 7px; display: block !important; }
html[data-theme] .theme-toggle--topbar .theme-switch-thumb,
html[data-theme] .field-theme-toggle .theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ui-accent, #5b4fe9);
  box-shadow: none;
  transition: transform 0.18s ease, background 0.18s ease;
}
html[data-theme] .theme-toggle--topbar.is-dark .theme-switch-thumb,
html[data-theme] .field-theme-toggle.is-dark .theme-switch-thumb { transform: translateX(26px); }

/* The sidebar is intentionally navigation-only. Tenant data belongs to the header, not over the page footer. */
html[data-theme] .admin-body .admin-nav-footer { display: none !important; }

/* Shared admin geometry. Theme-specific rules are deliberately limited to visual tokens. */
html[data-theme] .admin-body .admin-command-bar {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
html[data-theme] .admin-body .admin-command-actions {
  display: flex !important;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
}
html[data-theme] .admin-body .admin-global-search {
  display: grid !important;
  grid-template-columns: auto minmax(180px, 350px) auto;
  align-items: center;
  gap: 9px;
  flex: 0 1 440px;
  min-width: 0;
  padding: 0 10px;
}
html[data-theme] .admin-body .admin-global-search input {
  width: 100%;
  min-height: 32px;
  padding: 0;
  border: 0 !important;
}
html[data-theme] .admin-body .admin-global-search kbd {
  display: inline-block;
  padding: 2px 5px;
  white-space: nowrap;
}
html[data-theme] .admin-body .admin-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
}
html[data-theme] .admin-body .admin-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
html[data-theme] .admin-body .admin-brand-mark {
  display: grid;
  place-items: center;
}
html[data-theme] .admin-body .admin-brand strong,
html[data-theme] .admin-body .admin-brand small { display: block; }
html[data-theme] .admin-body .admin-nav-group-label { display: block; }
html[data-theme] .admin-body .calendar-detail-panel {
  position: fixed;
  z-index: 80;
  top: 72px;
  right: 22px;
  width: min(380px, calc(100vw - 270px));
  max-height: calc(100vh - 94px);
  padding: 18px;
  border-radius: 6px;
  overflow-y: auto;
}
html[data-theme] .admin-body .calendar-detail-panel.hidden { display: none; }
html[data-theme] .admin-body .calendar-toolbar { gap: 8px; }
html[data-theme] .admin-body .calendar-month-label { min-width: 170px; font-size: 14px; text-align: center; }
html[data-theme] .admin-body .calendar-weekdays { gap: 5px; margin-bottom: 5px; }
html[data-theme] .admin-body .calendar-weekdays span { padding: 0 8px; }
html[data-theme] .admin-body .calendar-day-head strong { font-size: 16px; }
html[data-theme] .admin-body .calendar-detail-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
html[data-theme] .admin-body .calendar-detail-close { display: grid; flex: 0 0 auto; place-items: center; width: 30px; height: 30px; }
html[data-theme] .admin-body .calendar-detail-list { display: grid; gap: 0; margin: 14px 0 18px; }
html[data-theme] .admin-body .calendar-detail-list > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 10px 0; }
html[data-theme] .admin-body .calendar-detail-list :is(dt, dd) { margin: 0; font-size: 12px; line-height: 1.45; }
html[data-theme] .admin-body .calendar-detail-list dd { overflow-wrap: anywhere; }
html[data-theme] .admin-body .calendar-detail-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html[data-theme] .admin-body .calendar-detail-actions .button { display: grid; place-items: center; min-width: 0; text-align: center; }
html[data-theme] .admin-body :is(.mail-thread-list-wrap, .mail-thread-detail, .team-chat-layout, .team-chat-conversation) { min-height: 0; }

@media (max-width: 1180px) {
  html[data-theme] .admin-body .admin-shell { margin-left: 202px; padding-left: 16px; padding-right: 16px; }
  html[data-theme] .admin-body .admin-nav { width: 202px; }
  html[data-theme] .admin-body .admin-nav-link { font-size: 11px; }
}

@media (max-width: 900px) {
  html[data-theme] .admin-body .admin-shell { width: 100%; margin: 0; padding: 10px 12px 26px; }
  html[data-theme] .admin-body .admin-command-bar { margin: -10px -12px 12px; padding: 9px 12px; }
  html[data-theme] .admin-body .admin-nav {
    position: sticky;
    top: 54px;
    flex-direction: row;
    width: auto;
    min-height: 52px;
    margin: 0 0 12px;
    padding: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--ui-border);
    border-radius: 5px;
  }
  html[data-theme] .admin-body :is(.admin-brand, .admin-nav-group-label, .admin-nav-footer) { display: none !important; }
  html[data-theme] .admin-body .admin-nav-link { flex: 0 0 auto; min-height: 34px; font-size: 11px; }
  html[data-theme] .admin-body .admin-header { grid-template-columns: 1fr; min-height: auto; }
  html[data-theme] .admin-body .admin-session-card { display: none; }
  html[data-theme] .admin-body .calendar-detail-panel { top: 66px; right: 12px; width: min(390px, calc(100vw - 24px)); max-height: calc(100vh - 78px); }
}

@media (max-width: 640px) {
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(0, 1fr); width: 100%; }
  html[data-theme] .admin-body .admin-global-search kbd,
  html[data-theme] .admin-body .admin-topbar-calendar { display: none; }
  html[data-theme] .admin-body .admin-command-bar { gap: 8px; }
  html[data-theme] .admin-body .admin-command-actions { gap: 5px; }
  html[data-theme] .admin-body .admin-primary-action { width: 38px; min-width: 38px; overflow: hidden; padding: 0; font-size: 0; }
  html[data-theme] .admin-body .admin-primary-action::before { content: "+"; font-size: 20px; }
}

/* Shared Office shell: themes only provide tokens, never alternative geometry. */


html[data-theme] .admin-body .admin-shell {
  display: grid !important;
  grid-template-columns: 208px minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

html[data-theme] .admin-body .admin-nav {
  position: sticky;
  inset: auto;
  top: 0;
  grid-column: 1;
  grid-row: 1 / span 3;
  width: 208px;
  height: 100vh;
  min-height: 0;
  margin: 0;
  padding: 16px 10px;
  border: 0;
  border-right: 1px solid var(--ui-border);
  border-radius: 0;
  background: var(--ui-sidebar) !important;
  box-shadow: none !important;
}

html[data-theme] .admin-body .admin-command-bar {
  position: sticky;
  top: 0;
  grid-column: 2;
  grid-row: 1;
  min-height: 60px;
  margin: 0;
  padding: 12px 24px;
  border: 0;
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-app) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-theme] .admin-body .admin-header {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  min-height: 92px;
  margin: 0 24px;
  padding: 18px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
}

html[data-theme] .admin-body .admin-main-frame {
  display: flex;
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

html[data-theme] .admin-body .admin-app-layout {
  flex: 1 0 auto;
  min-width: 0;
  margin: 0 24px;
  padding: 20px 0 0;
}

html[data-theme] .admin-body .site-footer {
  flex: 0 0 auto;
  min-height: 54px;
  margin: 28px 24px 0;
  padding: 14px 0;
  border: 0 !important;
  border-top: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html[data-theme] .admin-body .admin-brand { margin: 0 6px 18px; }
html[data-theme] .admin-body .admin-brand-mark { width: 30px; height: 30px; border-radius: 5px; }
html[data-theme] .admin-body .admin-nav-group-label { margin: 0 8px 7px; font-size: 9px; letter-spacing: .08em; }
html[data-theme] .admin-body .admin-nav-link {
  min-height: 34px;
  margin: 1px 0;
  padding: 7px 10px;
  gap: 9px;
  border-left: 3px solid transparent;
  border-radius: 5px;
  color: var(--ui-text-secondary) !important;
  font-size: 12px;
  font-weight: 600;
}
html[data-theme] .admin-body .admin-nav-link svg { width: 16px; height: 16px; color: var(--ui-text-secondary); }
html[data-theme] .admin-body .admin-nav-link:hover { color: var(--ui-text) !important; background: var(--ui-surface-hover) !important; transform: none; }
html[data-theme] .admin-body .admin-nav-link:hover svg { color: var(--ui-text); }
html[data-theme] .admin-body .admin-nav-link.is-active,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] {
  border-left-color: var(--ui-accent);
  border-radius: 5px;
  color: var(--ui-text) !important;
  background: var(--ui-accent-soft) !important;
}
html[data-theme] .admin-body .admin-nav-link.is-active svg,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] svg { color: var(--ui-accent); }

html[data-theme] .admin-body .admin-command-bar,
html[data-theme] .admin-body .admin-command-actions { display: flex !important; align-items: center; }
html[data-theme] .admin-body .admin-command-bar { justify-content: space-between; gap: 16px; }
html[data-theme] .admin-body .admin-command-actions { gap: 7px; }
html[data-theme] .admin-body .admin-global-search {
  display: grid !important;
  grid-template-columns: 16px minmax(180px, 330px) auto;
  align-items: center;
  gap: 8px;
  flex: 0 1 420px;
  min-width: 0;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ui-border);
  border-radius: 5px;
  color: var(--ui-text-muted);
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body .admin-global-search input { min-height: 32px; color: var(--ui-text) !important; background: transparent !important; }
html[data-theme] .admin-body .admin-global-search kbd { border-color: var(--ui-border); color: var(--ui-text-muted); background: var(--ui-surface-alt); }
html[data-theme] .admin-body .admin-topbar-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--ui-border) !important;
  border-radius: 5px;
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body .admin-topbar-icon:hover { border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .theme-toggle--topbar {
  display: inline-grid !important;
  place-items: center;
  width: 50px !important;
  min-width: 50px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 5px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track { width: 42px !important; height: 22px !important; border: 0 !important; border-radius: 11px; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-thumb { top: 2px; left: 2px; width: 18px; height: 18px; background: var(--ui-accent); }
html[data-theme] .admin-body .theme-toggle--topbar.is-dark .theme-switch-thumb { transform: translateX(20px); }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track svg { top: 4px; width: 12px !important; height: 12px !important; color: var(--ui-text-muted); }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-sun { left: 5px; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-moon { right: 5px; }
html[data-theme] .admin-body .admin-primary-action { min-height: 34px; padding: 0 12px; border-radius: 5px; }

/* Neutralize legacy card-on-card treatments in the order workspace. */
html[data-theme] .admin-body .booking-card {
  gap: 14px;
  padding: 16px;
  border-color: var(--ui-border) !important;
  border-radius: 6px;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-card-header { padding-bottom: 10px; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .booking-card-header h3 { margin: 0; font-size: 17px; }
html[data-theme] .admin-body .booking-card-meta { justify-content: flex-start; gap: 9px; color: var(--ui-text-secondary) !important; font-size: 12px; }
html[data-theme] .admin-body .booking-quick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0;
  background: transparent !important;
}
html[data-theme] .admin-body .booking-quick-fact {
  min-width: 0;
  padding: 4px 14px 12px;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-quick-fact:first-child { padding-left: 0; }
html[data-theme] .admin-body .booking-quick-fact:last-child { border-right: 0 !important; }
html[data-theme] .admin-body .booking-quick-problem { grid-column: 1 / -1; padding: 11px 0 2px; border-right: 0 !important; }
html[data-theme] .admin-body .booking-quick-fact > span { color: var(--ui-text-muted) !important; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
html[data-theme] .admin-body .booking-quick-fact strong { color: var(--ui-text) !important; font-size: 13px; line-height: 1.45; }
html[data-theme] .admin-body .booking-quick-fact small { color: var(--ui-text-secondary) !important; font-size: 12px; line-height: 1.45; }
html[data-theme] .admin-body .booking-quick-signals { gap: 6px; }
html[data-theme] .admin-body .booking-progress {
  gap: 12px;
  padding: 14px 0;
  border: 0 !important;
  border-bottom: 1px solid var(--ui-border) !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-progress::before { display: none; }
html[data-theme] .admin-body .booking-progress-head { align-items: flex-start; }
html[data-theme] .admin-body .booking-progress-head strong { color: var(--ui-text) !important; font-size: 15px; }
html[data-theme] .admin-body .booking-progress-head p { color: var(--ui-text-secondary) !important; font-size: 13px; }
html[data-theme] .admin-body .booking-progress-badge { min-height: 26px; border-color: var(--ui-border); border-radius: 4px; color: var(--ui-text-secondary); background: var(--ui-surface-alt); }
html[data-theme] .admin-body .booking-progress-lock-label,
html[data-theme] .admin-body .booking-progress-lock-deadline { color: var(--ui-text-muted) !important; }
html[data-theme] .admin-body .booking-progress-lock-value { color: var(--ui-text) !important; }
html[data-theme] .admin-body .booking-progress-lock-value.is-confirmed { color: var(--ui-success) !important; }
html[data-theme] .admin-body .booking-progress-steps { gap: 12px; padding-top: 2px; }
html[data-theme] .admin-body .booking-progress-steps::before { top: 9px; height: 1px; border-radius: 0; background: var(--ui-border); animation: none; }
html[data-theme] .admin-body .booking-progress-step { grid-template-rows: 20px auto; gap: 8px; background: transparent !important; }
html[data-theme] .admin-body .booking-progress-step-marker { width: 18px; height: 18px; border-color: var(--ui-border-strong); background: var(--ui-surface); box-shadow: none; }
html[data-theme] .admin-body .booking-progress-step.is-done .booking-progress-step-marker { border-color: var(--ui-success); background: var(--ui-success); }
html[data-theme] .admin-body .booking-progress-step.is-current .booking-progress-step-marker { border-color: var(--ui-warning); background: var(--ui-warning); box-shadow: none; animation: none; }
html[data-theme] .admin-body .booking-progress-step.is-expired .booking-progress-step-marker { border-color: var(--ui-danger); background: var(--ui-danger); box-shadow: none; animation: none; }
html[data-theme] .admin-body .booking-progress-step-copy strong { color: var(--ui-text) !important; font-size: 12px; }
html[data-theme] .admin-body .booking-progress-step-copy span { color: var(--ui-text-muted) !important; font-size: 10px; }
html[data-theme] .admin-body .booking-full-details,
html[data-theme] .admin-body .booking-more-actions { border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .booking-full-details > summary,
html[data-theme] .admin-body .booking-more-summary { min-height: 36px; padding: 9px 0; border-top: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); border-radius: 0; color: var(--ui-text) !important; background: transparent !important; }
html[data-theme] .admin-body .booking-full-details[open] > .booking-details { padding: 12px 0 2px; }
html[data-theme] .admin-body .booking-actions { gap: 8px; }
html[data-theme] .admin-body .booking-actions-primary { padding-top: 2px; border: 0; background: transparent; }
html[data-theme] .admin-body .booking-details { color: var(--ui-text-secondary) !important; }

html[data-theme] .admin-body :is(input, select, textarea) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(input, select, textarea)::placeholder { color: var(--ui-text-muted) !important; opacity: 1; }
html[data-theme] .admin-body :is(input, select, textarea):focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 17%, transparent) !important; }
html[data-theme] .admin-body .panel,
html[data-theme] .admin-body :is(.detail-box, .metric-card, .service-box, .slot-block, .customer-fact-card, .customer-section-card, .settings-section, .mail-thread-card, .mail-thread-detail, .mailbox-command-bar, .mail-inbox-sidebar, .audit-item) { border-color: var(--ui-border) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.panel, .detail-box, .metric-card, .service-box, .slot-block, .customer-fact-card, .customer-section-card, .settings-section, .mail-thread-card, .mail-thread-detail, .mailbox-command-bar, .mail-inbox-sidebar, .audit-item) :is(p, small, span, li, td, dd) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body :is(.panel, .detail-box, .metric-card, .service-box, .slot-block, .customer-fact-card, .customer-section-card, .settings-section, .mail-thread-card, .mail-thread-detail, .mailbox-command-bar, .mail-inbox-sidebar, .audit-item) :is(h1, h2, h3, h4, strong, label, dt) { color: var(--ui-text) !important; }

@media (max-width: 900px) {
  html[data-theme] .admin-body .admin-shell { display: flex !important; min-height: 100vh; }
  html[data-theme] .admin-body .admin-command-bar { position: sticky; width: 100%; min-height: 54px; padding: 10px 12px; }
  html[data-theme] .admin-body .admin-header { width: auto; margin: 0 12px; padding: 14px 0; }
  html[data-theme] .admin-body .admin-nav { position: sticky; top: 54px; width: auto; height: auto; min-height: 48px; margin: 0 12px 12px; padding: 6px; border: 1px solid var(--ui-border); border-radius: 5px; }
  html[data-theme] .admin-body .admin-main-frame { display: flex; width: 100%; }
  html[data-theme] .admin-body .admin-app-layout { margin: 0 12px; padding-top: 8px; }
  html[data-theme] .admin-body .site-footer { margin: 22px 12px 0; }
  html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: 1fr; }
  html[data-theme] .admin-body .booking-quick-fact { padding: 9px 0; border-right: 0 !important; border-bottom: 1px solid var(--ui-border) !important; }
  html[data-theme] .admin-body .booking-quick-problem { grid-column: auto; border-bottom: 0 !important; }
}

@media (max-width: 640px) {
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: 16px minmax(0, 1fr); flex: 1 1 auto; }
  html[data-theme] .admin-body .admin-global-search kbd,
  html[data-theme] .admin-body .admin-topbar-calendar { display: none; }
  html[data-theme] .admin-body .admin-command-actions { gap: 5px; }
  html[data-theme] .admin-body .admin-primary-action { width: 34px; min-width: 34px; padding: 0; font-size: 0; }
  html[data-theme] .admin-body .admin-primary-action::before { content: "+"; font-size: 19px; }
  html[data-theme] .admin-body .booking-progress-steps { gap: 5px; }
  html[data-theme] .admin-body .booking-progress-steps::before { left: calc(16.666% + 8px); right: calc(16.666% + 8px); }
  html[data-theme] .admin-body .booking-progress-step-copy strong { font-size: 10px; }
  html[data-theme] .admin-body .booking-progress-step-copy span { font-size: 8px; }
}

/* Lock navigation geometry so light and dark cannot inherit legacy inline menu rules. */
html[data-theme] .admin-body .admin-nav-link {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  width: 100% !important;
  max-width: 100%;
  align-self: stretch;
}

/* Checkbox switches need a later rule because generic input surfaces use !important. */
html[data-theme] .admin-body .toggle-field {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
html[data-theme] .admin-body .toggle-field input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 999px;
  outline: 0;
  cursor: pointer;
  background: radial-gradient(circle at 10px 50%, #fff 0 6px, transparent 7px), var(--ui-text-muted) !important;
  box-shadow: none !important;
  transition: background .16s ease, border-color .16s ease;
}
html[data-theme] .admin-body .toggle-field input[type="checkbox"]:checked {
  border-color: var(--ui-accent) !important;
  background: radial-gradient(circle at calc(100% - 10px) 50%, #fff 0 6px, transparent 7px), var(--ui-accent) !important;
}
html[data-theme] .admin-body .toggle-field input[type="checkbox"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 23%, transparent) !important;
}
html[data-theme] .admin-body .toggle-field span { color: var(--ui-text) !important; }

/* Field service uses the same compact office system as the central workspace. */
html[data-theme="light"] .field-body {
  --field-app: #f3f6fa;
  --field-surface: #ffffff;
  --field-surface-alt: #f7f9fc;
  --field-surface-hover: #edf2f7;
  --field-border: #d7e0ea;
  --field-border-strong: #b8c5d4;
  --field-text: #17253a;
  --field-text-secondary: #465a72;
  --field-text-muted: #687b92;
  --field-accent: #5b4fe9;
  --field-accent-hover: #493ed1;
  --field-accent-soft: rgba(91, 79, 233, 0.11);
  --field-success: #18824f;
  --field-danger: #b93845;
}
html[data-theme="dark"] .field-body {
  --field-app: #10141b;
  --field-surface: #1a202a;
  --field-surface-alt: #202733;
  --field-surface-hover: #293241;
  --field-border: #344052;
  --field-border-strong: #4a5870;
  --field-text: #f4f7fb;
  --field-text-secondary: #b6c1d0;
  --field-text-muted: #8e9aad;
  --field-accent: #9387ff;
  --field-accent-hover: #aca3ff;
  --field-accent-soft: rgba(147, 135, 255, 0.17);
  --field-success: #59bd8c;
  --field-danger: #ef7780;
}
html[data-theme] .field-body,
html[data-theme] .field-body * { box-sizing: border-box; }
html[data-theme] .field-body {
  min-height: 100vh;
  color: var(--field-text);
  background: var(--field-app) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html[data-theme] .field-shell { width: min(1320px, calc(100% - 32px)); padding: 18px 0 36px; }
html[data-theme] .field-header {
  min-height: 84px;
  padding: 14px 16px;
  border: 1px solid var(--field-border) !important;
  border-radius: 6px;
  color: var(--field-text) !important;
  background: var(--field-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .field-brand { gap: 11px; }
html[data-theme] .field-brand-mark {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  border-radius: 5px;
  background: var(--field-accent) !important;
  box-shadow: none;
  font-size: 12px;
}
html[data-theme] .field-brand h1 { margin: 1px 0 2px; color: var(--field-text) !important; font-size: clamp(24px, 3.2vw, 34px); }
html[data-theme] .field-body :is(.field-brand p, .field-time-head p, .field-job-card p, .field-detail-block p, .field-time-manual, .field-time-entries small) { color: var(--field-text-secondary) !important; }
html[data-theme] .field-body .eyebrow { color: var(--field-text-muted) !important; font-size: 10px; }
html[data-theme] .field-header-actions { gap: 7px; }
html[data-theme] .field-body .button {
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid var(--field-accent) !important;
  border-radius: 5px;
  color: #fff !important;
  background: var(--field-accent) !important;
  box-shadow: none !important;
  font-size: 12px;
  font-weight: 650;
}
html[data-theme] .field-body .button:hover { border-color: var(--field-accent-hover) !important; background: var(--field-accent-hover) !important; box-shadow: none !important; transform: none; }
html[data-theme] .field-body :is(.button-secondary, .button-call) { border-color: var(--field-border-strong) !important; color: var(--field-text) !important; background: var(--field-surface-alt) !important; }
html[data-theme] .field-body .button-danger { border-color: var(--field-danger) !important; background: var(--field-danger) !important; }
html[data-theme] .field-filter-bar {
  position: sticky;
  top: 8px;
  min-height: 48px;
  margin: 12px 0;
  padding: 6px;
  border: 1px solid var(--field-border) !important;
  border-radius: 6px;
  background: var(--field-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .field-filter { min-height: 32px; padding: 6px 11px; border-radius: 4px; color: var(--field-text-secondary) !important; font-size: 12px; }
html[data-theme] .field-filter.is-active { color: var(--field-text) !important; background: var(--field-accent-soft) !important; box-shadow: inset 0 -2px 0 var(--field-accent); }
html[data-theme] .field-sync-state { color: var(--field-text-secondary) !important; font-size: 11px; }
html[data-theme] .field-sync-state::before { background: var(--field-success); }
html[data-theme] .field-time-panel,
html[data-theme] .field-job-card,
html[data-theme] .field-job-details,
html[data-theme] .field-detail-block,
html[data-theme] .field-completion-form,
html[data-theme] .field-completed-report,
html[data-theme] .field-supplier-card,
html[data-theme] .field-material-row,
html[data-theme] .field-service-template-row,
html[data-theme] .field-maintenance-check-row,
html[data-theme] .field-summary > *,
html[data-theme] .field-time-summary > *,
html[data-theme] .field-time-entry {
  border-color: var(--field-border) !important;
  border-radius: 6px;
  color: var(--field-text) !important;
  background: var(--field-surface) !important;
  box-shadow: none !important;
}
html[data-theme] .field-time-panel { padding: 14px; }
html[data-theme] .field-time-summary { gap: 8px; color: inherit !important; background: transparent !important; }
html[data-theme] .field-time-summary > *,
html[data-theme] .field-summary > * { min-height: 60px; padding: 10px 12px; background: var(--field-surface-alt) !important; }
html[data-theme] .field-job-card { border-left: 3px solid var(--field-accent) !important; }
html[data-theme] .field-job-card:hover { border-color: var(--field-border-strong) !important; border-left-color: var(--field-accent) !important; background: var(--field-surface-alt) !important; }
html[data-theme] .field-body :is(input, select, textarea) { border-color: var(--field-border-strong) !important; border-radius: 5px; color: var(--field-text) !important; background: var(--field-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .field-body :is(input, select, textarea)::placeholder { color: var(--field-text-muted) !important; }
html[data-theme] .field-body :is(input, select, textarea):focus { border-color: var(--field-accent) !important; box-shadow: 0 0 0 2px var(--field-accent-soft) !important; }
html[data-theme] .field-body .notice { border-color: var(--field-border) !important; border-radius: 5px; color: var(--field-text-secondary) !important; background: var(--field-surface-alt) !important; }

@media (max-width: 820px) {
  html[data-theme] .field-shell { width: min(100% - 20px, 1320px); padding-top: max(10px, env(safe-area-inset-top)); }
  html[data-theme] .field-header { align-items: flex-start; flex-direction: column; }
  html[data-theme] .field-header-actions { width: 100%; }
  html[data-theme] .field-header-actions > * { flex: 1 1 auto; }
  html[data-theme] .field-theme-toggle { flex: 0 0 58px; }
}

/* Overrides the former dark-only toggle rules with the exact same control in both modes. */
html[data-theme] .admin-body .theme-toggle--topbar,
html[data-theme] .field-body .field-theme-toggle {
  display: inline-flex !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track,
html[data-theme] .field-body .field-theme-toggle .theme-switch-track {
  display: block !important;
  width: 54px !important;
  height: 28px !important;
  border: 1px solid var(--ui-border, var(--field-border)) !important;
  border-radius: 14px !important;
  color: var(--ui-text-secondary, var(--field-text-secondary)) !important;
  background: var(--ui-surface-alt, var(--field-surface-alt)) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-sun,
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-moon,
html[data-theme] .field-body .field-theme-toggle .theme-switch-sun,
html[data-theme] .field-body .field-theme-toggle .theme-switch-moon { display: block !important; }

/* Maintenance contracts: compact list with a contextual detail pane. */
html[data-theme] .admin-body .maintenance-kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 14px;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric {
  min-height: 58px;
  margin: 0;
  padding: 10px 16px;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric:last-child { border-right: 0 !important; }
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric span { color: var(--ui-text-muted) !important; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric strong { display: block; margin-top: 2px; color: var(--ui-text) !important; font-size: 22px; line-height: 1; }
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric.is-overdue { box-shadow: inset 3px 0 0 var(--ui-danger) !important; }
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric.is-due-soon { box-shadow: inset 3px 0 0 var(--ui-warning) !important; }
html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric.is-active { box-shadow: inset 3px 0 0 var(--ui-success) !important; }

html[data-theme] .admin-body .maintenance-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 430px); gap: 14px; align-items: start; }
html[data-theme] .admin-body .maintenance-list-pane { min-width: 0; }
html[data-theme] .admin-body .maintenance-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, 210px) auto; gap: 10px; align-items: end; margin-bottom: 6px; }
html[data-theme] .admin-body .maintenance-toolbar > * { margin: 0; }
html[data-theme] .admin-body .maintenance-refresh-button { min-height: 38px; white-space: nowrap; }
html[data-theme] .admin-body .maintenance-list { display: grid; gap: 8px; }
html[data-theme] .admin-body .maintenance-contract-row { position: relative; display: grid; grid-template-columns: minmax(170px, .8fr) minmax(290px, 1.35fr); gap: 8px 18px; padding: 14px 16px; overflow: visible; border: 1px solid var(--ui-border) !important; border-radius: 8px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
html[data-theme] .admin-body .maintenance-contract-row:hover { border-color: var(--ui-border-strong) !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .maintenance-contract-row:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
html[data-theme] .admin-body .maintenance-contract-row.is-selected { border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent) !important; }
html[data-theme] .admin-body .maintenance-row-copy h3 { margin: 3px 0 2px; color: var(--ui-text) !important; font-size: 16px; }
html[data-theme] .admin-body .maintenance-row-copy p { margin: 0; color: var(--ui-text-secondary) !important; font-size: 13px; }
html[data-theme] .admin-body .maintenance-row-facts { display: grid; grid-template-columns: repeat(4, minmax(90px, 1fr)); gap: 8px; }
html[data-theme] .admin-body .maintenance-row-facts span { min-width: 0; color: var(--ui-text-secondary) !important; font-size: 12px; line-height: 1.35; }
html[data-theme] .admin-body .maintenance-row-facts b { display: block; margin-bottom: 2px; overflow: hidden; color: var(--ui-text-muted) !important; font-size: 10px; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
html[data-theme] .admin-body .maintenance-row-note { grid-column: 1 / -1; margin: 0; padding: 7px 9px; border-left: 2px solid var(--ui-accent); color: var(--ui-text-secondary) !important; font-size: 12px; line-height: 1.45; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-row-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; padding-top: 3px; }
html[data-theme] .admin-body .maintenance-row-tags,
html[data-theme] .admin-body .maintenance-row-actions,
html[data-theme] .admin-body .maintenance-detail-status,
html[data-theme] .admin-body .maintenance-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
html[data-theme] .admin-body .maintenance-row-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }
html[data-theme] .admin-body .maintenance-more-button { min-width: 36px; padding-inline: 8px !important; font-weight: 800; letter-spacing: 1px; }
html[data-theme] .admin-body .maintenance-status-label { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--ui-border); border-radius: 999px; color: var(--ui-text-secondary); font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
html[data-theme] .admin-body .maintenance-status-label.is-active { border-color: color-mix(in srgb, var(--ui-success) 45%, var(--ui-border)); color: var(--ui-success); }
html[data-theme] .admin-body .maintenance-status-label.is-paused { color: var(--ui-warning); }
html[data-theme] .admin-body .maintenance-status-label.is-ended { color: var(--ui-text-muted); }
html[data-theme] .admin-body .maintenance-action-menu { position: absolute; z-index: 8; right: 14px; bottom: 12px; display: grid; min-width: 205px; padding: 5px; border: 1px solid var(--ui-border-strong); border-radius: 8px; background: var(--ui-surface); box-shadow: 0 14px 28px rgba(0, 0, 0, .18); }
html[data-theme] .admin-body .maintenance-action-menu button { padding: 8px 10px; border: 0; border-radius: 5px; color: var(--ui-text); text-align: left; background: transparent; cursor: pointer; }
html[data-theme] .admin-body .maintenance-action-menu button:hover { background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-action-menu span { display: block; height: 1px; margin: 4px; background: var(--ui-border); }
html[data-theme] .admin-body .maintenance-action-menu button.is-danger { color: var(--ui-danger); }

html[data-theme] .admin-body .maintenance-detail-panel { position: sticky; top: 12px; max-height: calc(100vh - 28px); overflow: auto; border: 1px solid var(--ui-border) !important; border-radius: 10px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body .maintenance-detail-panel.hidden { display: none !important; }
html[data-theme] .admin-body .maintenance-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .maintenance-detail-head h3 { margin: 3px 0 4px; color: var(--ui-text) !important; font-size: 18px; }
html[data-theme] .admin-body .maintenance-detail-head p { margin: 0; color: var(--ui-text-secondary) !important; font-size: 12px; line-height: 1.45; }
html[data-theme] .admin-body .maintenance-detail-close { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-text-secondary); font-size: 20px; line-height: 1; background: var(--ui-surface-alt); cursor: pointer; }
html[data-theme] .admin-body .maintenance-detail-status { padding: 10px 16px 0; }
html[data-theme] .admin-body .maintenance-detail-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 12px 16px 0; padding: 3px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-detail-tabs button { min-height: 30px; padding: 5px 4px; border: 0; border-radius: 4px; color: var(--ui-text-secondary); font-size: 11px; font-weight: 700; background: transparent; cursor: pointer; }
html[data-theme] .admin-body .maintenance-detail-tabs button.is-active { color: var(--ui-text); background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
html[data-theme] .admin-body .maintenance-detail-content { min-height: 210px; padding: 16px; }
html[data-theme] .admin-body .maintenance-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme] .admin-body .maintenance-detail-field { min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-detail-field span,
html[data-theme] .admin-body .maintenance-detail-note > span { display: block; margin-bottom: 4px; color: var(--ui-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html[data-theme] .admin-body .maintenance-detail-field strong { display: block; overflow-wrap: anywhere; color: var(--ui-text); font-size: 13px; line-height: 1.35; }
html[data-theme] .admin-body .maintenance-detail-note { margin-top: 10px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-detail-note p { margin: 0; color: var(--ui-text-secondary); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
html[data-theme] .admin-body .maintenance-detail-empty,
html[data-theme] .admin-body .maintenance-detail-loading { margin: 0; padding: 20px 12px; border: 1px dashed var(--ui-border-strong); border-radius: 6px; color: var(--ui-text-secondary); font-size: 13px; text-align: center; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .maintenance-history-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-theme] .admin-body .maintenance-history-list li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .maintenance-history-list li:last-child { border-bottom: 0; }
html[data-theme] .admin-body .maintenance-history-list time { color: var(--ui-text-muted); font-size: 12px; }
html[data-theme] .admin-body .maintenance-history-list strong,
html[data-theme] .admin-body .maintenance-history-list span { display: block; }
html[data-theme] .admin-body .maintenance-history-list strong { color: var(--ui-text); font-size: 13px; }
html[data-theme] .admin-body .maintenance-history-list span { margin-top: 2px; color: var(--ui-text-secondary); font-size: 12px; }
html[data-theme] .admin-body .maintenance-detail-actions { padding: 12px 16px 16px; border-top: 1px solid var(--ui-border); }
html[data-theme] .admin-body .maintenance-detail-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }

@media (max-width: 1120px) {
  html[data-theme] .admin-body .maintenance-workspace { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .admin-body .maintenance-detail-panel { position: relative; top: auto; max-height: none; }
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .maintenance-kpi-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric:nth-child(2) { border-right: 0 !important; }
  html[data-theme] .admin-body .maintenance-kpi-bar .maintenance-metric:nth-child(-n + 2) { border-bottom: 1px solid var(--ui-border) !important; }
  html[data-theme] .admin-body .maintenance-toolbar { grid-template-columns: 1fr 1fr; }
  html[data-theme] .admin-body .maintenance-toolbar .archive-search-field { grid-column: 1 / -1; }
  html[data-theme] .admin-body .maintenance-contract-row { grid-template-columns: 1fr; }
  html[data-theme] .admin-body .maintenance-row-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-theme] .admin-body .maintenance-row-footer { align-items: flex-start; flex-direction: column; }
  html[data-theme] .admin-body .maintenance-detail-grid { grid-template-columns: 1fr; }
}

html[data-theme] .admin-body,
html[data-theme] .admin-body .admin-shell,
html[data-theme] .admin-body .admin-main-frame,
html[data-theme] .admin-body .admin-app-layout,
html[data-theme] .admin-body .admin-view { min-width: 0; max-width: none; }
html[data-theme] .admin-body { overflow-x: clip; }
html[data-theme] .admin-body .admin-app-layout { width: auto; margin-right: 16px; }
html[data-theme] .admin-body :is(.maintenance-workspace, .callback-workspace) { width: 100%; min-width: 0; }
html[data-theme] .admin-body .maintenance-workspace { grid-template-columns: minmax(0, 1fr) minmax(400px, 430px); }

html[data-theme] .admin-body .callback-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 430px); gap: 14px; align-items: start; }
html[data-theme] .admin-body .callback-list-pane { min-width: 0; }
html[data-theme] .admin-body .callback-list-pane .booking-list { display: grid; gap: 8px; }
html[data-theme] .admin-body .callback-list-pane .booking-card { cursor: pointer; }
html[data-theme] .admin-body .callback-list-pane .booking-card.is-selected { border-color: var(--ui-accent) !important; background: var(--ui-accent-soft) !important; box-shadow: inset 3px 0 0 var(--ui-accent) !important; }
html[data-theme] .admin-body .callback-list-pane .booking-card:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
html[data-theme] .admin-body .callback-detail-panel { position: sticky; top: 12px; max-height: calc(100vh - 28px); overflow: auto; border: 1px solid var(--ui-border) !important; border-radius: 10px; color: var(--ui-text) !important; background: var(--ui-surface) !important; box-shadow: none !important; }
html[data-theme] .admin-body .callback-detail-panel.hidden { display: none !important; }
html[data-theme] .admin-body .callback-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 10px; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .callback-detail-head h3 { margin: 3px 0 4px; color: var(--ui-text) !important; font-size: 18px; }
html[data-theme] .admin-body .callback-detail-head p { margin: 0; color: var(--ui-text-secondary) !important; font-size: 12px; line-height: 1.45; }
html[data-theme] .admin-body .callback-detail-close { flex: 0 0 auto; width: 30px; height: 30px; border: 1px solid var(--ui-border); border-radius: 6px; color: var(--ui-text-secondary); font-size: 20px; line-height: 1; background: var(--ui-surface-alt); cursor: pointer; }
html[data-theme] .admin-body .callback-detail-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin: 12px 16px 0; padding: 3px; border: 1px solid var(--ui-border); border-radius: 7px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .callback-detail-tabs button { min-height: 30px; padding: 5px 4px; border: 0; border-radius: 4px; color: var(--ui-text-secondary); font-size: 11px; font-weight: 700; background: transparent; cursor: pointer; }
html[data-theme] .admin-body .callback-detail-tabs button.is-active { color: var(--ui-text); background: var(--ui-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .14); }
html[data-theme] .admin-body .callback-detail-content { min-height: 210px; padding: 16px; }
html[data-theme] .admin-body .callback-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
html[data-theme] .admin-body .callback-detail-field { min-width: 0; padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .callback-detail-field span,
html[data-theme] .admin-body .callback-detail-note > span { display: block; margin-bottom: 4px; color: var(--ui-text-muted); font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
html[data-theme] .admin-body .callback-detail-field strong { display: block; overflow-wrap: anywhere; color: var(--ui-text); font-size: 13px; line-height: 1.35; }
html[data-theme] .admin-body .callback-detail-note { margin-top: 10px; padding: 10px; border: 1px solid var(--ui-border); border-radius: 6px; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .callback-detail-note p { margin: 0; color: var(--ui-text-secondary); font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
html[data-theme] .admin-body .callback-detail-empty { margin: 0; padding: 20px 12px; border: 1px dashed var(--ui-border-strong); border-radius: 6px; color: var(--ui-text-secondary); font-size: 13px; text-align: center; background: var(--ui-surface-alt); }
html[data-theme] .admin-body .callback-history-list,
html[data-theme] .admin-body .callback-file-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
html[data-theme] .admin-body .callback-history-list li,
html[data-theme] .admin-body .callback-file-list > div { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid var(--ui-border); }
html[data-theme] .admin-body .callback-history-list li:last-child,
html[data-theme] .admin-body .callback-file-list > div:last-child { border-bottom: 0; }
html[data-theme] .admin-body .callback-history-list time,
html[data-theme] .admin-body .callback-file-list span { color: var(--ui-text-muted); font-size: 12px; }
html[data-theme] .admin-body .callback-history-list strong,
html[data-theme] .admin-body .callback-file-list strong { color: var(--ui-text); font-size: 13px; }
html[data-theme] .admin-body .callback-detail-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 12px 16px 16px; border-top: 1px solid var(--ui-border); }
html[data-theme] .admin-body .callback-detail-actions .button { min-height: 32px; padding: 6px 10px; font-size: 12px; }

@media (max-width: 1180px) {
  html[data-theme] .admin-body .maintenance-workspace,
  html[data-theme] .admin-body .callback-workspace { grid-template-columns: minmax(0, 1fr); }
  html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel) { position: relative; top: auto; max-height: none; }
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-app-layout { margin-right: 12px; }
  html[data-theme] .admin-body .callback-detail-grid { grid-template-columns: 1fr; }
}

/* Canonical admin palette. This is the single source of truth for both themes:
   identical structure, neutral surfaces, indigo accent. Do not add new palette
   layers - change the values here. */
html[data-theme="dark"] .admin-body {
  --ui-app: #0d0e11;
  --ui-sidebar: #0f1013;
  --ui-surface: #16171c;
  --ui-surface-alt: #101116;
  --ui-surface-hover: #20222a;
  --ui-border: #242731;
  --ui-border-strong: #333743;
  --ui-text: #f4f5f9;
  --ui-text-secondary: #a0a3b1;
  --ui-text-muted: #6e7280;
  --ui-accent: #6366f1;
  --ui-accent-hover: #4f52e9;
  --ui-accent-soft: #26284f;
  --ui-success: #34b374;
  --ui-warning: #e5aa42;
  --ui-danger: #ef5f68;
  --cc-canvas: var(--ui-app);
  --cc-sidebar: var(--ui-sidebar);
  --cc-surface: var(--ui-surface);
  --cc-surface-raised: var(--ui-surface-alt);
  --cc-surface-hover: var(--ui-surface-hover);
  --cc-border: var(--ui-border);
  --cc-border-strong: var(--ui-border-strong);
  --cc-text: var(--ui-text);
  --cc-text-muted: var(--ui-text-secondary);
  --cc-text-faint: var(--ui-text-muted);
  --cc-primary: var(--ui-accent);
  --cc-primary-hover: var(--ui-accent-hover);
  --cc-primary-soft: var(--ui-accent-soft);
  --cc-green: var(--ui-success);
  --cc-orange: var(--ui-warning);
  --cc-red: var(--ui-danger);
}

html[data-theme="light"] .admin-body {
  --ui-app: #eceef3;
  --ui-sidebar: #ffffff;
  --ui-surface: #ffffff;
  --ui-surface-alt: #f5f6fa;
  --ui-surface-hover: #eaecf2;
  --ui-border: #e2e4ec;
  --ui-border-strong: #c3c7d3;
  --ui-text: #101217;
  --ui-text-secondary: #434754;
  --ui-text-muted: #6b7080;
  --ui-accent: #6366f1;
  --ui-accent-hover: #4f52e9;
  --ui-accent-soft: #eceefd;
  --ui-success: #1a8754;
  --ui-warning: #b47e0e;
  --ui-danger: #d63b45;
  --cc-canvas: var(--ui-app);
  --cc-sidebar: var(--ui-sidebar);
  --cc-surface: var(--ui-surface);
  --cc-surface-raised: var(--ui-surface-alt);
  --cc-surface-hover: var(--ui-surface-hover);
  --cc-border: var(--ui-border);
  --cc-border-strong: var(--ui-border-strong);
  --cc-text: var(--ui-text);
  --cc-text-muted: var(--ui-text-secondary);
  --cc-text-faint: var(--ui-text-muted);
  --cc-primary: var(--ui-accent);
  --cc-primary-hover: var(--ui-accent-hover);
  --cc-primary-soft: var(--ui-accent-soft);
  --cc-green: var(--ui-success);
  --cc-orange: var(--ui-warning);
  --cc-red: var(--ui-danger);
}

html[data-theme] .admin-body {
  min-height: 100dvh;
  color: var(--ui-text) !important;
  background: var(--ui-app) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme] .admin-body .admin-shell {
  width: auto !important;
  max-width: none !important;
  min-height: 100dvh;
  margin: 0 0 0 208px !important;
  padding: 0 20px 24px !important;
}

html[data-theme] .admin-body .admin-main-frame,
html[data-theme] .admin-body .admin-app-layout,
html[data-theme] .admin-body .admin-view { width: 100% !important; max-width: none !important; }
html[data-theme] .admin-body .admin-app-layout { margin-right: 0 !important; }

html[data-theme] .admin-body .admin-nav {
  position: fixed !important;
  inset: 0 auto 0 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  width: 208px !important;
  min-height: 100dvh;
  margin: 0 !important;
  padding: 16px 10px !important;
  overflow-y: auto;
  border: 0 !important;
  border-right: 1px solid var(--ui-border) !important;
  border-radius: 0 !important;
  color: var(--ui-text) !important;
  background: var(--ui-sidebar) !important;
  box-shadow: none !important;
}

html[data-theme] .admin-body .admin-brand { margin: 0 0 22px !important; padding: 0 8px !important; color: var(--ui-text) !important; }
html[data-theme] .admin-body .admin-brand-mark { border-radius: 6px !important; color: #fff !important; background: var(--ui-accent) !important; }
html[data-theme] .admin-body .admin-brand small,
html[data-theme] .admin-body .admin-nav-group-label { color: var(--ui-text-muted) !important; }
html[data-theme] .admin-body .admin-nav-group-label { margin: 0 8px 7px !important; font-size: 10px !important; letter-spacing: .08em; text-transform: uppercase !important; }
html[data-theme] .admin-body .admin-nav-link {
  min-height: 36px !important;
  margin: 1px 0 !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-left: 3px solid transparent !important;
  border-radius: 5px !important;
  color: var(--ui-text-secondary) !important;
  background: transparent !important;
  font-size: 12px !important;
}
html[data-theme] .admin-body .admin-nav-link:hover { color: var(--ui-text) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .admin-nav-link.is-active,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] {
  border-left-color: var(--ui-accent) !important;
  color: var(--ui-text) !important;
  background: var(--ui-accent-soft) !important;
}
html[data-theme] .admin-body .admin-nav-link::before { display: none !important; }
html[data-theme] .admin-body .admin-nav-footer { margin-top: auto !important; border-top-color: var(--ui-border) !important; color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .admin-nav-footer {
  display: grid !important;
  gap: 7px;
  padding: 12px 8px 4px !important;
  border-top: 1px solid var(--ui-border) !important;
}
html[data-theme] .admin-body .admin-nav-footer > strong {
  overflow: hidden;
  color: var(--ui-text) !important;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .admin-nav-userbar {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 7px;
  border-radius: 6px;
  background: var(--ui-surface-alt);
}
html[data-theme] .admin-body .admin-nav-avatar {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--ui-accent);
  font-size: 11px;
  font-weight: 800;
}
html[data-theme] .admin-body .admin-brand-mark.has-image,
html[data-theme] .admin-body .admin-nav-avatar.has-image {
  color: transparent !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
}

/* Settings feedback for the tenant-specific system logo. */
.system-logo-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 6px;
  background: var(--ui-surface-alt);
}

.system-logo-preview[hidden] { display: none; }

.system-logo-preview img {
  display: block;
  width: 58px;
  height: 40px;
  object-fit: contain;
  border-radius: 4px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body .admin-nav-usercopy {
  display: grid;
  min-width: 0;
  gap: 1px;
}
html[data-theme] .admin-body .admin-nav-usercopy strong,
html[data-theme] .admin-body .admin-nav-usercopy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .admin-nav-usercopy strong { color: var(--ui-text) !important; font-size: 11px; }
html[data-theme] .admin-body .admin-nav-usercopy small { color: var(--ui-text-muted) !important; font-size: 10px; }
html[data-theme] .admin-body .admin-nav-settings {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 5px;
  color: var(--ui-text-secondary) !important;
  background: transparent;
}
html[data-theme] .admin-body .admin-nav-settings:hover,
html[data-theme] .admin-body .admin-nav-settings.is-active { color: var(--ui-text) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .admin-nav-settings svg { width: 16px; height: 16px; }

html[data-theme] .admin-body .admin-command-bar {
  position: sticky !important;
  top: 0;
  z-index: 60;
  min-height: 60px;
  margin: 0 -20px 16px !important;
  padding: 10px 20px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  background: var(--ui-app) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-theme] .admin-body .admin-header,
html[data-theme] .admin-body .hero.admin-header {
  margin-bottom: 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

html[data-theme] .admin-body :is(.panel, .detail-box, .service-box, .slot-block, .metric-card, .booking-card, .site-footer, .login-panel, .admin-summary-panel, .field-header, .field-time-panel, .field-job-card, .field-completion-form, .field-completed-report, .mail-thread-card, .mail-thread-detail, .mail-thread-list-wrap, .customer-directory-card, .customer-detail-section, .customer-section-card, .customer-profile-status-card, .customer-fact-card, .wiki-search-panel, .wiki-section, .wiki-help-note, .ids-launch-card, .offer-card, .status-card, .commercial-card, .commercial-editor, .commercial-pane, .commercial-recipient-card, .commercial-document-attachments, .commercial-pagination, .commercial-item-row, .commercial-bundle-item, .commercial-bundle-editor, .commercial-tabs, .commercial-toolbar, .commercial-position-toolbar, .commercial-totals, .commercial-document-ids, .settings-subsection, .settings-auxiliary-panel, .system-backup-panel, .booking-actions-more-panel, .booking-assignment-panel, .booking-attachment-panel, .booking-history-panel, .booking-note-panel, .booking-profile-panel, .booking-share-panel, .audit-item, .employee-absence-card, .employee-qualification-card, .employee-time-card) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(.booking-key-facts, .booking-progress, .booking-progress-lock, .booking-progress-step, .booking-quick-signal, .booking-quick-fact, .customer-profile-panel, .customer-fact-grid > *, .maintenance-contract-meta > *, .employee-summary-card, .employee-time-summary > *, .commercial-stat-card, .commercial-summary-card, .mail-summary-card, .mail-account-switcher, .team-chat-channel, .team-chat-direct-target, .attachment-section, .field-section, .field-maintenance-checklist, .field-signature-card, .field-signature-section, .field-supplier-card, .status-pill, .badge) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface-alt) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(h1, h2, h3, h4, h5, strong, summary) { color: var(--ui-text) !important; }
html[data-theme] .admin-body :is(p, small, label, li, td, th, .muted, .field-help, .panel-head p) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .eyebrow,
html[data-theme] .admin-body :is(.booking-key-facts, .booking-progress, .booking-quick-fact, .customer-fact-card, .commercial-stat-card) :is(span, small) { color: var(--ui-text-muted) !important; }

html[data-theme] .admin-body :is(input, select, textarea) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-alt) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(input, select, textarea)::placeholder { color: var(--ui-text-muted) !important; opacity: 1; }
html[data-theme] .admin-body :is(input, select, textarea):focus { border-color: var(--ui-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-accent) 20%, transparent) !important; }

html[data-theme] .admin-body .button,
html[data-theme] .admin-body .admin-primary-action {
  border-color: var(--ui-accent) !important;
  color: #fff !important;
  background: var(--ui-accent) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .button:hover,
html[data-theme] .admin-body .admin-primary-action:hover { border-color: var(--ui-accent-hover) !important; background: var(--ui-accent-hover) !important; transform: translateY(-1px); }
html[data-theme] .admin-body :is(.button-secondary, .button-call, .admin-topbar-icon) { border-color: var(--ui-border-strong) !important; color: var(--ui-text) !important; background: var(--ui-surface-alt) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.button-secondary, .button-call, .admin-topbar-icon):hover { border-color: var(--ui-accent) !important; background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .button-danger { border-color: var(--ui-danger) !important; color: #fff !important; background: var(--ui-danger) !important; }
html[data-theme] .admin-body .button:disabled { border-color: var(--ui-border) !important; color: var(--ui-text-muted) !important; background: var(--ui-surface-hover) !important; opacity: .72; }

html[data-theme] .admin-body .theme-toggle--topbar { width: 50px !important; min-width: 50px !important; height: 30px !important; min-height: 30px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track { width: 50px !important; height: 30px !important; border: 1px solid var(--ui-border-strong) !important; border-radius: 999px !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-thumb { top: 3px !important; left: 3px !important; width: 22px !important; height: 22px !important; background: var(--ui-accent) !important; }
html[data-theme] .admin-body .theme-toggle--topbar.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }

html[data-theme] .admin-body :is(.settings-section-nav, .commercial-tabs, .archive-toolbar, .day-plan-toolbar, .calendar-legend) { border-color: var(--ui-border) !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body :is(.settings-section-tab, .commercial-tab) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body :is(.settings-section-tab, .commercial-tab).is-active { color: #fff !important; background: var(--ui-accent) !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.status-pill.confirmed, .maintenance-status-label.is-active) { border-color: color-mix(in srgb, var(--ui-success) 55%, var(--ui-border)) !important; color: var(--ui-success) !important; background: color-mix(in srgb, var(--ui-success) 13%, var(--ui-surface-alt)) !important; }
html[data-theme] .admin-body .status-pill.pending { border-color: color-mix(in srgb, var(--ui-warning) 55%, var(--ui-border)) !important; color: var(--ui-warning) !important; background: color-mix(in srgb, var(--ui-warning) 13%, var(--ui-surface-alt)) !important; }
html[data-theme] .admin-body .status-pill.rejected { border-color: color-mix(in srgb, var(--ui-danger) 55%, var(--ui-border)) !important; color: var(--ui-danger) !important; background: color-mix(in srgb, var(--ui-danger) 13%, var(--ui-surface-alt)) !important; }
html[data-theme] .admin-body .booking-card,
html[data-theme] .admin-body .maintenance-contract-row { border-left: 3px solid var(--ui-accent) !important; }
html[data-theme] .admin-body .booking-card:hover,
html[data-theme] .admin-body .maintenance-contract-row:hover { border-color: var(--ui-border-strong) !important; border-left-color: var(--ui-accent) !important; background: var(--ui-surface-hover) !important; }

html[data-theme] .admin-body .site-footer {
  margin: 22px 0 0 !important;
  border-color: var(--ui-border) !important;
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body .site-footer::before { display: none !important; }

@media (max-width: 920px) {
  html[data-theme] .admin-body .admin-shell { margin-left: 190px !important; padding-inline: 14px !important; }
  html[data-theme] .admin-body .admin-nav { width: 190px !important; }
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-shell { margin: 0 !important; padding: 0 10px 18px !important; }
  html[data-theme] .admin-body .admin-command-bar { margin-inline: -10px !important; padding-inline: 10px !important; }
  html[data-theme] .admin-body .admin-nav { position: sticky !important; inset: auto !important; flex-direction: row; width: auto !important; min-height: 54px; height: auto; margin: 0 0 10px !important; padding: 7px !important; overflow-x: auto; overflow-y: hidden; border: 1px solid var(--ui-border) !important; border-radius: 8px !important; }
  html[data-theme] .admin-body .admin-brand,
  html[data-theme] .admin-body .admin-nav-group-label,
  html[data-theme] .admin-body .admin-nav-footer { display: none !important; }
  html[data-theme] .admin-body .admin-nav-link { flex: 0 0 auto; width: auto; min-height: 34px !important; }
}

/* Variant A final workspace geometry: intentionally after every legacy admin rule. */
html[data-theme] .admin-body .admin-header { display: none !important; }
html[data-theme] .admin-body .admin-shell { padding-bottom: 36px !important; }
html[data-theme] .admin-body .admin-command-bar { min-height: 68px !important; margin: 0 -20px 0 !important; padding: 14px 20px !important; background: var(--ui-sidebar) !important; backdrop-filter: none !important; }
html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(280px, 420px) auto !important; min-height: 38px !important; border-radius: 6px !important; }
html[data-theme] .admin-body .admin-main-frame { width: 100% !important; padding: 22px 0 0 !important; background: transparent !important; }
html[data-theme] .admin-body .admin-content { width: 100% !important; min-width: 0; }
html[data-theme] .admin-body .admin-view { display: block; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body .admin-view > .panel-head { min-height: 54px; margin: 0 0 12px !important; padding: 0 0 13px !important; border-bottom: 1px solid var(--ui-border) !important; }
html[data-theme] .admin-body .admin-view > .panel-head h2 { margin: 0 !important; font-size: 22px !important; letter-spacing: -.03em; }
html[data-theme] .admin-body .admin-view > .panel-head p { margin: 4px 0 0 !important; font-size: 12px !important; }
html[data-theme] .admin-body .admin-view > .panel-head .button { min-height: 36px; padding: 8px 13px; border-radius: 6px !important; }

html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important; gap: 0 !important; margin: 0 0 16px !important; overflow: hidden; border: 1px solid var(--ui-border) !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) { min-height: 82px; margin: 0 !important; padding: 14px 16px !important; border: 0 !important; border-right: 1px solid var(--ui-border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):last-child { border-right: 0 !important; }
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) strong { margin-top: 5px; color: var(--ui-text) !important; font-size: 24px !important; }

html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) { min-height: 54px; margin: 0 0 12px !important; padding: 8px !important; border: 1px solid var(--ui-border) !important; border-radius: 7px !important; background: var(--ui-surface-alt) !important; }
html[data-theme] .admin-body .archive-toolbar { display: flex !important; align-items: end; justify-content: space-between; gap: 10px; }
html[data-theme] .admin-body .archive-toolbar > label:first-child { margin-right: auto; }
html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar) :is(label, input, select) { margin: 0 !important; }

html[data-theme] .admin-body :is(.booking-list, .maintenance-list, .callback-list-pane .booking-list) { gap: 8px !important; }
html[data-theme] .admin-body .booking-card { padding: 14px 16px !important; border: 1px solid var(--ui-border) !important; border-left: 3px solid var(--ui-accent) !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body .booking-card :is(.booking-key-facts, .booking-progress, .booking-progress-lock) { border-radius: 5px !important; }
html[data-theme] .admin-body .booking-card .booking-key-facts { margin-block: 10px !important; }
html[data-theme] .admin-body .booking-actions { gap: 7px !important; }
html[data-theme] .admin-body .booking-actions .button { min-height: 34px; padding: 7px 11px; border-radius: 5px !important; }

html[data-theme] .admin-body :is(.maintenance-workspace, .callback-workspace) { gap: 16px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel) { top: 84px !important; border-radius: 7px !important; background: var(--ui-surface) !important; }
html[data-theme] .admin-body :is(.maintenance-detail-tabs, .callback-detail-tabs) { border-radius: 5px !important; }
html[data-theme] .admin-body :is(.maintenance-detail-tabs button, .callback-detail-tabs button).is-active { color: #fff !important; background: var(--ui-accent) !important; box-shadow: none !important; }
html[data-theme] .admin-body .site-footer { min-height: 62px; margin-top: 32px !important; padding-inline: 16px !important; border-radius: 7px !important; }

@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-command-bar { min-height: 58px !important; margin-inline: -10px !important; padding: 10px !important; }
  html[data-theme] .admin-body .admin-global-search { grid-template-columns: auto minmax(0, 1fr) !important; width: 100%; }
  html[data-theme] .admin-body .admin-global-search kbd, html[data-theme] .admin-body .admin-command-actions > :not(.theme-toggle--topbar):not(.admin-primary-action) { display: none !important; }
  html[data-theme] .admin-body .admin-command-actions { gap: 6px; }
  html[data-theme] .admin-body .admin-primary-action { white-space: nowrap; }
  html[data-theme] .admin-body .admin-main-frame { padding-top: 14px !important; }
  html[data-theme] .admin-body .admin-view > .panel-head { align-items: flex-start; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar { align-items: stretch; flex-direction: column; }
  html[data-theme] .admin-body .archive-toolbar > label { width: 100%; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric):nth-child(2n) { border-right: 0 !important; }
}

/* Variant A layout reset: legacy grid placement must not position the footer beside the workspace. */
html[data-theme] .admin-body .admin-shell {
  display: block !important;
  margin-left: 208px !important;
  padding: 0 20px 36px !important;
}
html[data-theme] .admin-body .admin-command-bar,
html[data-theme] .admin-body .admin-main-frame,
html[data-theme] .admin-body .site-footer {
  grid-column: auto !important;
  grid-row: auto !important;
}
html[data-theme] .admin-body .admin-main-frame {
  display: block !important;
  width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 22px 0 0 !important;
}
html[data-theme] .admin-body .admin-app-layout {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
html[data-theme] .admin-body .site-footer {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  margin: 32px 0 0 !important;
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 7px !important;
  background: var(--ui-surface) !important;
}
@media (max-width: 920px) {
  html[data-theme] .admin-body .admin-shell { margin-left: 190px !important; padding-inline: 14px !important; }
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .admin-shell { margin: 0 !important; padding: 0 10px 18px !important; }
}

/* Field service is part of Variant A as well, including the exact Discord Office palette. */
html[data-theme="light"] .field-body {
  --field-app: #f4f5f9; --field-surface: #ffffff; --field-surface-alt: #f4f5f9; --field-surface-hover: #e8eaef;
  --field-border: #e5e7ee; --field-border-strong: #ccced9; --field-text: #131418; --field-text-secondary: #333743; --field-text-muted: #898c96;
  --field-accent: #6366f1; --field-accent-hover: #4f52e9; --field-accent-soft: #eceefd; --field-success: #1a8754; --field-danger: #d63b45;
}
html[data-theme="dark"] .field-body {
  --field-app: #0d0e11; --field-surface: #16171c; --field-surface-alt: #0f1013; --field-surface-hover: #1c1e24;
  --field-border: #242731; --field-border-strong: #333743; --field-text: #f4f5f9; --field-text-secondary: #a0a3b1; --field-text-muted: #6e7280;
  --field-accent: #6366f1; --field-accent-hover: #4f52e9; --field-accent-soft: #26284f; --field-success: #34b374; --field-danger: #ef5f68;
}
html[data-theme] .field-body :is(.field-header, .field-filter-bar, .field-time-panel, .field-job-card, .field-job-details, .field-detail-block, .field-completion-form, .field-completed-report, .field-supplier-card, .field-material-row, .field-service-template-row, .field-maintenance-check-row, .field-summary > *, .field-time-summary > *, .field-time-entry) { border-radius: 8px !important; }
html[data-theme] .field-body .field-filter.is-active { color: #fff !important; background: var(--field-accent) !important; box-shadow: none !important; }
html[data-theme] .field-body .field-theme-toggle { width: 50px !important; min-width: 50px !important; height: 30px !important; min-height: 30px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; }
html[data-theme] .field-body .field-theme-toggle .theme-switch-track { width: 50px !important; height: 30px !important; border: 1px solid var(--field-border-strong) !important; border-radius: 999px !important; background: var(--field-surface-alt) !important; }
html[data-theme] .field-body .field-theme-toggle .theme-switch-thumb { top: 3px !important; left: 3px !important; width: 22px !important; height: 22px !important; background: var(--field-accent) !important; }
html[data-theme] .field-body .field-theme-toggle.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }

/* Palette authority: these values intentionally come after every legacy theme rule. */
html[data-theme="dark"] .admin-body {
  background: var(--ui-app) !important;
}
html[data-theme="dark"] .admin-body :is(.admin-shell, .admin-main-frame, .admin-app-layout, .admin-content, .admin-view) { background: transparent !important; background-image: none !important; }
html[data-theme="dark"] .admin-body :is(.admin-command-bar, .admin-nav) { background: #0f1013 !important; background-image: none !important; }
html[data-theme="dark"] .admin-body :is(
  .customer-detail-head, .customer-detail-sections, .customer-profile-inline,
  .booking-key-facts, .booking-progress, .booking-progress-lock,   .callback-list-pane, .callback-detail-panel, .maintenance-detail-panel, .maintenance-workspace,
  .commercial-article-suggestions, .team-chat-message-list, .mail-thread-content, .audit-item,
  .settings-section, .settings-subsection, .day-plan-workspace
) { background-color: #16171c !important; }
html[data-theme="dark"] .admin-body :is(
  .customer-fact-grid > *, .customer-profile-item, .booking-key-facts > *, .booking-quick-fact,
  .booking-progress-step, .maintenance-contract-meta > *, .commercial-article-suggestion,
  .team-chat-channel, .team-chat-direct-target, .mail-thread-message, .audit-meta
) { background-color: #101116 !important; }

html[data-theme="light"] .admin-body {
  background: var(--ui-app) !important;
}
html[data-theme="light"] .admin-body :is(.admin-shell, .admin-main-frame, .admin-app-layout, .admin-content, .admin-view) { background: transparent !important; }
html[data-theme="light"] .admin-body .admin-command-bar { background: rgba(255, 255, 255, .92) !important; }
html[data-theme="light"] .admin-body .admin-nav { background: #ffffff !important; }
html[data-theme="light"] .admin-body :is(.panel, .booking-card, .customer-directory-card, .customer-detail-section, .maintenance-contract-row, .audit-item, .commercial-card, .mail-thread-card) { background: #ffffff !important; }

/* Keep the maintenance list neutral and use the full canvas while details are closed. */
html[data-theme="dark"] .admin-body :is(.maintenance-workspace, .maintenance-list-pane, .maintenance-list) {
  background: transparent !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body .maintenance-toolbar {
  background: var(--ui-surface-alt) !important;
  background-image: none !important;
  border-color: var(--ui-border) !important;
}
html[data-theme="dark"] .admin-body .maintenance-toolbar :is(input, select) {
  background: var(--ui-app) !important;
}
html[data-theme] .admin-body .maintenance-workspace:has(.maintenance-detail-panel.hidden) {
  grid-template-columns: minmax(0, 1fr) !important;
}

/* Customer record: compact tabbed file instead of one endless vertical page. */
html[data-theme] .admin-body .customer-history-shell { display: grid !important; gap: 14px !important; }
html[data-theme] .admin-body .customer-detail-head {
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 16px !important;
}
html[data-theme] .admin-body .customer-detail-actions { justify-content: flex-end !important; gap: 7px !important; }
html[data-theme] .admin-body .customer-detail-actions .button { min-height: 34px !important; padding: 7px 10px !important; }
html[data-theme] .admin-body .customer-detail-facts { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; gap: 8px !important; }
html[data-theme] .admin-body .customer-fact-card { min-height: 74px !important; padding: 11px 12px !important; border-radius: 6px !important; }
html[data-theme] .admin-body .customer-fact-card strong { font-size: 14px !important; }
html[data-theme] .admin-body .customer-detail-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  border: 1px solid var(--ui-border) !important;
  border-radius: 7px;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .customer-detail-tab {
  min-height: 34px;
  padding: 7px 11px;
  border: 0;
  border-radius: 5px;
  color: var(--ui-text-secondary);
  background: transparent;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
html[data-theme] .admin-body .customer-detail-tab:hover { color: var(--ui-text); background: var(--ui-surface-hover); }
html[data-theme] .admin-body .customer-detail-tab.is-active { color: #fff; background: var(--ui-accent); }
html[data-theme] .admin-body .customer-detail-tab span {
  display: inline-grid;
  min-width: 18px;
  margin-left: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  color: inherit;
  background: color-mix(in srgb, currentColor 18%, transparent);
  font-size: 11px;
  text-align: center;
}
html[data-theme] .admin-body .customer-detail-sections { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
html[data-theme] .admin-body .customer-section-card[data-customer-pane] { display: none !important; min-width: 0; }
html[data-theme] .admin-body .customer-section-card[data-customer-pane].is-active { display: grid !important; }
html[data-theme] .admin-body .customer-section-card[data-customer-pane="overview"] { grid-column: span 1; }
html[data-theme] .admin-body .customer-section-card[data-customer-pane="history"],
html[data-theme] .admin-body .customer-section-card[data-customer-pane="mail"] { grid-column: 1 / -1; }
html[data-theme] .admin-body :is(.customer-booking-list, .customer-message-list) { max-height: 440px !important; }
@media (max-width: 920px) {
  html[data-theme] .admin-body .customer-detail-head { grid-template-columns: 1fr !important; }
  html[data-theme] .admin-body .customer-detail-actions { justify-content: flex-start !important; }
  html[data-theme] .admin-body .customer-detail-sections { grid-template-columns: 1fr !important; }
  html[data-theme] .admin-body .customer-section-card[data-customer-pane="overview"] { grid-column: 1 !important; }
}

/* Zentrale and team chat use the same neutral office palette. */
html[data-theme="dark"] .admin-body [data-admin-view="bookings"] :is(
  .booking-work-queue, .archive-toolbar, .booking-list, .booking-card,
  .booking-key-facts, .booking-progress, .booking-progress-lock,
  .booking-quick-signal, .booking-quick-fact,
  .booking-full-details, .booking-more-summary
) {
  border-color: var(--ui-border) !important;
  background-color: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="bookings"] :is(
  .booking-key-facts > *, .booking-quick-signal,
  .booking-quick-fact, .booking-more-summary, .archive-toolbar > label,
  .archive-toolbar input, .archive-toolbar select
) { background-color: #101116 !important; }
html[data-theme="dark"] .admin-body [data-admin-view="teamchat"] :is(
  .team-chat-layout, .team-chat-sidebar, .team-chat-conversation,
  .team-chat-conversation-head, .team-chat-message-list, .team-chat-message-form
) {
  border-color: var(--ui-border) !important;
  background-color: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="teamchat"] :is(
  .team-chat-channel, .team-chat-direct-target, .team-chat-direct-form label,
  .team-chat-message, .team-chat-message-form textarea, .team-chat-message-form input,
  .team-chat-channel-icon
) {
  border-color: var(--ui-border-strong) !important;
  background-color: var(--ui-surface-alt) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="teamchat"] :is(
  .team-chat-channel.is-active, .team-chat-channel:hover, .team-chat-message.is-own
) {
  border-color: var(--ui-accent) !important;
  background-color: var(--ui-accent-soft) !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="teamchat"] :is(
  .team-chat-message-list, .team-chat-message.is-own
) { background-image: none !important; }

/* Mailcenter must remain neutral after every legacy rule has been applied. */
html[data-theme="dark"] .admin-body :is(
  .mail-center-layout, .mail-center-layout--inbox, .mailbox, .mail-inbox,
  .mailbox-command-bar, .mail-inbox-sidebar, .mail-thread-detail,
  .mail-thread-section, .mail-thread-content, .mail-thread-message,
  .mail-thread-message-list, .mail-thread-form, .history-mail-form,
  .mail-attachment-picker, .message-item
) {
  border-color: var(--ui-border) !important;
  background-color: var(--ui-surface-alt) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .mail-thread-form > label, .mail-thread-account, .mail-thread-context > span,
  .mail-account-filter, .mail-thread-card, .message-item .message-head
) {
  border-color: var(--ui-border-strong) !important;
  background-color: var(--ui-sidebar) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body .mail-thread-card.is-active {
  border-color: var(--ui-accent) !important;
  background-color: var(--ui-accent-soft) !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="messages"] {
  background: var(--ui-app) !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="messages"] :is(
  .mail-center-layout, .mail-center-layout--inbox, .mailbox-command-bar,
  .mail-inbox-sidebar, .mail-thread-detail, .mail-thread-section,
  .mail-thread-content, .mail-thread-message-list, .mail-thread-message,
  .mail-thread-form, .history-mail-form, .mail-attachment-picker
) {
  border-color: var(--ui-border) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body [data-admin-view="messages"] :is(
  .mail-thread-form > label, .mail-thread-account, .mail-thread-context > span,
  .mail-account-filter, .mail-thread-card, .message-item, input, select, textarea
) {
  border-color: var(--ui-border-strong) !important;
  background: var(--ui-surface-alt) !important;
  background-image: none !important;
}

/* Final precedence layer: keep legacy teal surfaces out of Variant A. */
html[data-theme="dark"] .admin-body :is(
  .customer-detail-head, .customer-detail-sections, .customer-profile-inline,
  .customer-profile-preview, .customer-fact-card, .customer-profile-item, .booking-profile-preview,
  .booking-key-facts, .booking-progress, .booking-progress-lock,   .booking-quick-signal, .booking-quick-fact, .booking-full-details, .booking-more-summary,
  .booking-details, .callback-list-pane, .callback-detail-panel, .maintenance-detail-panel,
  .maintenance-contract-meta > *, .maintenance-contract-note, .commercial-article-suggestions,
  .commercial-article-suggestion, .commercial-bundle-item, .commercial-journal-table-wrap,
  .team-chat-message-list, .team-chat-compose, .mail-thread-content, .mail-thread-message,
  .audit-meta, .audit-item, .settings-section, .settings-subsection
) {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(
  .customer-fact-grid > *, .customer-profile-item, .booking-key-facts > *, .booking-quick-fact,
  .booking-progress-step, .maintenance-contract-meta > *, .commercial-article-suggestion,
  .team-chat-channel, .team-chat-direct-target, .mail-thread-content, .audit-meta
) { background: var(--ui-surface-alt) !important; }

/* The top-bar switch is deliberately simple: only a compact sun/moon slider. */
html[data-theme] .admin-body .theme-toggle--topbar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 48px !important;
  min-width: 48px !important;
  height: 28px !important;
  min-height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track {
  position: relative !important;
  display: block !important;
  width: 48px !important;
  height: 28px !important;
  overflow: hidden !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before,
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after {
  position: absolute;
  top: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--ui-text-muted);
}
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::before { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track::after { content: none; }
html[data-theme] .admin-body .theme-toggle--topbar :is(.theme-switch-sun, .theme-switch-moon) { display: none !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-thumb {
  position: absolute !important;
  z-index: 1;
  top: 3px !important;
  left: 3px !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .18s ease !important;
}
html[data-theme] .admin-body .theme-toggle--topbar.is-dark .theme-switch-thumb { transform: translateX(20px) !important; }
html[data-theme] .admin-body .theme-toggle--topbar:focus-visible { outline: 2px solid var(--ui-accent) !important; outline-offset: 3px !important; }

/* Scoped neutral overrides for shared legacy dark rules. The petrol variants of
   these rules also serve the public booking pages and must stay there; the
   admin, wiki and field views get the neutral office palette instead. */
html[data-theme="dark"] .admin-body :is(
  .team-chat-layout, .team-chat-sidebar, .team-chat-conversation, .team-chat-conversation-head,
  .team-chat-message-list, .team-chat-message-form, .team-chat-channel,
  .mail-center-layout, .mailbox, .mail-inbox, .mail-thread-list, .mail-thread-section,
  .booking-list, .archive-booking-list, .customer-booking-list, .history-booking-list,
  .calendar-day-list, .day-plan-list, .maintenance-list,
  .admin-users-list, .employee-time-list, .employee-absence-list, .employee-qualification-list,
  .commercial-list, .commercial-layout-list, .commercial-layout-block-list,
  .attachment-section, .booking-attachment-panel, .booking-history-panel, .booking-note-panel,
  .booking-share-panel, .booking-tag-panel, .form-section,
  dialog, .dialog, .modal, .modal-card
) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background-color: var(--ui-surface-alt) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body :is(.booking-list, .archive-booking-list, .customer-booking-list, .history-booking-list, .maintenance-list, .team-chat-message-list) {
  border-color: transparent !important;
  background-color: transparent !important;
}
html[data-theme="dark"] .admin-body .team-chat-message.is-own {
  border-color: var(--ui-accent) !important;
  background: var(--ui-accent-soft) !important;
}
html[data-theme="dark"] .admin-body .team-chat-channel-icon {
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface-hover) !important;
}
html[data-theme="dark"] .admin-body .team-chat-message-list {
  background-image: none !important;
}
html[data-theme="dark"] .admin-body input:-webkit-autofill {
  -webkit-text-fill-color: var(--ui-text);
  -webkit-box-shadow: 0 0 0 1000px var(--ui-surface-alt) inset;
}
html[data-theme="dark"] .field-body :is(input, select, textarea, option) {
  border-color: var(--field-border) !important;
  color: var(--field-text) !important;
  background-color: var(--field-surface-alt) !important;
}
html[data-theme="dark"] .field-body :is(input, select, textarea):focus {
  border-color: var(--field-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent) 20%, transparent) !important;
}

/* The blurred color blobs and the petrol canvas belong to the public pages only. */
.wiki-body::before, .wiki-body::after,
.field-body::before, .field-body::after { display: none !important; }
html[data-theme="dark"] .wiki-body {
  color: var(--wiki-text);
  background: var(--wiki-app) !important;
  background-image: none !important;
}
html[data-theme="dark"] .field-body {
  background: var(--field-app) !important;
  background-image: none !important;
}

/* Calendar summary: one even row instead of a ragged two-column grid. */
html[data-theme] .admin-body .calendar-summary {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
}
@media (max-width: 720px) {
  html[data-theme] .admin-body .calendar-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Login: the dark theme uses the neutral office surface instead of the petrol hero. */
html[data-theme="dark"] .admin-body .admin-login-hero {
  background: var(--ui-sidebar) !important;
  background-image: none !important;
}
html[data-theme="dark"] .admin-body .theme-toggle.is-dark .theme-switch-track {
  border-color: var(--ui-border-strong);
  color: var(--ui-text-secondary);
  background: var(--ui-surface-alt);
}
html[data-theme="dark"] .admin-body .theme-toggle.is-dark .theme-switch-thumb {
  background: var(--ui-accent);
  box-shadow: none;
}
/* Login copy always sits on the dark navy (light) / neutral (dark) panel. */
html[data-theme] .admin-body .admin-login-copy :is(h1, .hero-copy, .eyebrow) { color: #fff !important; }
html[data-theme] .admin-body .admin-login-copy :is(.hero-copy, .eyebrow) { color: rgba(255, 255, 255, 0.72) !important; }
html[data-theme="dark"] .admin-body .admin-login-copy :is(h1) { color: var(--ui-text) !important; }
html[data-theme="dark"] .admin-body .admin-login-copy :is(.hero-copy, .eyebrow) { color: var(--ui-text-secondary) !important; }

/* ============================================================
   Polish layer: smoother, calmer, more modern - same layout.
   Larger radii, soft elevation, unified motion and focus rings.
   ============================================================ */

/* Motion: one consistent, quick easing for interactive elements. */
html[data-theme] .admin-body :is(
  .button, .admin-primary-action, .admin-nav-link, .admin-nav-settings,
  .admin-topbar-icon, .booking-card, .maintenance-contract-row, .mail-thread-card,
  .mail-account-filter, .customer-directory-card, .commercial-card, .audit-item,
  .settings-section-tab, .commercial-tab, .customer-detail-tab, .team-chat-channel,
  .callback-detail-close, .theme-toggle--topbar .theme-switch-thumb,
  input, select, textarea
) {
  transition:
    background-color .15s ease, border-color .15s ease, color .15s ease,
    box-shadow .18s ease, transform .15s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .admin-body * { transition: none !important; scroll-behavior: auto !important; }
}

/* Radii: cards and containers 10px, controls 8px. */
html[data-theme] .admin-body :is(
  .panel, .booking-card, .maintenance-contract-row, .customer-directory-card,
  .customer-detail-section, .customer-section-card, .audit-item, .commercial-card,
  .mail-thread-card, .mail-thread-detail, .mail-inbox-sidebar, .mailbox-command-bar,
  .admin-header, .site-footer, .maintenance-detail-panel, .callback-detail-panel,
  .calendar-detail-panel, .booking-work-queue, .maintenance-kpi-bar,
  .archive-toolbar, .maintenance-toolbar, .day-plan-toolbar, .settings-section,
  .settings-subsection, .form-block
) { border-radius: 10px !important; }
html[data-theme] .admin-body :is(
  .button, .admin-primary-action, .button-secondary, .button-call, .admin-topbar-icon,
  input, select, textarea, .admin-global-search, .settings-section-nav,
  .commercial-tabs, .customer-detail-tabs, .callback-detail-tabs, .maintenance-detail-tabs
) { border-radius: 8px !important; }
html[data-theme] .admin-body :is(.admin-nav-link, .settings-section-tab, .commercial-tab, .customer-detail-tab) { border-radius: 6px !important; }
html[data-theme] .admin-body .booking-quick-signal { border-radius: 999px !important; padding: 4px 11px !important; }
html[data-theme] .admin-body .booking-quick-signals { border: 0 !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }

/* Elevation: quiet resting shadow, gentle lift on interactive hover. */
html[data-theme="dark"] .admin-body :is(.panel, .booking-card, .maintenance-contract-row, .customer-directory-card, .commercial-card, .mail-thread-card, .audit-item, .maintenance-detail-panel, .callback-detail-panel) {
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important;
}
html[data-theme="light"] .admin-body :is(.panel, .booking-card, .maintenance-contract-row, .customer-directory-card, .commercial-card, .mail-thread-card, .audit-item, .maintenance-detail-panel, .callback-detail-panel) {
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
}
html[data-theme="dark"] .admin-body :is(.booking-card, .maintenance-contract-row, .mail-thread-card, .customer-directory-card, .commercial-card):hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .30) !important;
  transform: translateY(-1px);
}
html[data-theme="light"] .admin-body :is(.booking-card, .maintenance-contract-row, .mail-thread-card, .customer-directory-card, .commercial-card):hover {
  box-shadow: 0 4px 14px rgba(16, 24, 40, .10) !important;
  transform: translateY(-1px);
}

/* Buttons: subtle press feedback. */
html[data-theme] .admin-body :is(.button, .admin-primary-action):active { transform: translateY(0) scale(.98) !important; }

/* One focus ring for everything interactive. */
html[data-theme] .admin-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent) 70%, transparent) !important;
  outline-offset: 2px !important;
}

/* Command bar: clear separation between the icon cluster and the theme switch. */
html[data-theme] .admin-body .admin-command-actions { gap: 10px !important; }
html[data-theme] .admin-body .admin-topbar-icon { width: 34px !important; height: 30px !important; display: inline-grid !important; place-items: center !important; }
html[data-theme] .admin-body .theme-toggle--topbar .theme-switch-track {
  border: 1px solid var(--ui-border-strong) !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .theme-toggle--topbar :is(.theme-switch-sun, .theme-switch-moon) { display: none !important; }

/* Scrollbars: slim and neutral, accent on hover. */
html[data-theme] .admin-body ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] .admin-body ::-webkit-scrollbar-track { background: transparent; }
html[data-theme] .admin-body ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: var(--ui-border-strong);
  background-clip: content-box;
}
html[data-theme] .admin-body ::-webkit-scrollbar-thumb:hover { background: var(--ui-text-muted); background-clip: content-box; }
html[data-theme] .admin-body { scrollbar-width: thin; scrollbar-color: var(--ui-border-strong) transparent; }

/* Text selection matches the accent. */
html[data-theme] .admin-body ::selection { color: #fff; background: var(--ui-accent); }
html[data-theme="dark"] .admin-body :is(
  .employee-absence-section, .employee-qualification-section, .employee-time-section,
  .employee-calendar-section, .employee-absence-form, .employee-qualification-form,
  .employee-time-form, .employee-management-roster
) {
  border-color: var(--ui-border) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important;
}

/* ============================================================
   Design v2 "Aurora Indigo": glass command bar, gradient primary
   actions, refined typography. Same layout, same structure.
   ============================================================ */
html[data-theme] .admin-body .admin-command-bar {
  background: color-mix(in srgb, var(--ui-app) 80%, transparent) !important;
  backdrop-filter: blur(12px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
html[data-theme] .admin-body :is(.button, .admin-primary-action):not(.button-secondary):not(.button-call):not(.button-danger) {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent) 88%, #fff 12%), var(--ui-accent)) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 80%, #000 20%) !important;
}
html[data-theme] .admin-body :is(.button, .admin-primary-action):not(.button-secondary):not(.button-call):not(.button-danger):hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-accent-hover) 88%, #fff 12%), var(--ui-accent-hover)) !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--ui-accent) 35%, transparent) !important;
}
html[data-theme] .admin-body .button-danger {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ui-danger) 88%, #fff 12%), var(--ui-danger)) !important;
  border-color: color-mix(in srgb, var(--ui-danger) 80%, #000 20%) !important;
}
html[data-theme] .admin-body :is(h1, h2, h3) { letter-spacing: -.02em !important; }
html[data-theme] .admin-body :is(.booking-work-queue > * strong, .maintenance-metric strong, .metric-card strong, .callback-metric strong, .customer-fact-card strong) {
  font-variant-numeric: tabular-nums;
}
html[data-theme] .admin-body .admin-nav-link.is-active,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--ui-accent) !important;
  border-left-color: transparent !important;
}
html[data-theme] .admin-body .admin-brand-mark,
html[data-theme] .admin-body .admin-nav-avatar {
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 55%, #a855f7 45%)) !important;
}

/* ============================================================
   Mockup match layer: pill navigation, separated KPI cards,
   tinted event chips, refined chrome. Functions untouched.
   ============================================================ */

/* Sidebar: rounded pill items, no inset bar; roomier rhythm. */
html[data-theme] .admin-body .admin-nav { padding: 14px 12px !important; }
html[data-theme] .admin-body .admin-nav-link {
  min-height: 38px !important;
  margin: 2px 0 !important;
  padding: 9px 12px !important;
  border-left: 0 !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  gap: 10px !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .admin-nav-link svg { width: 17px; height: 17px; opacity: .85; }
html[data-theme] .admin-body .admin-nav-link.is-active,
html[data-theme] .admin-body .admin-nav-link[aria-current="page"] {
  border-left: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  background: var(--ui-accent-soft) !important;
}
html[data-theme] .admin-body .admin-nav-link.is-active svg { opacity: 1; color: var(--ui-accent); }
html[data-theme] .admin-body .admin-nav-group-label { margin: 14px 10px 6px !important; }

/* Bottom user card like the mockup. */
html[data-theme] .admin-body .admin-nav-footer { gap: 9px; padding: 12px 6px 6px !important; }
html[data-theme] .admin-body .admin-nav-userbar {
  padding: 8px !important;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body .admin-nav-userbar:hover { border-color: var(--ui-border-strong); }

/* Top bar: roomy search with kbd chip, round icon buttons, solid primary. */
html[data-theme] .admin-body .admin-command-bar { min-height: 64px !important; }
html[data-theme] .admin-body .admin-global-search {
  min-height: 40px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .admin-global-search:focus-within { border-color: var(--ui-accent) !important; }
html[data-theme] .admin-body .admin-global-search input { background: transparent !important; border: 0 !important; }
html[data-theme] .admin-body .admin-global-search kbd {
  padding: 2px 7px !important;
  border: 1px solid var(--ui-border-strong) !important;
  border-radius: 6px !important;
  color: var(--ui-text-muted) !important;
  background: var(--ui-surface) !important;
  font-size: 10px !important;
}
html[data-theme] .admin-body .admin-topbar-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}
html[data-theme] .admin-body .admin-primary-action {
  min-height: 38px !important;
  padding: 9px 16px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}

/* KPI rows become separate cards (mockup style), same markup. */
html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar) {
  gap: 12px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) {
  min-height: 92px;
  padding: 16px 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important;
}
html[data-theme] .admin-body :is(.booking-work-queue > *, .maintenance-kpi-bar .maintenance-metric) strong {
  font-size: 28px !important;
  letter-spacing: -.02em;
}
html[data-theme] .admin-body .callback-summary { gap: 12px !important; }
html[data-theme] .admin-body :is(.callback-metric, .calendar-summary .metric-card) {
  border-radius: 14px !important;
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
}

/* Calendar: tinted event chips with strong colored edge, like the mockup. */
html[data-theme] .admin-body .calendar-booking-chip {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent) !important;
  border-left: 3px solid var(--ui-accent) !important;
  border-radius: 8px !important;
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--ui-accent) 16%, var(--ui-surface)) !important;
}
html[data-theme] .admin-body .calendar-booking-chip.is-pending {
  border-color: color-mix(in srgb, var(--ui-warning) 45%, transparent) !important;
  border-left-color: var(--ui-warning) !important;
  background: color-mix(in srgb, var(--ui-warning) 14%, var(--ui-surface)) !important;
}
html[data-theme] .admin-body .calendar-booking-chip.is-confirmed {
  border-color: color-mix(in srgb, var(--ui-success) 45%, transparent) !important;
  border-left-color: var(--ui-success) !important;
  background: color-mix(in srgb, var(--ui-success) 14%, var(--ui-surface)) !important;
}
html[data-theme] .admin-body .calendar-absence-chip {
  border-color: color-mix(in srgb, var(--ui-danger) 45%, transparent) !important;
  border-left-color: var(--ui-danger) !important;
  background: color-mix(in srgb, var(--ui-danger) 14%, var(--ui-surface)) !important;
}
html[data-theme] .admin-body .calendar-day.is-selected,
html[data-theme] .admin-body .calendar-day.is-today {
  border-color: var(--ui-accent) !important;
  box-shadow: 0 0 0 1px var(--ui-accent) inset !important;
}

/* Detail panels read like the mockup's "Termin Details" card. */
html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel, .calendar-detail-panel) {
  border-radius: 14px !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .28) !important;
}
html[data-theme] .admin-body :is(.maintenance-detail-tabs button, .callback-detail-tabs button) { border-radius: 7px !important; }

/* Status pills: solid tinted like the mockup's "Bestätigt". */
html[data-theme] .admin-body .status-pill {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: .03em;
}

/* Cards a touch rounder across the board. */
html[data-theme] .admin-body :is(.panel, .booking-card, .maintenance-contract-row, .customer-directory-card, .customer-detail-section, .customer-section-card, .audit-item, .commercial-card, .mail-thread-card, .mail-thread-detail, .mail-inbox-sidebar, .mailbox-command-bar, .site-footer, .settings-section, .settings-subsection, .form-block) {
  border-radius: 14px !important;
}

/* ============================================================
   Tagesplaner (Kalender > Planer): Monteur-Spalten und Zeitraster
   im Stil des Mockups. Drag & Drop wechselt die Zuweisung.
   ============================================================ */
html[data-theme] .admin-body .calendar-view-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin-right: 8px;
  border: 1px solid var(--ui-border);
  border-radius: 9px;
  background: var(--ui-surface-alt);
}
html[data-theme] .admin-body .calendar-view-tab {
  min-height: 30px;
  padding: 5px 13px;
  border: 0;
  border-radius: 7px;
  color: var(--ui-text-secondary);
  background: transparent;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
html[data-theme] .admin-body .calendar-view-tab.is-active {
  color: #fff;
  background: var(--ui-accent);
}

html[data-theme] .admin-body .calendar-planner { display: grid; gap: 12px; }
html[data-theme] .admin-body .planner-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface-alt);
}
html[data-theme] .admin-body .planner-day-label { font-size: 15px; letter-spacing: -.01em; }
html[data-theme] .admin-body .planner-hint { margin-left: auto; color: var(--ui-text-muted); font-size: 12px; }

html[data-theme] .admin-body .planner-scroll { overflow-x: auto; padding-bottom: 6px; }
html[data-theme] .admin-body .planner-grid {
  display: grid;
  grid-template-columns: 56px repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  min-width: 720px;
}
html[data-theme] .admin-body .planner-timegutter { display: grid; grid-template-rows: 64px 1fr; }
html[data-theme] .admin-body .planner-hours { display: grid; align-content: start; }
html[data-theme] .admin-body .planner-hours span {
  display: block;
  height: 56px;
  color: var(--ui-text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transform: translateY(-6px);
  text-align: right;
  padding-right: 8px;
}

html[data-theme] .admin-body .planner-column {
  display: grid;
  grid-template-rows: 64px 1fr;
  min-width: 0;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: var(--ui-surface);
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html[data-theme] .admin-body .planner-column.is-drop-target {
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 1px var(--ui-accent) inset, 0 4px 18px color-mix(in srgb, var(--ui-accent) 25%, transparent);
}
html[data-theme] .admin-body .planner-column--unassigned { background: var(--ui-surface-alt); }
html[data-theme] .admin-body .planner-column-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .planner-column-head--gutter { border-bottom: 0; }
html[data-theme] .admin-body .planner-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--ui-accent), color-mix(in srgb, var(--ui-accent) 55%, #a855f7 45%));
  font-size: 12px;
  font-weight: 800;
}
html[data-theme] .admin-body .planner-avatar--empty {
  color: var(--ui-text-muted);
  background: var(--ui-surface-hover);
  border: 1px dashed var(--ui-border-strong);
}
html[data-theme] .admin-body .planner-column-copy { display: grid; min-width: 0; gap: 1px; }
html[data-theme] .admin-body .planner-column-copy strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .planner-column-copy small { color: var(--ui-text-muted); font-size: 11px; }
html[data-theme] .admin-body .planner-absent-badge {
  margin-left: auto;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--ui-danger);
  background: color-mix(in srgb, var(--ui-danger) 14%, transparent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html[data-theme] .admin-body .planner-column-body {
  position: relative;
  height: 672px;
  margin: 0 8px 8px;
  background-image: repeating-linear-gradient(180deg, var(--ui-border) 0 1px, transparent 1px 56px);
  background-position: 0 0;
}
html[data-theme] .admin-body .planner-chip {
  position: absolute;
  left: 0;
  right: 0;
  display: grid;
  align-content: start;
  gap: 1px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 45%, transparent);
  border-left: 3px solid var(--ui-accent);
  border-radius: 10px;
  color: var(--ui-text);
  background: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-surface));
  cursor: grab;
  transition: box-shadow .15s ease, transform .15s ease;
}
html[data-theme] .admin-body .planner-chip:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, .3); z-index: 3; }
html[data-theme] .admin-body .planner-chip.is-dragging { opacity: .55; cursor: grabbing; }
html[data-theme] .admin-body .planner-chip strong { font-size: 11px; font-variant-numeric: tabular-nums; }
html[data-theme] .admin-body .planner-chip span {
  overflow: hidden;
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .planner-chip small {
  overflow: hidden;
  color: var(--ui-text-secondary);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .planner-chip.is-pending {
  border-color: color-mix(in srgb, var(--ui-warning) 45%, transparent);
  border-left-color: var(--ui-warning);
  background: color-mix(in srgb, var(--ui-warning) 15%, var(--ui-surface));
}
html[data-theme] .admin-body .planner-chip.is-confirmed {
  border-color: color-mix(in srgb, var(--ui-success) 45%, transparent);
  border-left-color: var(--ui-success);
  background: color-mix(in srgb, var(--ui-success) 15%, var(--ui-surface));
}
html[data-theme] .admin-body .planner-chip.is-completed { opacity: .75; }

@media (max-width: 900px) {
  html[data-theme] .admin-body .planner-grid { grid-template-columns: 44px repeat(auto-fit, minmax(170px, 1fr)); min-width: 560px; }
  html[data-theme] .admin-body .planner-hint { display: none; }
}
/* Termin-Details: fest verankert, deckend, unterhalb der Kommandoleiste. */
html[data-theme] .admin-body .calendar-detail-panel {
  position: fixed !important;
  top: 84px !important;
  right: 20px !important;
  z-index: 95 !important;
  width: min(400px, calc(100vw - 40px)) !important;
  max-height: calc(100vh - 104px) !important;
  overflow: auto !important;
  padding: 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45) !important;
  backdrop-filter: none !important;
}

/* ============================================================
   Klarheit & Wow: Licht-Kontrast, Luft in dichten Blöcken,
   Farbcodierung und Verlaufs-Akzente. Beide Themes, ein System.
   ============================================================ */

/* Seitentitel: großzügig, mit Indigo-Violett-Verlauf. */
html[data-theme] .admin-body .admin-view > .panel-head h2 {
  font-size: 26px !important;
  font-weight: 800 !important;
  background: linear-gradient(92deg, var(--ui-text) 0%, var(--ui-accent) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme] .admin-body .admin-view > .panel-head { padding: 4px 0 16px !important; margin-bottom: 16px !important; }
html[data-theme] .admin-body .admin-view > .panel-head p { margin-top: 6px !important; line-height: 1.55 !important; }

/* KPI-Karten: gestapelt, farbcodierter Punkt, Verlaufs-Zahl, viel Luft. */
html[data-theme] .admin-body :is(.work-queue-item, .maintenance-kpi-bar .maintenance-metric, .callback-metric, .calendar-summary .metric-card) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  min-height: 108px !important;
  padding: 18px 20px !important;
}
html[data-theme] .admin-body :is(.work-queue-item span, .maintenance-metric span, .callback-metric span, .calendar-summary .metric-card span) {
  order: 1;
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--ui-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .admin-body :is(.work-queue-item span, .maintenance-metric span, .callback-metric span, .calendar-summary .metric-card span)::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ui-accent);
}
html[data-theme] .admin-body .work-queue-attention span::before { background: var(--ui-warning); }
html[data-theme] .admin-body .work-queue-waiting span::before { background: var(--ui-accent); }
html[data-theme] .admin-body .work-queue-success span::before { background: var(--ui-success); }
html[data-theme] .admin-body .work-queue-danger span::before { background: var(--ui-danger); }
html[data-theme] .admin-body .work-queue-quiet span::before { background: var(--ui-border-strong); }
html[data-theme] .admin-body :is(.work-queue-item strong, .maintenance-metric strong, .callback-metric strong, .calendar-summary .metric-card strong) {
  order: 2;
  margin: 0 !important;
  font-size: 34px !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em;
  background: linear-gradient(180deg, var(--ui-text), color-mix(in srgb, var(--ui-text) 55%, var(--ui-accent)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
html[data-theme] .admin-body :is(.work-queue-item small, .maintenance-metric small) {
  order: 3;
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
}

/* Fakten-Blöcke: getrennte Unterkarten statt einer grauen Fläche. */
html[data-theme] .admin-body :is(.booking-key-facts, .maintenance-contract-meta, .customer-fact-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body :is(.booking-key-facts > *, .maintenance-contract-meta > *, .customer-fact-grid > *) {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0;
  padding: 13px 15px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 11px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body :is(.booking-key-facts, .maintenance-contract-meta, .customer-fact-grid) > * > span,
html[data-theme] .admin-body :is(.booking-key-facts, .maintenance-contract-meta, .customer-fact-grid) > * .eyebrow {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body :is(.booking-key-facts, .maintenance-contract-meta, .customer-fact-grid) > * strong {
  font-size: 14px !important;
  line-height: 1.4 !important;
}
html[data-theme] .admin-body :is(.booking-key-facts, .maintenance-contract-meta, .customer-fact-grid) > * :is(p, small, .muted) {
  line-height: 1.5 !important;
}

/* Status-/Fortschrittsbereich: eigene Karte mit Luft. */
html[data-theme] .admin-body .booking-progress {
  padding: 16px 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .booking-progress-step { padding: 10px 8px !important; }
html[data-theme] .admin-body .booking-progress-step-copy strong { font-size: 12px !important; }
html[data-theme] .admin-body .booking-progress-step-copy span { font-size: 10px !important; letter-spacing: .06em; }

/* Signal-Chips: weiße Pillen mit Farb-Punkt. */
html[data-theme] .admin-body .booking-quick-signal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  background: var(--ui-surface) !important;
  color: var(--ui-text-secondary) !important;
}
html[data-theme] .admin-body .booking-quick-signal::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ui-border-strong);
}
html[data-theme] .admin-body .booking-quick-signal-danger::before { background: var(--ui-danger); }
html[data-theme] .admin-body .booking-quick-signal-warning::before { background: var(--ui-warning); }
html[data-theme] .admin-body .booking-quick-signal-success::before { background: var(--ui-success); }
html[data-theme] .admin-body .booking-quick-signal-info::before { background: var(--ui-accent); }

/* Werkzeugleisten als saubere Karten. */
html[data-theme] .admin-body :is(.archive-toolbar, .maintenance-toolbar, .day-plan-toolbar, .callback-toolbar) {
  padding: 12px 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
}

/* Dichte Textzeilen entzerren. */
html[data-theme] .admin-body :is(p, dd, li, .booking-card-meta, .mail-thread-card p, .panel-head p) { line-height: 1.55; }
html[data-theme] .admin-body .booking-card > header { margin-bottom: 12px !important; }
html[data-theme] .admin-body .booking-card { padding: 18px 20px !important; }
html[data-theme] .admin-body .booking-actions { gap: 8px !important; margin-top: 12px !important; }

/* Status-Pillen mit Punkt. */
html[data-theme] .admin-body .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
}
html[data-theme] .admin-body .status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
}

/* Licht: sichtbare Icon-Buttons und Suchfeld-Chip. */
html[data-theme="light"] .admin-body .admin-topbar-icon {
  border: 1px solid var(--ui-border) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="light"] .admin-body .admin-global-search { background: var(--ui-surface) !important; box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important; }
html[data-theme="light"] .admin-body .planner-column { box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
html[data-theme="light"] .admin-body .site-footer { background: var(--ui-surface) !important; }

/* Licht: Karten-Hover mit Akzent-Glow. */
html[data-theme="light"] .admin-body :is(.booking-card, .maintenance-contract-row, .mail-thread-card, .customer-directory-card, .commercial-card):hover {
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ui-accent) 14%, transparent) !important;
}
/* Der eigentliche Fakten-Kopf der Auftragskarten: booking-quick-grid. */
html[data-theme] .admin-body .booking-quick-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-quick-fact {
  display: grid !important;
  align-content: start !important;
  gap: 4px !important;
  min-width: 0;
  margin: 0 !important;
  padding: 13px 15px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 11px !important;
  background: var(--ui-surface-alt) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-quick-fact > span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .booking-quick-fact > strong { font-size: 14px !important; line-height: 1.4 !important; }
html[data-theme] .admin-body .booking-quick-fact > small { color: var(--ui-text-secondary) !important; font-size: 12px !important; line-height: 1.5 !important; }
html[data-theme] .admin-body .booking-quick-problem {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 13px 15px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 11px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .booking-quick-fact-primary {
  border-left: 3px solid var(--ui-accent) !important;
}

/* KPI-Karten linksbündig. */
html[data-theme] .admin-body :is(.work-queue-item, .maintenance-kpi-bar .maintenance-metric, .callback-metric, .calendar-summary .metric-card) {
  align-items: flex-start !important;
  text-align: left !important;
}

/* ============================================================
   Klarheit v2: zentrierte Lesebreite, sichtbarer Fortschritts-
   balken, gruppierte Navigation, ruhigere Kartenhierarchie.
   Orientiert an gaengigen Service-/Dispatch-Oberflaechen.
   ============================================================ */
html[data-theme] .admin-body { --content-max: 1520px; }

/* Inhalt bekommt eine zentrierte Lesebreite statt voller Monitorbreite. */
html[data-theme] .admin-body .admin-shell { padding-inline: 28px !important; }
html[data-theme] .admin-body .admin-main-frame,
html[data-theme] .admin-body .site-footer {
  max-width: var(--content-max) !important;
  margin-inline: auto !important;
}
html[data-theme] .admin-body .admin-command-bar {
  margin-inline: -28px !important;
  padding-inline: calc(max(0px, (100% - var(--content-max)) / 2) + 28px) !important;
}
@media (max-width: 900px) {
  html[data-theme] .admin-body .admin-shell { padding-inline: 16px !important; }
  html[data-theme] .admin-body .admin-command-bar { margin-inline: -16px !important; padding-inline: 16px !important; }
}

/* Fortschrittsbalken der Auftraege: wieder sichtbar und farbcodiert. */
html[data-theme] .admin-body .booking-progress { --progress-line: var(--ui-border-strong); }
html[data-theme] .admin-body .booking-progress-waiting {
  --progress-line: linear-gradient(90deg, var(--ui-success) 0 66%, var(--ui-warning) 66% 100%);
}
html[data-theme] .admin-body .booking-progress-confirmed {
  --progress-line: linear-gradient(90deg, var(--ui-success) 0 100%);
}
html[data-theme] .admin-body :is(.booking-progress-expired, .booking-progress.is-expired-live) {
  --progress-line: linear-gradient(90deg, var(--ui-success) 0 66%, var(--ui-danger) 66% 100%);
}
html[data-theme] .admin-body .booking-progress-steps::before {
  top: 9px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--progress-line) !important;
  opacity: 1 !important;
  animation: none !important;
}
html[data-theme] .admin-body .booking-progress-step > :first-child {
  box-shadow: 0 0 0 4px var(--ui-surface-alt);
}

/* Gruppierte Navigation: klare Abschnitte statt einer langen Liste. */
html[data-theme] .admin-body .admin-nav > .admin-nav-group-label {
  display: block !important;
  margin: 18px 12px 6px !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}
html[data-theme] .admin-body .admin-nav > .admin-nav-group-label:first-of-type { margin-top: 6px !important; }

/* Ruhigere Karten: weniger Rahmen innen, mehr Luft aussen. */
html[data-theme] .admin-body :is(.booking-list, .maintenance-list, .callback-list-pane .booking-list) { gap: 14px !important; }
html[data-theme] .admin-body :is(.booking-quick-fact, .booking-quick-problem, .booking-key-facts > *, .customer-fact-grid > *, .maintenance-contract-meta > *) {
  border-color: transparent !important;
}
html[data-theme] .admin-body .booking-progress {
  border-color: transparent !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme="light"] .admin-body :is(.booking-quick-fact, .booking-quick-problem, .booking-progress, .booking-key-facts > *, .customer-fact-grid > *) {
  background: #f7f8fb !important;
}

/* Kartenkopf: Kunde und Status klar getrennt. */
html[data-theme] .admin-body .booking-card > header {
  align-items: flex-start !important;
  gap: 16px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--ui-border) !important;
}
html[data-theme] .admin-body .booking-card > header h3,
html[data-theme] .admin-body .booking-card > header strong { font-size: 16px !important; }

/* Abschnittsueberschriften innerhalb der Karten. */
html[data-theme] .admin-body .booking-progress > :is(h3, h4, strong):first-child,
html[data-theme] .admin-body .booking-full-details > summary {
  font-size: 13px !important;
  letter-spacing: -.01em;
}

/* Ausklapper "Alle Auftragsangaben" als ruhige Zeile. */
html[data-theme] .admin-body .booking-full-details > summary {
  padding: 11px 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .booking-full-details > summary:hover { background: var(--ui-surface-hover) !important; }

/* Ergebniszeile ueber Listen als leiser Hinweis. */
html[data-theme] .admin-body :is(#booking-result-info, #callback-result-info, .maintenance-result-info, .archive-result-info) {
  display: block;
  margin: 0 0 12px !important;
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
}
/* Der Fortschrittsbalken laeuft hinter den Schritten durch. */
html[data-theme] .admin-body .booking-progress { --progress-bg: var(--ui-surface-alt); }
html[data-theme="light"] .admin-body .booking-progress { --progress-bg: #f7f8fb; }
html[data-theme] .admin-body .booking-progress-step {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .booking-progress-steps::before {
  top: 7px !important;
  left: calc(16.666% + 7px) !important;
  right: calc(16.666% + 7px) !important;
}
html[data-theme] .admin-body .booking-progress-step > :first-child {
  box-shadow: 0 0 0 4px var(--progress-bg) !important;
}
/* Hoehere Spezifitaet als die alten Dark-Flaechenregeln. */
html[data-theme] .admin-body .booking-progress .booking-progress-step,
html[data-theme="dark"] .admin-body .booking-progress .booking-progress-step,
html[data-theme="light"] .admin-body .booking-progress .booking-progress-step {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .admin-body .booking-progress .booking-progress-step > :first-child,
html[data-theme="light"] .admin-body .booking-progress .booking-progress-step > :first-child {
  box-shadow: 0 0 0 4px var(--progress-bg) !important;
}
/* Endgueltige Absicherung: hoechste Spezifitaet fuer die Schritt-Transparenz. */
html[data-theme] .admin-body [data-admin-view] .booking-progress .booking-progress-step,
html[data-theme="dark"] .admin-body [data-admin-view] .booking-progress .booking-progress-step,
html[data-theme="light"] .admin-body [data-admin-view] .booking-progress .booking-progress-step {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
/* Kennzahlen-Raster ueberall gleich: automatisch fuellende Karten. */
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid, .summary-grid, .employee-summary-grid) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
}

/* ============================================================
   Nur echte Karten tragen eine Flaeche. Layout-Container
   (Ansichten, Listen, Arbeitsbereiche) bleiben unsichtbar.
   ============================================================ */
html[data-theme] .admin-body .panel.admin-view,
html[data-theme] .admin-body section[data-admin-view],
html[data-theme] .admin-body :is(
  .booking-list, .maintenance-list, .callback-list-pane, .maintenance-list-pane,
  .callback-workspace, .maintenance-workspace, .customer-history-shell,
  .customer-detail-sections, .admin-content, .admin-app-layout, .summary-grid,
  .booking-work-queue, .maintenance-kpi-bar, .callback-summary, .commercial-summary,
  .commercial-finance-grid, .employee-summary-grid, .calendar-summary
) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .panel.admin-view,
html[data-theme] .admin-body section[data-admin-view] { padding: 0 !important; }

/* ============================================================
   Kundensuche: eine Kundenzeile pro Reihe statt schmaler Kacheln.
   Nur in der Kundenansicht - das Mailcenter behaelt seine Liste.
   ============================================================ */
html[data-theme] .admin-body [data-admin-view="customers"] .mail-thread-list {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card {
  display: grid !important;
  grid-template-columns:
    minmax(180px, 1.15fr)
    minmax(240px, 1.7fr)
    minmax(130px, 0.75fr)
    minmax(150px, 0.95fr)
    auto !important;
  align-items: center !important;
  gap: 18px !important;
  padding: 13px 18px !important;
  border-radius: 12px !important;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-meta {
  display: contents !important;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-head { order: 1; }
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-meta > span:first-child { order: 2; }
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-subject { order: 3; }
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-preview { order: 4; }
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-meta > span:last-child {
  order: 5;
  justify-self: end;
  color: var(--ui-text-muted) !important;
  font-variant-numeric: tabular-nums;
}
/* Keine Wortumbrueche mitten in Adressen - lieber kuerzen. */
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card > *,
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-meta > span {
  min-width: 0;
  margin: 0 !important;
  overflow: hidden;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-head {
  display: flex !important;
  align-items: center;
  gap: 8px;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-head strong {
  overflow: hidden;
  font-size: 14px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-subject {
  color: var(--ui-text-secondary) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-preview {
  color: var(--ui-text-muted) !important;
  font-size: 12px !important;
}
@media (max-width: 1100px) {
  html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 4px 12px !important;
  }
  html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card .mail-thread-card-meta > span:last-child { grid-row: 1; }
  html[data-theme] .admin-body [data-admin-view="customers"] .customer-directory-card :is(.mail-thread-card-subject, .mail-thread-card-preview, .mail-thread-card-meta > span:first-child) { grid-column: 1 / -1; }
}
/* Karten heben sich im Hellmodus klar vom Untergrund ab. */
html[data-theme="light"] .admin-body :is(.panel:not(.admin-view), .booking-card, .maintenance-contract-row, .customer-directory-card, .commercial-card, .mail-thread-card, .audit-item, .work-queue-item, .maintenance-metric, .callback-metric, .metric-card, .archive-toolbar, .maintenance-toolbar, .day-plan-toolbar, .callback-toolbar, .settings-section, .settings-subsection, .form-block, .planner-column, .site-footer) {
  background: #ffffff !important;
  border-color: #e0e3ea !important;
}
/* Kundenprofil: breitere Wertefelder, damit E-Mails nicht mitten im Wort brechen. */
html[data-theme] .admin-body :is(.customer-profile-grid, .customer-profile-inline) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 10px !important;
}
html[data-theme] .admin-body .customer-profile-item > strong {
  font-size: 14px !important;
  line-height: 1.45 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}
html[data-theme] .admin-body .customer-profile-item > span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ============================================================
   Kundensuche: begrenzte Suchleiste, Spaltenkopf, ruhige Liste.
   ============================================================ */
html[data-theme] .admin-body .customer-list-wrap {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .customer-search-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 16px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body .customer-search-bar .archive-search-field {
  display: grid !important;
  gap: 4px !important;
  width: 100%;
  max-width: 520px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .customer-search-bar .archive-search-field > span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .customer-search-bar input { width: 100%; }

html[data-theme] .admin-body .customer-list-head {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.15fr)
    minmax(240px, 1.7fr)
    minmax(130px, 0.75fr)
    minmax(150px, 0.95fr)
    auto;
  align-items: center;
  gap: 18px;
  margin: 0 0 6px;
  padding: 0 18px 8px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .customer-list-head > span:last-child { justify-self: end; }
@media (max-width: 1100px) {
  html[data-theme] .admin-body .customer-list-head { display: none; }
  html[data-theme] .admin-body .customer-search-bar .archive-search-field { max-width: none; }
}

/* Statusbalken exakt auf Punktmitte. */
html[data-theme] .admin-body .booking-progress-steps::before { top: 19px !important; }

/* ============================================================
   Monteuransicht: exakt dieselbe Designsprache wie die Zentrale.
   Palette, Radien, Karten, Chips und Buttons sind identisch.
   ============================================================ */
html[data-theme="light"] .field-body {
  --field-app: #eceef3;
  --field-surface: #ffffff;
  --field-surface-alt: #f5f6fa;
  --field-surface-hover: #eaecf2;
  --field-border: #e0e3ea;
  --field-border-strong: #c3c7d3;
  --field-text: #101217;
  --field-text-secondary: #434754;
  --field-text-muted: #6b7080;
  --field-accent: #6366f1;
  --field-accent-hover: #4f52e9;
  --field-accent-soft: #eceefd;
  --field-success: #1a8754;
  --field-warning: #b47e0e;
  --field-danger: #d63b45;
}
html[data-theme="dark"] .field-body {
  --field-app: #0d0e11;
  --field-surface: #16171c;
  --field-surface-alt: #101116;
  --field-surface-hover: #1c1e24;
  --field-border: #242731;
  --field-border-strong: #333743;
  --field-text: #f4f5f9;
  --field-text-secondary: #a0a3b1;
  --field-text-muted: #6e7280;
  --field-accent: #6366f1;
  --field-accent-hover: #4f52e9;
  --field-accent-soft: #26284f;
  --field-success: #34b374;
  --field-warning: #e5aa42;
  --field-danger: #ef5f68;
}

html[data-theme] .field-body {
  background: var(--field-app) !important;
  background-image: none !important;
}
html[data-theme] .field-body .field-shell {
  width: min(100%, 1120px) !important;
  margin-inline: auto !important;
  padding: 22px 20px 40px !important;
}

/* Kopfbereich wie die Kommandoleiste der Zentrale. */
html[data-theme] .field-body .field-header {
  gap: 14px !important;
  padding: 16px 20px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 14px !important;
  background: var(--field-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .field-body .field-header { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .field-body .field-brand-mark {
  border-radius: 10px !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--field-accent), color-mix(in srgb, var(--field-accent) 55%, #a855f7 45%)) !important;
}
html[data-theme] .field-body .field-header h1 { font-size: 24px !important; letter-spacing: -.02em !important; }
html[data-theme] .field-body .eyebrow {
  color: var(--field-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
}

/* Filter als Segment-Leiste. */
html[data-theme] .field-body .field-filter-bar {
  gap: 6px !important;
  padding: 6px 8px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 12px !important;
  background: var(--field-surface) !important;
}
html[data-theme] .field-body .field-filter {
  min-height: 34px !important;
  padding: 7px 14px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--field-text-secondary) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
html[data-theme] .field-body .field-filter:hover { color: var(--field-text) !important; background: var(--field-surface-hover) !important; }
html[data-theme] .field-body .field-filter.is-active { color: #fff !important; background: var(--field-accent) !important; }

/* Karten wie in der Zentrale. */
html[data-theme] .field-body :is(
  .field-time-panel, .field-job-card, .field-job-details, .field-completion-form,
  .field-completed-report, .field-supplier-card, .field-signature-card,
  .field-signature-section, .field-maintenance-checklist, .field-section, .notice
) {
  border: 1px solid var(--field-border) !important;
  border-radius: 14px !important;
  background: var(--field-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .field-body :is(
  .field-time-panel, .field-job-card, .field-job-details, .field-completion-form,
  .field-completed-report, .field-supplier-card, .field-signature-card,
  .field-signature-section, .field-maintenance-checklist, .field-section, .notice
) { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .field-body :is(.field-time-panel, .field-job-card) { padding: 18px 20px !important; }
html[data-theme] .field-body .field-booking-list { display: grid; gap: 14px; }

/* Kennzahlen exakt wie die KPI-Karten der Zentrale. */
html[data-theme] .field-body :is(.field-summary, .field-time-summary) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 12px !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] .field-body :is(.field-summary, .field-time-summary) > article {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 92px;
  padding: 16px 18px !important;
  border: 1px solid var(--field-border) !important;
  border-radius: 14px !important;
  background: var(--field-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .field-body :is(.field-summary, .field-time-summary) > article { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .field-body :is(.field-summary, .field-time-summary) > article > span {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--field-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .field-body :is(.field-summary, .field-time-summary) > article > span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--field-accent);
}
html[data-theme] .field-body :is(.field-summary, .field-time-summary) > article > strong {
  font-size: 26px !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Bedienelemente wie in der Zentrale. */
html[data-theme] .field-body :is(.button, button, input, select, textarea) { border-radius: 8px !important; }
html[data-theme] .field-body .button {
  min-height: 38px !important;
  padding: 9px 15px !important;
  font-weight: 700 !important;
}
html[data-theme] .field-body .button:not(.button-secondary):not(.button-danger) {
  border-color: color-mix(in srgb, var(--field-accent) 80%, #000 20%) !important;
  color: #fff !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-accent) 88%, #fff 12%), var(--field-accent)) !important;
}
html[data-theme] .field-body .button-secondary {
  border: 1px solid var(--field-border-strong) !important;
  color: var(--field-text) !important;
  background: var(--field-surface) !important;
}
html[data-theme] .field-body .button-secondary:hover { border-color: var(--field-accent) !important; background: var(--field-surface-hover) !important; }
html[data-theme] .field-body .button-danger {
  border-color: color-mix(in srgb, var(--field-danger) 80%, #000 20%) !important;
  color: #fff !important;
  background: linear-gradient(180deg, color-mix(in srgb, var(--field-danger) 88%, #fff 12%), var(--field-danger)) !important;
}
html[data-theme] .field-body :is(input, select, textarea) {
  border: 1px solid var(--field-border) !important;
  color: var(--field-text) !important;
  background: var(--field-surface-alt) !important;
}
html[data-theme] .field-body :is(input, select, textarea):focus {
  border-color: var(--field-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent) 20%, transparent) !important;
  outline: 0 !important;
}
html[data-theme] .field-body :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--field-accent) 70%, transparent) !important;
  outline-offset: 2px !important;
}

/* Innenblöcke ruhig halten. */
html[data-theme] .field-body :is(.field-detail-block, .field-material-row, .field-service-template-row, .field-maintenance-check-row, .field-time-entry, .field-time-manual) {
  border: 1px solid var(--field-border) !important;
  border-radius: 11px !important;
  background: var(--field-surface-alt) !important;
  box-shadow: none !important;
}
html[data-theme] .field-body .field-section-label,
html[data-theme] .field-body .field-detail-block > span {
  color: var(--field-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .field-body .field-sync-state { color: var(--field-text-muted) !important; font-size: 12px; }
html[data-theme] .field-body :is(p, li, small) { line-height: 1.55; }

/* ============================================================
   Mailcenter: moderner Zwei-Spalten-Client.
   Links kompakte Konversationsliste mit eigenem Scroll,
   rechts lesbarer Verlauf mit ruhigem Antwortbereich.
   ============================================================ */

/* Postfach-Umschalter als Segmentleiste statt breiter Kacheln. */
html[data-theme] .admin-body .mailbox-command-bar {
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
}
html[data-theme] .admin-body .mailbox-command-copy > span { font-size: 10px !important; letter-spacing: .08em; }
html[data-theme] .admin-body .mailbox-command-copy > strong { font-size: 13px !important; }
html[data-theme] .admin-body .mail-account-switcher {
  gap: 4px !important;
  padding: 4px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 11px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .mail-account-filter {
  display: grid !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  gap: 1px !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}
html[data-theme] .admin-body .mail-account-filter:hover { background: var(--ui-surface-hover) !important; }
html[data-theme] .admin-body .mail-account-filter.is-active {
  color: var(--ui-text) !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .12) !important;
}
html[data-theme="dark"] .admin-body .mail-account-filter.is-active { box-shadow: 0 1px 3px rgba(0, 0, 0, .35) !important; }
html[data-theme] .admin-body .mail-account-filter-title { font-size: 12px !important; font-weight: 700 !important; }
html[data-theme] .admin-body .mail-account-filter-meta { font-size: 10px !important; color: var(--ui-text-muted) !important; }

/* Zwei Spalten mit eigenem Scroll je Seite. */
html[data-theme] .admin-body .mail-center-layout--inbox,
html[data-theme] .admin-body [data-admin-view="messages"] .mail-center-layout {
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr) !important;
  gap: 16px !important;
  align-items: start !important;
}
html[data-theme] .admin-body .mail-inbox-sidebar {
  position: sticky !important;
  top: 84px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  max-height: calc(100vh - 108px) !important;
  padding: 12px !important;
  border-radius: 14px !important;
}
html[data-theme] .admin-body .mail-inbox-sidebar .mail-thread-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-height: 0;
  margin: 0 -4px !important;
  padding: 0 4px !important;
  overflow-y: auto !important;
}
html[data-theme] .admin-body .mail-thread-result {
  margin: 0 !important;
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Konversationszeilen: ruhig, ohne Kartenrahmen. */
html[data-theme] .admin-body .mail-inbox-sidebar .mail-thread-card {
  display: grid !important;
  gap: 3px !important;
  padding: 10px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  transform: none !important;
}
html[data-theme] .admin-body .mail-inbox-sidebar .mail-thread-card:hover {
  background: var(--ui-surface-hover) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .mail-inbox-sidebar .mail-thread-card.is-active {
  border-color: color-mix(in srgb, var(--ui-accent) 45%, transparent) !important;
  background: var(--ui-accent-soft) !important;
}
html[data-theme] .admin-body .mail-thread-card-head { align-items: baseline !important; gap: 8px !important; }
html[data-theme] .admin-body .mail-thread-card-head strong {
  overflow: hidden;
  font-size: 13px !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .mail-thread-card-meta {
  display: flex !important;
  justify-content: space-between !important;
  gap: 10px !important;
  color: var(--ui-text-muted) !important;
  font-size: 11px !important;
}
html[data-theme] .admin-body .mail-thread-card-meta > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .mail-thread-card-meta > span:last-child { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
html[data-theme] .admin-body .mail-thread-card-subject {
  overflow: hidden;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-overflow: ellipsis;
  white-space: nowrap;
}
html[data-theme] .admin-body .mail-thread-card-preview {
  display: -webkit-box !important;
  overflow: hidden;
  color: var(--ui-text-secondary) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
html[data-theme] .admin-body .mail-thread-card-route { color: var(--ui-text-muted) !important; font-size: 11px !important; }
html[data-theme] .admin-body .mail-thread-card-badges > * {
  padding: 2px 7px !important;
  border-radius: 999px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* Verlaufsseite: klare Kopfzeile, lesbarer Text, ruhige Nachrichten. */
html[data-theme] .admin-body .mail-thread-detail { padding: 20px 22px !important; border-radius: 14px !important; }
html[data-theme] .admin-body .mail-thread-context > span,
html[data-theme] .admin-body .mail-thread-account {
  padding: 6px 11px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 999px !important;
  background: var(--ui-surface-alt) !important;
  font-size: 11px !important;
}
html[data-theme] .admin-body .mail-thread-message-list {
  display: grid !important;
  gap: 10px !important;
  padding: 4px !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .mail-thread-message {
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-border-strong) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .mail-thread-message:has(.mail-thread-message-direction),
html[data-theme] .admin-body .mail-thread-message.is-outgoing { border-left-color: var(--ui-accent) !important; }
html[data-theme] .admin-body .mail-thread-message.is-incoming { border-left-color: var(--ui-success) !important; }
html[data-theme] .admin-body .mail-thread-message :is(p, pre, div) { line-height: 1.6 !important; }
html[data-theme] .admin-body .mail-thread-content { max-width: 80ch; }

/* Antwortbereich kompakt und klar abgesetzt. */
html[data-theme] .admin-body .mail-thread-form,
html[data-theme] .admin-body .history-mail-form {
  gap: 10px !important;
  padding: 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body :is(.mail-thread-form, .history-mail-form) > label {
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body :is(.mail-thread-form, .history-mail-form) textarea { min-height: 150px !important; }

@media (max-width: 1080px) {
  html[data-theme] .admin-body [data-admin-view="messages"] .mail-center-layout { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] .admin-body .mail-inbox-sidebar { position: relative !important; top: auto !important; max-height: 460px !important; }
}
/* Kundensuche: Seitengroesse, Trefferzeile und Blaetterleiste. */
html[data-theme] .admin-body .customer-search-bar .archive-page-size-field {
  display: grid !important;
  flex: 0 0 auto;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
html[data-theme] .admin-body .customer-search-bar .archive-page-size-field > span {
  color: var(--ui-text-muted) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .customer-result-info {
  margin-left: auto;
  color: var(--ui-text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
html[data-theme] .admin-body #customer-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body #customer-pagination.hidden { display: none !important; }
html[data-theme] .admin-body .archive-page-indicator {
  color: var(--ui-text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Kaufmaennischer Bereich: klare Reiter, einheitliche Kennzahlen,
   lesbare Tabellen und ruhige Belegzeilen.
   ============================================================ */
html[data-theme] .admin-body .commercial-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  margin: 0 0 16px !important;
  padding: 5px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .commercial-tab {
  min-height: 34px !important;
  padding: 7px 13px !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--ui-text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}
html[data-theme] .admin-body .commercial-tab:hover:not(.is-active) {
  color: var(--ui-text) !important;
  background: var(--ui-surface-hover) !important;
}
html[data-theme] .admin-body .commercial-tab:focus:not(:focus-visible):not(.is-active) { background: transparent !important; }
html[data-theme] .admin-body .commercial-tab.is-active {
  color: #fff !important;
  background: var(--ui-accent) !important;
  box-shadow: none !important;
}
html[data-theme] .admin-body .commercial-tab-badge {
  min-width: 18px !important;
  margin-left: 6px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  color: inherit !important;
  background: color-mix(in srgb, currentColor 20%, transparent) !important;
  font-size: 10px !important;
}

/* Kennzahlen im kaufmaennischen Bereich wie ueberall sonst. */
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card,
html[data-theme] .admin-body .commercial-stat-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 96px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card,
html[data-theme="dark"] .admin-body .commercial-stat-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card > span:first-child,
html[data-theme] .admin-body .commercial-stat-card > span:first-child {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--ui-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card > span:first-child::before,
html[data-theme] .admin-body .commercial-stat-card > span:first-child::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ui-accent);
}
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card > strong,
html[data-theme] .admin-body .commercial-stat-card > strong {
  font-size: 24px !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
html[data-theme] .admin-body :is(.commercial-summary, .commercial-finance-grid) .metric-card small { color: var(--ui-text-muted) !important; font-size: 11px !important; }
html[data-theme] .admin-body .commercial-profit-card,
html[data-theme] .admin-body .commercial-report-metric {
  background: var(--ui-surface) !important;
  background-image: none !important;
  border-color: var(--ui-border) !important;
}

/* Tabellen: volle Breite, ruhige Zeilen, klarer Kopf. */
html[data-theme] .admin-body :is(.commercial-journal-table-wrap, .commercial-daily-table-wrap, .table-scroll) {
  overflow-x: auto !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
}
html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) {
  width: 100% !important;
  min-width: 0 !important;
  border-collapse: collapse !important;
}
html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) th {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text-muted) !important;
  background: var(--ui-surface-alt) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) td {
  padding: 11px 14px !important;
  border-bottom: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) tbody tr:last-child td { border-bottom: 0 !important; }
html[data-theme] .admin-body :is(table, .commercial-journal-table, .commercial-daily-table) tbody tr:hover td { background: var(--ui-surface-hover) !important; }

/* Belegzeilen: Betrag rechts, Meta ruhig. */
html[data-theme] .admin-body .commercial-document-card,
html[data-theme] .admin-body .commercial-card {
  padding: 16px 18px !important;
  border-radius: 14px !important;
}
html[data-theme] .admin-body .commercial-document-card :is(.commercial-document-amount, .commercial-amount) {
  font-size: 18px !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
html[data-theme] .admin-body :is(.commercial-toolbar, .commercial-position-toolbar, .commercial-totals, .commercial-document-ids, .commercial-editor, .commercial-pane, .commercial-recipient-card, .commercial-bundle-editor) {
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface) !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* ============================================================
   Tagesansicht im neuen Design.
   ============================================================ */
html[data-theme] .admin-body .day-plan-summary .metric-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 6px !important;
  min-height: 96px !important;
  padding: 16px 18px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .admin-body .day-plan-summary .metric-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .admin-body .day-plan-summary .metric-card > span {
  display: inline-flex !important;
  align-items: center;
  gap: 7px;
  color: var(--ui-text-secondary) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .day-plan-summary .metric-card > span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--ui-accent);
}
html[data-theme] .admin-body .day-plan-summary .metric-card > strong {
  font-size: 22px !important;
  line-height: 1.15 !important;
  letter-spacing: -.02em;
}
html[data-theme] .admin-body .day-plan-list { display: grid !important; gap: 14px !important; }
html[data-theme] .admin-body .day-plan-card {
  padding: 18px 20px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05) !important;
}
html[data-theme="dark"] .admin-body .day-plan-card { box-shadow: 0 1px 2px rgba(0, 0, 0, .22) !important; }
html[data-theme] .admin-body .day-plan-card-head { margin-bottom: 12px !important; padding-bottom: 12px !important; border-bottom: 1px solid var(--ui-border) !important; }
html[data-theme] .admin-body .day-plan-route {
  margin: 0 0 12px !important;
  padding: 11px 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-accent) !important;
  border-radius: 10px !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-alt) !important;
  font-size: 13px !important;
}
html[data-theme] .admin-body .day-plan-route.is-ok { border-left-color: var(--ui-success) !important; }
html[data-theme] .admin-body .day-plan-route.is-warning { border-left-color: var(--ui-warning) !important; }
html[data-theme] .admin-body .day-plan-route.is-danger { border-left-color: var(--ui-danger) !important; }
html[data-theme] .admin-body .day-plan-details {
  gap: 8px 18px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .day-plan-details > div { line-height: 1.55 !important; }
html[data-theme] .admin-body .day-plan-actions { margin-top: 12px !important; }

/* ============================================================
   Responsive: gestufte Anpassung fuer Laptop, Tablet und Handy.
   ============================================================ */
@media (max-width: 1280px) {
  html[data-theme] .admin-body .admin-shell { padding-inline: 20px !important; }
  html[data-theme] .admin-body .admin-command-bar { margin-inline: -20px !important; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar, .callback-summary, .summary-grid, .commercial-summary, .commercial-finance-grid, .day-plan-summary) {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  }
}
@media (max-width: 1100px) {
  html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; }
  html[data-theme] .admin-body :is(.maintenance-workspace, .callback-workspace) { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] .admin-body :is(.maintenance-detail-panel, .callback-detail-panel) { position: relative !important; top: auto !important; max-height: none !important; }
  html[data-theme] .admin-body .customer-detail-sections { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] .admin-body .day-plan-details { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 920px) {
  html[data-theme] .admin-body .admin-shell { margin-left: 0 !important; padding-inline: 14px !important; }
  html[data-theme] .admin-body .admin-command-bar { margin-inline: -14px !important; padding-inline: 14px !important; }
  html[data-theme] .admin-body .admin-nav {
    position: sticky !important;
    inset: auto !important;
    z-index: 70;
    flex-direction: row !important;
    align-items: center;
    width: auto !important;
    min-height: 54px;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 1px solid var(--ui-border) !important;
    border-right: 0 !important;
    border-radius: 12px !important;
  }
  html[data-theme] .admin-body .admin-nav > .admin-nav-group-label,
  html[data-theme] .admin-body .admin-brand,
  html[data-theme] .admin-body .admin-nav-footer { display: none !important; }
  html[data-theme] .admin-body .admin-nav-link { flex: 0 0 auto !important; margin: 0 !important; white-space: nowrap; }
  html[data-theme] .admin-body .calendar-detail-panel {
    position: fixed !important;
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    width: min(420px, calc(100vw - 24px)) !important;
    max-height: 70vh !important;
  }
  html[data-theme] .admin-body .planner-grid { grid-template-columns: 44px repeat(auto-fit, minmax(180px, 1fr)) !important; min-width: 620px !important; }
}
@media (max-width: 760px) {
  html[data-theme] .admin-body .admin-view > .panel-head { align-items: stretch !important; flex-direction: column !important; gap: 12px !important; }
  html[data-theme] .admin-body .admin-view > .panel-head .booking-actions { flex-wrap: wrap; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar, .callback-summary, .summary-grid, .commercial-summary, .commercial-finance-grid, .day-plan-summary) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  html[data-theme] .admin-body :is(.work-queue-item, .maintenance-metric, .callback-metric, .metric-card, .commercial-stat-card) {
    min-height: 84px !important;
    padding: 13px 14px !important;
  }
  html[data-theme] .admin-body :is(.work-queue-item strong, .maintenance-metric strong, .callback-metric strong, .metric-card strong) { font-size: 24px !important; }
  html[data-theme] .admin-body .booking-quick-grid { grid-template-columns: minmax(0, 1fr) !important; }
  html[data-theme] .admin-body :is(.booking-card, .maintenance-contract-row, .day-plan-card, .commercial-card) { padding: 14px 15px !important; }
  html[data-theme] .admin-body .customer-search-bar { flex-wrap: wrap !important; }
  html[data-theme] .admin-body .customer-result-info { margin-left: 0 !important; }
  html[data-theme] .admin-body .commercial-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; }
  html[data-theme] .admin-body .commercial-tab { flex: 0 0 auto !important; }
  html[data-theme] .admin-body .booking-progress-steps { gap: 6px !important; }
  html[data-theme] .admin-body .booking-progress-step-copy strong { font-size: 11px !important; }
  html[data-theme] .admin-body .booking-progress-step-copy span { font-size: 9px !important; }
  html[data-theme] .admin-body .calendar-detail-panel { right: 8px !important; left: 8px !important; width: auto !important; }
  html[data-theme] .admin-body :is(.booking-actions, .day-plan-actions, .customer-detail-actions) .button { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 560px) {
  html[data-theme] .admin-body .admin-shell { padding-inline: 10px !important; }
  html[data-theme] .admin-body .admin-command-bar { margin-inline: -10px !important; padding-inline: 10px !important; min-height: 56px !important; }
  html[data-theme] .admin-body :is(.booking-work-queue, .maintenance-kpi-bar, .callback-summary, .summary-grid, .commercial-summary, .commercial-finance-grid, .day-plan-summary) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html[data-theme] .admin-body .admin-view > .panel-head h2 { font-size: 21px !important; }
  html[data-theme] .admin-body .booking-progress-steps { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  html[data-theme] .admin-body .booking-progress-steps::before { display: none !important; }
  html[data-theme] .admin-body .booking-progress-step { grid-template-columns: 20px minmax(0, 1fr) !important; grid-template-rows: auto !important; align-items: center; gap: 10px !important; text-align: left; }
  html[data-theme] .admin-body .mail-account-switcher { flex-wrap: nowrap !important; overflow-x: auto !important; }
  html[data-theme] .admin-body .field-shell { padding-inline: 12px !important; }
}

/* ============================================================
   Projekte & Belege: der Reiter-Inhalt ist ein Layout-Container,
   keine Karte. Ohne Flaeche klebt kein Text mehr am Rand.
   ============================================================ */
html[data-theme] .admin-body .commercial-pane {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html[data-theme] .admin-body .commercial-pane:not(.hidden) {
  display: grid;
  gap: 14px;
  align-content: start;
}
/* Lose Abschnittsköpfe im Reiter-Inhalt bekommen Luft. */
html[data-theme] .admin-body .commercial-pane > :is(h2, h3, .commercial-page-head, .commercial-section-head) {
  margin: 0 !important;
}
html[data-theme] .admin-body .commercial-pane > .commercial-page-head { padding-bottom: 4px !important; border-bottom: 0 !important; }

/* Auswertungen: kompakt, ohne externe Chart-Bibliothek und in beiden Themes lesbar. */
html[data-theme] .admin-body .commercial-analytics-filters {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px !important;
}
html[data-theme] .admin-body .commercial-analytics-filters label {
  display: grid;
  gap: 5px;
  color: var(--ui-text-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
html[data-theme] .admin-body .commercial-analytics-filters select { width: 100%; }
html[data-theme] .admin-body .commercial-analytics-section {
  padding: 16px 18px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-surface);
}
html[data-theme] .admin-body .commercial-analytics-section .panel-head {
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
html[data-theme] .admin-body .commercial-analytics-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  color: var(--ui-text-muted);
  font-size: 12px;
}
html[data-theme] .admin-body .commercial-analytics-legend span { display: inline-flex; align-items: center; gap: 6px; }
html[data-theme] .admin-body .commercial-analytics-legend i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--ui-accent);
}
html[data-theme] .admin-body .commercial-analytics-legend .is-profit { opacity: .48; }
html[data-theme] .admin-body .commercial-analytics-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(38px, 1fr));
  gap: 8px;
  min-height: 210px;
  padding: 12px 0 0;
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .commercial-analytics-month {
  display: grid;
  grid-template-rows: 168px auto;
  gap: 8px;
  min-width: 0;
  color: var(--ui-text-muted);
  font-size: 11px;
  text-align: center;
}
html[data-theme] .admin-body .commercial-analytics-month > strong { font-weight: 700; }
html[data-theme] .admin-body .commercial-analytics-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-height: 168px;
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .commercial-analytics-bar {
  display: block;
  width: min(20px, 42%);
  min-height: 2px;
  border-radius: 5px 5px 1px 1px;
  background: var(--ui-accent);
}
html[data-theme] .admin-body .commercial-analytics-bar.is-profit { opacity: .48; }
html[data-theme] .admin-body .commercial-analytics-bar.is-negative { background: var(--ui-danger); opacity: .9; }
html[data-theme] .admin-body .commercial-analytics-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
html[data-theme] .admin-body .commercial-analytics-ranking { display: grid; gap: 8px; }
html[data-theme] .admin-body .commercial-analytics-ranking > article {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ui-border);
}
html[data-theme] .admin-body .commercial-analytics-ranking > article:last-child { border-bottom: 0; }
html[data-theme] .admin-body .commercial-analytics-ranking > article > span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ui-text-secondary);
  background: var(--ui-surface-alt);
  font-size: 11px;
  font-weight: 800;
}
html[data-theme] .admin-body .commercial-analytics-ranking strong,
html[data-theme] .admin-body .commercial-analytics-ranking small { display: block; }
html[data-theme] .admin-body .commercial-analytics-ranking small { margin-top: 3px; color: var(--ui-text-muted); font-size: 11px; }
html[data-theme] .admin-body .commercial-analytics-value { text-align: right; white-space: nowrap; }

@media (max-width: 760px) {
  html[data-theme] .admin-body .commercial-analytics-filters,
  html[data-theme] .admin-body .commercial-analytics-columns { grid-template-columns: 1fr; }
  html[data-theme] .admin-body .commercial-analytics-chart { overflow-x: auto; grid-template-columns: repeat(12, 48px); }
}

/* Karten im kaufmaennischen Bereich, die bisher ohne Innenabstand liefen. */
html[data-theme] .admin-body :is(.commercial-report-card, .commercial-summary-card, .commercial-audit-info article, .commercial-inventory-movement, .commercial-bundle-item) {
  padding: 16px 18px !important;
  border-radius: 12px !important;
}
html[data-theme] .admin-body .commercial-recipient-card > summary { padding: 14px 16px !important; }
html[data-theme] .admin-body .commercial-recipient-card > :not(summary):not(.notice):not(table):not([class*="card"]):not([class*="table-wrap"]) { padding: 0 16px 16px !important; }
html[data-theme] .admin-body .commercial-recipient-card > :is(.notice, [class*="card"], [class*="table-wrap"]) { margin: 0 16px 16px !important; }
/* Tabellenrahmen bleibt randlos - die Zellen tragen den Abstand. */
html[data-theme] .admin-body .commercial-journal-table-wrap { padding: 0 !important; }
/* PDF-Vorschau: neutrale Flaeche statt alter Blaugrau-Kachel. */
html[data-theme] .admin-body .commercial-design-preview {
  padding: 12px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .commercial-design-pdf {
  width: 100%;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  background: var(--ui-surface) !important;
}

/* ============================================================
   Hilfe & Wiki: Theme-Umschalter als sauberer Icon-Knopf
   im gleichen Stil wie die Icon-Knoepfe der Zentrale.
   ============================================================ */
html[data-theme] .wiki-body .theme-toggle--floating {
  position: fixed !important;
  top: 16px !important;
  right: 20px !important;
  z-index: 90;
  display: inline-grid !important;
  place-items: center !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--wiki-border, var(--ui-border)) !important;
  border-radius: 10px !important;
  background: var(--wiki-surface, var(--ui-surface)) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06) !important;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
html[data-theme="dark"] .wiki-body .theme-toggle--floating { box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important; }
html[data-theme] .wiki-body .theme-toggle--floating:hover {
  border-color: var(--wiki-accent, var(--ui-accent)) !important;
  background: var(--wiki-surface-alt, var(--ui-surface-alt)) !important;
}
html[data-theme] .wiki-body .theme-toggle--floating:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--wiki-accent, var(--ui-accent)) 70%, transparent) !important;
  outline-offset: 2px !important;
}
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-track {
  display: grid !important;
  place-items: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .wiki-body .theme-toggle--floating .theme-switch-thumb { display: none !important; }
html[data-theme] .wiki-body .theme-toggle--floating svg {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 18px !important;
  height: 18px !important;
  fill: var(--wiki-text-secondary, var(--ui-text-secondary)) !important;
}
html[data-theme] .wiki-body .theme-toggle--floating:hover svg { fill: var(--wiki-accent, var(--ui-accent)) !important; }

/* ============================================================
   Innenblöcke müssen sich von der Karte absetzen - in beiden
   Themes gleich (Karte = surface, Innenblock = surface-alt).
   ============================================================ */
html[data-theme] .admin-body :is(
  .booking-quick-fact, .booking-quick-problem, .booking-key-facts > *,
  .customer-fact-grid > *, .customer-fact-card, .customer-profile-item,
  .maintenance-contract-meta > *, .maintenance-row-facts > *,
  .maintenance-contract-note, .day-plan-details, .booking-progress,
  .callback-detail-field, .callback-detail-note
) {
  background: var(--ui-surface-alt) !important;
  background-image: none !important;
}
html[data-theme="light"] .admin-body :is(
  .booking-quick-fact, .booking-quick-problem, .booking-key-facts > *,
  .customer-fact-grid > *, .customer-fact-card, .customer-profile-item,
  .maintenance-contract-meta > *, .maintenance-row-facts > *,
  .maintenance-contract-note, .day-plan-details, .booking-progress,
  .callback-detail-field, .callback-detail-note
) { background: #f7f8fb !important; }

/* Abschlussbericht: eigene Farben statt hellgruener Flaeche im Dunkelmodus. */
html[data-theme] .admin-body .admin-completion-report {
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-left: 3px solid var(--ui-success) !important;
  border-radius: 12px !important;
  color: var(--ui-text) !important;
  background: color-mix(in srgb, var(--ui-success) 10%, var(--ui-surface-alt)) !important;
  background-image: none !important;
}
html[data-theme] .admin-body .admin-completion-report :is(p, li, span, small, dd) { color: var(--ui-text-secondary) !important; }
html[data-theme] .admin-body .admin-completion-report :is(strong, h3, h4, dt) { color: var(--ui-text) !important; }

/* ============================================================
   Aufklapp-Koepfe ("Alle Auftragsangaben", "Mehr anzeigen")
   als klare, gleich aussehende Schalter.
   ============================================================ */
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions) > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100%;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 10px !important;
  color: var(--ui-text-secondary) !important;
  background: var(--ui-surface-alt) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
  list-style: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions) > summary::-webkit-details-marker { display: none; }
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions) > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s ease;
}
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions)[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions) > summary:hover {
  border-color: var(--ui-border-strong) !important;
  color: var(--ui-text) !important;
  background: var(--ui-surface-hover) !important;
}
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions)[open] > summary {
  border-color: color-mix(in srgb, var(--ui-accent) 40%, var(--ui-border)) !important;
  color: var(--ui-text) !important;
}
html[data-theme] .admin-body :is(.booking-full-details, .booking-more-actions) > summary + * { margin-top: 10px !important; }
html[data-theme] .admin-body .booking-full-details > .booking-details {
  padding: 14px 16px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}
html[data-theme] .admin-body .booking-actions-more-panel {
  padding: 12px 14px !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  background: var(--ui-surface-alt) !important;
}

/* ============================================================
   Kundenprofil: klare Schichtung wie im Rest der Anwendung.
   Panel (hell) > Abschnittskarte (abgesetzt) > Feld (hell).
   Die ID wird bewusst nur fuer dieses eine Panel verwendet.
   ============================================================ */
html[data-theme] .admin-body #customer-detail {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 14px !important;
}
html[data-theme] .admin-body #customer-detail :is(
  .customer-section-card, .customer-profile-status-card,
  .customer-detail-tabs, .customer-profile-panel, .customer-history-shell > .customer-detail-head
) {
  background: var(--ui-surface-alt) !important;
  border-color: var(--ui-border) !important;
}
html[data-theme] .admin-body #customer-detail :is(.customer-fact-card, .customer-profile-item) {
  background: var(--ui-surface) !important;
  border: 1px solid var(--ui-border) !important;
}
html[data-theme="light"] .admin-body #customer-detail :is(
  .customer-section-card, .customer-profile-status-card,
  .customer-detail-tabs, .customer-profile-panel
) { background: #f7f8fb !important; }
html[data-theme="light"] .admin-body #customer-detail :is(.customer-fact-card, .customer-profile-item) { background: #ffffff !important; }

/* ============================================================
   Detailfenster (Rueckrufe, Wartungen) bleiben beim Scrollen
   sichtbar. Voraussetzung: kein Elternelement darf einen
   Scroll-Container erzeugen - "clip" statt "hidden".
   ============================================================ */
html[data-theme] .admin-body,
html[data-theme] .admin-body .admin-view,
html[data-theme] .admin-body .admin-content,
html[data-theme] .admin-body .admin-app-layout,
html[data-theme] .admin-body .admin-main-frame,
html[data-theme] .admin-body .page-shell {
  overflow: clip !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}
html[data-theme] .admin-body :is(.callback-workspace, .maintenance-workspace) {
  align-items: start !important;
}
html[data-theme] .admin-body :is(.callback-detail-panel, .maintenance-detail-panel) {
  position: sticky !important;
  top: 88px !important;
  align-self: start !important;
  max-height: calc(100vh - 108px) !important;
  overflow: auto !important;
  overscroll-behavior: contain;
}
html[data-theme] .admin-body :is(.callback-list-pane, .maintenance-list-pane) { overflow: visible !important; }
@media (max-width: 1100px) {
  html[data-theme] .admin-body :is(.callback-detail-panel, .maintenance-detail-panel) {
    position: relative !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}
/* Filterleiste steht ueber dem Arbeitsbereich - Liste und Detailfenster
   beginnen dadurch auf derselben Hoehe. */
html[data-theme] .admin-body :is(.callback-toolbar, .maintenance-toolbar) { margin-bottom: 10px !important; }
html[data-theme] .admin-body :is(.callback-list-pane, .maintenance-list-pane) > :first-child { margin-top: 0 !important; }

/* Systemstatus: intentionally compact so backup operations remain below the fold. */
.system-status-summary,
.tenant-status-summary,
.system-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.system-status-metric {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 14px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-alt);
}
.system-status-metric > span {
  color: var(--ui-text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.system-status-metric > strong { color: var(--ui-text); font-size: 18px; }
.system-status-metric > small { color: var(--ui-text-secondary); line-height: 1.4; }
.system-status-metric.is-success { border-left: 3px solid #3ba55d; }
.system-status-metric.is-warning { border-left: 3px solid #faa61a; }
.system-status-metric.is-danger { border-left: 3px solid #ed4245; }
.system-status-metric.is-neutral { border-left: 3px solid var(--ui-accent); }
.system-status-errors { display: grid; gap: 8px; }
.system-status-error {
  display: grid;
  gap: 3px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, #ed4245 55%, var(--ui-border));
  border-radius: 8px;
  background: color-mix(in srgb, #ed4245 8%, var(--ui-surface-alt));
}
.system-status-error strong { color: var(--ui-text); }
.system-status-error span { color: var(--ui-text-secondary); font-size: 12px; }
.system-restart-panel .actions { margin-top: 12px; }
.system-restart-panel .notice { margin-top: 12px; }

.dns-record-list { display: grid; gap: 8px; }
.dns-record-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-alt);
}
.dns-record-card.is-valid { border-left: 3px solid #3ba55d; }
.dns-record-card.is-missing { border-left: 3px solid #faa61a; }
.dns-record-type { color: var(--ui-accent); font-weight: 800; letter-spacing: .06em; }
.dns-record-card > div { display: grid; gap: 3px; min-width: 0; }
.dns-record-card strong, .dns-record-card small { overflow-wrap: anywhere; }
.dns-record-card small { color: var(--ui-text-secondary); }
html[data-theme="dark"] .dns-record-card { background: #202225; border-color: #3a3d44; }
@media (max-width: 640px) {
  .dns-record-card { grid-template-columns: 48px minmax(0, 1fr); }
  .dns-record-card > .tenant-status { grid-column: 2; justify-self: start; }
}

/* Server controls are deliberately absent from every firm administration.
   This also hides markup from older cached admin documents. */
.form-block:has(#system-status-refresh),
.form-block:has(#system-status-summary),
.form-block:has(#system-status-server),
.form-block:has(#system-restart-panel),
.settings-subsection:has(#system-status-refresh),
.settings-subsection:has(#system-status-summary),
.settings-subsection:has(#system-status-server),
.settings-subsection:has(#system-restart-panel) {
  display: none !important;
}

/* Lieferanten-Setup: explains the direct IDS flow without pretending that a
   supplier account alone grants every optional interface. */
.settings-connection-guide {
  display: grid;
  gap: 7px;
  margin: 2px 0 4px;
  padding: 13px 14px;
  border: 1px solid var(--ui-border);
  border-left: 3px solid var(--ui-accent);
  border-radius: 8px;
  background: var(--ui-surface-alt);
  color: var(--ui-text-secondary);
}
.settings-connection-guide strong { color: var(--ui-text); }
.settings-connection-guide ol { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.settings-connection-guide p { margin: 0; font-size: 13px; line-height: 1.45; }
html[data-theme="dark"] .settings-connection-guide { background: #202225; border-color: #3a3d44; }

/* DATANORM imports are tenant-local. Keep the current price list visible next
   to the upload controls without exposing supplier credentials or raw files. */
.datanorm-import-panel { scroll-margin-top: 88px; }
.datanorm-status {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.datanorm-status-card {
  display: grid;
  gap: 4px;
  min-height: 94px;
  padding: 13px 14px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-surface-alt);
}
.datanorm-status-card strong { color: var(--ui-text); }
.datanorm-status-card span { color: var(--ui-accent); font-size: 18px; font-weight: 700; }
.datanorm-status-card small { color: var(--ui-text-secondary); line-height: 1.4; }
html[data-theme="dark"] .datanorm-status-card { background: #202225; border-color: #3a3d44; }
.datanorm-job-list { grid-column: 1 / -1; display: grid; gap: 8px; }
.datanorm-job-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--ui-border); border-radius: 10px; background: var(--ui-surface); }
.datanorm-job-card > div { display: grid; gap: 3px; min-width: 0; }
.datanorm-job-card small { color: var(--ui-text-secondary); }
html[data-theme="dark"] .datanorm-job-card { background: #202225; border-color: #3a3d44; }
@media (max-width: 640px) { .datanorm-job-card { align-items: stretch; flex-direction: column; } }
@media (max-width: 640px) {
  .system-status-summary,
  .tenant-status-summary,
  .system-status-grid { grid-template-columns: 1fr 1fr; }
  .system-status-metric { min-height: 92px; padding: 11px; }
}

.tenant-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.tenant-module-grid .checkbox-field {
  min-height: 54px;
  align-items: center;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--ui-surface-alt);
}

html[data-theme="dark"] .tenant-module-grid .checkbox-field {
  background: #202225;
  border-color: #3a3d44;
}