/* Components: reusable UI parts. */
.auth-card {
  width: 100%;
  max-width: 28rem;
}

/* Data tables: break at word boundaries (base.css breaks anywhere), scroll inside .table-responsive. */
.data-table th,
.data-table td {
  overflow-wrap: normal;
}

.data-table th,
.data-table .btn,
.data-table .badge {
  white-space: nowrap;
}

/* Cells with long unbreakable text (e-mail addresses): may break anywhere, so the row fits. */
.data-table td.cell-wrap {
  overflow-wrap: anywhere;
}

/* Containing block for .visually-hidden cells, so they cannot widen the page. */
.data-table-wrap {
  position: relative;
}

/* Customer pages (S1-04b). */
.min-w-0 {
  min-width: 0;
}

/* Tabs on narrow screens: one swipeable row inside the tab bar instead of wrapping. */
.tab-scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.tab-scroll .nav-link {
  white-space: nowrap;
}

/* Hierarchy list. */
.tree-root,
.tree-children {
  margin: 0;
}

.tree-children {
  padding-left: 1.25rem;
  border-left: 1px solid var(--bs-border-color);
  margin-left: 0.75rem;
}

.tree-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0;
}

.tree-toggle {
  flex: 0 0 auto;
}

.tree-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
  padding-top: 0.25rem;
}

.tree-hit {
  background-color: var(--bs-warning-bg-subtle);
  border-radius: 0.25rem;
  padding: 0 0.25rem;
}

.history-raw {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Touch targets (>= 44 px) on the customer pages, on narrow screens. */
@media (max-width: 767.98px) {
  body[data-page^="customer"] .btn,
  body[data-page^="customer"] .form-control,
  body[data-page^="customer"] .form-select,
  body[data-page^="customer"] .nav-link,
  body[data-page^="customer"] .navbar-toggler,
  body[data-page^="customer"] .list-group-item-action {
    min-height: 44px;
  }

  body[data-page^="customer"] .btn-close {
    min-width: 44px;
    min-height: 44px;
  }

  body[data-page^="customer"] .tree-toggle {
    min-width: 44px;
  }

  body[data-page^="customer"] .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding-left: 0;
  }

  body[data-page^="customer"] .form-check .form-check-input {
    float: none;
    margin: 0;
    width: 1.5rem;
    height: 1.5rem;
  }
}