html {
  font-size: 100%;
  min-height: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--navy-900);
  background: var(--navy-50);
  font-family: var(--font-family-base);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-700);
}

.app-icon {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  padding: var(--control-padding);
  border: 0;
  border-radius: var(--radius-sm);
  font-weight: var(--weight-control);
  transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.btn-sm {
  min-height: var(--control-height);
  padding: 0.4rem var(--space-3);
}

.btn-primary {
  background: var(--brand-600);
  color: var(--surface);
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-700);
  color: var(--surface);
}

.btn-secondary {
  border: 1px solid var(--navy-300);
  background: var(--surface);
  color: var(--navy-700);
}

.btn-secondary:hover,
.btn-secondary:focus {
  border-color: var(--navy-400);
  background: var(--navy-100);
  color: var(--navy-900);
}

.btn-quiet {
  background: transparent;
  color: var(--navy-600);
}

.btn-quiet:hover,
.btn-quiet:focus {
  background: var(--navy-100);
  color: var(--navy-900);
}

.btn-danger {
  background: var(--danger-600);
  color: var(--surface);
}

.btn-danger:hover,
.btn-danger:focus {
  background: var(--danger-700);
  color: var(--surface);
}

.btn-danger-outline {
  border-color: var(--danger-100);
  background: var(--surface);
  color: var(--danger-600);
}

.btn-danger-outline:hover,
.btn-danger-outline:focus {
  border-color: var(--danger-600);
  background: var(--danger-50);
  color: var(--danger-600);
}

.app-shell {
  min-height: 100vh;
}

.app-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 1030;
  width: var(--sidebar-width);
  padding: var(--space-6) var(--space-4);
  overflow-y: auto;
  color: var(--surface);
  background: var(--navy-900);
}

.app-brand,
.auth-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-brand {
  padding: 0 var(--space-2) var(--space-7);
}

.app-brand-mark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: var(--control-height);
  height: var(--control-height);
  border-radius: var(--radius-md);
  background: var(--brand-500);
  color: var(--surface);
  font-size: var(--text-lg);
  font-weight: var(--weight-emphasis);
  box-shadow: var(--shadow-brand);
}

.app-brand-logo {
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border-radius: var(--radius-md);
  background: var(--navy-800);
}

.app-brand strong,
.auth-brand strong,
.app-brand small,
.auth-brand small {
  display: block;
}

.app-brand strong,
.auth-brand strong {
  line-height: 1.2;
}

.app-brand small,
.auth-brand small {
  margin-top: 0.15rem;
  color: var(--navy-400);
  font-size: var(--text-xs);
}

.app-navigation {
  display: grid;
  gap: 0.35rem;
}

.app-nav-section {
  margin: var(--space-5) var(--space-3) 0.4rem;
  color: var(--navy-500);
  font-size: var(--text-micro);
  font-weight: var(--weight-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--control-height);
  gap: var(--space-3);
  padding: 0.65rem var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--navy-300);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.app-nav-link:hover,
.app-nav-link:focus,
.app-nav-link.active {
  color: var(--surface);
  background: var(--navy-800);
}

.app-nav-link.active {
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.app-nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  color: var(--navy-400);
  font-size: var(--text-dialog-title);
}

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  min-height: 4.5rem;
  padding: var(--space-3) clamp(var(--space-4), 3vw, var(--space-9));
  border-bottom: 1px solid var(--navy-200);
  background: var(--surface-topbar);
  backdrop-filter: blur(12px);
}

.app-topbar-spacer {
  flex: 1;
}

.app-topbar {
  flex-wrap: wrap;
}

.language-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.language-selector [aria-pressed="true"] {
  background: var(--navy-100);
  color: var(--brand-700);
}

.auth-panel > .language-selector {
  margin-top: var(--space-5);
}

.app-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.app-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: var(--weight-emphasis);
}

.app-user-copy small,
.app-user-copy strong {
  display: block;
  line-height: 1.2;
}

.app-user-copy small {
  color: var(--navy-500);
  font-size: var(--text-micro);
}

.app-user-copy strong {
  max-width: 14rem;
  overflow: hidden;
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  var(--surface)-space: nowrap;
}

.app-menu-button,
.app-sidebar-overlay {
  display: none;
}

.app-content {
  width: min(100%, var(--content-width));
  margin: 0 auto;
  padding: var(--page-padding);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.page-header > div,
.details-list div,
.details-list dd,
.activity-item > div,
.app-confirm-dialog .modal-body > div,
.app-alert-content > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.page-header > .btn {
  flex-shrink: 0;
}

.content-card.app-form {
  width: 100%;
  max-width: var(--form-width);
}

.form-control,
.form-field,
.filter-search {
  min-width: 0;
}

.form-control,
.btn,
.icon-action {
  min-height: var(--control-height);
}

.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
}

.form-check label {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-height);
}

.page-header h1 {
  margin: 0;
  font-size: var(--text-page-title);
  font-weight: var(--weight-heading);
  letter-spacing: -0.025em;
}

.page-header p:not(.page-eyebrow) {
  max-width: 44rem;
  margin: 0.4rem 0 0;
  color: var(--navy-500);
}

.page-eyebrow {
  margin: 0 0 0.35rem;
  color: var(--brand-700);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-emphasis);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.content-card {
  min-width: 0;
  padding: var(--card-padding);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.content-card-meta {
  padding: var(--space-4) 0 var(--space-3);
  color: var(--navy-500);
  font-size: var(--text-help);
  font-weight: var(--weight-control);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--navy-200);
  flex-wrap: wrap;
}

.filter-search {
  flex: 1 1 22rem;
  max-width: 32rem;
}

.filter-select {
  flex: 0 1 13rem;
  min-width: 11rem;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  color: var(--navy-600);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  var(--surface)-space: nowrap;
}

.form-control {
  min-height: var(--control-height);
  padding: var(--input-padding);
  border: 1px solid var(--navy-300);
  border-radius: var(--radius-sm);
  color: var(--navy-900);
}

.form-control:focus {
  border-color: var(--brand-500);
  box-shadow: var(--input-focus-shadow);
}

.form-field {
  display: grid;
  align-content: start;
  gap: 0.4rem;
}

.form-field label,
.form-field .form-label {
  color: var(--navy-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.form-instructions {
  margin: 0 0 var(--space-4);
  color: var(--navy-500);
  font-size: var(--text-help);
}

.required-indicator {
  color: var(--danger-600);
  font-weight: var(--weight-emphasis);
}

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

.app-form-sections {
  display: grid;
  gap: var(--space-6);
}

.app-form-section {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.app-form-section + .app-form-section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-200);
}

.app-form-section legend {
  margin-bottom: var(--space-4);
  color: var(--navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
}

.app-form-section-secondary legend {
  margin-bottom: var(--space-2);
  color: var(--navy-600);
  font-size: var(--text-sm);
}

.app-form-section-secondary > .form-text {
  margin: 0 0 var(--space-4);
}

.text-pre-wrap {
  white-space: pre-wrap;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.choice-card {
  position: relative;
  min-width: 0;
}

.choice-card-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-height);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.choice-card-label:hover {
  border-color: var(--navy-400);
  background: var(--navy-50);
}

.choice-card-input:focus-visible + .choice-card-label {
  border-color: var(--brand-500);
  box-shadow: var(--input-focus-shadow);
}

.choice-card-input:checked + .choice-card-label {
  border-color: var(--brand-500);
  background: var(--brand-50);
  color: var(--brand-700);
}

.choice-card-check {
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 1.5rem;
  place-items: center;
  border: 1px solid var(--navy-300);
  border-radius: 50%;
  color: transparent;
  background: var(--surface);
}

.choice-card-input:checked + .choice-card-label .choice-card-check {
  border-color: var(--brand-600);
  color: var(--surface);
  background: var(--brand-600);
}

.function-assignment-list,
.function-detail-grid {
  display: grid;
  gap: var(--space-3);
}

.function-assignment,
.function-detail-card {
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.function-assignment:has([data-function-toggle]:checked) {
  border-color: var(--brand-300);
  background: var(--brand-50);
}

.function-assignment-heading,
.function-detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.function-assignment-heading .form-check {
  margin: 0;
}

.function-assignment-fields {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-200);
}

.function-detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.function-detail-card.is-inactive {
  background: var(--navy-50);
}

.function-detail-heading h3 {
  margin: 0;
  font-size: var(--text-base);
}

.function-detail-card .details-list {
  margin-top: var(--space-4);
}

.association-context {
  display: grid;
  min-height: var(--control-height);
  align-content: center;
  gap: 0.15rem;
  padding: var(--input-padding);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-sm);
  background: var(--navy-50);
}

.association-context strong {
  color: var(--navy-900);
}

.association-context small,
.entity-picker-option small {
  color: var(--navy-500);
}

.ts-wrapper {
  width: 100%;
  min-width: 0;
}

.ts-wrapper.single .ts-control {
  min-height: var(--control-height);
  align-items: center;
  padding: var(--input-padding);
  border-color: var(--navy-300);
  border-radius: var(--radius-sm);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--brand-500);
  box-shadow: var(--input-focus-shadow);
}

.ts-dropdown {
  border-color: var(--navy-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

.entity-picker-option {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
  padding-block: var(--space-1);
}

.entity-picker-option strong,
.entity-picker-option small {
  overflow-wrap: anywhere;
}

.ts-dropdown .active {
  color: var(--navy-900);
  background: var(--brand-50);
}

.ts-dropdown .no-results,
.ts-dropdown .spinner,
.ts-dropdown .loading-more-results,
.ts-dropdown .no-more-results {
  padding: var(--space-3) var(--space-4);
  color: var(--navy-500);
}

.section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.section-heading-row .section-title {
  margin-bottom: 0;
}

.section-description {
  margin: var(--space-2) 0 0;
  color: var(--navy-500);
}

.operational-overview-heading {
  align-items: flex-start;
}

.operational-overview-actions,
.operational-metrics {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.operational-scope-card,
.operational-location-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.operational-scope-card h3,
.operational-location-card h3,
.operational-section-heading h3 {
  margin: 0;
  font-size: var(--text-base);
}

.operational-scope-card p {
  margin: var(--space-1) 0 0;
  color: var(--navy-500);
}

.operational-scope-pending {
  background: var(--navy-50);
}

.operational-scope-list {
  display: block;
}

.operational-scope-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.operational-people-preview {
  margin-top: var(--space-3);
}

.operational-pending-equipment {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.operational-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.operational-location-list {
  display: grid;
  gap: var(--space-3);
}

.operational-location-copy {
  min-width: 0;
}

.operational-location-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--navy-900);
  font-weight: var(--weight-heading);
  text-decoration: none;
}

.operational-location-link:hover {
  color: var(--brand-700);
}

.operational-location-context {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
  color: var(--navy-500);
}

.operational-metric {
  display: grid;
  min-width: 7.5rem;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  color: var(--navy-700);
  text-decoration: none;
}

.operational-metric strong {
  color: var(--navy-900);
  font-size: var(--text-lg);
}

.operational-metric span {
  font-size: var(--text-caption);
}

a.operational-metric:hover,
a.operational-metric:focus-visible {
  background: var(--brand-50);
  color: var(--brand-700);
}

.related-record-list {
  display: grid;
  margin-top: var(--space-4);
}

.status-tone-info { background: var(--brand-50); color: var(--brand-700); }
.status-tone-warning { background: var(--warning-50, #fff7e6); color: var(--warning-700, #8a4b00); }
.status-tone-success { background: var(--success-50, #ecfdf3); color: var(--success-700, #067647); }
.status-tone-danger { background: var(--danger-50, #fff1f2); color: var(--danger-700, #b42318); }

.related-record {
  position: relative;
  min-width: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--navy-200);
  transition: background-color 0.15s ease;
}

.related-record:hover,
.related-record:focus-within {
  background: var(--navy-50);
}

.related-record-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--control-height);
  gap: var(--space-4);
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.related-record-link:hover {
  color: var(--navy-900);
}

.related-record-link:focus-visible {
  border-radius: var(--radius-sm);
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.related-record-summary,
.empty-inline {
  margin: 0.2rem 0 0;
  color: var(--navy-500);
}

.related-record-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.related-record-period {
  color: var(--navy-500);
  font-size: var(--text-caption);
}

.entity-reference-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.entity-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  min-height: var(--control-height);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-sm);
  background: var(--navy-50);
  color: var(--navy-900);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.entity-reference:hover {
  border-color: var(--navy-300);
  background: var(--brand-50);
  color: var(--navy-900);
}

.entity-reference:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.entity-reference-copy {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.entity-reference-label {
  color: var(--navy-500);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.entity-reference-value {
  overflow-wrap: anywhere;
  font-weight: var(--weight-semibold);
}

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

.form-actions,
.detail-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--navy-200);
}

.field-validation,
.field-validation-error {
  color: var(--danger-600);
  font-size: var(--text-caption);
}

.input-validation-error {
  border-color: var(--danger-600);
}

.validation-summary {
  display: none;
  margin-bottom: var(--space-4);
  padding: var(--feedback-padding);
  border: 1px solid var(--danger-100);
  border-radius: var(--radius-sm);
  background: var(--danger-50);
  color: var(--danger-600);
}

.validation-summary.validation-summary-errors {
  display: block;
}

.validation-summary ul {
  margin: 0;
  padding-left: 1.2rem;
}

.app-table {
  width: 100%;
  border-collapse: collapse;
}

.app-table th,
.app-table td {
  padding: var(--table-cell-y) var(--space-3);
  border-bottom: 1px solid var(--navy-200);
  vertical-align: middle;
}

.app-table td {
  min-width: 0;
  overflow-wrap: anywhere;
}

.app-table th {
  color: var(--navy-500);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-emphasis);
  letter-spacing: 0.05em;
  text-align: left;
  text-transform: uppercase;
}

.app-table th a {
  color: inherit;
  text-decoration: none;
}

.app-table tbody tr:hover {
  background: var(--navy-50);
}

.app-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-primary-link {
  display: inline-flex;
  align-items: center;
  gap: var(--control-gap);
  min-height: var(--control-height);
  color: var(--navy-900);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.table-primary-link:hover {
  color: var(--navy-900);
}

.record-row:focus-within {
  background: var(--navy-50);
}

.app-table .record-navigation-cell {
  width: 1%;
  padding-block: 0.4rem;
  text-align: right;
  var(--surface)-space: nowrap;
}

.record-navigation-cell .icon-action {
  font-size: var(--text-caption);
}

.record-disclosure-mobile {
  display: none;
}

.record-disclosure {
  font-size: 0.72em;
}

.table-actions {
  width: 1%;
  text-align: right !important;
  var(--surface)-space: nowrap;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--space-1) 0.65rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
}

.status-active {
  background: var(--success-50);
  color: var(--success-600);
}

.status-inactive {
  background: var(--navy-100);
  color: var(--navy-600);
}

.classification-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.classification-list-compact {
  gap: var(--space-1);
}

.classification-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: var(--space-1) 0.65rem;
  border: 1px solid var(--brand-100);
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
}

.empty-state {
  display: grid;
  justify-items: center;
  padding: clamp(var(--space-10), 8vw, 5rem) var(--space-4);
  text-align: center;
}

.empty-state-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: var(--text-xl);
}

.empty-state h2 {
  margin: 0;
  font-size: var(--text-subtitle);
}

.empty-state p {
  max-width: 28rem;
  margin: var(--space-2) 0 var(--space-5);
  color: var(--navy-500);
}

.app-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-200);
  color: var(--navy-500);
  font-size: var(--text-sm);
  flex-wrap: wrap;
}

.app-pagination .disabled {
  pointer-events: none;
  opacity: 0.45;
}

.app-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--feedback-padding);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
}

.app-alert-success {
  border: 1px solid var(--success-200);
  background: var(--success-50);
  color: var(--success-800);
}

.app-alert-danger {
  border: 1px solid var(--danger-100);
  background: var(--danger-50);
  color: var(--danger-800);
}

.app-alert button {
  border: 0;
  background: transparent;
  color: inherit;
}

.app-alert-content {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  min-width: 0;
}

.app-alert-content > .app-icon {
  margin-top: 0.18rem;
}

.app-alert-close,
.app-toast-close {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--control-height);
  height: var(--control-height);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  place-items: center;
}

.details-grid,
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.section-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
}

.details-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
}

.details-list div {
  display: grid;
  gap: 0.2rem;
}

.details-list dt {
  color: var(--navy-500);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.details-list dd {
  margin: 0;
  font-weight: var(--weight-semibold);
}

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

.record-meta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-1);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--navy-200);
  color: var(--navy-500);
  font-size: var(--text-caption);
}

.icon-action {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--control-height);
  height: var(--control-height);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--navy-500);
  text-decoration: none;
  place-items: center;
}

.icon-action:hover,
.icon-action:focus {
  background: var(--navy-100);
  color: var(--brand-700);
}

.record-meta .icon-action {
  margin-block: -0.7rem;
}

.activity-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-item {
  display: grid;
  grid-template-columns: 1rem 1fr;
  gap: var(--space-3);
  padding: 0 0 var(--space-6);
}

.activity-item:not(:last-child) {
  margin-left: 0.35rem;
  padding-left: 1.4rem;
  border-left: 2px solid var(--navy-200);
}

.activity-marker {
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.3rem;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--brand-500);
  box-shadow: 0 0 0 2px var(--brand-100);
}

.activity-item:not(:last-child) .activity-marker {
  margin-left: -1.85rem;
}

.activity-item p,
.activity-item small {
  display: block;
  margin: 0.2rem 0 0;
  color: var(--navy-500);
}

.app-confirm-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}

.app-confirm-dialog .modal-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-6);
}

.app-confirm-dialog .modal-title {
  font-size: var(--text-dialog-title);
  font-weight: var(--weight-heading);
}

.app-confirm-dialog p {
  margin: var(--space-2) 0 0;
  color: var(--navy-600);
}

.app-confirm-icon {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--danger-50);
  color: var(--danger-600);
  font-weight: var(--weight-emphasis);
  place-items: center;
}

.app-toast-host {
  z-index: 1090;
  width: min(100%, var(--toast-width));
  pointer-events: none;
}

.app-toast {
  border: 1px solid var(--navy-200);
  background: var(--surface-toast);
  color: var(--navy-800);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
}

.app-toast-success {
  border-color: var(--success-200);
}

.app-toast-content {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}

.app-toast-icon {
  color: var(--brand-600);
}

.app-toast-success .app-toast-icon {
  color: var(--success-600);
}

.dashboard-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}

.dashboard-card:hover {
  border-color: var(--brand-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-md);
}

.dashboard-card > span:nth-child(2) {
  flex: 1;
}

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

.dashboard-card small {
  margin-top: var(--space-1);
  color: var(--navy-500);
}

.dashboard-card-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-600);
  font-size: var(--text-icon-lg);
}

.auth-body {
  background: var(--navy-900);
}

.auth-shell {
  display: grid;
  min-height: 100vh;
  padding: var(--space-5);
  place-items: center;
}

.auth-panel {
  width: min(100%, var(--auth-width));
  padding: clamp(var(--space-6), 5vw, var(--space-9));
  border-radius: var(--radius-auth);
  background: var(--surface);
  box-shadow: var(--shadow-auth);
}

.auth-brand {
  margin-bottom: var(--space-9);
}

.auth-brand small {
  color: var(--navy-500);
}

.auth-copy {
  margin-bottom: var(--space-6);
}

.auth-copy h1 {
  margin: 0;
  font-size: var(--text-auth-title);
  font-weight: var(--weight-heading);
}

.auth-copy p {
  margin: var(--space-2) 0 0;
  color: var(--navy-500);
}

.auth-panel .app-form {
  display: grid;
  gap: var(--space-4);
}

@media (max-width: 991.98px) {
  .app-sidebar {
    transform: translateX(-100%);
    transition: transform 180ms ease;
  }

  .app-main {
    margin-left: 0;
  }

  .app-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-height);
    height: var(--control-height);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--navy-100);
    color: var(--navy-800);
    font-size: var(--text-lg);
  }

  .app-sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 1025;
    border: 0;
    background: var(--surface-overlay);
  }

  body.sidebar-open {
    overflow: hidden;
  }

  body.sidebar-open .app-sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .app-sidebar-overlay {
    display: block;
  }
}

@media (max-width: 767.98px) {
  .app-user-copy,
  .app-user-avatar {
    display: none;
  }

  .app-content {
    padding: var(--space-5) var(--space-4);
  }

  .page-header {
    align-items: stretch;
    flex-direction: column;
  }

  .page-header > .btn {
    width: 100%;
  }

  .operational-overview-heading,
  .operational-scope-card,
  .operational-location-card {
    align-items: stretch;
    flex-direction: column;
  }

  .operational-scope-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .operational-overview-actions,
  .operational-overview-actions .btn,
  .operational-metrics,
  .operational-metric {
    width: 100%;
  }

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

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

  .filter-search {
    flex-basis: auto;
    max-width: none;
  }

  .filter-select {
    width: 100%;
  }

  .form-grid,
  .details-grid,
  .details-list-columns,
  .entity-reference-grid,
  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .record-meta {
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .table-responsive {
    min-width: 0;
    overflow: visible;
  }

  .app-table,
  .app-table tbody,
  .app-table tr,
  .app-table td {
    display: block;
    width: 100%;
  }

  .app-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .app-table tbody {
    display: grid;
    gap: var(--space-3);
  }

  .app-table tbody tr {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 0.9rem;
    border: 1px solid var(--navy-200);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .app-table td {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.2rem;
    min-width: 0;
    padding: 0.45rem 0;
    border: 0;
    overflow-wrap: anywhere;
  }

  .app-table td::before {
    content: attr(data-label);
    color: var(--navy-500);
    font-size: var(--text-eyebrow);
    font-weight: var(--weight-heading);
    text-transform: uppercase;
  }

  .app-table .person-primary-cell {
    display: flex;
    padding: 0 0 0.7rem;
  }

  .app-table .person-primary-cell::before {
    display: none;
  }

  .app-table .record-navigation-cell {
    display: none;
  }

  .record-disclosure-mobile {
    display: inline-block;
  }

  .table-primary-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--control-height);
    gap: var(--space-4);
    color: var(--navy-900);
    font-size: var(--text-base);
    text-decoration: none;
  }

  .table-primary-link::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .app-table tbody tr:hover,
  .app-table tbody tr:has(.table-primary-link:focus-visible) {
    border-color: var(--navy-300);
    background: var(--navy-50);
  }

  .app-table tbody tr:has(.table-primary-link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .record-disclosure {
    color: var(--navy-500);
    font-size: var(--text-caption);
  }

  .related-record-list {
    gap: var(--space-3);
  }

  .related-record {
    overflow: hidden;
    padding: var(--space-4);
    border: 1px solid var(--navy-200);
    border-radius: var(--radius-md);
    background: var(--surface);
  }

  .related-record-link::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .related-record:hover,
  .related-record:has(.related-record-link:focus-visible) {
    border-color: var(--navy-300);
    background: var(--navy-50);
  }

  .related-record:has(.related-record-link:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: var(--focus-offset);
  }

  .related-record-link:focus-visible {
    outline: 0;
  }

  .form-actions,
  .detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-pagination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-3);
  }

  .app-pagination > span {
    grid-column: 1 / -1;
    grid-row: 1;
    text-align: center;
  }

  .app-confirm-dialog .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .app-confirm-dialog .modal-footer > .btn {
    margin-inline: 0;
    var(--surface)-space: normal;
  }

  .form-actions .btn,
  .detail-actions .btn,
  .detail-actions form,
  .detail-actions form .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* Daily service planning board. */
.planning-toolbar {
  margin-bottom: var(--space-4);
}

.planning-filter-form {
  display: grid;
  grid-template-columns: minmax(15rem, 1.2fr) minmax(14rem, 2fr) minmax(12rem, 1fr) minmax(10rem, 0.8fr) auto;
  gap: var(--space-4);
  align-items: end;
}

.planning-date-navigation,
.planning-filter-actions,
.planning-card-actions,
.planning-order-actions,
.planning-assignment-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.planning-date-navigation .form-control {
  min-width: 9.5rem;
}

.planning-day-button {
  min-width: var(--control-height);
  padding-inline: var(--space-3);
  font-size: var(--text-lg);
}

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

.planning-summary > div {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.planning-summary strong {
  color: var(--navy-900);
  font-size: var(--text-lg);
}

.planning-summary span {
  color: var(--navy-600);
  font-size: var(--text-sm);
}

.planning-board {
  display: grid;
  grid-auto-columns: minmax(18rem, 22rem);
  grid-auto-flow: column;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-1) var(--space-1) var(--space-4);
  scroll-snap-type: x proximity;
}

.planning-column {
  min-height: 28rem;
  padding: var(--space-3);
  border: 1px solid var(--navy-200);
  border-radius: var(--radius-lg);
  background: var(--navy-100);
  scroll-snap-align: start;
}

.planning-column-unassigned {
  background: var(--warning-50);
}

.planning-column-header {
  position: sticky;
  top: var(--space-2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--navy-200);
  background: inherit;
}

.planning-column-header h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
}

.planning-column-kicker {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--navy-500);
  font-size: var(--text-micro);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.planning-count {
  display: grid;
  min-width: 2rem;
  min-height: 2rem;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--navy-700);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.planning-column-estimate {
  display: block;
  margin-top: var(--space-1);
  color: var(--navy-600);
  font-size: var(--text-caption);
}

.planning-column-items {
  display: grid;
  align-content: start;
  min-height: 22rem;
  gap: var(--space-3);
}

.planning-column-items.is-drop-target {
  outline: 2px dashed var(--brand-500);
  outline-offset: var(--space-1);
  border-radius: var(--radius-md);
}

.planning-card {
  padding: var(--space-4);
  border: 1px solid var(--navy-200);
  border-left: 3px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

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

.planning-card.is-dragging {
  opacity: 0.45;
}

.planning-card-urgent {
  border-left-color: var(--danger-600);
}

.planning-card-request {
  border-left-style: dashed;
}

.planning-card-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.planning-card-topline,
.planning-card-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.planning-card-code {
  color: var(--brand-700);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.planning-card h3 {
  margin: var(--space-2) 0;
  color: var(--navy-900);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  overflow-wrap: anywhere;
}

.planning-card-title {
  color: inherit;
  text-decoration: none;
}

.planning-card-title:hover {
  text-decoration: underline;
}

.planning-card-title:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--brand-500);
  outline-offset: var(--space-1);
}

.planning-card-company,
.planning-card-meta {
  margin: 0 0 var(--space-1);
  color: var(--navy-600);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.planning-card-meta-row {
  margin-top: var(--space-3);
  color: var(--navy-500);
  font-size: var(--text-caption);
}

.planning-card-actions {
  align-items: stretch;
  flex-direction: column;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--navy-200);
}

.planning-order-actions {
  align-self: flex-end;
}

.planning-assignment-form .form-select {
  min-width: 0;
}

.planning-assignment-form label {
  color: var(--navy-600);
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.planning-empty {
  margin: var(--space-5) var(--space-2);
  color: var(--navy-500);
  font-size: var(--text-sm);
  text-align: center;
}

.planning-no-technicians {
  margin-top: var(--space-4);
}

@media (max-width: 75rem) {
  .planning-filter-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .planning-filter-actions {
    grid-column: 1 / -1;
  }
}

@media (max-width: 47.99rem) {
  .planning-filter-form,
  .planning-summary {
    grid-template-columns: minmax(0, 1fr);
  }

  .planning-filter-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .planning-board {
    display: grid;
    grid-auto-columns: minmax(85vw, 1fr);
  }
}