:root {
  --brand-navy: #1a1f3c;
  --brand-navy-dark: #101429;
  --brand-gold: #e0c970;
  --brand-gold-dark: #c7ae51;
  --brand-gold-soft: #f8f3dc;
  --brand-page: #f6f6f2;
}

body {
  background: linear-gradient(180deg, #faf9f4 0%, var(--brand-page) 100%) !important;
  color: var(--brand-navy);
}

.card {
  border: 1px solid rgba(26, 31, 60, .08);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(26, 31, 60, .065);
}

.progress-bg {
  background: #f1eee2;
  border-radius: 999px;
  height: 10px;
}

.progress-bar {
  height: 10px;
  border-radius: 999px;
}

.small-muted {
  color: #6b7280;
  font-size: 0.95rem;
}

.stat {
  font-weight: 600;
}

.icon-circle {
  align-items: center;
  background: var(--brand-gold-soft);
  border-radius: 999px;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

select option {
  text-align: center;
}

#dashboard > header {
  border-bottom: 2px solid rgba(224, 201, 112, .72);
}

#loginScreen > .card {
  border-top: 4px solid var(--brand-gold);
}

.bg-blue-600,
.bg-violet-600,
.bg-indigo-600 {
  background-color: var(--brand-navy) !important;
}

.bg-blue-600:hover,
.bg-violet-600:hover,
.bg-indigo-600:hover {
  background-color: var(--brand-navy-dark) !important;
}

button.bg-blue-500,
button.bg-indigo-500 {
  background-color: var(--brand-navy) !important;
}

button.bg-blue-500:hover,
button.bg-indigo-500:hover {
  background-color: var(--brand-navy-dark) !important;
}

#refreshBtn,
#refreshBtnMobile,
#downloadPayslipBtn,
#changePwdBtn,
#updatePwdBtn,
#salaryDetailsBtn {
  background-color: var(--brand-gold) !important;
  color: var(--brand-navy) !important;
}

#refreshBtn:hover,
#refreshBtnMobile:hover,
#downloadPayslipBtn:hover,
#changePwdBtn:hover,
#updatePwdBtn:hover,
#salaryDetailsBtn:hover {
  background-color: var(--brand-gold-dark) !important;
}

.text-violet-600,
.text-violet-700,
.text-blue-600 {
  color: var(--brand-navy) !important;
}

.border-violet-300,
.border-violet-500,
.border-violet-600 {
  border-color: var(--brand-gold-dark) !important;
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: rgba(224, 201, 112, .72) !important;
}

.focus\:border-blue-500:focus {
  border-color: var(--brand-gold-dark) !important;
}

.bg-violet-50 {
  background-color: var(--brand-gold-soft) !important;
}

input.peer:checked + div {
  background-color: var(--brand-navy) !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(224, 201, 112, .62);
  outline-offset: 2px;
}