.table-cell-value {
  display: block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

job-list .job-code-cell,
job-list .table-cell-value,
job-list td {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  max-width: 100%;
}


metric-card .metric-card-title,
metric-card .metric-card-value,
.metric-card h3,
.metric-card .h3 {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

.badge {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
  display: inline-block;
}

.text-truncate,
.text-truncate-safe {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  min-width: 0;
}

.user-content,
.job-description,
.remark-text,
conversation-channel .message-text {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
  max-width: 100%;
}


.btn-icon-sm,
.btn-sm.btn-icon,
.action-icon-btn {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dropdown-toggle,
[data-bs-toggle="dropdown"] {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  min-height: var(--touch-target-min);
  padding: var(--space-2-5) var(--space-3);
}

.pagination .page-link {
  min-height: var(--touch-target-min);
  min-width: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.form-check {
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}

.form-check-input {
  width: 20px;
  height: 20px;
  margin-top: 0;
  flex-shrink: 0;
}

.form-check-label {
  padding-left: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.btn-close {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

job-detail-page #actionButtons .btn,
job-detail-page #actionButtons flagship-button {
  min-height: var(--touch-target-min);
}

.jobs-filter-bar .btn,
.jobs-filter-bar .form-select,
.jobs-filter-bar .form-control {
  min-height: var(--touch-target-min);
}

.jobs-bulk-actions .btn,
.jobs-bulk-actions .form-check-input {
  min-height: var(--touch-target-min);
}

.jobs-code-scope .btn {
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-3);
}

.touch-target,
.btn.touch-target,
.form-select.touch-target,
.form-control.touch-target {
  min-height: calc(var(--touch-target-min) + 2px);
}

select.touch-target,
.form-select.touch-target {
  min-height: calc(var(--touch-target-min) + 4px);
}


*:focus-visible:not([data-route-focus-target="true"]) {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.15);
}

.btn:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.2);
}

.form-control:focus-visible,
.form-select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.15);
}

a:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  text-decoration: underline;
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.15);
}

a.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  display: inline-flex;
  align-items: center;
  background: var(--app-palette-navy);
  color: var(--app-palette-snow);
  max-width: calc(100vw - var(--space-4));
  min-height: var(--touch-target-min);
  z-index: var(--z-max);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-140%);
  transition: none;
}

a.skip-link:focus {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--app-palette-navy);
  color: var(--app-palette-snow);
  outline: 3px solid var(--app-palette-navy);
  outline-offset: 2px;
  text-decoration: none;
  box-shadow: 0 0 0 3px var(--app-palette-snow);
}

.nav-link:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 2px var(--color-brand-primary);
}

.form-check-input:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.2);
}

.card:focus-visible,
flagship-card:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(var(--color-brand-primary-rgb), 0.15);
}

[data-route-focus-heading="true"],
[data-route-focus-root="true"] {
  scroll-margin-top: calc(var(--navbar-height) + var(--space-4));
}

[data-route-focus-heading="true"]:focus,
[data-route-focus-heading="true"]:focus-visible,
[data-route-focus-root="true"]:focus,
[data-route-focus-root="true"]:focus-visible,
[data-route-focus-target="true"]:focus,
[data-route-focus-target="true"]:focus-visible {
  outline: none;
  box-shadow: none;
}


.text-muted,
.text-secondary,
small.text-muted,
.small.text-muted {
  color: var(--color-text-muted);
}

.text-disabled,
:disabled:not(.btn):not(.page-link),
[disabled]:not(.btn):not(.page-link),
.disabled:not(.btn) {
  color: var(--color-text-disabled);
  opacity: 0.7;
}

.form-control:disabled,
.form-select:disabled,
input:disabled,
select:disabled,
textarea:disabled {
  color: var(--color-text-disabled);
  background-color: var(--color-surface-muted);
  opacity: 1;
}

.btn:disabled,
.btn.disabled {
  background-color: var(--color-surface-muted);
  border-color: var(--color-surface-muted);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 1;
}

::placeholder {
  color: var(--color-text-disabled);
  opacity: 0.7;
}

.table td.text-muted,
.table th.text-muted {
  color: var(--color-text-muted);
}

.badge.bg-warning,
.bg-warning {
  color: var(--color-warning-text);
}

.badge.bg-info,
.bg-info {
  background-color: var(--color-info-700);
  color: var(--app-palette-black);
}

.badge.bg-success,
.bg-success {
  background-color: var(--color-success-700);
  color: var(--color-text-inverse);
}

.badge.bg-danger,
.bg-danger {
  background-color: var(--color-danger-700);
  color: var(--color-text-inverse);
}

.badge.bg-success-subtle,
.bg-success-subtle {
  color: var(--color-success-700);
  border-color: var(--color-success-700);
}

.badge.bg-warning-subtle,
.bg-warning-subtle {
  color: var(--color-warning-text);
  border-color: var(--color-warning-text);
}

.badge.bg-danger-subtle,
.bg-danger-subtle {
  color: var(--color-danger-700);
  border-color: var(--color-danger-700);
}

.text-success {
  color: var(--color-success-700);
}

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

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

.app-action-dialog-modal .modal-title.text-danger {
  color: var(--color-danger-700);
  --bs-danger-rgb: var(--color-danger-900-rgb);
}

.badge.bg-light {
  color: var(--color-text-on-light);
}


@media (width < 768px) {
  .full-width-mobile {
    width: 100%;
    max-width: 100%;
  }

  .jobs-filter-grid {
    flex-direction: column;
    align-items: stretch;
  }

  .jobs-filter-grid > * {
    width: 100%;
    max-width: 100%;
  }

  .btn-group {
    width: 100%;
    display: flex;
  }

  .btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
  }

  job-list .date-range-pill {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }

  job-list .date-range-pill input {
    min-width: 0;
    width: 100%;
  }

  #actionButtons {
    width: 100%;
  }

  #actionButtons .btn,
  #actionButtons flagship-button {
    width: 100%;
    justify-content: center;
  }

  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table th,
  .table td {
    min-width: 80px;
  }

  .job-code-cell {
    min-width: 120px;
  }
}


.table th {
  font-weight: var(--font-weight-semibold);
  text-align: left;
}

.table-hover tbody tr:hover {
  background-color: rgba(var(--color-brand-primary-rgb), 0.05);
  cursor: pointer;
}

.job-row-clickable {
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.job-row-clickable:hover {
  background-color: rgba(var(--color-brand-primary-rgb), 0.05);
}


.form-label.required::after,
label.required::after {
  content: " *";
  color: var(--color-danger);
  font-weight: var(--font-weight-bold);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-danger);
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23d90429'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23d90429' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}



@media print {
  *:focus-visible {
    outline: none;
    box-shadow: none;
  }

  body {
    color: var(--color-print-text);
    background: var(--color-print-bg);
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: var(--color-print-link);
  }

  a[data-spa="true"]::after {
    content: none;
  }
}


.conversation-message-content,
.message-content {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}