/* Shared UI polish: skip link, focus-visible rings, empty states, toast region.
   Loaded by both _DashboardLayout and _Layout, after the theme stylesheets. */

/* ---- Skip to content ---- */
.skip-link {
  position: absolute;
  top: 0;
  left: 0.5rem;
  z-index: 2000;
  padding: 0.5rem 1rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-link-color, #1F4E3D);
  border: 2px solid var(--bs-link-color, #1F4E3D);
  border-radius: 0 0 0.4rem 0.4rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 0.15s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

main:focus {
  outline: none;
}

/* ---- Keyboard focus ---- */
:focus-visible {
  outline: 2px solid var(--brand-primary, #1F4E3D);
  outline-offset: 2px;
}

.icon-btn:focus-visible,
.sortable-th:focus-visible,
.sidebar-link:focus-visible,
.bottom-nav-item:focus-visible,
.job-card:focus-visible,
.job-card-mobile:focus-visible {
  outline: 2px solid var(--brand-primary, #1F4E3D);
  outline-offset: 2px;
  border-radius: 0.4rem;
}

/* Links/buttons inside the dark sidebar need a light ring */
.dashboard-sidebar :focus-visible {
  outline-color: #fff;
}

.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible {
  outline: 2px solid var(--brand-primary, #1F4E3D);
  outline-offset: 1px;
}

/* ---- Empty states ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.25rem 1rem;
  color: var(--bs-secondary-color, #6B6A61);
}

.empty-state-compact {
  padding: 1rem 0.75rem;
}

.empty-state-icon {
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bs-tertiary-bg, #F1EFE8);
  color: var(--bs-secondary-color, #6B6A61);
  font-size: 1.15rem;
  margin-bottom: 0.75rem;
}

.empty-state-compact .empty-state-icon {
  width: 2.25rem;
  height: 2.25rem;
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}

.empty-state-message {
  margin: 0 0 0.75rem;
  font-weight: 700;
  color: var(--brand-text, #24261F);
  font-size: 0.95rem;
}

.empty-state-compact .empty-state-message {
  margin-bottom: 0;
  font-size: 0.9rem;
}

.empty-state-hint {
  margin: -0.4rem 0 0.75rem;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, #6B6A61);
}

.empty-state td,
td > .empty-state {
  width: 100%;
}

/* ---- Toast region (server TempData + window.showToast) ---- */
.app-toast-region {
  position: fixed;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1090;
  width: min(92vw, 420px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.app-toast-region .toast {
  pointer-events: auto;
  width: 100%;
}

/* ---- Cross-field validation message spacing ---- */
.field-validation-error {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.85rem;
}

/* ---- Toolbar segmented view toggle (Board | List) ---- */
.view-toggle .btn.active {
  pointer-events: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}