:root {
  /* Apstar logo palette */
  --color-primary-400: #6dc55f;
  --color-primary-500: #52b348;
  --color-primary-600: #3f9438;
  --color-primary-rgb: 82, 179, 72;
  --color-secondary-400: #3b378c;
  --color-secondary-500: #29256f;
  --color-secondary-600: #211e5d;
  --color-secondary-rgb: 41, 37, 111;
  --color-accent-500: #f7b51f;
  --color-accent-600: #d99a0e;
  --color-accent-rgb: 247, 181, 31;
  --color-surface-50: #f7faf4;
  --color-ink-900: #16153f;
  --color-text-muted: #4b5563;

  /* Other colors */
  --color-success-500: #22c55e;
  --color-success-rgb: 34, 197, 94;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-rgb: 239, 68, 68;
  --color-warning-500: #f59e0b;
  --color-warning-rgb: 245, 158, 11;
  --color-border-subtle: #e5e7eb;
  --color-surface-muted: #f9fafb;
  --color-overlay-rgb: 0, 0, 0;
}

/* Theme-specific (still using Apstar Sacco by default) */
[data-theme="port_sacco"] {
  --color-primary-500: #52b348;
  --color-primary-400: #6dc55f;
  --color-primary-600: #3f9438;
  --color-primary-rgb: 82, 179, 72;
  --color-secondary-400: #3b378c;
  --color-secondary-500: #29256f;
  --color-secondary-600: #211e5d;
  --color-secondary-rgb: 41, 37, 111;
  --color-accent-500: #f7b51f;
  --color-accent-600: #d99a0e;
  --color-accent-rgb: 247, 181, 31;
}

/* Utility Classes */
.bg-theme-primary { background-color: var(--color-primary-500); }
.bg-theme-primary-light { background-color: var(--color-primary-400); }
.bg-theme-primary-dark { background-color: var(--color-primary-600); }
.bg-theme-secondary { background-color: var(--color-secondary-500); }
.bg-theme-accent { background-color: var(--color-accent-500); }



.text-theme-primary { color: var(--color-primary-500); }
.text-theme-primary-light { color: var(--color-primary-400); }
.text-theme-primary-dark { color: var(--color-primary-600); }


.text-theme-secondary { color: var(--color-secondary-500); }
.text-theme-accent { color: var(--color-accent-500); }
.text-theme-primary-light { color: var(--color-primary-400); }
.text-theme-primary-dark { color: var(--color-primary-600); }



.border-theme-primary { border-color: var(--color-primary-500); }
.border-theme-primary-light { border-color: var(--color-primary-400); }
.border-theme-primary-dark { border-color: var(--color-primary-600); }
.border-theme-secondary { border-color: var(--color-secondary-500); }
.border-theme-accent { border-color: var(--color-accent-500); }

.hover\:bg-theme-primary-hover:hover { background-color: var(--color-primary-600); }
.hover\:text-theme-primary:hover { color: var(--color-primary-500); }

.apstar-btn-primary {
  background: linear-gradient(135deg, var(--color-secondary-500), #34308a);
  color: #fff;
  box-shadow: 0 12px 28px rgba(41, 37, 111, 0.22);
}

.apstar-btn-primary:hover {
  background: linear-gradient(135deg, #211e5d, var(--color-secondary-500));
}

.apstar-btn-secondary {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
  color: #fff;
  box-shadow: 0 12px 28px rgba(82, 179, 72, 0.2);
}

.apstar-focus:focus {
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2);
  outline: none;
}

/* Shared staff module components */
.staff-page-heading {
  color: var(--color-ink-900);
  font-family: "Poppins", sans-serif;
}

.staff-tabs {
  border-color: rgba(var(--color-secondary-rgb), 0.12);
}

.staff-tab {
  color: var(--color-text-muted);
  min-width: 10rem;
}

.staff-tab:hover {
  color: var(--color-secondary-500);
  background: rgba(var(--color-secondary-rgb), 0.06);
}

.staff-tab-active,
.staff-action-primary,
.staff-leave-page .gradient-bg,
.staff-leave-page .stats-card,
.staff-leave-page .stats-card-blue,
.staff-leave-page .staff-submit {
  color: #fff;
  background: linear-gradient(135deg, var(--color-secondary-500), var(--color-secondary-400));
}

.staff-tab-active {
  box-shadow: 0 8px 20px rgba(var(--color-secondary-rgb), 0.22);
}

.staff-action-primary {
  box-shadow: 0 8px 18px rgba(var(--color-secondary-rgb), 0.18);
}

.staff-tab-active:hover,
.staff-action-primary:hover,
.staff-leave-page .staff-submit:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--color-secondary-600), var(--color-secondary-500));
}

.staff-section-marker {
  border-color: var(--color-primary-500);
}

.staff-section-icon {
  color: var(--color-primary-600);
  background: rgba(var(--color-primary-rgb), 0.12);
}

.staff-focus:focus,
.staff-leave-page .staff-field:focus {
  border-color: var(--color-primary-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
  outline: none;
}

.staff-leave-page .stats-card {
  transition: all 0.3s ease;
}

.staff-leave-page .stats-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(var(--color-secondary-rgb), 0.12);
}

.staff-leave-page .stats-card-green {
  background: linear-gradient(135deg, var(--color-primary-500), var(--color-primary-600));
}

.staff-leave-page .stats-card-orange {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
}

.staff-leave-page .stats-card-purple {
  background: linear-gradient(135deg, var(--color-secondary-400), var(--color-secondary-500));
}

.staff-leave-surface {
  background:
    radial-gradient(circle at 12% 8%, rgba(var(--color-accent-rgb), 0.12), transparent 26%),
    radial-gradient(circle at 88% 12%, rgba(var(--color-primary-rgb), 0.12), transparent 28%),
    var(--color-surface-50);
}

.staff-form-section {
  background: linear-gradient(
    135deg,
    rgba(var(--color-primary-rgb), 0.08),
    rgba(var(--color-secondary-rgb), 0.06)
  );
  border-color: rgba(var(--color-primary-rgb), 0.35);
}

.staff-form-icon {
  background: var(--color-secondary-500);
}

.sync-indicator::after,
.sync-status-success {
  background: var(--color-success-500);
}

.sync-status-success,
.sync-status-warning {
  color: #fff;
}

.sync-indicator.syncing::after,
.sync-status-warning {
  background: var(--color-warning-500);
}

.sync-indicator.error::after {
  background: var(--color-error-500);
}

.staff-leave-page .border-red-500 {
  border-color: var(--color-error-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.1) !important;
}

.staff-leave-page .border-green-500 {
  border-color: var(--color-success-500) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-success-rgb), 0.1) !important;
}

.staff-leave-page .error-modal {
  background: rgba(var(--color-overlay-rgb), 0.5);
}

.staff-leave-page .error-modal-header {
  background: linear-gradient(135deg, var(--color-error-500), var(--color-error-600));
}

.staff-leave-page .error-modal-footer {
  border-color: var(--color-border-subtle);
  background: var(--color-surface-muted);
}

/* Legacy Tailwind color compatibility for existing templates */
.bg-blue-500,
.bg-blue-600,
.bg-blue-700,
.hover\:bg-blue-700:hover {
  background-color: var(--color-secondary-500) !important;
}

.bg-green-500,
.bg-green-600,
.bg-emerald-500,
.hover\:bg-green-700:hover {
  background-color: var(--color-primary-500) !important;
}

.bg-orange-500,
.bg-orange-600,
.bg-yellow-500 {
  background-color: var(--color-accent-500) !important;
}

.bg-purple-500,
.bg-purple-600,
.bg-indigo-500 {
  background-color: var(--color-secondary-500) !important;
}

.text-blue-600,
.text-blue-700,
.hover\:text-blue-800:hover,
.text-purple-600,
.text-indigo-600 {
  color: var(--color-secondary-500) !important;
}

.text-green-600,
.text-emerald-600,
.hover\:text-green-600:hover {
  color: var(--color-primary-600) !important;
}

.text-orange-600,
.text-yellow-600 {
  color: var(--color-accent-600) !important;
}

.border-blue-500,
.border-green-500,
.border-purple-500,
.border-orange-500 {
  border-color: var(--color-primary-500) !important;
}

.focus\:ring-blue-500:focus,
.focus\:ring-green-500:focus,
.focus\:border-blue-500:focus {
  --tw-ring-color: rgba(82, 179, 72, 0.35) !important;
  border-color: var(--color-primary-500) !important;
}

.from-blue-600,
.from-purple-600,
.from-indigo-500 {
  --tw-gradient-from: var(--color-secondary-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(41, 37, 111, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-700,
.to-purple-700,
.to-purple-600 {
  --tw-gradient-to: #34308a var(--tw-gradient-to-position) !important;
}

.from-green-600,
.from-emerald-500 {
  --tw-gradient-from: var(--color-primary-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(82, 179, 72, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-green-700,
.to-emerald-600 {
  --tw-gradient-to: var(--color-primary-600) var(--tw-gradient-to-position) !important;
}

.from-orange-600 {
  --tw-gradient-from: var(--color-accent-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgba(247, 181, 31, 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-orange-700 {
  --tw-gradient-to: var(--color-accent-600) var(--tw-gradient-to-position) !important;
}