/* --- Global loading overlay (route nav + clientside fetch) ---
 * Navy tint + opacity fade (always in the layout; never display-toggle,
 * which flashes). Spinner stays brand coral. */
.ds-global-loading-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-navy, #022438) 32%, transparent);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

body.ds-route-loading .ds-global-loading-overlay,
body.ds-global-loading .ds-global-loading-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s linear 0s;
}

body.ds-route-loading .ds-global-loading-overlay .ds-loading-icon,
body.ds-global-loading .ds-global-loading-overlay .ds-loading-icon {
  animation:
    ds-loading-fade-in 0.28s ease both,
    ds-loading-spin 0.75s linear 0.12s infinite;
}

/* dcc.Loading custom_spinner — same navy tint + fade as global overlay */
.ds-dcc-fullscreen-spinner {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background: color-mix(in srgb, var(--color-navy, #022438) 32%, transparent);
  animation: ds-loading-fade-in 0.28s ease both;
}

.ds-dcc-fullscreen-spinner .ds-loading-icon {
  animation:
    ds-loading-fade-in 0.28s ease both,
    ds-loading-spin 0.75s linear 0.12s infinite;
}

/* Long-running work — centered scrim (template extract/save, etc.) */
.ds-work-loading-scrim {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-navy, #022438) 45%, transparent);
  pointer-events: all;
  animation: ds-loading-fade-in 0.28s ease both;
}

.ds-work-loading-scrim .ds-loading-icon {
  animation:
    ds-loading-fade-in 0.28s ease both,
    ds-loading-spin 0.75s linear 0.12s infinite;
}

.ds-loading-icon {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(252, 86, 86, 0.22);
  border-top-color: var(--ds-brass, #fc5656);
  border-radius: 50%;
  animation: ds-loading-spin 0.75s linear infinite;
}

@keyframes ds-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes ds-loading-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Page shell & visual breaks --- */
.ds-page-content {
  transition: opacity 0.28s ease;
}

body.ds-route-loading .ds-page-content {
  opacity: 0.35;
  pointer-events: none;
}
.ds-main .ds-page-content {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

@media (min-width: 768px) {
  .ds-main .ds-page-content {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.ds-navbar-brand-icon {
  color: var(--color-coral);
  font-size: var(--ds-text-large);
  vertical-align: -0.15em;
}

/* Vertical spacer — blank space between page sections. */
.ds-divider {
  display: block;
  height: 40px;
  margin: 1.75rem 0;
  border: none;
  background: none;
}

/* Tighter break between page title and body (half the default divider). */
.ds-divider--page-break {
  height: 20px;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Section title — optional leading icon (coral used sparingly). */
.ds-section-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ds-section-title--center {
  justify-content: center;
}

.ds-section-title .bi {
  color: var(--color-coral);
  font-size: var(--ds-text-large);
  opacity: 1;
}

/* Page intro block — onboarding / callout only */
.ds-page-intro {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(255, 252, 247, 0.9) 0%, var(--ds-parchment-mid) 100%);
  border: 1px solid var(--ds-parchment-shadow);
  border-left: 3px solid var(--color-navy);
  font-size: var(--ds-text-small);
  line-height: var(--ds-leading-body);
}

.ds-page-intro .bi {
  color: var(--color-navy);
  font-size: var(--ds-text-large);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.ds-page-intro p {
  margin: 0;
}

/* List rows — subtle icon column + clearer separation */
.ds-app .list-group-item {
  border-left: 3px solid transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.ds-app .list-group-item:hover {
  border-left-color: var(--color-navy);
}

/* Document / form cards — icon in header */
.ds-card-header-with-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ds-card-header-with-icon .bi {
  opacity: 0.9;
  font-size: var(--ds-text-large);
}

/* Progress row on document page */
.ds-progress-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ds-progress-row .bi {
  color: var(--color-navy);
  font-size: var(--ds-text-large);
  flex-shrink: 0;
}

.ds-progress-row .progress {
  flex: 1;
  margin-bottom: 0;
}

/* Terms & Conditions gate: scrollable agreement body so long legal
 * text stays contained above the accept controls. */
.ds-terms-body {
  max-height: 340px;
  overflow-y: auto;
  padding-right: 8px;
}