/*
 * 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,
.asset-status-badge.muted,
.asset-status-badge.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-warten_auf_kunde {
  --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,
.status-badge.status-in_bearbeitung {
  --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-offen,
.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-danger); --tone-soft: var(--color-danger-soft); }
.project-status-summary-item.status-in_bearbeitung { --tone: var(--color-warning); --tone-soft: var(--color-warning-soft); }
.project-status-summary-item.status-warten_auf_kunde { --tone: var(--color-info); --tone-soft: var(--color-info-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-danger:hover {
  border-color: var(--color-danger);
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.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"] {
  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-tile {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.customer-operations-tile:hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

.customer-operations-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.customer-operations-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
}

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

.customer-operations-tile .status-pill {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
}

/* 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;
  }

  /* Ticket key figures: two per row instead of five stacked cards. */
  #mainContent#mainContent .operations-compact-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !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. */
@media (max-width: 640px) {
  #mainContent#mainContent .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---------------------------------------------------------------------------
 * 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.
 * ------------------------------------------------------------------------- */

/* Text links and sort headers: accent colour and underline. The id prefixes
   outrank older per-area colours for these links. */
:root body :is(.table-link, .asset-customer-link, .kpi-card__action, .table-sort-button, .sortable-header, .customer-recent-link, th > button):hover,
:root body :is(#dashboard, #customer-detail) :is(.table-link, .kpi-card__action):hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Cards and tiles that open something. */
:is(.customer-health-action, .project-card-link, .customer-operations-tile):hover {
  border-color: var(--color-border-strong);
  background: var(--color-surface-hover);
}

#customer-detail .customer-health-action {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Older rules force a transparent background with !important. */
:root body #customer-detail .customer-health-action:hover {
  background: var(--color-surface-hover) !important;
}

/* 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);
}