/*
 * PMI Dojo base components, built only from tokens.css.
 * Loaded after styles.css; legacy colour rules for these components have been
 * removed from styles.css so that this file is the single definition.
 */

/* ---------------------------------------------------------------------------
 * Status badge
 * One component for every status chip. The tone comes from a modifier class;
 * the many historical tone names map onto six tones.
 * ------------------------------------------------------------------------- */
.status-pill,
.status-badge,
.pill,
.badge,
.count-pill,
.maintenance-status,
.asset-status-badge,
.ticket-activity-badge,
.customer-status-badge,
.customer-recent-type {
  --tone: var(--color-accent-strong);
  --tone-soft: var(--color-accent-soft);
  border: 1px solid transparent;
  background: var(--tone-soft);
  color: var(--tone);
  font-weight: var(--weight-medium);
}

/* Neutral */
.count-pill,
.status-pill,
.status-pill.muted,
.status-pill.neutral,
.pill-neutral,
.ticket-activity-badge.muted,
.status-badge.status-muted,
.status-badge.status-warten_auf_kunde,
.asset-status-badge.muted,
.asset-status-badge.neutral,
.maintenance-status-neutral {
  --tone: var(--color-neutral);
  --tone-soft: var(--color-neutral-soft);
}

/* Success */
.status-pill.success,
.status-pill.ok,
.status-pill.green,
.pill-ok,
.ticket-activity-badge.ok,
.ticket-activity-badge.success,
.maintenance-status-success,
.asset-status-badge.ok,
.asset-status-badge.success,
.asset-status-badge.green,
.status-badge.status-geschlossen,
.status-badge.status-ok,
.customer-status-badge {
  --tone: var(--color-success);
  --tone-soft: var(--color-success-soft);
}

/* Info */
.status-pill.info,
.status-pill.notice,
.status-pill.blue,
.maintenance-status-info,
.asset-status-badge.info,
.asset-status-badge.notice,
.asset-status-badge.blue,
.status-badge.status-offen {
  --tone: var(--color-info);
  --tone-soft: var(--color-info-soft);
}

/* Warning */
.status-pill.warning,
.status-pill.orange,
.pill-warning,
.ticket-activity-badge.warning,
.maintenance-status-warning,
.asset-status-badge.warning,
.asset-status-badge.orange {
  --tone: var(--color-warning);
  --tone-soft: var(--color-warning-soft);
}

/* Danger */
.status-pill.danger,
.status-pill.error,
.status-pill.red,
.pill-error,
.ticket-activity-badge.danger,
.maintenance-status-danger,
.asset-status-badge.danger,
.asset-status-badge.error,
.asset-status-badge.red,
.status-badge.status-failed {
  --tone: var(--color-danger);
  --tone-soft: var(--color-danger-soft);
}

/* Project status summary tiles reuse the ticket status tones. */
.project-status-summary-item.status-offen,
.project-status-summary-item.status-in_bearbeitung,
.project-status-summary-item.status-geschlossen,
.project-status-summary-item.status-warten_auf_kunde {
  background: var(--tone-soft);
  color: var(--tone);
}
.project-status-summary-item.status-offen { --tone: var(--color-info); --tone-soft: var(--color-info-soft); }
.project-status-summary-item.status-in_bearbeitung { --tone: var(--color-accent-strong); --tone-soft: var(--color-accent-soft); }
.project-status-summary-item.status-warten_auf_kunde { --tone: var(--color-neutral); --tone-soft: var(--color-neutral-soft); }
.project-status-summary-item.status-geschlossen { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }

/* ---------------------------------------------------------------------------
 * Tabs
 * Pill tabs for section switches; underline tabs inside customer and project
 * records. Active tabs carry .active (or .is-active) and aria-selected/current.
 * ------------------------------------------------------------------------- */
.sales-subnav-button,
.product-subnav-button,
.settings-subnav-button,
.project-section-button,
.customer-section-button {
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
}

.sales-subnav-button:hover,
.product-subnav-button:hover,
.settings-subnav-button:hover,
.project-section-button:hover,
.customer-section-button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.sales-subnav-button.active,
.product-subnav-button.active,
.product-subnav-button.is-active,
.settings-subnav-button.active,
.project-section-button.active,
.customer-section-button.active {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* Underline variant (the project tabs draw their line with ::after) */
#customer-detail .customer-section-button,
#project-detail .project-section-button {
  border: 0;
  border-radius: 0;
  background: transparent;
}

#customer-detail .customer-section-button {
  border-bottom: 2px solid transparent;
}

#customer-detail .customer-section-button:hover,
#project-detail .project-section-button:hover {
  background: transparent;
  color: var(--color-text);
}

#customer-detail .customer-section-button.active,
#project-detail .project-section-button.active {
  background: transparent;
  color: var(--color-accent-strong);
}

#customer-detail .customer-section-button.active {
  border-bottom-color: var(--color-accent);
}

/* ---------------------------------------------------------------------------
 * Avatar
 * Initials on a person colour; every tone keeps white text above 5:1.
 * ------------------------------------------------------------------------- */
.user-avatar {
  background: var(--color-neutral);
  color: #fff;
}
.user-avatar.tone-0 { background: #2f64b5; }
.user-avatar.tone-1 { background: #4f7600; }
.user-avatar.tone-2 { background: #a34d12; }
.user-avatar.tone-3 { background: #7b3f98; }
.user-avatar.tone-4 { background: #12695f; }
.user-avatar.tone-5 { background: #b42318; }

.resource-person__avatar {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* ---------------------------------------------------------------------------
 * Buttons
 * primary   – the one main action of a view: accent green, dark text (pmi.ag);
 *             hover turns charcoal like the buttons on pmi.ag
 * secondary – every other action; .danger / .success tint the text
 * danger    – destructive confirmation
 * icon      – square icon-only action (.icon-button, .project-action-button)
 * Size, padding and radius stay with the existing layout rules for now.
 * ------------------------------------------------------------------------- */
.primary-button,
.secondary-button,
.danger-button,
.icon-button,
.project-action-button {
  border: 1px solid transparent;
  box-shadow: none;
  text-shadow: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.primary-button {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.primary-button:hover:not(:disabled) {
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

.secondary-button,
.icon-button,
.project-action-button {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.secondary-button:hover:not(:disabled),
.icon-button:hover:not(:disabled),
.project-action-button:hover:not(:disabled) {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

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

.danger-button:hover:not(:disabled) {
  background: var(--color-text-strong);
}

.secondary-button.danger,
.icon-button.danger-icon,
.project-action-button.danger {
  color: var(--color-danger);
}

.secondary-button.danger:hover:not(:disabled),
.icon-button.danger-icon:hover:not(:disabled),
.project-action-button.danger:hover:not(:disabled) {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

.icon-button.success-icon,
.project-action-button.success {
  color: var(--color-success);
}

.icon-button.success-icon:hover:not(:disabled),
.project-action-button.success:hover:not(:disabled) {
  border-color: var(--color-success);
  background: var(--color-success-soft);
  color: var(--color-success);
}

.primary-button:disabled,
.secondary-button:disabled,
.danger-button:disabled,
.icon-button:disabled,
.project-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Project header actions follow the same button variants. */
.project-header-action {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
}
.project-header-action:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}
.project-header-action-primary {
  border-color: transparent;
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.project-header-action-primary:hover {
  border-color: transparent;
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
}

/* Text inside any button takes the button colour. */
:is(.primary-button, .secondary-button, .danger-button, .icon-button, .project-action-button, .project-header-action) :is(span, small, strong) {
  color: inherit;
}

/* ---------------------------------------------------------------------------
 * Segmented control (design switch: system / light / dark)
 * ------------------------------------------------------------------------- */
.preview-theme-segment {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 34px;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.preview-theme-segment > button {
  display: grid;
  place-items: center;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
}

.preview-theme-segment > button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.preview-theme-segment > button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.preview-theme-segment > button.active,
.preview-theme-segment > button[aria-pressed="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* ---------------------------------------------------------------------------
 * Layout guards
 * Sections and panels may shrink below their content width; wide content
 * (tables, matrices) scrolls inside its own box instead of widening the page,
 * where it would be cut off (html hides horizontal overflow).
 * ------------------------------------------------------------------------- */
.view :is(section, article, .panel) {
  min-width: 0;
}

.table-wrap,
.table-scroll,
.maintenance-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Grid sections whose children held the page width open on phones. */
.checks-section > *,
.maintenance-section > * {
  min-width: 0;
}

/* Project and work package forms: one column on narrow screens like the ticket form. */
@media (max-width: 980px) {
  .project-form-page-form .ticket-form-section,
  .work-package-form-page-form .ticket-form-section {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------------------------------------------------------------------------
 * Confirmation dialog (ui.js confirmDialog): "Abbrechen | Bestätigen", the
 * confirming action on the right, red when it destroys something.
 * ------------------------------------------------------------------------- */
.confirm-dialog {
  width: min(440px, calc(100vw - 32px));
}

.confirm-dialog-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
}

.confirm-dialog-form h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.confirm-dialog-text {
  margin: 0;
  color: var(--color-text-muted);
}

.confirm-dialog-field {
  display: grid;
  gap: var(--space-1);
  font-weight: var(--weight-medium);
}

.confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Inline error in place of a list or loading text (app.js loadingGuard). */
.state-error {
  border-color: var(--color-danger) !important;
  background: var(--color-danger-soft) !important;
  color: var(--color-danger) !important;
}

/* Ticket detail sidebar: room for the full value ("Nicht gesetzt", "In Bearbeitung")
   and for the longest label ("Verantwortlich"). Status and priority keep their
   colour dot; the fake "AP" avatar and the category square are gone (the label
   already carries the icon, and "AP" was shown for every person). */
@media (min-width: 721px) {
  .ticket-side-list .ticket-field {
    grid-template-columns: 138px minmax(0, 1fr);
    gap: var(--space-2);
  }

  .ticket-side-list .ticket-field dt {
    letter-spacing: 0.03em;
  }
}

.ticket-field dd:has(.ticket-control-category)::before,
.ticket-field dd:has(.ticket-control-assigned)::before {
  content: none;
  display: none;
}

.ticket-inline-control {
  padding: 0 24px 0 28px;
  text-overflow: ellipsis;
}

.ticket-inline-control.ticket-control-category,
.ticket-inline-control.ticket-control-assigned {
  padding-left: var(--space-3);
}

/* Field that failed validation (set from app.js on the native invalid event). */
:is(input, select, textarea)[aria-invalid="true"],
:root body.theme-dark :is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 3px var(--color-danger-soft) !important;
}

/* ---------------------------------------------------------------------------
 * Customer 360°: operations tiles (maintenance, backup, licences)
 * ------------------------------------------------------------------------- */
.customer-operations {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.customer-operations-title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.customer-operations-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-3);
}

.customer-operations-empty {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Customer info tab: "Betrieb" sits right below the key figures, full width. */
#customer-detail #customerOperations {
  grid-row: 2;
  grid-column: 1 / -1;
  margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Tables on phones: each row becomes a card with "Label: value" lines.
 * Labels come from the column headings (ui.js watchTableLabels). The backup
 * matrix and the editable tables in dialogs keep scrolling sideways.
 * The doubled id outranks the old table rules (with !important) until stage 5
 * removes them.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    border: 0;
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) thead {
    display: block !important;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #mainContent#mainContent .table-wrap:has(> :is(.data-table, .maintenance-table, .assets-table)) {
    max-height: none !important;
    overflow: visible !important;
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td > * {
    grid-column: 2;
    justify-self: start;
    max-width: 100% !important;
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td:is([data-label=""], :not([data-label])) > * {
    grid-column: 1;
  }

  /* Titles wrap instead of ending in "…" on a card. */
  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td :is(a, strong, span:not(.user-avatar)) {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) tbody {
    display: grid !important;
    gap: var(--space-2);
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) tr {
    display: grid !important;
    height: auto !important;
    min-height: 0 !important;
    gap: var(--space-1);
    padding: var(--space-3) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-surface) !important;
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td {
    display: grid !important;
    grid-template-columns: minmax(88px, 36%) minmax(0, 1fr) !important;
    align-items: center;
    gap: var(--space-2);
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 2px 0 !important;
    border: 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td::before {
    display: block !important;
    content: attr(data-label) !important;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td:is([data-label=""], :not([data-label])) {
    grid-template-columns: minmax(0, 1fr);
  }

  #mainContent#mainContent :is(.data-table, .maintenance-table, .assets-table):not(.quote-position-table, .private-cloud-import-table) td:is([data-label=""], :not([data-label]))::before {
    content: none;
  }
}

/* Dashboard on phones: the four key figures in two columns, before the lists. */
/* ---------------------------------------------------------------------------
 * Dialog footers: "Abbrechen" (and other secondary actions) on the left, the
 * main or destructive action on the right, whatever order the markup has.
 * ------------------------------------------------------------------------- */
dialog :is(.button-row, .dialog-actions, .modal-actions, .form-actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

dialog :is(.button-row, .dialog-actions, .modal-actions, .form-actions) > .secondary-button {
  order: 0;
}

dialog :is(.button-row, .dialog-actions, .modal-actions, .form-actions) > :is(.primary-button, .danger-button) {
  order: 1;
}

/* ---------------------------------------------------------------------------
 * Button sizes: one height, padding, radius and type for every text button.
 * .compact-action is the small variant inside lists, cards and tables.
 * ------------------------------------------------------------------------- */
.primary-button,
.secondary-button,
.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.primary-button.compact-action,
.secondary-button.compact-action,
.danger-button.compact-action {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

/* Rows of buttons next to labelled fields: wrap instead of stretching the
   buttons to the field height, and line them up with the fields' bottom edge. */
.button-row {
  flex-wrap: wrap;
  align-items: flex-end;
}

/* ---------------------------------------------------------------------------
 * Hover feedback: every clickable element reacts the same way per kind.
 * ------------------------------------------------------------------------- */

/* Links in lists stay plain; the underline only appears on hover or focus. */
.table-link,
.asset-customer-link {
  text-decoration: none;
}

:root body :is(.table-link, .asset-customer-link):focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Menu toggles, select buttons and view switches behave like icon buttons. */
:is(.table-column-menu > summary, .preview-action-menu > summary, .search-select-button, .project-view-toggle button, #projectListViewButton, #projectBoardViewButton):hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

/* Bars in the timeline open their work package. */
:is(.project-gantt-bar, .resource-project-bar, .resource-forecast-bar):hover {
  filter: brightness(0.93);
}

/* Logo link back to the start page. */
.brand:hover {
  opacity: 0.8;
}

/* The other tab groups get the same hover as the main tabs. */
:root body :is(.resource-tabs, .sales-opportunity-tabs, .ticket-page-tabs, .ticket-page-composer-tabs, .ticket-composer-tabs, .profile-tabs, .customer-ninja-tabs) > button:not(.active, [aria-selected="true"]):hover {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

/* Dark mode: older dark rules pin these controls with !important; keep their hover. */
:root body.theme-dark :is(.search-select-button, .filter-chip):hover {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-hover) !important;
  color: var(--color-text-strong) !important;
}

.filter-chip:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

/* ---------------------------------------------------------------------------
 * Lagerverwaltung
 * ------------------------------------------------------------------------- */
.inventory-shell {
  display: grid;
  gap: var(--space-4);
}

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

.inventory-filters label {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}

.inventory-filters .inventory-filter-search {
  flex: 1 1 260px;
}

.inventory-filters .inventory-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.inventory-filters .inventory-filter-toggle input {
  width: auto;
  min-height: 0;
}

.inventory-table .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.inventory-name {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  color: var(--color-text-strong);
}

.inventory-sku {
  display: block;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.inventory-stock {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.inventory-stock strong {
  min-width: 3ch;
  text-align: right;
  font-size: var(--text-md);
  color: var(--color-text-strong);
}

.inventory-bar {
  width: 64px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  overflow: hidden;
}

.inventory-bar i {
  display: block;
  height: 100%;
  background: var(--color-success);
}

.inventory-bar i.warning { background: var(--color-warning); }
.inventory-bar i.danger { background: var(--color-danger); }

.inventory-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.inventory-actions .icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
  font-size: var(--text-lg);
  line-height: 1;
}

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

.inventory-move-preview {
  margin: 0;
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.inventory-move-preview.warning {
  color: var(--color-warning);
}

/* Segmented control for the kind of booking. */
.segmented-control {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  width: fit-content;
  max-width: 100%;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
}

.segmented-control button {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font: var(--weight-bold) var(--text-sm) var(--font-sans);
  cursor: pointer;
}

.segmented-control button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.segmented-control button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text-strong);
  box-shadow: var(--shadow-sm);
}

/* Customer picker: search field with a dropdown of Dojo customers. */
.customer-picker {
  position: relative;
  display: grid;
  gap: var(--space-1);
}

.customer-picker-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);
  display: grid;
  gap: 2px;
  max-height: 280px;
  margin-top: var(--space-1);
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.customer-picker-option {
  display: grid;
  gap: 1px;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
}

.customer-picker-option small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.customer-picker-option:hover,
.customer-picker-option.active {
  background: var(--color-surface-hover);
}

.customer-picker-option[aria-selected="true"] {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

/* Customer already given by the record the dialog was opened from. */
.customer-picker.is-locked input[type="search"] {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  cursor: default;
}

.customer-picker-empty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* Detail dialog: facts, open loans and history. */
.inventory-detail-dialog {
  width: min(620px, calc(100vw - 32px));
}

.inventory-facts {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.inventory-facts dt {
  color: var(--color-text-muted);
}

.inventory-facts dd {
  margin: 0;
  color: var(--color-text-strong);
  overflow-wrap: anywhere;
}

.inventory-detail-section {
  display: grid;
  gap: var(--space-2);
}

.inventory-detail-section h3 {
  margin: 0;
  font-size: var(--text-md);
}

.inventory-loans,
.inventory-history {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inventory-loans li,
.inventory-history li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.inventory-loans li > div,
.inventory-history li > div {
  flex: 1 1 auto;
  min-width: 0;
}

.inventory-loans small,
.inventory-history small {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.inventory-delta {
  flex: 0 0 48px;
  text-align: right;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.inventory-delta.in { color: var(--color-success); }
.inventory-delta.out { color: var(--color-danger); }
.inventory-delta.neutral { color: var(--color-info); }

@media (max-width: 640px) {
  .inventory-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* No empty gap for a status line without message. */
.inventory-shell > .status:empty {
  display: none;
}

/* Long product names wrap instead of being cut off. */
#mainContent .inventory-table td:first-child,
#mainContent .inventory-table .inventory-name,
#mainContent .inventory-table .inventory-name strong {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  max-width: 28ch;
}

@media (max-width: 640px) {
  #mainContent#mainContent .inventory-table .numeric {
    text-align: left !important;
  }

  .inventory-stock strong {
    min-width: 0;
    text-align: left;
  }

  #mainContent .inventory-table .inventory-name {
    max-width: none;
  }
}

/* The whole ticket list is visible: no inner scroll area and no minimum width
   that pushes columns out of view; long titles and addresses wrap instead. */
:root body #operations .ticket-table-wrap {
  max-height: none !important;
  overflow-y: visible !important;
}

:root body #operations .ticket-table {
  min-width: 0 !important;
  width: 100% !important;
}

:root body #operations .ticket-table :is(td[data-column="title"], td[data-column="title"] *, td[data-column="customer"], td[data-column="customer"] *, td[data-column="assigned"], td[data-column="assigned"] *, td[data-column="requester"]) {
  white-space: normal !important;
  overflow-wrap: break-word;
  text-overflow: clip !important;
  max-width: none !important;
}

:root body #operations .ticket-table td[data-column="requester"] {
  overflow-wrap: anywhere;
}

:root body #operations .ticket-table {
  table-layout: auto !important;
}

:root body #operations .ticket-table :is(th, td) {
  width: auto !important;
  min-width: 0 !important;
}

:root body #operations .ticket-table :is(th, td)[data-column="title"] {
  width: 24% !important;
}

:root body #operations .ticket-table :is(th, td)[data-column="customer"] {
  width: 15% !important;
}

:root body #operations .ticket-table td[data-column="requester"] {
  font-size: var(--text-xs);
}

/* Short columns take just their content width; title and customer get the rest. */
:root body #operations .ticket-table :is(th, td):is([data-column="number"], [data-column="priority"], [data-column="status"], [data-column="source"], [data-column="updated"], [data-column="actions"]) {
  width: 1% !important;
  white-space: nowrap !important;
}

:root body #operations .ticket-table thead th {
  white-space: nowrap !important;
}

:root body #operations .ticket-table col {
  width: auto !important;
  min-width: 0 !important;
}

:root body #operations .ticket-table :is(th, td) {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

:root body #operations .ticket-table thead th {
  letter-spacing: 0.02em !important;
}

/* ---------------------------------------------------------------------------
 * Spacing fixes found by the spacing check (consistency.spec.js)
 * ------------------------------------------------------------------------- */
.backup-legend {
  padding: var(--space-3) var(--space-4) var(--space-4);
}

/* The NinjaOne message is part of its card, not pinned below it. */
:root body .ninja-connection__status {
  position: static !important;
  grid-column: 1 / -1;
  margin: 0;
}

:root body .ninja-connection__status:empty {
  display: none;
}

.project-portfolio-titlebar + .project-filter-bar {
  margin-top: var(--space-3);
}

/* Small tags: room around the text like the status badges. */
:root body :is(.project-tag, .ticket-note-type, .project-status-summary-item) {
  padding-left: var(--space-2) !important;
  padding-right: var(--space-2) !important;
}

/* Work package status tiles: the label wraps instead of being cut off. */
:root body #project-detail .project-status-summary-item,
:root body #project-detail .project-status-summary-item * {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Prices are for sales, GL and admin only; the API already sends no amounts to others. */
:root body:not(.can-see-prices) .price-only {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Ticket timeline events
 * Status changes, assignments and reminders from the ticket history. Shown as
 * compact rows between notes and mails, without the card frame.
 * ------------------------------------------------------------------------- */
.ticket-page-timeline .ticket-page-timeline-event .ticket-page-timeline-content {
  border-color: transparent;
  background: transparent;
  padding: var(--space-2) 0 0;
}

.ticket-page-timeline .ticket-page-timeline-event .ticket-page-timeline-content header {
  margin-bottom: var(--space-1);
}

.ticket-page-timeline .ticket-page-timeline-event .ticket-page-timeline-content p {
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.ticket-page-timeline .ticket-page-timeline-event .ticket-timeline-icon-event {
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
}

.ticket-page-timeline .ticket-page-timeline-event .ticket-note-type {
  background: var(--color-surface-muted);
  color: var(--color-text);
}

.ticket-page-timeline .ticket-page-timeline-event-closed .ticket-timeline-icon-event,
.ticket-page-timeline .ticket-page-timeline-event-closed .ticket-note-type {
  background: var(--color-success-soft);
  color: var(--color-success);
}

.ticket-page-timeline .ticket-page-timeline-event-reminder .ticket-note-type {
  background: var(--color-info-soft);
  color: var(--color-info);
}

/* -------------------------------------------------------------------------
 * Wunsch oder Bug melden, Meine Meldungen
 * ------------------------------------------------------------------------- */
.feedback-kind {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}

.feedback-kind-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  cursor: pointer;
}

.feedback-kind-option:hover {
  background: var(--color-surface-hover);
}

.feedback-kind-option:has(input:checked) {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.feedback-kind-option input {
  width: auto;
  margin-top: 3px;
}

.feedback-kind-option span {
  display: grid;
  gap: 2px;
}

.feedback-kind-option small {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

@media (max-width: 560px) {
  .feedback-kind {
    grid-template-columns: 1fr;
  }
}

/* Käfer oben rechts: öffnet das Board der Features und Bugs */
.preview-feedback-menu > summary {
  position: relative;
}

.feedback-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--color-surface);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.feedback-dot[hidden] {
  display: none;
}

.feedback-board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.feedback-board-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.feedback-board-check input {
  width: auto;
  margin: 0;
}

.feedback-board {
  display: grid;
  grid-template-columns: repeat(var(--feedback-columns, 4), minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.feedback-column {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}

.feedback-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.feedback-column-cards {
  display: grid;
  gap: var(--space-2);
}

.feedback-column-empty {
  margin: 0;
  padding: var(--space-3) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.feedback-card {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.feedback-card.is-own {
  border-left: 3px solid var(--color-accent);
}

.feedback-card.is-unseen {
  box-shadow: 0 0 0 2px var(--color-accent-soft);
}

.feedback-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.feedback-card-title {
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.feedback-card-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-text);
  font-size: var(--text-sm);
  white-space: pre-line;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}

.feedback-card-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

@media (max-width: 900px) {
  .feedback-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .feedback-board {
    grid-template-columns: 1fr;
  }
}

.feedback-column-head .count-pill {
  min-width: 24px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  text-align: center;
}

/* -------------------------------------------------------------------------
 * Interne Anträge: Klemmbrett oben rechts, Board/Liste, Antrag und Entscheid
 * ------------------------------------------------------------------------- */
.preview-requests-menu > summary {
  position: relative;
}

.internal-request-board {
  grid-template-columns: repeat(var(--feedback-columns, 6), minmax(200px, 1fr));
  overflow-x: auto;
  padding-bottom: var(--space-1);
}

.internal-request-filter select {
  min-width: 180px;
}

.internal-request-card {
  cursor: pointer;
}

.internal-request-card:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.internal-request-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.internal-request-card[draggable="true"] {
  cursor: grab;
}

.internal-request-card.is-dragging {
  opacity: 0.5;
}

.internal-request-board .feedback-column.is-drop-target {
  border-style: dashed;
  border-color: var(--color-accent);
}

.internal-request-board .feedback-column.is-drop-over {
  background: var(--color-accent-soft);
}

.internal-request-costline {
  color: var(--color-text);
  font-weight: 600;
}

.internal-request-table tbody tr {
  cursor: pointer;
}

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

.internal-request-detail {
  display: grid;
  gap: var(--space-4);
}

.internal-request-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.internal-request-facts div {
  min-width: 0;
}

.internal-request-facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.internal-request-facts dd {
  margin: 2px 0 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.internal-request-money {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}

.internal-request-text h3,
.internal-request-decision h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
}

.internal-request-text p {
  margin: 0;
  color: var(--color-text);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.internal-request-error {
  color: var(--color-danger);
}

.internal-request-history {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.internal-request-history li {
  display: grid;
  gap: 2px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
}

.internal-request-history span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.internal-request-history p {
  margin: 0;
  font-size: var(--text-sm);
  white-space: pre-line;
}

.internal-request-decision {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  background: var(--color-accent-soft);
}

.internal-request-decision[hidden],
.internal-request-actions[hidden],
.internal-request-decision [hidden] {
  display: none;
}

.internal-request-order-check {
  grid-column: 1 / -1;
}

.internal-request-forward {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.internal-request-forward label {
  flex: 1 1 220px;
}

.internal-request-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.internal-request-move {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.internal-request-move select {
  width: auto;
}

.gl-requests-tile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.gl-requests-tile[hidden] {
  display: none;
}

.gl-requests-tile:hover {
  background: var(--color-surface-hover);
}

.gl-requests-tile svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gl-requests-tile strong {
  min-width: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  text-align: center;
}

.gl-requests-tile.has-pending {
  border-color: var(--color-accent);
}

.gl-requests-tile.has-pending strong {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

@media (max-width: 900px) {
  .internal-request-board {
    grid-template-columns: repeat(var(--feedback-columns, 6), minmax(220px, 1fr));
  }
}

@media (max-width: 560px) {
  .internal-request-board {
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .internal-request-kind,
  .internal-request-facts {
    grid-template-columns: 1fr;
  }

  .internal-request-filter,
  .internal-request-filter select {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
 * Shape: tables, tabs and fields
 * Flatter corners in the spirit of pmi.ag: table frames 4px inside 8px cards,
 * tab bars 6px with 4px tabs, fields 6px. Table heads in the pmi.ag beige.
 * Overrides the scattered 9-12px radii of the old rules.
 * ------------------------------------------------------------------------- */
:root body :is(.table-wrap, .ticket-table-wrap, .table-scroll, .maintenance-table-wrap, .gl-employee-table-wrap, .project-portfolio-table-wrap, .data-table-shell) {
  border-radius: var(--radius-xs) !important;
}

:root body #mainContent :is(.panel, .maintenance-list-panel, .assets-list-card) {
  border-radius: var(--radius-md) !important;
}

:root body :is(.workspace-subnav, .settings-subnav, .segmented-control, .sales-opportunity-tabs) {
  border-radius: var(--radius-sm) !important;
}

:root body :is(.workspace-subnav, .settings-subnav, .segmented-control, .sales-opportunity-tabs, .asset-status-tabs) > button {
  border-radius: var(--radius-xs) !important;
}

:root body :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea, .preview-topbar-search) {
  border-radius: var(--radius-sm) !important;
}

:root body #mainContent :is(.data-table, .maintenance-table, .assets-table, .backup-matrix) thead th {
  background: var(--color-beige) !important;
  border-bottom: 1px solid var(--color-beige-line) !important;
}

:root body #mainContent :is(.data-table, .assets-table):not(.ticket-table) tbody tr:hover > td {
  background: var(--color-beige-soft) !important;
}

/* ---------------------------------------------------------------------------
 * Maintenance per device: status in the run dialog, history in the detail.
 * ------------------------------------------------------------------------- */
.maintenance-detail-card-full {
  grid-column: 1 / -1;
}

.maintenance-run-devices-field {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.maintenance-run-devices-field legend {
  padding: 0;
  font-weight: var(--weight-medium);
}

.maintenance-run-device-list {
  display: grid;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}

.maintenance-run-device {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.maintenance-run-device:first-child {
  border-top: 0;
}

.maintenance-run-device-list > p {
  margin: 0;
  padding: var(--space-3);
}

.maintenance-device-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.maintenance-device-name strong,
.maintenance-device-name small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.maintenance-device-name small,
.maintenance-device-last small,
.maintenance-run-devices small {
  color: var(--color-text-muted);
}

.maintenance-run-devices {
  display: grid;
  gap: var(--space-1);
}

.maintenance-run-devices ul,
.maintenance-device-list,
.maintenance-device-history {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.maintenance-run-devices ul {
  gap: var(--space-1);
}

.maintenance-run-devices li span:not(.maintenance-status) {
  color: var(--color-text-muted);
}

.maintenance-device-list > li {
  border-top: 1px solid var(--color-border);
}

.maintenance-device-list > li.is-gone .maintenance-device-name {
  opacity: 0.7;
}

.maintenance-device-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  cursor: pointer;
}

.maintenance-device-list summary:hover .maintenance-device-name strong {
  color: var(--color-accent-strong);
}

.maintenance-device-last {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

.maintenance-device-history {
  gap: var(--space-2);
  padding: 0 0 var(--space-3) var(--space-3);
  border-left: 2px solid var(--color-border);
  margin-left: var(--space-1);
}

.maintenance-device-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.maintenance-device-history p {
  flex-basis: 100%;
  margin: 0;
  color: var(--color-text-muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .maintenance-run-device {
    grid-template-columns: minmax(0, 1fr) 140px;
  }

  .maintenance-run-device [data-device-notes] {
    grid-column: 1 / -1;
  }

  .maintenance-device-list summary {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-1);
  }
}

.customer-device-table td small {
  display: block;
  color: var(--color-text-muted);
}

.customer-device-table td .maintenance-status {
  margin-right: var(--space-1);
}

/* «?» oben rechts: Hilfe, Version und Release-Notes */
.preview-help-menu > summary {
  position: relative;
}

.preview-help-panel {
  min-width: 220px;
}

.preview-help-head {
  display: grid;
  gap: 2px;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-1);
}

.preview-help-head strong {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.preview-help-head span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* Auf dem Handy ist die Kopfzeile voll: «Hilfe und Version» steht dort im Profil-Menü. */
.preview-profile-help-item {
  display: none !important;
}

/* Lizenz-Bestellungen bleiben auch auf dem Handy oben rechts, nicht im Profil-Menü (#18). */
@media (max-width: 560px) {
  .preview-help-menu {
    display: none !important;
  }

  .preview-profile-help-item {
    display: flex !important;
  }
}

/* Profil-Menü: Symbol links, Text immer bündig daneben, Unterzeile ohne Abschneiden (#28). */
:root body .preview-profile-menu-panel .preview-profile-menu-item > svg {
  grid-column: 1 !important;
}

:root body .preview-profile-menu-panel .preview-profile-menu-item > span:not(.user-avatar):not(.preview-theme-segment) {
  grid-column: 2 !important;
  justify-self: stretch !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
}

:root body .preview-profile-menu-panel button.preview-profile-menu-item:not(.preview-design-menu-item),
:root body .preview-profile-menu-panel #previewTopbarProfileButton {
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

:root body .preview-profile-menu-panel .preview-profile-menu-item > span small {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* Schmale Handys (360 px): engere Abstände, damit die Symbole nicht unter den Zurück-Knopf rutschen. */
@media (max-width: 380px) {
  :root body .preview-topbar-actions {
    gap: 2px !important;
  }
}

/* Splash nach einem Update und Release-Notes-Dialog.
 * Die doppelte ID schlägt die alten .modal-Regeln in styles.css (mit !important). */
#releaseNotesDialog#releaseNotesDialog {
  box-sizing: border-box !important;
  width: min(520px, calc(100vw - 28px)) !important;
  max-height: min(640px, calc(100dvh - 48px)) !important;
  padding: 0 !important;
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

#releaseNotesDialog#releaseNotesDialog[open] {
  display: flex !important;
  flex-direction: column;
  inset: 0 !important;
  margin: auto !important;
}

#releaseNotesDialog#releaseNotesDialog > * {
  margin: 0 !important;
}

#releaseNotesDialog#releaseNotesDialog > .release-notes-band {
  flex: 0 0 auto;
  height: 6px;
  padding: 0 !important;
  background: var(--color-accent);
}

#releaseNotesDialog#releaseNotesDialog > .modal-header {
  flex: 0 0 auto;
  min-height: 0 !important;
  padding: var(--space-5) var(--space-6) var(--space-2) !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

.release-notes-dialog .modal-header h2 {
  margin: 0;
}

.release-notes-date {
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

#releaseNotesDialog#releaseNotesDialog > .release-notes-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 var(--space-6) var(--space-4) !important;
}

.release-notes-topic {
  margin-top: var(--space-4);
}

.release-notes-topic h3 {
  margin: 0 0 var(--space-1);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}

.release-notes-topic ul {
  margin: 0;
  padding-left: 1.2em;
  color: var(--color-text-muted);
  line-height: var(--line-normal);
}

.release-notes-topic li + li {
  margin-top: 2px;
}

.release-notes-older {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.release-notes-older > p {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.release-notes-version + .release-notes-version {
  margin-top: var(--space-2);
}

.release-notes-version > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  cursor: pointer;
}

.release-notes-version > summary span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.release-notes-version > .release-notes-topic:last-child {
  margin-bottom: var(--space-3);
}

.release-notes-about-text {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  line-height: var(--line-normal);
}

.release-notes-facts {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
}

.release-notes-facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.release-notes-facts dt {
  color: var(--color-text-muted);
}

.release-notes-facts dd {
  margin: 0;
  color: var(--color-text);
  font-weight: var(--weight-medium);
}

#releaseNotesDialog#releaseNotesDialog > .release-notes-footer {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-5) !important;
  border-top: 1px solid var(--color-border);
}

.release-notes-footer .button-row {
  margin: 0 0 0 auto;
}

.release-notes-dismiss {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
}

.release-notes-dismiss[hidden] {
  display: none;
}

.release-notes-dismiss input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--color-accent);
}

@media (max-width: 560px) {
  #releaseNotesDialog#releaseNotesDialog {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  #releaseNotesDialog#releaseNotesDialog > .modal-header,
  #releaseNotesDialog#releaseNotesDialog > .release-notes-body {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }

  #releaseNotesDialog#releaseNotesDialog > .release-notes-footer {
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) !important;
  }

  .release-notes-footer .button-row {
    width: 100%;
  }

  .release-notes-footer .button-row > button {
    flex: 1 1 0;
  }
}

/* Gantt-Achse: Wochen über einen Monatswechsel («28. Sep - 04. Okt») brauchen Luft zum Rand. */
#project-detail .project-gantt-axis-day {
  padding: var(--space-1) var(--space-2);
  line-height: 1.25;
}

/* Interne Anträge: form and detail on their own page instead of a modal. */
/* New, edit and detail share one centred width. */
#antrag-form.internal-request-page,
#antrag-detail.internal-request-detail-page {
  width: min(1040px, 100%);
  max-width: 1040px;
  margin: 0 auto;
}

/* The form uses the ticket form layout (numbered sections, sticky button bar) under a header card with live figures. */
.internal-request-crumb {
  margin: 0 0 var(--space-3);
}

.internal-request-hero {
  display: grid;
  gap: var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-6);
}

.internal-request-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.internal-request-hero-title {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  min-width: 0;
}

.internal-request-hero-title h1 {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-2xl);
  line-height: var(--line-tight);
  overflow-wrap: anywhere;
}

.internal-request-question {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-card);
  background: var(--color-info-soft);
  color: var(--color-text);
}

.internal-request-question[hidden] {
  display: none;
}

.internal-request-question strong {
  color: var(--color-info);
  font-size: var(--text-sm);
}

.internal-request-question p {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.internal-request-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.internal-request-kpis div {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--color-surface-subtle);
}

.internal-request-kpis dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.internal-request-kpis dd {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.internal-request-form-panel .ticket-form-section-header > span:not(.user-avatar, button *) {
  border-radius: var(--radius-pill);
}

.internal-request-kind-field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}

.internal-request-kind-field .field-hint {
  margin: 0;
}

.internal-request-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
}

.ticket-form-page .internal-request-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.ticket-form-page .internal-request-pill:hover {
  background: var(--color-surface-hover);
}

.ticket-form-page .internal-request-pill:has(input:checked) {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}

.ticket-form-page .internal-request-pill:has(input:focus-visible) {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.ticket-form-page .internal-request-pill:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.6;
}

/* The radio stays in the form for keyboard and screen readers; the pill shows the choice. */
.ticket-form-page .internal-request-pill input {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  margin: 0;
  opacity: 0;
}

.internal-request-costs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.internal-request-costs > .internal-request-costs-row {
  grid-column: 2;
}

.ticket-form-page input[type="file"] {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.ticket-form-page .internal-request-form-bar {
  align-items: center;
}

.internal-request-form-bar-text {
  display: grid;
  gap: var(--space-1);
  margin-right: auto;
}

.internal-request-form-bar-text p {
  margin: 0;
}

.internal-request-form-bar-text .form-status:empty {
  display: none;
}

.internal-request-form-bar button[hidden] {
  display: none;
}

/* Detail page: the same header card and numbered sections as the form, read only. */
.internal-request-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.internal-request-hero-actions .internal-request-actions[hidden] {
  display: none;
}

.internal-request-read {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.internal-request-read-block {
  display: grid;
  gap: var(--space-1);
}

.internal-request-read-block h4 {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.internal-request-read-text {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-md);
  line-height: var(--line-normal);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.internal-request-read-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.internal-request-read .internal-request-facts {
  gap: var(--space-4);
}

.internal-request-read .internal-request-facts dt {
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}

.internal-request-read .internal-request-facts dd {
  margin-top: var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}

/* Hours on their own row, then licence and hardware side by side. */
.internal-request-facts-3 > :first-child {
  grid-column: 1 / -1;
}

.internal-request-facts-3 > [aria-hidden="true"] {
  display: none;
}

.internal-request-decision-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

.internal-request-decision-buttons button {
  width: 100%;
  min-height: 44px;
}

.internal-request-decision-buttons [data-request-decision="annehmen"] {
  grid-column: 1 / -1;
}

.internal-request-detail-page .internal-request-decision {
  padding: var(--space-5);
}

.internal-request-detail-page .internal-request-decision h3 {
  font-size: var(--text-lg);
}

/* Decision bar under the header card; each button opens its own dialog. */
.internal-request-decision-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-accent-strong);
  border-radius: var(--radius-card);
  background: var(--color-accent-soft);
}

.internal-request-decision-bar[hidden] {
  display: none;
}

.internal-request-decision-bar-text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.internal-request-decision-bar-text strong {
  color: var(--color-text-strong);
  font-size: var(--text-md);
}

.internal-request-decision-bar-text span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.internal-request-decision-bar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.internal-request-decision-bar-buttons button {
  min-height: 44px;
}

#internalRequestDecisionDialog.internal-request-decision-modal {
  width: min(560px, calc(100vw - 32px));
}

.internal-request-decision-form [hidden] {
  display: none;
}

.internal-request-decision-form > .field-hint {
  margin: 0;
}

.internal-request-decision-form .internal-request-order-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text);
}

.internal-request-decision-form .internal-request-order-check input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
}

.internal-request-decision-form .button-row {
  justify-content: flex-end;
}

.internal-request-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  align-items: start;
  gap: var(--space-4);
}

.internal-request-detail-side {
  position: sticky;
  top: var(--space-4);
  display: grid;
  gap: var(--space-4);
}

.internal-request-detail-side:not(:has(> :not([hidden]))) {
  display: none;
}

/* Without a decision box the content takes the full width. */
.internal-request-detail-layout:not(:has(.internal-request-detail-side > :not([hidden]))) {
  grid-template-columns: minmax(0, 1fr);
}

.internal-request-decision .button-row {
  margin: 0;
}

.internal-request-decision .form-grid-2 {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
  .internal-request-detail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .internal-request-detail-side {
    position: static;
  }
}

@media (max-width: 980px) {
  .internal-request-costs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .internal-request-costs > :first-child {
    grid-column: 1 / -1;
  }

  .internal-request-costs > .internal-request-costs-row {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .internal-request-hero {
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .internal-request-hero-top {
    flex-direction: column-reverse;
  }

  .internal-request-hero-title h1 {
    font-size: var(--text-xl);
  }

  .internal-request-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }

  .internal-request-costs {
    grid-template-columns: minmax(0, 1fr);
  }

  .internal-request-hero-actions {
    justify-content: flex-start;
  }

  .internal-request-decision-bar {
    padding: var(--space-4);
  }

  .internal-request-decision-bar-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
  }

  .internal-request-decision-bar-buttons button {
    width: 100%;
    min-width: 0;
    padding-inline: var(--space-2);
  }

  .internal-request-decision-bar-buttons [data-request-open-decision="annehmen"] {
    grid-column: 1 / -1;
  }

  /* On the phone the decision dialog is a sheet from the bottom. */
  /* Same override pattern as the release notes dialog: the legacy modal rule pins every open modal with !important. */
  #internalRequestDecisionDialog#internalRequestDecisionDialog {
    inset: auto 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 92dvh !important;
    margin: 0 !important;
    border-width: 1px 0 0 !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .internal-request-decision-form .button-row .primary-button,
  .internal-request-decision-form .button-row .danger-button {
    order: -1;
  }

  .internal-request-decision-form .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .internal-request-decision-form .button-row button {
    width: 100%;
  }

  /* On the phone the button bar stays at the bottom of the screen; a backdrop filter on the
     panel would make the panel, not the screen, its frame. */
  #antrag-form .internal-request-form-panel {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .ticket-form-page .internal-request-form-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }

  .internal-request-form-page {
    padding-bottom: 120px;
  }

  .internal-request-form-bar-text {
    grid-column: 1 / -1;
    margin: 0;
  }

  .internal-request-form-bar-text .field-hint {
    display: none;
  }

  .internal-request-form-bar-text:not(:has(.form-status:not(:empty))) {
    display: none;
  }

  .internal-request-form-bar button {
    width: 100%;
    min-width: 0;
  }

  .internal-request-form-bar .primary-button {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* Admin > Einstellungen > AbaNinja: ausgeschlossene Mitarbeiter als angepinnte Chips */
.excluded-employees {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.excluded-employees-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.excluded-employee-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: text;
}

/* The ring sits on the whole field, so the inner search input can drop its own. */
.excluded-employee-field:focus-within,
.excluded-employee-field.active {
  border-color: var(--brand);
  outline: 3px solid var(--brand-soft);
}

:root body.theme-dark .excluded-employee-field {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.055);
}

:root body.theme-dark .excluded-employee-field:focus-within,
:root body.theme-dark .excluded-employee-field.active {
  border-color: var(--brand);
}

.excluded-employee-chips {
  display: contents;
}

.excluded-employee-field .filter-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The search input sits inside the field and must not draw its own box (dark rules use !important). */
:root body .excluded-employee-field input[type="search"] {
  flex: 1 1 140px;
  width: auto;
  min-width: 120px;
  min-height: 28px;
  height: 28px;
  padding: 0 4px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: 13px;
}

.excluded-employee-picker .search-select-options button small {
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
 * SSL Zertifikat: one card in three steps (check, assign, note).
 * The check result sits right under «Prüfen»; its tone follows the remaining days.
 * ------------------------------------------------------------------------- */
[data-assets-section-panel="ssl"] .asset-workspace,
.assets-create-mode [data-assets-section-panel="ssl"] .asset-workspace {
  grid-template-columns: minmax(0, 1fr);
}

.assets-create-mode [data-assets-section-panel="ssl"] .asset-workspace {
  max-width: 1040px;
  margin: 0 auto;
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-page-header {
  max-width: 1040px;
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-row {
  gap: 14px;
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-icon svg {
  width: 20px;
  height: 20px;
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-row h1 {
  font-size: 28px;
  line-height: 1.15;
}

.assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-row p {
  margin-top: var(--space-1);
  font-size: 15px;
  font-weight: var(--weight-regular);
}

#sslAssetStatus:empty {
  display: none;
}

/* The shell is a panel; around the narrower SSL card it would show as a second frame (dark panel rules use !important). */
:root body .assets-create-mode .asset-shell:has([data-assets-section-panel="ssl"].active) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

.ssl-form-panel,
.assets-create-mode [data-assets-section-panel="ssl"] .ssl-form-panel {
  gap: 0;
  max-width: none;
  padding: 0;
  border-radius: var(--radius-card);
}

.ssl-form [hidden] {
  display: none !important;
}

.ssl-form-error {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-5) 28px 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-card);
  background: var(--color-danger-soft);
  color: var(--color-text);
}

.ssl-form-error[hidden] {
  display: none;
}

.ssl-form-error strong {
  color: var(--color-danger);
}

.ssl-form-error p {
  margin: 0;
  overflow-wrap: anywhere;
}

.ssl-form-step {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-6) 28px;
}

.ssl-form-step + .ssl-form-step {
  border-top: 1px solid var(--color-border);
}

.ssl-form-step-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
  align-content: start;
}

.ssl-form-step-head h3 {
  margin: 6px 0 var(--space-1);
  color: var(--color-text-strong);
  font-size: var(--text-md);
  line-height: var(--line-tight);
}

.ssl-form-step-head p {
  max-width: 150px;
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.ssl-form-step-badge {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

/* Check mark once the certificate was read successfully. */
.ssl-form-step-badge.is-done::after {
  content: "";
  width: 11px;
  height: 6px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}

.ssl-form-step-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
  container-type: inline-size;
}

.ssl-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) 20px;
}

.ssl-form label {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.ssl-form .field-hint {
  margin-top: 0;
  font-weight: var(--weight-regular);
}

[data-assets-section-panel="ssl"] .ssl-form :is(input:not([type="hidden"]), select, .search-select-button) {
  min-height: 44px;
}

[data-assets-section-panel="ssl"] .ssl-form textarea {
  min-height: 96px;
  resize: vertical;
}

.ssl-check-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 120px auto;
  gap: 6px var(--space-3);
  align-items: end;
}

.ssl-check-row:has(#sslAssetCustomPortField:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) 140px 120px auto;
}

/* Hint and errors sit under their own field. */
.ssl-check-row :is(.ssl-check-target, .ssl-url-error) {
  grid-column: 1 / 2;
}

.ssl-check-row .ssl-port-error {
  grid-column: 2 / -1;
}

/* Narrow column (sidebar open, tablet, phone): with «Anderer Port» the domain gets its own line. */
@container (max-width: 600px) {
  .ssl-check-row:has(#sslAssetCustomPortField:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  }

  .ssl-check-row:has(#sslAssetCustomPortField:not([hidden])) :is(.ssl-check-domain, .ssl-check-target, .ssl-url-error, .ssl-port-error) {
    grid-column: 1 / -1;
  }

  .ssl-check-row :is(.ssl-check-domain, .ssl-check-target, .ssl-url-error) {
    order: -1;
  }
}

/* Phone: domain on its own line, then port next to the button. */
@container (max-width: 420px) {
  .ssl-check-row,
  .ssl-check-row:has(#sslAssetCustomPortField:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2);
  }

  .ssl-check-row :is(.ssl-check-domain, .ssl-check-target, .ssl-url-error, .ssl-port-error),
  .ssl-check-row:has(#sslAssetCustomPortField:not([hidden])) .ssl-check-button {
    grid-column: 1 / -1;
  }

  .ssl-check-button {
    min-width: 0;
  }
}

.ssl-check-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 140px;
  min-height: 44px;
  white-space: nowrap;
}

.ssl-check-button[aria-busy="true"] svg {
  animation: ssl-check-spin 0.8s linear infinite;
}

.ssl-check-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Issue #14: expiry date typed by hand when the lookup cannot reach the server. */
.ssl-manual-row {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

/* The hint explains when to use it; it must not be cut off on the phone. */
.ssl-manual-row .field-checkbox small {
  overflow: visible;
  white-space: normal;
}

.ssl-manual-date {
  display: grid;
  gap: var(--space-1);
  max-width: 220px;
}

.ssl-manual-date[hidden] {
  display: none;
}

.ssl-manual-fallback {
  justify-self: start;
  margin-top: var(--space-2);
}

.ssl-check-button[hidden],
.ssl-manual-fallback[hidden] {
  display: none;
}

.ssl-check-target {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  overflow-wrap: anywhere;
}

.ssl-field-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.ssl-result-eyebrow {
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.ssl-result {
  --tone: var(--color-neutral);
  --tone-soft: var(--color-neutral-soft);
  border: 1px solid color-mix(in srgb, var(--tone) 30%, var(--color-border));
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: hidden;
}

.ssl-result[data-tone="success"] { --tone: var(--color-success); --tone-soft: var(--color-success-soft); }
.ssl-result[data-tone="notice"] { --tone: var(--color-info); --tone-soft: var(--color-info-soft); }
.ssl-result[data-tone="warning"] { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
.ssl-result[data-tone="danger"] { --tone: var(--color-danger); --tone-soft: var(--color-danger-soft); }

.ssl-result:is([data-state="ok"], [data-state="stale"]) .ssl-result-empty,
.ssl-result:not([data-state="ok"], [data-state="stale"]) .ssl-result-filled {
  display: none;
}

.ssl-result[data-state="empty"],
.ssl-result[data-state="checking"] {
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface-subtle);
}

.ssl-result-empty {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
}

.ssl-result-empty strong {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-strong);
}

.ssl-result-empty p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.ssl-result[data-state="error"] .ssl-result-empty {
  background: var(--tone-soft);
}

.ssl-result[data-state="error"] .ssl-result-empty strong {
  color: var(--tone);
}

.ssl-result[data-state="checking"] .ssl-result-empty strong::before {
  content: "";
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent-strong);
  border-radius: 50%;
  animation: ssl-check-spin 0.8s linear infinite;
}

@keyframes ssl-check-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ssl-result[data-state="checking"] .ssl-result-empty strong::before,
  .ssl-check-button[aria-busy="true"] svg {
    animation: none;
  }
}

.ssl-result-details summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.ssl-result-details code {
  display: block;
  margin-top: var(--space-2);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.ssl-result-stale {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-neutral-soft);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.ssl-result[data-state="stale"] :is(.ssl-result-head, .ssl-result-tiles) {
  opacity: 0.55;
}

.ssl-result-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--tone-soft);
}

.ssl-result-icon {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tone) 14%, var(--tone-soft));
  color: var(--tone);
}

.ssl-result-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ssl-result-headline {
  display: grid;
  min-width: 0;
}

.ssl-result-headline strong {
  color: var(--tone);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: var(--line-tight);
}

.ssl-result-headline small {
  color: var(--color-text);
  font-size: var(--text-sm);
}

.ssl-result-checked {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: right;
}

.ssl-result-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-border);
}

.ssl-result-tiles > div {
  display: grid;
  align-content: start;
  gap: 2px;
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.ssl-result-tiles dt {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.ssl-result-tiles dd {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ssl-result-tiles dd.is-unknown {
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

.ssl-result-tiles dd.ssl-result-issuer {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  overflow-wrap: anywhere;
}

.ssl-result-foot {
  margin: 0;
  padding: 10px var(--space-4);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.ssl-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) 28px;
  border-top: 1px solid var(--color-border);
}

/* In the editor the header buttons save and cancel. */
.assets-create-mode .ssl-form-footer {
  display: none;
}

@media (max-width: 1023px) {
  .ssl-form-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    padding: 20px;
  }

  .ssl-form-step-head {
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    row-gap: var(--space-1);
  }

  /* h3 and short text become grid items: badge next to the title, text below. */
  .ssl-form-step-head > div {
    display: contents;
  }

  .ssl-form-step-head h3 {
    margin: 0;
  }

  .ssl-form-step-head p {
    grid-column: 1 / -1;
    max-width: none;
  }

  .ssl-form-step-badge {
    width: 28px;
    height: 28px;
  }

  .ssl-form-error {
    margin: 20px 20px 0;
  }

  .ssl-form-footer {
    padding: var(--space-4) 20px;
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-page-header {
    flex-direction: column;
    align-items: stretch;
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-page-actions {
    justify-content: flex-end;
  }
}

@media (max-width: 640px) {
  .ssl-form-step {
    padding: var(--space-4);
  }

  .ssl-form-error {
    margin: var(--space-4) var(--space-4) 0;
  }

  .ssl-form-step + .ssl-form-step .ssl-form-step-head p {
    display: none;
  }

  [data-assets-section-panel="ssl"] .ssl-form :is(input:not([type="hidden"]), select, textarea) {
    font-size: 16px;
  }

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

  .ssl-form .search-select-options {
    max-height: 50dvh;
  }

  .ssl-form .search-select-options button,
  .ssl-form-footer :is(.primary-button, .secondary-button) {
    min-height: 44px;
  }

  .ssl-result-details summary {
    line-height: 44px;
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-icon {
    width: 32px;
    height: 32px;
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-row h1 {
    font-size: 22px !important;
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) .assets-title-row p {
    font-size: var(--text-sm);
  }

  .assets-create-mode:has([data-assets-section-panel="ssl"].active) #assetBreadcrumb {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ssl-result-head {
    flex-wrap: wrap;
    padding: var(--space-3);
  }

  .ssl-result-checked {
    flex-basis: 100%;
    margin-left: 0;
    text-align: left;
  }

  .ssl-result-headline strong {
    font-size: 20px;
  }

  .ssl-result-tiles {
    grid-template-columns: minmax(0, 1fr);
  }

  .ssl-result-tiles > div {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
    min-height: 40px;
    padding: 10px var(--space-3);
  }

  .ssl-result-tiles dd,
  .ssl-result-issuer {
    text-align: right;
  }

  .ssl-result-issuer {
    grid-column: 1 / -1;
  }

  /* Editor on the phone: cancel and save stay reachable in a bar at the bottom. */
  .assets-create-mode {
    padding-bottom: calc(96px + env(safe-area-inset-bottom));
  }

  .assets-create-mode .assets-page-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-sticky);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-bg) 94%, transparent);
    backdrop-filter: blur(12px);
  }

  .assets-create-mode .assets-page-actions :is(.primary-button, .secondary-button) {
    min-width: 0;
    min-height: 44px;
  }

  .assets-create-mode .assets-page-actions [hidden] {
    display: none;
  }

  /* Firewall has no save button: cancel takes the whole bar. */
  .assets-create-mode .assets-page-actions:not(:has(#saveAssetPageButton:not([hidden]))) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* With the keyboard open the bar would cover the fields (selects open no keyboard). */
  .assets-create-mode:has(:is(input:not([type="hidden"], [type="checkbox"], [type="radio"]), textarea):focus) .assets-page-actions {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Row menu "…"
 * Rare or destructive row actions (delete) sit behind one menu button.
 * ------------------------------------------------------------------------- */
.row-action-menu > summary {
  list-style: none;
  cursor: pointer;
}

.row-action-menu > summary::-webkit-details-marker {
  display: none;
}

.row-action-menu > summary svg circle {
  fill: currentColor;
}

.row-action-menu .action-menu-list {
  min-width: 170px;
}

.row-action-menu .action-menu-list button {
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  white-space: nowrap;
}

.row-action-menu .action-menu-list svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* ---------------------------------------------------------------------------
 * Ticket status and priority dots (ticket sidebar)
 * Same tones as the chips in the ticket list: red only for critical.
 * ------------------------------------------------------------------------- */
.ticket-field dd:has(.ticket-control-status-offen)::before { background: var(--color-info); }
.ticket-field dd:has(.ticket-control-status-in_bearbeitung)::before { background: var(--color-accent-strong); }
.ticket-field dd:has(.ticket-control-status-warten_auf_kunde)::before,
.ticket-field dd:has(.ticket-control-status-geschlossen)::before,
.ticket-field dd:has(.ticket-control-priority-tief)::before,
.ticket-field dd:has(.ticket-control-priority-mittel)::before { background: var(--color-neutral); }
.ticket-field dd:has(.ticket-control-priority-hoch)::before { background: var(--color-warning); }
.ticket-field dd:has(.ticket-control-priority-kritisch)::before { background: var(--color-danger); }

/* ---------------------------------------------------------------------------
 * Page title with count
 * The count sits next to the h1 instead of in a second card title.
 * ------------------------------------------------------------------------- */
.page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}

.page-title-row h1 {
  margin: 0;
}

.page-count {
  color: var(--color-text-muted);
  font-size: var(--text-md);
  font-weight: var(--weight-regular, 400);
}

/* ---------------------------------------------------------------------------
 * Customer record: "Zuletzt passiert"
 * Type, number and title, then who and when in one row.
 * ------------------------------------------------------------------------- */
#customer-detail .customer-recent-item {
  grid-template-columns: 96px minmax(0, 1fr) auto;
}

.customer-recent-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.customer-recent-number {
  flex: 0 0 auto;
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.customer-recent-title strong {
  min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Phone: nothing cut off in the customer record and the ticket customer card
 * Values wrap instead of ending in "…"; labels sit above their values.
 * ------------------------------------------------------------------------- */
.customer-header-link {
  color: inherit;
  text-decoration: none;
}

.customer-header-link:hover,
.customer-header-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 640px) {
  #mainContent#mainContent #customer-detail .customer-header-meta {
    flex-wrap: wrap !important;
  }

  #mainContent#mainContent #customer-detail .customer-header-meta > span {
    max-width: 100% !important;
  }

  #mainContent#mainContent #customer-detail :is(#customerHeaderPhone, #customerHeaderEmail, .info-tile p, .info-tile a, .customer-recent-title strong) {
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
    overflow-wrap: break-word;
  }

  #mainContent#mainContent #customer-detail .customer-header-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #mainContent#mainContent #customer-detail .info-tile {
    grid-template-columns: 32px minmax(0, 1fr) !important;
    grid-template-areas: none !important;
    row-gap: var(--space-1) !important;
  }

  #mainContent#mainContent #customer-detail .info-tile > :last-child {
    grid-column: 2 !important;
    justify-self: start !important;
    text-align: left !important;
  }

  #mainContent#mainContent .ticket-customer-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  #mainContent#mainContent .ticket-customer-card .ticket-customer-body,
  #mainContent#mainContent .ticket-customer-card .ticket-customer-body strong {
    min-width: 0;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  #mainContent#mainContent .ticket-customer-card .ticket-customer-link {
    grid-column: 1 / -1 !important;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
 * Page header actions
 * The main action sits top right in the page header; on pages with tabs only
 * the action of the active tab is shown.
 * ------------------------------------------------------------------------- */
.page-header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
}

.page-header-actions .section-action-inactive {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Phone: collapsible filters
 * Search stays, the other filter fields open with "Filter (n)".
 * ------------------------------------------------------------------------- */
.mobile-filter-toggle {
  display: none;
}

@media (max-width: 640px) {
  #mainContent#mainContent .has-mobile-filter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end;
    gap: var(--space-2) !important;
  }

  #mainContent#mainContent .has-mobile-filter > [data-filter-keep]:not(.project-view-switch) {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }

  #mainContent#mainContent .has-mobile-filter > * {
    flex: 1 1 100%;
  }

  #mainContent#mainContent .has-mobile-filter > .mobile-filter-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    min-height: 44px;
  }

  .mobile-filter-toggle.has-active-filters {
    border-color: var(--color-accent-strong);
    background: var(--color-accent-soft);
    color: var(--color-accent-strong);
  }

  #mainContent#mainContent .has-mobile-filter:not(.filters-open) > :not([data-filter-keep], .mobile-filter-toggle) {
    display: none !important;
  }
}

/* ===========================================================================
 * Building blocks (GUI review stage 2)
 * Page header, key figure tile, filter bar and phone list card are shared by
 * all areas. New areas use these classes instead of their own variants.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * Key figure tile: label, value, hint. No symbol; colour only when the value
 * is a problem (.is-danger, .is-warning). On phones the row becomes a
 * swipeable strip of compact chips.
 * ------------------------------------------------------------------------- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}

.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 10px);
  background: var(--color-surface);
  box-shadow: none;
}

.kpi-tile__label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.kpi-tile__value {
  color: var(--color-text-strong);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: 1.15;
  white-space: nowrap;
}

.kpi-tile__hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.kpi-tile.is-danger {
  border-color: color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  background: var(--color-danger-soft);
}

.kpi-tile.is-danger :is(.kpi-tile__value, .kpi-tile__hint) {
  color: var(--color-danger);
}

.kpi-tile.is-warning {
  border-color: color-mix(in srgb, var(--color-warning) 35%, var(--color-border));
  background: var(--color-warning-soft);
}

.kpi-tile.is-warning :is(.kpi-tile__value, .kpi-tile__hint) {
  color: var(--color-warning);
}

@media (max-width: 640px) {
  #mainContent#mainContent .kpi-row {
    display: flex !important;
    gap: var(--space-2);
    margin-inline: calc(var(--space-4) * -1);
    padding: 0 var(--space-4) var(--space-1);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  #mainContent#mainContent .kpi-row::-webkit-scrollbar {
    display: none;
  }

  #mainContent#mainContent .kpi-tile {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    scroll-snap-align: start;
  }

  #mainContent#mainContent .kpi-tile__value {
    order: 2;
    font-size: var(--text-md);
  }

  #mainContent#mainContent .kpi-tile__hint {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * Key figure chips that filter a list (tickets). One row, swipeable on phones.
 * ------------------------------------------------------------------------- */
.kpi-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
}

.kpi-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  cursor: pointer;
}

.kpi-chip strong {
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
}

button.kpi-chip:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.kpi-chip[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.kpi-chip[aria-pressed="true"] strong {
  color: var(--color-accent-strong);
}

.kpi-chip.is-static {
  border-style: dashed;
  cursor: default;
}

@media (max-width: 640px) {
  #mainContent#mainContent .kpi-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  #mainContent#mainContent .kpi-chip {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * Ticket list signals: status chip, priority as dot with text, standstill as
 * plain text. One signal per meaning.
 * ------------------------------------------------------------------------- */
.priority-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  white-space: nowrap;
}

.priority-dot::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border-strong);
}

.priority-dot.danger::before { background: var(--color-danger); }
.priority-dot.warning::before { background: var(--color-warning); }
.priority-dot.danger { color: var(--color-danger); font-weight: var(--weight-medium); }

.ticket-activity-text {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.ticket-activity-text.danger { color: var(--color-danger); font-weight: var(--weight-medium); }
.ticket-activity-text.warning { color: var(--color-warning); font-weight: var(--weight-medium); }

/* "Tickets pro Person" folds away so the list starts higher. */
.section-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.section-toggle::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
}

.section-toggle[aria-expanded="false"]::after {
  transform: rotate(-45deg);
}

#operations .operations-agent-panel.is-collapsed .agent-overview {
  display: none;
}

/* ---------------------------------------------------------------------------
 * Section intro: title and one sentence above a tab's content. Plain text,
 * no card around it (no card in card).
 * ------------------------------------------------------------------------- */
.section-intro {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
}

.section-intro h2 {
  margin: 0;
}

.section-intro p {
  margin: 0;
  color: var(--color-text-muted);
  font-weight: var(--weight-regular);
}

/* No card in a card: empty states on the start page and the customer in the
   ticket detail sit directly in their panel. */
#mainContent #dashboard .dashboard-empty-state {
  padding: var(--space-4) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#mainContent #ticket-detail .ticket-customer-card {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------------
 * Font weights: text and cells 400, labels 600, titles 700. Per row only the
 * main item (title link, number) is emphasised.
 * ------------------------------------------------------------------------- */
:root body :is(.data-table, .ticket-table, .maintenance-table, .assets-table, .customer-vm-table, .inventory-table) td {
  font-weight: var(--weight-regular);
}

:root body :is(.data-table, .ticket-table, .maintenance-table, .assets-table, .inventory-table) td :is(.table-link, .ticket-number-cell strong, .inventory-name) {
  font-weight: var(--weight-medium);
}

:root body .ticket-number-cell strong {
  font-weight: var(--weight-medium);
}

:root body :is(.page-subtitle, .panel-copy, .project-page-subtitle) {
  font-weight: var(--weight-regular);
}

:root body .data-table td::before {
  font-weight: var(--weight-medium);
}

/* One line of context above a table (source, last sync). */
.table-meta {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

/* ---------------------------------------------------------------------------
 * Nothing cut off in tables: sales, customers and the stock history size
 * their columns to the content (the wrapper scrolls if needed); heads and
 * main values are never shortened, numbers never wrap.
 * ------------------------------------------------------------------------- */
@media (min-width: 641px) {
  #mainContent#mainContent :is(#sales, #customers) .data-table,
  #mainContent#mainContent .inventory-journal-table {
    table-layout: auto !important;
  }

  #mainContent#mainContent :is(#sales, #customers) .data-table :is(th, td, td > *),
  #mainContent#mainContent .inventory-journal-table :is(th, td, td > *) {
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  #mainContent#mainContent :is(#sales, #customers) .data-table td > *,
  #mainContent#mainContent .inventory-journal-table td > * {
    white-space: normal !important;
  }
}

:root body :is(.data-table, .ticket-table) :is(td:first-child, .ticket-number-cell strong) {
  white-space: nowrap;
}

/* Long heads wrap onto two lines instead of ending in "…". */
#mainContent#mainContent :is(#sales, #customers) .data-table th,
#mainContent#mainContent .inventory-journal-table th {
  white-space: normal !important;
  vertical-align: bottom;
}

/* ---------------------------------------------------------------------------
 * Phone list card: about three lines per record, no field labels; tapping the
 * card opens the record (the title control is stretched over the card, other
 * controls stay on top). Used for tickets, projects, maintenance and stock.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Tickets and tasks: title and person, number and customer, status line */
  #mainContent#mainContent #operations .ticket-table tr {
    position: relative;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-2) !important;
  }

  #mainContent#mainContent #operations .ticket-table td {
    display: block !important;
    padding: 0 !important;
  }

  #mainContent#mainContent #operations .ticket-table td::before {
    content: none !important;
  }

  #mainContent#mainContent #operations .ticket-table td[data-column="title"] { order: 1; flex: 1 1 calc(100% - 44px); min-width: 0; }
  #mainContent#mainContent #operations .ticket-table td[data-column="assigned"] { order: 2; flex: 0 0 auto; }
  #mainContent#mainContent #operations .ticket-table td[data-column="number"] { order: 3; flex: 0 0 auto; }
  #mainContent#mainContent #operations .ticket-table td[data-column="customer"] { order: 4; flex: 1 1 calc(100% - 96px); min-width: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
  #mainContent#mainContent #operations .ticket-table td[data-column="status"] { order: 5; flex: 0 0 auto; }
  #mainContent#mainContent #operations .ticket-table td[data-column="priority"] { order: 6; flex: 0 0 auto; }
  #mainContent#mainContent #operations .ticket-table td[data-column="updated"] { order: 7; flex: 1 1 auto; text-align: right !important; }

  #mainContent#mainContent #operations .ticket-table td:is([data-column="source"], [data-column="requester"], [data-column="actions"]),
  #mainContent#mainContent #operations .ticket-table .ticket-updated-time,
  #mainContent#mainContent #operations .ticket-table .ticket-responsible-chip,
  #mainContent#mainContent #operations .ticket-table .project-assignee-chip > span:not(.user-avatar),
  #mainContent#mainContent #operations .ticket-table td[data-column="assigned"] .ticket-muted {
    display: none !important;
  }

  #mainContent#mainContent #operations .ticket-table td[data-column="number"] strong {
    padding: 0;
    background: transparent;
    color: var(--color-accent-strong);
    font-size: var(--text-xs);
  }

  #mainContent#mainContent #operations .ticket-table td[data-column="title"] .table-link {
    color: var(--color-text-strong);
    font-size: var(--text-md);
  }

  #mainContent#mainContent #operations .ticket-table td[data-column="title"] .table-link::after,
  #mainContent#mainContent #projectTableBody .project-card-link::after,
  :root body #mainContent#mainContent .inventory-table .inventory-name::after,
  :root body #mainContent#mainContent .maintenance-table [data-maintenance-open]::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  #mainContent#mainContent #operations .ticket-table td[data-column="customer"] a,
  #mainContent#mainContent #projectTableBody :is(a, button:not(.project-card-link)),
  :root body #mainContent#mainContent .inventory-table :is(input, button:not(.inventory-name), select),
  :root body #mainContent#mainContent .maintenance-table button:not([data-maintenance-open]) {
    position: relative;
    z-index: 1;
  }

  #mainContent#mainContent #operations .ticket-table .ticket-badge-stack {
    display: flex;
    gap: var(--space-1);
  }

  /* Projects: title and customer, status, progress */
  #mainContent#mainContent #projectTableBody .project-portfolio-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #mainContent#mainContent #projectTableBody .project-portfolio-title-cell,
  #mainContent#mainContent #projectTableBody .project-portfolio-title-cell > div {
    display: block !important;
    min-width: 0;
    width: 100% !important;
    max-width: none !important;
  }

  #mainContent#mainContent #projectTableBody :is(.project-card-link, .project-portfolio-customer-name, .project-portfolio-customer-name *) {
    max-width: none !important;
    overflow: visible !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  #mainContent#mainContent #projectTableBody .project-portfolio-row > :is(:nth-child(5), .project-budget, .project-stand-cell, .project-row-actions),
  #mainContent#mainContent #projectTableBody .project-row-icon,
  #mainContent#mainContent #projectTableBody .project-tag {
    display: none !important;
  }

  /* Maintenance: customer, type and next date, status */
  :root body #mainContent#mainContent .maintenance-table tr {
    position: relative;
  }

  :root body #mainContent#mainContent .maintenance-table td::before,
  :root body #mainContent#mainContent .inventory-table td::before {
    content: none !important;
  }

  :root body #mainContent#mainContent :is(.maintenance-table, .inventory-table) td {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root body #mainContent#mainContent :is(.maintenance-table, .inventory-table) td > * {
    grid-column: 1 !important;
  }

  :root body #mainContent#mainContent .maintenance-table td:is([data-label="Letzte Wartung"], [data-label="Durchgeführt von"]) {
    display: none !important;
  }

  /* Stock: product, place and quantity, booking */
  :root body #mainContent#mainContent .inventory-table tr {
    position: relative;
  }

  :root body #mainContent#mainContent .inventory-table td:is([data-label="Kategorie"], [data-label="Minimum"]) {
    display: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * Phone page header: the top bar already names the page, so list pages drop
 * their own title block; the main action becomes a round button at the
 * bottom right (its text stays the accessible name).
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #mainContent#mainContent :is(#operations, #customers, #customer-reminders, #sales, #checks, #inventory) > .page-header,
  #mainContent#mainContent #projects > .project-page-header,
  #mainContent#mainContent #assets:not(.assets-create-mode) > .assets-page-header {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #mainContent#mainContent :is(#operations, #customers, #customer-reminders, #sales, #checks, #inventory) > .page-header > div:first-child,
  #mainContent#mainContent #projects > .project-page-header > .project-page-heading,
  #mainContent#mainContent #assets:not(.assets-create-mode) > .assets-page-header > div:first-child,
  #mainContent#mainContent #customers > .page-header > .secondary-button {
    display: none !important;
  }

  #mainContent#mainContent :is(#operations, #customers, #customer-reminders, #sales, #checks, #inventory) > .page-header .primary-button:not([hidden]),
  #mainContent#mainContent #projects > .project-page-header .primary-button:not([hidden]),
  #mainContent#mainContent #assets:not(.assets-create-mode) > .assets-page-header #addAssetButton:not([hidden]) {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: inline-grid;
    place-items: center;
    width: 56px !important;
    min-width: 0 !important;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    box-shadow: var(--shadow-lg, 0 6px 16px rgba(28, 31, 34, 0.22));
    font-size: 0 !important;
    line-height: 0;
  }

  #mainContent#mainContent :is(#operations, #customers, #customer-reminders, #sales, #checks, #inventory) > .page-header .primary-button > *,
  #mainContent#mainContent #projects > .project-page-header .primary-button > * {
    display: none;
  }

  #mainContent#mainContent :is(#operations, #customers, #customer-reminders, #sales, #checks, #inventory) > .page-header .primary-button::before,
  #mainContent#mainContent #projects > .project-page-header .primary-button::before,
  #mainContent#mainContent #assets:not(.assets-create-mode) > .assets-page-header #addAssetButton::before {
    content: "+";
    font-size: 30px;
    font-weight: var(--weight-regular);
    line-height: 1;
  }

  /* Hidden tab actions stay hidden. */
  #mainContent#mainContent .page-header-actions .section-action-inactive {
    display: none !important;
  }

  /* Room for the round button below the last card. */
  #mainContent#mainContent :is(#operations, #customer-reminders, #sales, #checks, #inventory, #projects, #assets).view.active {
    padding-bottom: 88px;
  }
}

/* ---------------------------------------------------------------------------
 * Ticket detail on phones: status, priority and assignment come right after
 * the title as a compact two-column block, before description and timeline.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  #mainContent#mainContent #ticket-detail .ticket-page-grid {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3);
  }

  #mainContent#mainContent #ticket-detail .ticket-page-sidebar {
    display: contents !important;
  }

  #mainContent#mainContent #ticket-detail .ticket-page-sidebar > .ticket-side-section:first-child {
    order: -1;
  }

  #mainContent#mainContent #ticket-detail .ticket-page-main {
    order: 0;
  }

  #mainContent#mainContent #ticket-detail .ticket-page-sidebar > .ticket-side-section:not(:first-child) {
    order: 1;
  }

  #mainContent#mainContent #ticket-detail .ticket-page-sidebar > .ticket-side-section {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Status gets the full width, the other four sit in pairs. */
  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-field:first-child {
    grid-column: 1 / -1;
  }

  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child > h2 {
    display: none;
  }

  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-side-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-3);
  }

  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-field {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 2px;
    min-height: 0 !important;
  }

  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-field dt [data-ticket-icon] {
    display: none;
  }

  #mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-inline-control {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Hidden columns stay hidden: the older ticket table rule forces table-cell
   with an id selector, which also overrode the column selection. */
:root body #operations .ticket-table [hidden] {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Inline edit
 * A small pen per card (.card-edit-button in a .card-edit-header) opens the
 * card's fields in place (.inline-edit) with "Abbrechen | Speichern" on the
 * right. Inside a .inline-edit-reveal host the pen only shows on hover or
 * focus (always on touch screens and phones). Used on the ticket detail.
 * ------------------------------------------------------------------------- */
:is(.inline-edit, .card-edit-button, .inline-edit-hint, .inline-edit-error, [data-ticket-edit-view], .inline-edit label, .ticket-side-list > div)[hidden] {
  display: none !important;
}

.card-edit-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: 0;
}

.card-edit-header > :is(h2, h3) {
  min-width: 0;
  margin: 0;
}

.ticket-side-section > .card-edit-header {
  margin-bottom: var(--space-3);
}

.card-edit-button {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--icon-button-compact-size);
  min-width: var(--icon-button-compact-size);
  height: var(--icon-button-compact-size);
  margin-block: calc(-1 * var(--space-1));
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.card-edit-button:hover {
  border-color: var(--color-border);
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

.card-edit-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.card-edit-button svg {
  width: var(--icon-size);
  height: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.inline-edit-reveal .card-edit-button {
  opacity: 0;
}

.inline-edit-reveal:is(:hover, :focus-within) .card-edit-button {
  opacity: 1;
}

@media (hover: none), (max-width: 640px) {
  .inline-edit-reveal .card-edit-button {
    opacity: 1;
  }
}

.inline-edit-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.inline-edit-title-row > :is(h1, h2) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.inline-edit {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  margin-top: var(--space-3);
}

.inline-edit.inline-edit-title {
  margin: var(--space-2) 0 var(--space-3);
}

.inline-edit-title input {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

.inline-edit label:not(.checkbox-line) {
  display: grid;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.inline-edit :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .search-select) {
  width: 100%;
  min-width: 0;
}

.inline-edit textarea {
  min-height: 160px;
  resize: vertical;
  line-height: var(--line-normal);
}

.inline-edit-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.inline-edit-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
}

.inline-edit-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.inline-edit[aria-busy="true"] {
  cursor: progress;
}

/* ---------------------------------------------------------------------------
 * Decorative shapes (grid, chevrons) only on the login page; inside the app
 * they ran behind tables and cards. The beige PMI logo stays as a quiet,
 * fixed watermark; in dark mode a translucent layer above it keeps it faint.
 * ------------------------------------------------------------------------- */
:root body:not(.unauthenticated) {
  background-image:
    url("/assets/pmi-background-logo.svg"),
    radial-gradient(circle at 16% 0%, rgba(143, 207, 15, 0.08), transparent 30%),
    linear-gradient(180deg, #fbfaf6 0%, #f6f8f2 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center 52%, 20% 0%, 0 0 !important;
  background-size: min(920px, 62vw) auto, auto, auto !important;
  background-attachment: fixed, scroll, scroll !important;
}

:root body.theme-dark:not(.unauthenticated) {
  background-image:
    linear-gradient(rgba(7, 10, 8, 0.86), rgba(7, 10, 8, 0.86)),
    url("/assets/pmi-background-logo.svg"),
    radial-gradient(circle at 16% 0%, rgba(143, 207, 15, 0.06), transparent 30%),
    linear-gradient(180deg, #070a08 0%, #0d120f 100%) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-position: 0 0, center 52%, 20% 0%, 0 0 !important;
  background-size: auto, min(920px, 62vw) auto, auto, auto !important;
  background-attachment: fixed, fixed, scroll, scroll !important;
}

@media (max-width: 639px) {
  :root body:not(.unauthenticated) {
    background-position: center 60%, 20% 0%, 0 0 !important;
    background-size: 86vw auto, auto, auto !important;
  }

  :root body.theme-dark:not(.unauthenticated) {
    background-position: 0 0, center 60%, 20% 0%, 0 0 !important;
    background-size: auto, 86vw auto, auto, auto !important;
  }
}

:root body:not(.unauthenticated):not(.dialog-open)::before,
:root body:not(.unauthenticated)::after {
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * Start page: "Dein nächster Schritt" first and full width, the key figures
 * below as compact tiles that open their list; zero stays quiet.
 * ------------------------------------------------------------------------- */
a.kpi-tile.is-link,
button.kpi-tile.is-link {
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.kpi-tile.is-link:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.kpi-tile.is-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.kpi-tile.is-quiet .kpi-tile__value {
  color: var(--color-text-muted);
}

#mainContent #dashboard .today-focus::after {
  content: none;
}

#mainContent #dashboard .today-focus {
  min-height: 0;
  margin-bottom: var(--space-4);
}

#mainContent #dashboard .dashboard-focus-queue-item {
  max-width: none;
}

/* ---------------------------------------------------------------------------
 * Ticket sidebar: labels above their select, in normal case, so nothing runs
 * into the field ("Verantwortlich").
 * ------------------------------------------------------------------------- */
#mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 4px !important;
  min-height: 0 !important;
}

#mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-field dt {
  width: auto !important;
  overflow: visible !important;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: normal !important;
}

#mainContent#mainContent #ticket-detail .ticket-side-section:first-child .ticket-inline-control {
  width: 100% !important;
  min-width: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Tabs: one kind for switching between parts of a page, everywhere the same
 * underline as in the customer and project records. Segments (Liste | Board,
 * Aktiv | Archiv) stay segments: they switch a view or filter, not a part.
 * ------------------------------------------------------------------------- */
#mainContent#mainContent .workspace-subnav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-1) var(--space-4) !important;
  margin-bottom: var(--space-4) !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow-x: auto;
  scrollbar-width: none;
}

#mainContent#mainContent .workspace-subnav::-webkit-scrollbar {
  display: none;
}

#mainContent#mainContent .workspace-subnav :is(.sales-subnav-button, .product-subnav-button) {
  flex: 0 0 auto;
  min-height: 40px;
  margin-bottom: -1px;
  padding: var(--space-2) 2px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text-muted) !important;
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

#mainContent#mainContent .workspace-subnav :is(.sales-subnav-button, .product-subnav-button):hover {
  color: var(--color-text) !important;
}

#mainContent#mainContent .workspace-subnav :is(.sales-subnav-button, .product-subnav-button):is(.active, .is-active, [aria-selected="true"]) {
  border-bottom-color: var(--color-accent) !important;
  color: var(--color-accent-strong) !important;
}

/* ---------------------------------------------------------------------------
 * Phone navigation strip: same entries and order, now with a short label
 * under each symbol; the active entry is scrolled into view (app.js) and the
 * strip fades at its edges to show that it scrolls. Tab rows fade the same way.
 * ------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root body #appShell .sidebar .nav-link,
  :root body #appShell .sidebar .nav-link.active {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px;
    width: auto !important;
    min-width: 54px;
    height: auto !important;
    min-height: 50px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
    font-weight: var(--weight-medium);
    line-height: 1.2 !important;
    white-space: nowrap;
  }

  #appShell .sidebar {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  #mainContent#mainContent :is(.workspace-subnav, .customer-section-nav, .ticket-page-tabs) {
    overflow-x: auto;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%);
  }
}

/* The upcoming tasks panel has no inner padding of its own. */
#mainContent #dashboard .dashboard-task-panel .dashboard-empty-state {
  padding: var(--space-3) 22px var(--space-4);
}

/* ---------------------------------------------------------------------------
 * Customer record: key figures (see "KPI band" below), company facts without empty rows, care data read first
 * and edited with the pen.
 * ------------------------------------------------------------------------- */
#mainContent#mainContent #customer-detail .customer-info-grid .info-tile[data-empty] {
  display: none !important;
}

.text-link-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-strong);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.text-link-button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

#customer-detail .customer-meta-read .inline-edit-actions {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * Form footers everywhere like the internal requests: on the right,
 * "Abbrechen" first, the main action last, whatever order the markup has.
 * ------------------------------------------------------------------------- */
form :is(.button-row, .ticket-form-footer, .form-actions, .ticket-form-actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

form :is(.button-row, .ticket-form-footer, .form-actions, .ticket-form-actions) > .secondary-button {
  order: 0;
}

form :is(.button-row, .ticket-form-footer, .form-actions, .ticket-form-actions) > :is(.primary-button, .danger-button) {
  order: 1;
}

/* ---------------------------------------------------------------------------
 * Project form: short fields side by side, only the price field of the chosen
 * billing model (app.js), CC as person chips instead of a multi-select list.
 * ------------------------------------------------------------------------- */
@media (min-width: 721px) {
  #mainContent#mainContent #projectForm .ticket-form-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-3) var(--space-4) !important;
  }

  #mainContent#mainContent #projectForm .ticket-form-grid > :is(.span-2, label:has(textarea), label:has(#projectCustomerSearchInput), label:has(#projectNameInput)) {
    grid-column: 1 / -1;
  }
}

#projectForm [data-billing-field][hidden] {
  display: none !important;
}

.person-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.person-chips > legend {
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.person-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--space-2);
  min-height: 36px;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  cursor: pointer;
}

.person-chip:has(input:checked) {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.person-chip input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-accent-strong);
}

@media (max-width: 640px) {
  #mainContent #dashboard :is(.dashboard-task-panel, .dashboard-online-panel) {
    min-height: 0 !important;
  }
}

/* ---------------------------------------------------------------------------
 * Ticket progress (support convention), used to tint open ticket rows:
 * red not assigned · orange assigned, untouched · yellow note added · green answered
 * ------------------------------------------------------------------------- */
:root {
  --progress-red: #d92d20;
  --progress-orange: #e8730c;
  --progress-yellow: #d4a106;
  --progress-green: #2e9e58;
}

[data-progress="red"] { --progress: var(--progress-red); }
[data-progress="orange"] { --progress: var(--progress-orange); }
[data-progress="yellow"] { --progress: var(--progress-yellow); }
[data-progress="green"] { --progress: var(--progress-green); }

/* Variant B: open ticket rows get a faint tint and a colour stripe on the left. */
:root body #operations .ticket-table tbody tr[data-progress] > td {
  background-color: color-mix(in srgb, var(--progress) 8%, transparent) !important;
}

:root body #operations .ticket-table tbody tr[data-progress]:hover > td {
  background-color: color-mix(in srgb, var(--progress) 14%, transparent) !important;
}

:root body #operations .ticket-table tbody tr[data-progress] > td:first-child {
  box-shadow: inset 4px 0 0 var(--progress) !important;
}

.ticket-progress-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.ticket-progress-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.ticket-progress-legend span::before {
  content: "";
  width: 4px;
  height: 14px;
  border-radius: 2px;
  background: var(--progress);
}

.ticket-progress-legend {
  margin-bottom: var(--space-3);
}

/* Phones: the ticket card is tinted as a whole, the stripe runs along its left edge. */
@media (max-width: 640px) {
  :root body #mainContent#mainContent #operations .ticket-table tbody tr[data-progress] {
    background: color-mix(in srgb, var(--progress) 8%, var(--color-surface)) !important;
    border-left: 4px solid var(--progress) !important;
  }

  :root body #operations .ticket-table tbody tr[data-progress] > td,
  :root body #operations .ticket-table tbody tr[data-progress]:hover > td {
    background-color: transparent !important;
  }

  :root body #operations .ticket-table tbody tr[data-progress] > td:first-child {
    box-shadow: none !important;
  }
}


/* KPI band: four key figures (tickets, orders, quotes, services) as large
   numbers, below them the operations as beige chips that wrap instead of
   being cut off. Problems first, entries without data quiet at the end.
   On phones the figures form a 2x2 grid and the chips a list. */
#mainContent#mainContent #customer-detail .customer-kpi-band {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  gap: var(--space-3) !important;
  margin: 0 0 var(--space-4) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-heroes {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--space-3) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--space-1) !important;
  min-width: 0 !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-surface) !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero:is(:hover, :focus-visible) {
  border-color: var(--color-border-strong) !important;
  background: var(--color-surface-hover) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero.is-danger {
  border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-border)) !important;
  box-shadow: inset 3px 0 0 var(--color-danger) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero.is-warning {
  border-color: color-mix(in srgb, var(--color-warning) 45%, var(--color-border)) !important;
  box-shadow: inset 3px 0 0 var(--color-warning) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero__label {
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-bold) !important;
  line-height: 1.3 !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero__num {
  display: flex !important;
  align-items: baseline !important;
  gap: var(--space-2) !important;
  margin: 0 !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero__num > strong {
  color: var(--color-text-strong) !important;
  font-size: 34px !important;
  font-weight: var(--weight-bold) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.05 !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero__unit {
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero.is-empty .customer-kpi-hero__num > strong {
  color: var(--color-text-muted) !important;
  font-weight: var(--weight-medium) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-hero__foot {
  display: flex !important;
  min-height: 22px !important;
  margin-top: auto !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

#mainContent#mainContent #customer-detail .customer-kpi-pill.is-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

#mainContent#mainContent #customer-detail .customer-kpi-pill.is-warning {
  background: var(--color-warning-soft);
  color: var(--color-warning);
}

#mainContent#mainContent #customer-detail .customer-kpi-chips {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-2) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  min-height: 34px !important;
  margin: 0 !important;
  padding: 0 var(--space-3) !important;
  border: 1px solid var(--color-beige-line) !important;
  border-radius: var(--radius-md) !important;
  background: var(--color-beige) !important;
  box-shadow: none !important;
  color: var(--color-text) !important;
  font: inherit !important;
  font-size: var(--text-sm) !important;
  text-align: left !important;
  text-decoration: none !important;
  cursor: pointer;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-fact {
  cursor: default;
}

#mainContent#mainContent #customer-detail a.customer-kpi-chip:is(:hover, :focus-visible),
#mainContent#mainContent #customer-detail button.customer-kpi-chip:is(:hover, :focus-visible) {
  border-color: var(--color-border-strong) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip__label {
  color: var(--color-text-muted) !important;
  font-weight: var(--weight-bold) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip__value {
  color: var(--color-text-strong) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-bold) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip__meta {
  color: var(--color-text-muted) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-warning {
  border-color: color-mix(in srgb, var(--color-warning) 40%, transparent) !important;
  background: var(--color-warning-soft) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-danger {
  border-color: color-mix(in srgb, var(--color-danger) 40%, transparent) !important;
  background: var(--color-danger-soft) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-info {
  border-color: color-mix(in srgb, var(--color-info) 40%, transparent) !important;
  background: var(--color-info-soft) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-warning .customer-kpi-chip__meta {
  color: var(--color-warning) !important;
  font-weight: var(--weight-bold) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-danger .customer-kpi-chip__meta {
  color: var(--color-danger) !important;
  font-weight: var(--weight-bold) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-info .customer-kpi-chip__meta {
  color: var(--color-info) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip:is(.is-empty, .is-fact) {
  border-style: dashed !important;
  border-color: var(--color-border-strong) !important;
  background: transparent !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chip.is-empty .customer-kpi-chip__value {
  color: var(--color-text-muted) !important;
  font-weight: var(--weight-medium) !important;
}

#mainContent#mainContent #customer-detail .customer-kpi-chips > [hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  #mainContent#mainContent #customer-detail .customer-kpi-heroes {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-2) !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-hero {
    min-height: 100px !important;
    padding: var(--space-3) !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-hero__num > strong {
    font-size: 30px !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chips {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    column-gap: var(--space-3) !important;
    row-gap: 2px !important;
    min-height: 44px !important;
    padding: var(--space-2) var(--space-3) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip:last-child {
    border-bottom: 0 !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip.is-warning {
    background: var(--color-warning-soft) !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip.is-danger {
    background: var(--color-danger-soft) !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip.is-info {
    background: var(--color-info-soft) !important;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip__value {
    text-align: right;
  }

  #mainContent#mainContent #customer-detail .customer-kpi-chip__meta {
    grid-column: 1 / -1;
    font-size: var(--text-xs);
  }
}

/* ---------------------------------------------------------------------------
 * Reminder recipient: read-only, the signed-in user by default; another Dojo
 * user via "Anderen Benutzer wählen". Errors sit at their field.
 * ------------------------------------------------------------------------- */
.recipient-field {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.recipient-field > label {
  font-weight: var(--weight-medium);
}

.recipient-control {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.recipient-control > :is(input, select) {
  flex: 1 1 auto;
  min-width: 0;
}

.recipient-control > [hidden] {
  display: none !important;
}

.recipient-control > .card-edit-button {
  flex: 0 0 auto;
}

.field-error {
  display: block;
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.field-error[hidden] {
  display: none;
}

:is(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--color-danger) !important;
}
/* Between phone and desktop (761–980 px) the older rules lay the navigation
   out as a top strip while the newer ones kept the sidebar a narrow column, so
   the entries ended up outside it. In this range the strip of the phone layout
   applies; entries and order stay the same. */
@media (min-width: 761px) and (max-width: 980px) {
  :root body .app-shell {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
  }

  :root body .sidebar {
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    z-index: 40 !important;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 54px !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--color-border) !important;
  }

  :root body .sidebar .brand {
    display: none !important;
  }

  :root body .sidebar .nav {
    display: flex !important;
    flex: 1 0 auto !important;
    gap: 6px !important;
    width: max-content !important;
    min-width: max-content !important;
    align-items: center !important;
  }

  :root body .sidebar .nav-section {
    display: contents !important;
  }
}

/* -------------------------------------------------------------------------
 * Lizenz-Bestellungen (#17): Microsoft-Logo oben rechts, Liste, Formular, Entscheid
 * ------------------------------------------------------------------------- */
:root body .ms-logo rect {
  stroke: none !important;
}

.preview-licenses-menu > summary {
  position: relative;
}

.license-request-new-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

:root body .license-request-new-button .ms-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.license-request-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.license-request-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.license-request-tabs button {
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 0;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  cursor: pointer;
}

.license-request-tabs button:hover {
  color: var(--color-text-strong);
}

.license-request-tabs button[aria-pressed="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-text-strong);
  font-weight: 600;
}

.license-request-list {
  padding: var(--space-2) 0 0;
}

.license-request-table .table-subline {
  display: block;
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.license-request-table .license-request-reason {
  max-width: 280px;
  white-space: pre-line;
}

.license-request-table .license-request-actions {
  white-space: nowrap;
}

.license-request-table .license-request-actions button {
  display: flex;
  width: 100%;
  justify-content: center;
}

.license-request-table .license-request-actions button + button {
  margin-top: var(--space-1);
}

.license-request-table .license-request-actions .danger-text {
  color: var(--color-danger);
}

.license-request-table .table-subline.danger-text {
  color: var(--color-danger);
}

.license-request-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}

.license-request-form-panel {
  flex: 999 1 560px;
  min-width: 0;
}

.license-request-aside {
  flex: 1 1 260px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.license-request-aside h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}

.license-request-next {
  background: var(--color-info-soft);
}

.license-request-next ol {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.license-request-form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 24px 28px 8px;
}

@media (max-width: 720px) {
  .license-request-form-head {
    padding: 20px 20px 4px;
  }
}

.license-request-quantity {
  display: grid;
  gap: var(--space-2);
}

.license-request-form-head > div {
  margin-right: auto;
}

.license-request-form-head h1 {
  margin: var(--space-1) 0 0;
}

.license-request-logo {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--color-surface-muted);
}

:root body .license-request-logo .ms-logo {
  width: 24px;
  height: 24px;
}

.license-request-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.license-request-stepper button {
  width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 20px;
}

.license-request-stepper input {
  width: 88px;
  text-align: center;
}

.license-request-summary {
  margin: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.license-request-summary > div {
  display: grid;
  grid-template-columns: minmax(90px, auto) minmax(0, 1fr);
  gap: var(--space-3);
}

.license-request-summary dt {
  color: var(--color-text-muted);
}

.license-request-summary dd {
  margin: 0;
  color: var(--color-text-strong);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Bestellung (#18): Marketplace and AbaNinja values as two groups in the same list. */
.license-request-summary > .license-order-section {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

.license-request-summary > .license-order-section dt {
  color: var(--color-text-strong);
  font-weight: 600;
}

.customer-marketplace-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.customer-marketplace-action {
  text-align: right;
  white-space: nowrap;
}

.license-request-term {
  display: grid;
  gap: var(--space-2);
}

.license-request-terms {
  padding: var(--space-3);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface-subtle);
}

/* Kundenakte: Reiter als Text mit Unterstrich, ohne Mini-Symbole (Wunsch #17) */
:root body #customer-detail .customer-section-button::before {
  content: none !important;
  display: none !important;
}

:root body #customer-detail .customer-section-button {
  gap: 0 !important;
  padding: 0 var(--space-3) !important;
  border-bottom: 3px solid transparent !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-regular) !important;
}

:root body #customer-detail .customer-section-button.active {
  border-bottom-color: var(--color-accent) !important;
  color: var(--color-text-strong) !important;
  font-weight: var(--weight-medium) !important;
}

:root body #customer-detail .customer-section-button:hover:not(.active) {
  border-bottom-color: var(--color-border-strong) !important;
  color: var(--color-text-strong) !important;
}

/* Admin: Untermenü als Reiter mit Unterstrich wie die Kundenakte (Wunsch #17) */
:root body #settings .settings-subnav {
  gap: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--color-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

:root body #settings .settings-subnav > .settings-subnav-button {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 var(--space-3) !important;
  border: 0 !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--color-text-muted) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-regular) !important;
}

:root body #settings .settings-subnav > .settings-subnav-button:hover:not(.active) {
  border-bottom-color: var(--color-border-strong) !important;
  color: var(--color-text-strong) !important;
}

:root body #settings .settings-subnav > .settings-subnav-button.active {
  border-bottom-color: var(--color-accent) !important;
  color: var(--color-text-strong) !important;
  font-weight: var(--weight-medium) !important;
}

/* Lizenz-Katalog: ein AbaNinja-Produkt pro Abrechnung (#19). */
.marketplace-term-mappings {
  display: grid;
  gap: 4px;
  min-width: 240px;
}

/* Kompakt: Abrechnung links klein, Feld rechts in Zeilenhöhe statt grosser Formularfelder. */
.marketplace-term-mapping {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2);
}

.marketplace-term-mapping .field-caption {
  margin: 0;
  font-size: var(--text-xs, 12px);
  color: var(--color-text-muted);
  line-height: 1.2;
  white-space: nowrap;
}

/* Die übrigen Spalten sind kurz: die AbaNinja-Spalte bekommt den Platz, jede Abrechnung bleibt einzeilig. */
@media (min-width: 900px) {
  .marketplace-product-table {
    table-layout: fixed;
    width: 100%;
  }

  .marketplace-product-table th:nth-child(1) {
    width: 26%;
  }

  .marketplace-product-table th:nth-child(2) {
    width: 13%;
  }

  .marketplace-product-table th:nth-child(3) {
    width: 13%;
  }

  .marketplace-product-table th:nth-child(4) {
    width: 84px;
  }

  .marketplace-product-table td {
    overflow-wrap: anywhere;
  }
}

:root body .marketplace-product-table input[type="text"] {
  width: 100%;
  min-height: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: var(--text-sm, 13px);
  border-radius: 6px;
}

@media (max-width: 560px) {
  .marketplace-term-mapping {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* Checkbox «Verfügbar» in normaler Grösse statt als volles Eingabefeld. */
.marketplace-product-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  accent-color: var(--brand);
}

/* ---------------------------------------------------------------------------
 * Sales > Karte (#20): customers (green, filled) and prospects (blue, hollow)
 * on the swisstopo map, nearby list and tour planning from PMI.
 * ------------------------------------------------------------------------- */
.sales-map-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--space-4);
  align-items: start;
}

.sales-map-main {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.sales-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.sales-map-toolbar .kpi-chips {
  margin: 0;
}

.sales-map-toolbar .kpi-chip {
  align-items: center;
}

.sales-map-filter {
  display: inline-flex;
  margin: 0;
}

.sales-map-filter select,
.sales-map-filter input {
  width: auto;
  min-height: 36px;
  margin: 0;
}

.sales-map-search {
  flex: 1 1 180px;
}

.sales-map-search input {
  width: 100%;
}

.sales-map-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
}

.sales-map-dot--customer {
  border: 2px solid var(--color-accent-strong);
  background: var(--color-accent);
}

.sales-map-dot--prospect {
  border: 2.5px solid var(--color-info);
  background: var(--color-surface);
}

.sales-map-dot--home {
  border-radius: 3px;
  background: var(--color-surface-inverse);
}

/* Leaflet layers use z-index 400-1000; isolate them below the app's drawer, FAB and dialogs. */
.sales-map-stage {
  position: relative;
  isolation: isolate;
  z-index: 0;
}

.sales-map-canvas {
  height: min(72vh, 640px);
  min-height: 360px;
  background: var(--color-surface-muted);
}

.sales-map-canvas.leaflet-container {
  font: inherit;
  font-size: var(--text-sm);
  background: var(--color-surface-muted);
}

.sales-map-canvas .leaflet-control-attribution {
  font-size: 11px;
}

.sales-map-canvas .leaflet-bar a {
  border-bottom-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text);
}

.sales-map-canvas .leaflet-bar a:hover,
.sales-map-canvas .leaflet-bar a:focus-visible {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

.sales-map-fit a {
  display: grid;
  place-items: center;
}

.sales-map-fit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sales-map-marker {
  background: none;
  border: 0;
}

.sales-map-marker:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

.sales-map-pin {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.sales-map-pin svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sales-map-pin--customer .sales-map-pin__shape {
  fill: var(--color-accent);
  stroke: #4f7600;
  stroke-width: 1.6;
}

.sales-map-pin--customer .sales-map-pin__dot {
  fill: #1f2326;
}

.sales-map-pin--prospect .sales-map-pin__shape {
  fill: #ffffff;
  stroke: #006b99;
  stroke-width: 2.4;
}

.sales-map-pin--prospect .sales-map-pin__dot {
  fill: #006b99;
}

.sales-map-pin.is-selected {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.sales-map-pin__badge {
  position: absolute;
  top: -6px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #383d42;
  color: #ffffff;
  font-size: 11px;
  font-weight: var(--weight-bold);
  line-height: 14px;
  text-align: center;
}

.sales-map-cluster {
  display: grid;
  place-items: center;
  border: 3px solid var(--color-accent);
  border-radius: 50%;
  background: #383d42;
  color: #ffffff;
  font-size: 13px;
  font-weight: var(--weight-bold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}

.sales-map-cluster--prospect {
  border-color: #4fb3e0;
}

.sales-map-cluster--mixed {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px #4fb3e0, 0 1px 4px rgba(0, 0, 0, 0.3);
}

.sales-map-home {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2.5px solid #ffffff;
  border-radius: 8px;
  background: #383d42;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.sales-map-home::after {
  content: "";
  position: absolute;
  top: 32px;
  left: 50%;
  border: 6px solid transparent;
  border-top-color: #383d42;
  transform: translateX(-50%);
}

.sales-map-home img {
  width: 20px;
  height: 20px;
}

.sales-map-radius {
  fill: var(--color-accent);
  fill-opacity: 0.08;
  stroke: var(--color-accent-strong);
  stroke-width: 1.5;
  stroke-dasharray: 6 5;
}

.sales-map-route {
  fill: none;
  stroke: #383d42;
  stroke-width: 3;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}

.sales-map-popup .leaflet-popup-content-wrapper,
.sales-map-popup .leaflet-popup-tip {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

.sales-map-popup .leaflet-popup-content {
  margin: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--line-normal);
}

.sales-map-popup a.leaflet-popup-close-button {
  color: var(--color-text-muted);
}

.sales-map-popup__body h3 {
  margin: 0 var(--space-4) var(--space-1) 0;
  color: var(--color-text-strong);
  font-size: var(--text-md);
}

.sales-map-popup__body p {
  margin: 0 0 var(--space-2);
}

.sales-map-popup__address {
  color: var(--color-text-muted);
}

.sales-map-popup__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.sales-map-popup__actions a.primary-button,
.sales-map-popup__actions a.secondary-button {
  text-decoration: none;
}

.sales-map-kind {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}

.sales-map-kind--customer {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.sales-map-kind--prospect {
  background: var(--color-info-soft);
  color: var(--color-info);
}

.sales-map-kind--home {
  background: var(--color-neutral-soft);
  color: var(--color-text);
}

.sales-map-legend {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-6);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-size: var(--text-xs);
  pointer-events: none;
}

.sales-map-legend span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.sales-map-legend i {
  display: inline-grid;
  place-items: center;
  font-style: normal;
}

.sales-map-legend-home {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  background: #383d42;
}

.sales-map-legend-home img {
  width: 9px;
  height: 9px;
}

.sales-map-status {
  position: absolute;
  top: var(--space-3);
  left: 50%;
  z-index: 1000;
  max-width: calc(100% - 120px);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-sm);
  transform: translateX(-50%);
}

.sales-map-status[data-tone="error"] {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.sales-map-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.sales-map-side .sales-map-card {
  margin: 0;
}

.sales-map-side .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sales-map-regions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}

.sales-map-region {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  padding: var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--text-xs);
  line-height: var(--line-tight);
  text-align: left;
  cursor: pointer;
}

.sales-map-region strong {
  color: var(--color-text-strong);
  font-size: var(--text-lg);
}

.sales-map-region:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.sales-map-region[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.sales-map-region.is-empty strong {
  color: var(--color-text-muted);
}

.sales-map-radius-field select {
  width: auto;
  min-height: 32px;
  margin: 0;
}

.sales-map-note {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.sales-map-list,
.sales-map-missing-list,
.sales-map-tour__stops {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sales-map-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
}

.sales-map-row:first-child {
  border-top: 0;
}

.sales-map-row.is-selected .sales-map-row__name strong {
  color: var(--color-accent-strong);
}

.sales-map-row__check {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.sales-map-row__check input {
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.sales-map-row__name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.sales-map-row__name:hover strong {
  text-decoration: underline;
}

.sales-map-row__name strong,
.sales-map-row__name span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sales-map-row__name strong {
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
}

.sales-map-row__name span,
.sales-map-row__km {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.sales-map-row__km {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sales-map-empty {
  padding: var(--space-2) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.sales-map-tour {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
}

.sales-map-tour__summary {
  display: flex;
  flex-direction: column;
}

.sales-map-tour__summary strong {
  color: var(--color-text-strong);
}

.sales-map-tour__stops {
  margin: var(--space-2) 0;
  counter-reset: tour;
}

.sales-map-tour__stops li {
  display: flex;
  gap: var(--space-2);
  padding: 2px 0;
  counter-increment: tour;
}

.sales-map-tour__stops li::before {
  content: counter(tour) ".";
  min-width: 18px;
  color: var(--color-text-muted);
}

.sales-map-tour__stops li span {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.sales-map-tour__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sales-map-tour__actions a {
  text-decoration: none;
}

.sales-map-missing summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-strong);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.sales-map-missing[open] summary {
  margin-bottom: var(--space-2);
}

.sales-map-missing-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}

.sales-map-missing-list .sales-map-dot {
  margin-top: 5px;
}

.sales-map-missing-list div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sales-map-missing-list span {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* The grey swisstopo map would glare in dark mode; invert it to a dark grey. */
body.theme-dark .sales-map-canvas .sales-map-tiles {
  filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.85);
}

body.theme-dark .sales-map-pin__badge,
body.theme-dark .sales-map-home {
  border-color: #181c1f;
}

@media (max-width: 1100px) {
  .sales-map-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-map-side {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .sales-map-missing {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .sales-map-main {
    margin: 0 calc(var(--space-4) * -1);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .sales-map-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .sales-map-toolbar > * {
    flex: 0 0 auto;
  }

  .sales-map-search {
    flex: 0 0 180px;
  }

  .sales-map-canvas {
    height: 58vh;
    min-height: 320px;
  }

  .sales-map-legend {
    bottom: var(--space-5);
    padding: var(--space-1) var(--space-2);
  }

  .sales-map-side {
    display: flex;
  }

  .sales-map-regions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Licence order dialog: the AbaNinja position text, read-only until the pencil is clicked (#33). */
.license-order-position {
  display: grid;
  gap: var(--space-1);
}

.license-order-position textarea[readonly] {
  background: var(--color-surface-muted);
  color: var(--color-text);
  cursor: default;
}

/* The renewal consent must be readable in full before GL ticks it (#34). */
#licenseOrderRenewalField {
  align-items: start;
}

#licenseOrderRenewalField :is(strong, small) {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* Navigation: in the wide sidebar only the group of the open page shows its links (#32).
   The icon bar and the mobile bar keep all links, they have no group titles. */
@media (min-width: 901px) {
  :root body.preview-sidebar-expanded .nav-section:not(.nav-section-active) .nav-link {
    display: none !important;
  }

  :root body.preview-sidebar-expanded .nav-section .nav-group-title {
    cursor: pointer;
  }

  :root body.preview-sidebar-expanded .nav-section:not(.nav-section-active) .nav-group-title:hover {
    color: var(--color-text) !important;
  }

  :root body.preview-sidebar-expanded .nav-section:not(.nav-section-active):not(.nav-group-empty) .nav-group-title::after {
    display: inline-block !important;
    content: "›";
    margin-left: 6px;
    font-size: 14px;
    letter-spacing: 0;
  }
}

/* Rapport › Massenrapport */
.bulk-rapport-form {
  display: grid;
  gap: 16px;
}

.bulk-rapport-step {
  display: grid;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  background: var(--color-surface);
  min-width: 0;
}

.bulk-rapport-step legend,
.bulk-rapport-step > h2 {
  margin: 0;
  padding: 0 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-strong);
}

.bulk-rapport-preview,
#bulkRapportResult {
  margin-top: 16px;
}

.bulk-rapport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}

.bulk-rapport-grid label,
.bulk-rapport-text {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.bulk-rapport-grid input[readonly] {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
}

.bulk-rapport-text textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
}

.bulk-rapport-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
}

.bulk-rapport-summary div {
  display: grid;
  gap: 2px;
}

.bulk-rapport-summary dt {
  font-size: 12px;
  color: var(--color-text-muted);
}

.bulk-rapport-summary dd {
  margin: 0;
  font-weight: 700;
}

.bulk-rapport-summary .bulk-rapport-summary-text {
  flex-basis: 100%;
}

.bulk-rapport-summary .bulk-rapport-summary-text dd {
  font-weight: 400;
  white-space: pre-line;
}

.bulk-rapport-table td small {
  display: block;
  color: var(--color-text-muted);
}

.bulk-rapport-table :is(input, select) {
  width: 100%;
  min-width: 90px;
}

.bulk-rapport-table input[type="number"] {
  max-width: 96px;
}

.bulk-rapport-ok {
  color: var(--color-success);
}

.bulk-rapport-warn {
  color: var(--color-warning);
}

.bulk-rapport-table .bulk-rapport-error {
  margin-top: 4px;
  color: var(--color-danger);
}

.bulk-rapport-history {
  display: grid;
  gap: 10px;
}

.bulk-rapport-history-item {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 10px 14px;
  background: var(--color-surface);
}

.bulk-rapport-history-item summary {
  display: grid;
  gap: 2px;
  cursor: pointer;
}

.bulk-rapport-history-item summary small {
  color: var(--color-text-muted);
}

.bulk-rapport-history-text {
  white-space: pre-line;
}

@media (max-width: 760px) {
  .bulk-rapport-step {
    padding: 12px;
  }

  .bulk-rapport-table input[type="number"] {
    max-width: none;
  }
}

.bulk-rapport-form[hidden],
.bulk-rapport-step[hidden] {
  display: none;
}

/* Tasks direkt in der Arbeitspakete-Übersicht abhaken (#13) */
.project-task-title {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.project-task-title > strong {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding-top: 2px;
}

.project-task-check {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--color-surface);
  color: var(--color-on-accent);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}

button.project-task-check {
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

button.project-task-check:hover,
button.project-task-check:focus-visible {
  border-color: var(--color-accent);
}

.project-task-check.checked {
  border-color: var(--color-accent);
  background: var(--color-accent);
}

span.project-task-check {
  opacity: 0.6;
}

button.project-task-check:disabled {
  cursor: progress;
  opacity: 0.6;
}

@media (pointer: coarse) {
  .project-task-check {
    width: 28px;
    height: 28px;
  }
}

.project-package-task-list .project-task-row {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 6px;
}

.project-package-task-list .project-task-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-left: 32px;
}

.project-package-task-list .project-task-copy {
  padding-left: 32px;
}

@media (pointer: coarse) {
  .project-package-task-list :is(.project-task-meta, .project-task-copy) {
    padding-left: 38px;
  }
}

/* ---------------------------------------------------------------------------
 * Checks › Backup › Mail-Eingang: mails from the backup mailbox and how they
 * were assigned. On phones the table turns into cards (data-table rules).
 * ------------------------------------------------------------------------- */
.backup-view-switch {
  margin-bottom: var(--space-3);
}

.backup-inbox-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: var(--space-1);
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-danger);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  line-height: 1;
}

.backup-inbox-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
}

.backup-inbox-toolbar .maintenance-search {
  flex: 1 1 220px;
}

.backup-inbox-toolbar .maintenance-search svg {
  top: 50%;
  bottom: auto;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  pointer-events: none;
}

.backup-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-left: auto;
}

.backup-inbox-hint {
  margin: 0;
  padding: 0 var(--space-4) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.45;
}

.backup-inbox-sender-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
  cursor: pointer;
}

/* Fixed layout: the columns share the width, long texts end in «…» (full text as tooltip). */
.backup-inbox-table-wrap {
  margin: 0 var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: visible;
}

.backup-inbox-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.backup-inbox-table th.backup-inbox-date-cell { width: 156px; }
.backup-inbox-table th.backup-inbox-customer-cell { width: 18%; }
.backup-inbox-table th.backup-inbox-sender-cell { width: 16%; }
.backup-inbox-table th.backup-inbox-result-cell { width: 30%; }
.backup-inbox-table th.backup-inbox-actions-cell { width: 136px; }

.backup-inbox-sender-cell {
  display: none;
}

.backup-inbox-panel.show-sender .backup-inbox-sender-cell {
  display: table-cell;
}

/* Same rhythm as the ticket list: 10/8 px cells, 13 px text, 12 px chips. */
.backup-inbox-table th {
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-beige-line);
  background: var(--color-beige);
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-align: left;
  text-transform: uppercase;
}

.backup-inbox-table th:first-child,
.backup-inbox-table td:first-child {
  padding-left: var(--space-3);
}

.backup-inbox-table th:last-child,
.backup-inbox-table td:last-child {
  padding-right: var(--space-3);
}

.backup-inbox-table td {
  height: 56px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  line-height: 1.25;
  vertical-align: middle;
}

.backup-inbox-table tbody tr:last-child td {
  border-bottom: 0;
}

.backup-inbox-row {
  cursor: pointer;
}

.backup-inbox-row:hover td,
.backup-inbox-row:focus-visible td {
  background: var(--color-surface-hover);
}

.backup-inbox-row:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

.backup-inbox-date-cell time {
  color: var(--color-text);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.backup-inbox-customer-cell,
.backup-inbox-result-cell {
  min-width: 0;
}

.backup-inbox-customer-number,
.backup-inbox-customer-name,
.backup-inbox-subject,
.backup-inbox-sender,
.backup-inbox-detail {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backup-inbox-customer-number {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.backup-inbox-customer-name {
  color: var(--color-text-strong);
  font-size: 13px;
}

.backup-inbox-subject {
  color: var(--color-text-strong);
  font-size: 13px;
  font-weight: var(--weight-bold);
}

.backup-inbox-sender,
.backup-inbox-muted {
  color: var(--color-text-muted);
  font-size: 13px;
}

.backup-inbox-result-cell .status-pill {
  margin-bottom: 4px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: 0.01em;
}

.backup-inbox-detail {
  color: var(--color-text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.backup-inbox-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.backup-inbox-pager {
  display: flex;
  justify-content: center;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.backup-inbox-pager:has(> [hidden]:only-child) {
  padding: 0 0 var(--space-4);
}

.backup-inbox-panel .maintenance-empty {
  margin: var(--space-3) var(--space-4) 0;
}

.backup-inbox-facts {
  display: grid;
  grid-template-columns: minmax(90px, max-content) minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.backup-inbox-facts dt {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.backup-inbox-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.backup-inbox-body-text {
  max-height: 320px;
  margin: 0;
  padding: var(--space-3);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-muted);
  color: var(--color-text);
  font: var(--text-sm) / 1.5 var(--font-sans);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.backup-inbox-test-result {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.backup-inbox-test-result.is-ok {
  border-left-color: var(--color-success);
}

.backup-inbox-test-result.is-open {
  border-left-color: var(--color-warning);
}

.backup-test-mail {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.backup-source-mail {
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: var(--color-info-soft);
  color: var(--color-text-strong);
}

/* Phones: one compact card per mail (date and customer, subject, chip with reason, actions). */
@media (max-width: 760px) {
  .backup-inbox-actions {
    margin-left: 0;
    width: 100%;
  }

  .backup-inbox-actions > button {
    flex: 1 1 0;
  }

  .backup-inbox-toolbar {
    padding: var(--space-3);
  }

  .backup-inbox-hint {
    padding: 0 var(--space-3) var(--space-3);
  }

  .backup-inbox-table-wrap {
    margin: 0 var(--space-3);
    border: 0;
  }

  .backup-inbox-table td,
  .backup-inbox-table td:first-child,
  .backup-inbox-table td:last-child {
    height: auto;
    padding: 0;
  }

  .backup-inbox-table,
  .backup-inbox-table tbody {
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .backup-inbox-table thead,
  .backup-inbox-panel.show-sender .backup-inbox-sender-cell {
    display: none;
  }

  .backup-inbox-table tbody {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .backup-inbox-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date actions"
      "customer customer"
      "subject subject"
      "result result";
    gap: var(--space-1) var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    min-width: 0;
  }

  .backup-inbox-table td {
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .backup-inbox-row:hover td,
  .backup-inbox-row:focus-visible td {
    background: transparent;
  }

  .backup-inbox-date-cell { grid-area: date; align-self: center; }
  .backup-inbox-customer-cell { grid-area: customer; display: flex; gap: var(--space-1); align-items: baseline; min-width: 0; align-self: center; }
  .backup-inbox-subject-cell { grid-area: subject; }
  .backup-inbox-result-cell { grid-area: result; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
  .backup-inbox-actions-cell { grid-area: actions; }

  .backup-inbox-subject {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .backup-inbox-result-cell .status-pill {
    margin: 0;
  }

  .backup-inbox-detail {
    flex: 1 1 100%;
    white-space: normal;
  }
}

/* Backup check form: the address Veeam sends this customer's reports to. */
.backup-mail-address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.backup-mail-address code {
  color: var(--color-text-strong);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.backup-mail-address button {
  margin-left: auto;
}

/* Backup timeline: one slot per interval; a small number marks extra results in the slot. */
.backup-history {
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding-top: 8px;
}

.backup-slot {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
}

button.backup-slot {
  cursor: pointer;
}

button.backup-slot:hover,
button.backup-slot:focus-visible {
  background: var(--color-surface-hover);
}

.backup-slot-count {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--color-text-strong);
  color: var(--color-surface);
  font-size: 9px;
  font-weight: var(--weight-bold);
  line-height: 14px;
  text-align: center;
}

#mainContent .backup-last-result {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text-strong);
  font: inherit;
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.backup-result-pick {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.backup-result-pick-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.backup-result-pick-button:hover {
  background: var(--color-surface-hover);
}

.backup-result-mail {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.backup-result-mail h3 {
  margin: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* Mail HTML in its sandbox: white like a mail client, also in dark mode. */
.backup-mail-frame {
  display: block;
  width: 100%;
  height: min(60vh, 560px);
  min-height: 280px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: #fff;
}

.backup-inbox-mail-dialog {
  width: min(960px, calc(100vw - 32px));
}

.backup-inbox-received {
  display: block;
  color: var(--color-text-muted);
  font-size: 11px;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Kunden-Tags (#42): chips with a colour dot, the tag input on the customer card,
 * the tag filter in the customer list, the report tab and the admin list.
 * ------------------------------------------------------------------------- */
.tag-chip {
  --tag-color: var(--color-accent);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface-muted);
  color: var(--color-text-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  white-space: nowrap;
}

.tag-chip::before,
.tag-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tag-color, var(--color-accent));
  content: "";
}

.tag-dot {
  display: inline-block;
}

.tag-chip.is-removable {
  padding-right: 3px;
}

.tag-chip.is-small {
  min-height: 20px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: var(--weight-semibold, 600);
}

.tag-chip.is-small::before {
  width: 6px;
  height: 6px;
}

.tag-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.tag-chip button:hover,
.tag-chip button:focus-visible {
  background: var(--color-surface-hover);
  color: var(--color-text-strong);
}

.tag-input {
  position: relative;
  min-width: 0;
}

.tag-input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: text;
}

.tag-input-chips {
  display: contents;
}

.tag-input:not(.is-readonly):hover .tag-input-box {
  border-color: var(--color-border-strong);
  background: var(--color-surface-subtle);
}

.tag-input.is-open .tag-input-box,
.tag-input:focus-within .tag-input-box {
  border-color: var(--color-accent);
  outline: 3px solid var(--color-accent-soft);
  background: var(--color-surface);
}

.tag-input.is-readonly .tag-input-box {
  padding-inline: 0;
  cursor: default;
}

/* The search input sits inside the box and must not draw its own (dark rules use !important). */
:root body .tag-input input[type="search"] {
  flex: 1 1 140px;
  width: auto;
  min-width: 120px;
  min-height: 26px;
  height: 26px;
  padding: 0 4px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  font-size: var(--text-sm);
}

.tag-input-empty {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.tag-input-list {
  width: 340px;
}

.tag-input-heading {
  margin: 0;
  padding: 4px var(--space-3) 2px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag-input-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.tag-input-option-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.tag-input-create {
  margin-top: 2px;
  border-top: 1px solid var(--color-border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--color-accent-strong);
  font-weight: var(--weight-bold);
}

.tag-input-hint {
  margin: 0;
  padding: 4px var(--space-3) 2px;
  color: var(--color-text-muted);
  font-size: 11px;
}

.tag-input-hint kbd {
  padding: 0 4px;
  border: 1px solid var(--color-border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--color-surface-subtle);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
}

/* Kundenkartei: own row under location, phone, mail and web. */
.customer-tag-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px var(--space-2);
  margin-top: 6px;
}

.customer-tag-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.customer-tag-label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.customer-tag-row .tag-input {
  flex: 1 1 260px;
}

/* Kundenliste: tag filter next to the search (no chips in the list, Franco 2026-10-30). */
.customer-list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4, 16px);
}

.customer-tag-filter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1 1 300px;
  max-width: 520px;
  margin-bottom: 4px;
}

.customer-tag-filter[hidden] {
  display: none;
}

.customer-tag-filter-label {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.customer-tag-filter .tag-input,
.reports-tags-filter .tag-input {
  flex: 1;
}

.customer-tag-filter .tag-input-box,
.reports-tags-filter .tag-input-box {
  min-height: 42px;
  border-color: var(--color-border-strong);
  background: var(--color-surface);
}

/* Reports > Tags */
.reports-subnav {
  margin-bottom: var(--space-3);
}

.reports-tags-shell {
  display: grid;
  gap: 18px;
}

.reports-tags-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}

.reports-tags-filter .compact-field {
  display: grid;
  gap: 4px;
}

.reports-tags-filter-tags {
  flex: 1 1 320px;
}

.reports-tags-filter-search {
  flex: 0 1 240px;
}

.compact-field-label {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}

.reports-tags-filter .segmented-control button {
  min-height: 36px;
}

.reports-tags-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.reports-tag-table tbody tr {
  cursor: pointer;
}

.reports-tag-table tbody tr:hover td {
  background: var(--color-surface-hover);
}

.reports-tag-table tbody tr.is-selected td {
  background: var(--color-accent-soft);
}

.tag-count-cell {
  width: 110px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tag-share {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tag-share-bar {
  flex: 1;
  height: 6px;
  min-width: 50px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-surface-muted);
}

.tag-share-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tag-color, var(--color-accent));
}

.tag-share small {
  min-width: 38px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.reports-tag-customers {
  display: grid;
}

.reports-tag-customer {
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--color-border);
}

.reports-tag-customer:first-child {
  border-top: 0;
  padding-top: 0;
}

.reports-tag-customer-head {
  display: grid;
  gap: 1px;
}

.reports-tag-customer-head small {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

.reports-tag-customer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Admin > Einstellungen > Kunden-Tags */
.admin-tag-edit,
.admin-tag-merge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.admin-tag-edit input[type="color"] {
  width: 36px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

.admin-tag-edit input[type="text"] {
  flex: 1 1 160px;
  min-width: 0;
}

.admin-tag-merge select {
  flex: 1 1 140px;
  min-width: 0;
}

:root body .admin-tag-table td {
  height: auto;
  padding-block: 10px;
}

@media (max-width: 960px) {
  .reports-tags-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .customer-tag-row {
    flex-direction: column;
    align-items: stretch;
  }

  .customer-tag-row .tag-input {
    flex: none;
    width: 100%;
  }

  /* No hover on the phone: the field always shows its frame. */
  .customer-tag-row .tag-input:not(.is-readonly) .tag-input-box {
    border-color: var(--color-border-strong);
    background: var(--color-surface-subtle);
  }

  .tag-input-hint {
    display: none;
  }

  .customer-tag-filter {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-width: none;
    width: 100%;
  }

  .reports-tags-filter > * {
    flex: 1 1 100%;
  }


}

.customer-tag-row[hidden] {
  display: none;
}

/* The list hangs on <body> and is placed fixed below its field (JS sets top/left/width). */
:root body .tag-input-list {
  position: fixed;
  right: auto;
  margin-top: 0;
}

.reports-tags-shell .status:empty,
[data-settings-section-panel="tags"] .status:empty {
  display: none;
}

.reports-tag-table th:nth-child(3),
.reports-tag-table td:nth-child(3) {
  width: 45%;
}

/* No native clear button: Backspace and the chip × remove tags. */
.tag-input input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

.permission-toggle.is-placeholder {
  visibility: hidden;
}