/* Global visual identity enforcement layer.
   Loaded after page styles so shared tokens remain the final authority. */

:root {
  --identity-brand: #69be28;
  --identity-brand-hover: #58a91f;
  --identity-brand-active: #427d15;
  --identity-accent: #2f6f8f;
  --identity-accent-hover: #255a76;
  --identity-warning: #d9901f;
  --identity-danger: #c84f4f;
  --identity-success: #4f9a68;
  --identity-info: #3c82a8;

  --identity-bg: #f5f8f4;
  --identity-bg-alt: #eef4f0;
  --identity-surface: #ffffff;
  --identity-surface-muted: #f7faf6;
  --identity-surface-hover: #edf6ea;
  --identity-border: #d7e3d2;
  --identity-border-strong: #a8c79a;
  --identity-text: #1f2d25;
  --identity-text-soft: #526358;
  --identity-text-muted: #708075;
  --identity-focus: rgba(105, 190, 40, 0.26);
  --identity-shadow-sm: 0 1px 3px rgba(31, 45, 37, 0.08);
  --identity-shadow-md: 0 8px 22px rgba(31, 45, 37, 0.1);
  --identity-shadow-lg: 0 18px 42px rgba(31, 45, 37, 0.14);

  --font-family-heading: var(--font-family-base);
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --card-border-radius: 8px;
  --modal-border-radius: 10px;

  --brand-primary: var(--identity-brand);
  --brand-primary-light: #82ce4c;
  --brand-primary-dark: var(--identity-brand-active);
  --brand-primary-contrast: #ffffff;
  --brand-secondary: var(--identity-accent);
  --brand-secondary-light: #d9ebf2;
  --brand-secondary-dark: var(--identity-accent-hover);

  --color-background: var(--identity-bg);
  --color-background-alt: var(--identity-bg-alt);
  --surface-primary: var(--identity-surface);
  --surface-secondary: var(--identity-surface-muted);
  --surface-tertiary: #e8efe6;
  --surface-hover: var(--identity-surface-hover);
  --text-primary: var(--identity-text);
  --text-secondary: var(--identity-text-soft);
  --text-muted: var(--identity-text-muted);
  --border-primary: var(--identity-border);
  --border-secondary: #c5d6bf;
  --border-light: #e7eee4;
  --border-focus: var(--identity-brand);

  --color-success: var(--identity-success);
  --color-success-light: #e4f3e8;
  --color-success-dark: #2d6d43;
  --color-warning: var(--identity-warning);
  --color-warning-light: #fff2d4;
  --color-warning-dark: #8a5a0d;
  --color-danger: var(--identity-danger);
  --color-danger-light: #f8dddd;
  --color-danger-dark: #8f2f2f;
  --color-info: var(--identity-info);
  --color-info-light: #e0f1f8;
  --color-info-dark: #245f7d;

  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-primary);
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);

  --shadow-sm: var(--identity-shadow-sm);
  --shadow-md: var(--identity-shadow-md);
  --shadow-lg: var(--identity-shadow-lg);
  --shadow-xl: 0 24px 54px rgba(31, 45, 37, 0.16);
  --card-shadow: var(--identity-shadow-md);
  --form-shadow-focus: 0 0 0 3px var(--identity-focus);
}

body.dark-mode,
.dark-mode {
  --identity-bg: #0f1512;
  --identity-bg-alt: #151d19;
  --identity-surface: #17211d;
  --identity-surface-muted: #1d2924;
  --identity-surface-hover: #24332d;
  --identity-border: #30433a;
  --identity-border-strong: #4f725f;
  --identity-text: #e8f0eb;
  --identity-text-soft: #b5c6bb;
  --identity-text-muted: #879a8f;
  --identity-focus: rgba(125, 183, 255, 0.34);
  --identity-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.38);
  --identity-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.46);
  --identity-shadow-lg: 0 22px 54px rgba(0, 0, 0, 0.58);

  --brand-primary: #79d65c;
  --brand-primary-light: #9be47f;
  --brand-primary-dark: #55b83e;
  --brand-primary-contrast: #101712;
  --brand-secondary: #7db7ff;
  --brand-secondary-light: rgba(125, 183, 255, 0.18);
  --brand-secondary-dark: #5a9fec;

  --color-background: var(--identity-bg);
  --color-background-alt: var(--identity-bg-alt);
  --surface-primary: var(--identity-surface);
  --surface-secondary: var(--identity-surface-muted);
  --surface-tertiary: #263830;
  --surface-hover: var(--identity-surface-hover);
  --text-primary: var(--identity-text);
  --text-secondary: var(--identity-text-soft);
  --text-muted: var(--identity-text-muted);
  --border-primary: var(--identity-border);
  --border-secondary: #263830;
  --border-light: #223129;
  --border-focus: #7db7ff;

  --color-success: #72d68d;
  --color-success-light: rgba(114, 214, 141, 0.16);
  --color-success-dark: #9be8af;
  --color-warning: #f0bd55;
  --color-warning-light: rgba(240, 189, 85, 0.16);
  --color-warning-dark: #ffe1a3;
  --color-danger: #f07a7a;
  --color-danger-light: rgba(240, 122, 122, 0.16);
  --color-danger-dark: #ffc6c6;
  --color-info: #7db7ff;
  --color-info-light: rgba(125, 183, 255, 0.16);
  --color-info-dark: #d3e7ff;

  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--text-primary);
  --bs-border-color: var(--border-primary);
  --bs-primary: var(--brand-primary);
  --bs-secondary: var(--brand-secondary);
  --bs-success: var(--color-success);
  --bs-warning: var(--color-warning);
  --bs-danger: var(--color-danger);
  --bs-info: var(--color-info);
}

body,
.app-body,
.app-container {
  background: linear-gradient(
    180deg,
    var(--color-background-alt) 0%,
    var(--color-background) 100%
  );
  color: var(--text-primary);
}

body::before,
body::after {
  display: none !important;
}

:where(h1, h2, h3, h4, h5, h6, .page-shell__title, .card-title, .form-title) {
  font-family: var(--font-family-heading);
  color: var(--text-primary);
  letter-spacing: 0;
}

:where(a:not(.btn)) {
  color: var(--brand-secondary);
}

:where(a:not(.btn)):hover,
:where(a:not(.btn)):focus {
  color: var(--brand-secondary-dark);
}

:where(
  .content-container,
  .form-container,
  .page-shell__masthead,
  .page-shell__surface,
  .card,
  .modal-content,
  .dropdown-menu,
  .list-group-item
) {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

:where(
  .content-container,
  .form-container,
  .page-shell__masthead,
  .page-shell__surface,
  .card
) {
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-shadow);
}

.page-shell__masthead,
.page-shell__surface {
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.84),
      rgba(255, 255, 255, 0.64)
    ),
    var(--surface-primary);
}

body.dark-mode .page-shell__masthead,
body.dark-mode .page-shell__surface,
body.dark-mode .content-container,
body.dark-mode .form-container,
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu,
body.dark-mode .list-group-item {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
  box-shadow: var(--card-shadow);
}

.page-shell__masthead::after,
.page-shell__surface::before,
.page-shell__masthead::before {
  display: none;
}

.page-shell__eyebrow {
  color: var(--brand-primary-dark);
  letter-spacing: 0.08em;
}

body.dark-mode .page-shell__eyebrow {
  color: var(--brand-primary-light);
}

:where(
  .form-control,
  .form-select,
  .team-select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="search"],
  input[type="url"],
  textarea,
  select
) {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  border-radius: var(--input-border-radius);
  color: var(--text-primary);
  box-shadow: none;
}

:where(
  .form-control,
  .form-select,
  .team-select,
  input,
  textarea,
  select
):focus {
  border-color: var(--border-focus);
  box-shadow: var(--form-shadow-focus);
  outline: none;
}

body.dark-mode
  :where(.form-control, .form-select, .team-select, input, textarea, select) {
  background-color: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

:where(.input-group-text) {
  border-color: var(--border-primary);
}

:where(.input-group-text) {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

:where(.modal-content) {
  border: 1px solid var(--border-primary);
  border-radius: var(--modal-border-radius);
  overflow: hidden;
}

:where(.modal-header) {
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-primary);
  color: var(--text-primary);
}

:where(.modal-title) {
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}

:where(.modal-body) {
  background: var(--surface-primary);
  color: var(--text-primary);
}

:where(.modal-footer) {
  background: var(--surface-secondary);
  border-top: 1px solid var(--border-primary);
}

:where(.modal-header .btn-close) {
  filter: none;
}

body.dark-mode :where(.modal-header .btn-close) {
  filter: invert(1) grayscale(100%);
}

:where(.btn) {
  border-radius: var(--btn-border-radius);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0;
}

.btn-primary,
.btn-success {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary-contrast) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-secondary,
.btn-info {
  background: var(--brand-secondary) !important;
  border-color: var(--brand-secondary) !important;
  color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-info:hover,
.btn-info:focus {
  background: var(--brand-secondary-dark) !important;
  border-color: var(--brand-secondary-dark) !important;
}

.btn-warning {
  background: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
  color: #1f2d25 !important;
}

.btn-danger {
  background: var(--color-danger) !important;
  border-color: var(--color-danger) !important;
  color: #ffffff !important;
}

.btn-outline-primary {
  color: var(--brand-primary-dark);
  border-color: var(--brand-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

:where(.table, table) {
  color: var(--text-primary);
  background: var(--surface-primary);
}

:where(.table-responsive) {
  border-color: var(--border-primary);
  scrollbar-color: var(--border-secondary) var(--surface-secondary);
}

:where(.table thead th, table thead th) {
  background: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

:where(.table tbody td, table tbody td) {
  border-color: var(--border-light);
  color: var(--text-primary);
}

:where(.table tbody tr:hover, table tbody tr:hover) {
  background: var(--surface-hover) !important;
}

:where(.table-striped > tbody > tr:nth-of-type(odd) > *) {
  --bs-table-accent-bg: var(--surface-secondary);
  color: var(--text-primary);
}

:where(.table-hover > tbody > tr:hover > *) {
  --bs-table-accent-bg: var(--surface-hover);
  color: var(--text-primary);
}

:where(.badge.bg-primary, .badge.text-bg-primary) {
  background: var(--brand-primary) !important;
  color: #ffffff !important;
}

:where(.badge.bg-secondary, .badge.text-bg-secondary) {
  background: var(--brand-secondary) !important;
  color: #ffffff !important;
}

:where(.badge.bg-success, .badge.text-bg-success) {
  background: var(--color-success) !important;
}

:where(.badge.bg-warning, .badge.text-bg-warning) {
  background: var(--color-warning) !important;
  color: #1f2d25 !important;
}

:where(.badge.bg-danger, .badge.text-bg-danger) {
  background: var(--color-danger) !important;
}

:where(.badge.bg-info, .badge.text-bg-info) {
  background: var(--color-info) !important;
  color: #ffffff !important;
}

:where(.alert-success) {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success-dark);
}

:where(.alert-info) {
  background: var(--color-info-light);
  border-color: var(--color-info);
  color: var(--color-info-dark);
}

:where(.alert-warning) {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning-dark);
}

:where(.alert-danger) {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger-dark);
}

.error-content {
  width: min(100%, 600px);
  margin: 0 auto;
  text-align: center;
}

.error-code {
  margin-bottom: var(--spacing-md);
  color: var(--brand-primary-dark);
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.error-title {
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: var(--font-weight-semibold);
}

.error-message {
  margin-bottom: var(--spacing-md);
  color: var(--text-secondary);
  font-size: var(--font-size-xl);
}

.error-description {
  margin-bottom: var(--spacing-xl);
  color: var(--text-secondary);
  line-height: 1.6;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-md);
}

.error-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 6.25rem;
  height: 6.25rem;
  margin-bottom: var(--spacing-xl);
  color: var(--brand-primary);
  opacity: 0.8;
}

.error-icon i {
  font-size: 6.25rem;
}

.error-icon-403,
.error-icon-400 {
  color: var(--color-danger);
}

.error-icon-500,
.error-icon-405 {
  color: var(--color-warning);
}

.site-banner {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  border-radius: var(--card-border-radius);
  color: var(--text-primary);
  box-shadow: var(--shadow-lg);
}

.site-banner-title,
.site-banner-icon {
  color: var(--brand-secondary);
}

.site-banner-message {
  color: var(--text-secondary);
}

.site-banner-close {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.site-banner-close:hover,
.site-banner-close:focus {
  background: var(--brand-primary);
  color: #ffffff;
}

.maintenance-banner {
  background: var(--color-warning-light);
  border-bottom-color: var(--color-warning);
  box-shadow: var(--shadow-md);
}

.maintenance-banner__icon,
.maintenance-banner__title,
.maintenance-banner__content,
.maintenance-banner__message {
  color: var(--color-warning-dark);
}

.maintenance-banner__message a {
  color: var(--brand-secondary);
}

.maintenance-banner__message a:hover,
.maintenance-banner__message a:focus {
  color: var(--brand-secondary-dark);
}

body.dark-mode .btn-warning {
  color: #101712 !important;
}

body.dark-mode .site-banner {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

body.dark-mode .site-banner-title,
body.dark-mode .site-banner-icon {
  color: var(--brand-primary-light);
}

body.dark-mode .site-banner-message {
  color: var(--text-secondary);
}

body.dark-mode .site-banner-close {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

body.dark-mode .site-banner-close:hover,
body.dark-mode .site-banner-close:focus {
  background: var(--brand-primary);
  color: #101712;
}

body.dark-mode .maintenance-banner {
  background: var(--color-warning-light);
  border-bottom-color: var(--color-warning);
}

body.dark-mode .maintenance-banner__icon,
body.dark-mode .maintenance-banner__title,
body.dark-mode .maintenance-banner__content,
body.dark-mode .maintenance-banner__message {
  color: var(--color-warning-dark);
}

@media (max-width: 768px) {
  .error-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .error-actions .btn {
    width: min(100%, 14rem);
    margin-inline: auto;
  }
}

/* =====================================================================
   Tabbed-modal error indicator
   When form submission returns validation errors, JS adds
   `.tab-has-errors` to every nav-tab whose pane contains an invalid
   field (plus a dot indicator). Designed to be theme-agnostic.
   ===================================================================== */
.nav-tabs .nav-link.tab-has-errors,
.nav-pills .nav-link.tab-has-errors {
  color: var(--color-danger, #dc3545) !important;
  border-bottom-color: var(--color-danger, #dc3545) !important;
  font-weight: var(--font-weight-semibold);
}

.nav-tabs .nav-link.tab-has-errors.active,
.nav-pills .nav-link.tab-has-errors.active {
  color: var(--color-danger, #dc3545) !important;
  border-color: var(--border-primary) var(--border-primary)
    var(--color-danger, #dc3545) !important;
  border-bottom-width: 2px !important;
  background-color: var(--color-danger-light, rgba(220, 53, 69, 0.08));
}

.nav-tabs .nav-link.tab-has-errors:hover,
.nav-tabs .nav-link.tab-has-errors:focus,
.nav-pills .nav-link.tab-has-errors:hover,
.nav-pills .nav-link.tab-has-errors:focus {
  color: var(--color-danger-dark, #a31621) !important;
  border-bottom-color: var(--color-danger-dark, #a31621) !important;
}

.nav-link.tab-has-errors .tab-error-indicator {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-left: 0.4em;
  background-color: var(--color-danger, #dc3545);
  border-radius: 50%;
  vertical-align: middle;
  animation: tab-error-pulse 1.4s ease-in-out infinite;
}

@keyframes tab-error-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.25);
    opacity: 0.75;
  }
}

body.dark-mode .nav-tabs .nav-link.tab-has-errors,
body.dark-mode .nav-pills .nav-link.tab-has-errors {
  color: #ff8a94 !important;
  border-bottom-color: #ff8a94 !important;
}

body.dark-mode .nav-tabs .nav-link.tab-has-errors.active,
body.dark-mode .nav-pills .nav-link.tab-has-errors.active {
  color: #ffb3b9 !important;
  background-color: rgba(255, 138, 148, 0.12);
  border-color: var(--border-primary) var(--border-primary) #ff8a94 !important;
}

body.dark-mode .nav-link.tab-has-errors .tab-error-indicator {
  background-color: #ff8a94;
}