/* Brand theme tokens — light defaults on :root, dark overrides on .v-theme--dark */

:root,
.v-theme--light {
  --ye-brand: #003b6f;
  --ye-brand-hover: #002a50;
  --ye-brand-pressed: #002147;
  --ye-brand-on: #ffffff;
  --ye-accent: #2563eb;
  --ye-accent-muted: #64748b;
  --ye-hero-bg: #003b6f;
  --ye-hero-shadow: 0 10px 30px -5px rgba(0, 59, 111, 0.4);
  --ye-hero-subtitle: rgba(255, 255, 255, 0.85);
  --ye-badge-bg: #003b6f;
  --ye-badge-border: #003b6f;
  --ye-badge-text: #ffffff;
  --ye-focus-ring: rgba(0, 59, 111, 0.2);
  --ye-paginator-active: #003b6f;
  --ye-paginator-active-text: #ffffff;
  --ye-paginator-active-border: transparent;
  --ye-slug-text: #475569;
  --ye-nav-active-icon: rgb(0, 59, 111);
  --ye-hover-surface: #eff6ff;
  --ye-hover-text: #003b6f;
}

.v-theme--dark,
.v-application.v-theme--dark {
  --ye-brand: #7ba4d4;
  --ye-brand-hover: #96b8e0;
  --ye-brand-pressed: #5e8fc7;
  --ye-brand-on: #1a2030;
  --ye-accent: #8eb5e8;
  --ye-accent-muted: #94a3b8;
  --ye-hero-bg: linear-gradient(135deg, #2a3142 0%, #354456 48%, #3f556c 100%);
  --ye-hero-shadow: 0 10px 28px -6px rgba(0, 0, 0, 0.45);
  --ye-hero-subtitle: rgba(230, 236, 245, 0.88);
  --ye-badge-bg: #4a6d94;
  --ye-badge-border: #5a7fa8;
  --ye-badge-text: #f0f4f8;
  --ye-focus-ring: rgba(123, 164, 212, 0.35);
  --ye-paginator-active: rgba(255, 255, 255, 0.12);
  --ye-paginator-active-text: #e2e8f0;
  --ye-paginator-active-border: rgba(255, 255, 255, 0.2);
  --ye-slug-text: #94a3b8;
  --ye-nav-active-icon: #8eb5e8;
  --ye-hover-surface: rgba(255, 255, 255, 0.08);
  --ye-hover-text: #cbd5e1;
}

/* PrimeVue — use brand tokens (App.vue sets light; dark inherits from .v-theme--dark) */
.v-theme--dark {
  --p-primary-color: var(--ye-brand) !important;
  --p-primary-hover-color: var(--ye-brand-hover) !important;
  --p-primary-active-color: var(--ye-brand-pressed) !important;
  --p-primary-contrast-color: var(--ye-brand-on) !important;
  --p-highlight-background: var(--ye-paginator-active) !important;
  --p-highlight-color: var(--ye-paginator-active-text) !important;
  --p-highlight-focus-background: rgba(255, 255, 255, 0.16) !important;
  --p-highlight-focus-color: var(--ye-paginator-active-text) !important;
  --p-checkbox-checked-background: var(--ye-brand) !important;
  --p-checkbox-checked-border-color: var(--ye-brand) !important;
  --p-checkbox-checked-hover-background: var(--ye-brand-hover) !important;
  --p-checkbox-checked-hover-border-color: var(--ye-brand-hover) !important;
  --p-checkbox-hover-border-color: var(--ye-brand) !important;
  --p-checkbox-focus-ring-color: var(--ye-focus-ring) !important;
  --p-toggleswitch-checked-background: var(--ye-brand) !important;
  --p-toggleswitch-checked-border-color: var(--ye-brand) !important;
  --p-toggleswitch-checked-hover-background: var(--ye-brand-hover) !important;
  --p-focus-ring-color: var(--ye-focus-ring) !important;
}

/* Navigation active state */
.v-application.v-theme--dark
  .layout-nav-type-vertical
  .layout-vertical-nav
  .nav-group
  .nav-group-children-wrapper
  .nav-group-children
  .nav-link
  .router-link-exact-active
  .nav-item-icon {
  color: var(--ye-nav-active-icon) !important;
}

/* PrimeVue primary buttons */
.v-application.v-theme--dark .action-button.p-button-primary:not(.p-button-outlined):not(.p-button-text),
.v-application.v-theme--dark .p-button.p-button-primary:not(.p-button-outlined):not(.p-button-text) {
  background: var(--ye-brand) !important;
  border-color: var(--ye-brand) !important;
  color: var(--ye-brand-on) !important;
}

.v-application.v-theme--dark .action-button.p-button-primary:not(.p-button-outlined):not(.p-button-text):hover,
.v-application.v-theme--dark .p-button.p-button-primary:not(.p-button-outlined):not(.p-button-text):hover {
  background: var(--ye-brand-hover) !important;
  border-color: var(--ye-brand-hover) !important;
}

.v-application.v-theme--dark .action-button.p-button-primary.p-button-outlined,
.v-application.v-theme--dark .p-button.p-button-primary.p-button-outlined {
  background: transparent !important;
  border-color: var(--ye-brand) !important;
  color: var(--ye-brand) !important;
}

.v-application.v-theme--dark .action-button.p-button-primary.p-button-outlined:hover,
.v-application.v-theme--dark .p-button.p-button-primary.p-button-outlined:hover {
  background: var(--ye-hover-surface) !important;
  border-color: var(--ye-brand-hover) !important;
  color: var(--ye-brand-hover) !important;
}

/* Checkboxes & toggles */
.v-application.v-theme--dark .p-checkbox:not(.p-disabled):has(.p-checkbox-input:hover) .p-checkbox-box {
  border-color: var(--ye-brand) !important;
}

.v-application.v-theme--dark
  .p-checkbox.p-highlight:not(.p-disabled):has(.p-checkbox-input:hover)
  .p-checkbox-box {
  background-color: var(--ye-brand-hover) !important;
  border-color: var(--ye-brand-hover) !important;
}

.v-application.v-theme--dark
  .p-toggleswitch.p-toggleswitch-checked:not(.p-disabled):hover
  .p-toggleswitch-slider {
  background: var(--ye-brand-hover) !important;
  border-color: var(--ye-brand-hover) !important;
}

.v-application.v-theme--dark .p-dropdown-item:not(.p-highlight):not(.p-disabled):hover,
.v-application.v-theme--dark .p-paginator-page:not(.p-highlight):hover {
  background-color: var(--ye-hover-surface) !important;
  color: var(--ye-hover-text) !important;
}

.v-application.v-theme--dark .p-focus,
.v-application.v-theme--dark .p-component:focus-visible,
.v-application.v-theme--dark .p-inputtext:focus,
.v-application.v-theme--dark .p-checkbox-box.p-focus,
.v-application.v-theme--dark .p-toggleswitch-slider:focus-visible {
  box-shadow: 0 0 0 2px var(--ye-focus-ring) !important;
  border-color: var(--ye-brand) !important;
}

/* Shared page buttons (programs, activities, pages, etc.) */
.v-application.v-theme--dark .create-button,
.v-application.v-theme--dark .create-button:hover {
  background-color: var(--ye-brand) !important;
  border-color: var(--ye-brand) !important;
  color: var(--ye-brand-on) !important;
}

.v-application.v-theme--dark .create-button:hover {
  background-color: var(--ye-brand-hover) !important;
  border-color: var(--ye-brand-hover) !important;
}

/* Table status badges & paginator */
.v-application.v-theme--dark .reusable-data-table-container .badge-active {
  background-color: var(--ye-badge-bg) !important;
  border-color: var(--ye-badge-border) !important;
  color: var(--ye-badge-text) !important;
}

/* Paginator active page — neutral in dark (not saturated blue) */
.v-application.v-theme--dark .reusable-data-table-container .p-paginator .p-paginator-page.p-highlight,
.v-application.v-theme--dark .reusable-data-table-container .p-paginator .p-paginator-page.p-paginator-page-selected,
.v-application.v-theme--dark .premium-datatable .p-paginator-page.p-highlight {
  background-color: var(--ye-paginator-active) !important;
  color: var(--ye-paginator-active-text) !important;
  border: 1px solid var(--ye-paginator-active-border) !important;
  box-shadow: none !important;
}

.v-application.v-theme--dark .reusable-data-table-container {
  --p-highlight-background: var(--ye-paginator-active) !important;
  --p-highlight-color: var(--ye-paginator-active-text) !important;
}

.v-application.v-theme--dark .reusable-data-table-container .p-checkbox:not(.p-disabled):has(.p-checkbox-input:checked) .p-checkbox-box,
.v-application.v-theme--dark .reusable-data-table-container .p-checkbox.p-highlight .p-checkbox-box {
  background: var(--ye-brand) !important;
  border-color: var(--ye-brand) !important;
}

/* Publish / draft action pills */
.v-application.v-theme--dark .action-btn-pill.p-button-primary,
.v-application.v-theme--dark .publish-draft-actions .p-button-primary {
  background: var(--ye-badge-bg) !important;
  border-color: var(--ye-badge-border) !important;
  color: var(--ye-badge-text) !important;
}

/* Vuetify primary buttons in dark mode */
.v-application.v-theme--dark .v-btn.bg-primary,
.v-application.v-theme--dark .v-btn.text-primary.v-btn--variant-elevated,
.v-application.v-theme--dark .v-btn.text-primary.v-btn--variant-flat {
  color: var(--ye-brand-on) !important;
}

.v-application.v-theme--dark button.v-btn.v-theme--dark.text-primary.v-btn--density-default {
  background: var(--ye-brand) !important;
  color: var(--ye-brand-on) !important;
}

.v-application.v-theme--dark button.v-btn.v-theme--dark.text-primary.v-btn--density-default:hover,
.v-application.v-theme--dark
  .v-card.v-theme--dark.v-card--density-default.v-card--variant-elevated
  button.v-btn.v-theme--dark.text-primary.v-btn--density-default:hover {
  background: var(--ye-brand-hover) !important;
}

.v-application.v-theme--dark
  .v-card.v-theme--dark.v-card--density-default.v-card--variant-elevated
  button.v-btn.v-theme--dark.text-primary.v-btn--density-default {
  background: var(--ye-brand) !important;
  color: var(--ye-brand-on) !important;
}

.v-application.v-theme--dark .action-button.p-button-secondary {
  background-color: #3c3d4f !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
}

.v-application.v-theme--dark .action-button.p-button-secondary:hover {
  background-color: #4a4b5e !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: #f1f5f9 !important;
}

.v-application.v-theme--dark .settings-container .sidebar-item.v-list-item--active,
.v-list-item.v-list-item--active.v-list-item--link.v-theme--dark.text-primary.v-list-item--density-compact {
  background: rgba(123, 164, 212, 0.22) !important;
}

.v-application.v-theme--dark .settings-container .v-list-item--active.sidebar-item .v-list-item-title.sidebar-title {
  color: var(--ye-brand) !important;
}

.v-application.v-theme--dark .account-add-menu-section button.v-btn.v-btn--icon.v-theme--dark.v-btn--density-default.v-btn--size-x-small.v-btn--variant-text:hover,
.account-add-menu-section button.v-btn.v-btn--icon.v-theme--dark.v-btn--density-default.v-btn--size-x-small.v-btn--variant-text:hover {
  background: var(--ye-brand) !important;
}

.v-application.v-theme--dark .form-builder-page .action-btn.add-btn:hover {
  background: var(--ye-brand);
  border-color: var(--ye-brand);
}

.v-application.v-theme--dark .layout-nav-type-vertical .layout-vertical-nav .nav-group.open .nav-group-label:has(+ .nav-group-children-wrapper > .nav-group-children > .nav-link > .router-link-exact-active) {
  background: rgba(123, 164, 212, 0.18);
}

.v-application.v-theme--dark .sidebar-card.info-card {
  background: rgba(123, 164, 212, 0.12) !important;
  border-color: rgba(123, 164, 212, 0.25) !important;
}

/* Listing pages: white card surfaces → dark surfaces */
.v-application.v-theme--dark .page-content {
  background: #2b2c40 !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35) !important;
}

.v-application.v-theme--dark .toolbar {
  background: #2b2c40 !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.v-application.v-theme--dark .reusable-data-table-container {
  --dt-action-hover-icon: var(--ye-accent);
  --dt-text-accent: var(--ye-slug-text);
}

/* Slug / mono links — never force bright blue in dark */
.v-application.v-theme--dark .reusable-data-table-container .dt-table-slug,
.v-application.v-theme--dark .reusable-data-table-container .text-blue-600,
.v-application.v-theme--dark .reusable-data-table-container [class*="text-blue"] {
  color: var(--ye-slug-text) !important;
}

/* Compact listing toolbars */
.v-application.v-theme--dark .toolbar,
.toolbar {
  padding: 0.75rem 1rem !important;
}

.v-application .hero-section {
  border-radius: 14px !important;
}

.v-application .create-button,
.v-application .action-button.size-medium {
  height: 32px !important;
  padding: 0 0.875rem !important;
  font-size: var(--ye-font-sm) !important;
}

.v-application.v-theme--dark .action-btn-draft,
.v-application.v-theme--dark .publish-draft-actions .action-btn-draft {
  background: #3c3d4f !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #e2e8f0 !important;
}

/* Dialog / panel headers that used solid navy */
.v-application.v-theme--dark .dialog-header-theme {
  background: var(--ye-hero-bg) !important;
}

.v-avatar.v-theme--dark.text-primary.v-avatar--density-default.v-avatar--variant-tonal {
  background: rgba(123, 164, 212, 0.25) !important;
  color: var(--ye-brand) !important;
}
