/* Prevent layout shift from scrollbar appearance */
html {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

/* Custom Enlighten colors as CSS variables */
:root {
  --brand-blue: #2A3A4D;
  --base-grey: #2A3A4D;
  --grey-2: #5D6977;
  --grey-3: #8F97A1;
  --light-grey: #E3E3E3;
  --heavy-grey: #E3E3E3;

  --base-green: #52C41A;
  --green-2: #73D13D;
  --green-3: #95DE64;

  --base-orange: #FEA932;
  --orange-2: #FBBC63;
  --orange-3: #F9CF93;

  --base-yellow: #FBDB58;
  --yellow-2: #F9E17F;
  --yellow-3: #F8E8A6;
}

/* Utility classes for custom colors */
.bg-brand-blue {
  background-color: var(--brand-blue) !important;
}

.bg-base-yellow {
  background-color: var(--base-yellow) !important;
}

.bg-base-green {
  background-color: var(--base-green) !important;
}

.bg-base-orange {
  background-color: var(--base-orange) !important;
}

.text-brand-blue {
  color: var(--brand-blue) !important;
}

/* Custom Enlighten component styles */
.sidebar-nav {
  background-color: var(--brand-blue) !important;
  color: white;
  min-height: 100vh;
  width: 16rem;
  position: fixed;
  left: 0;
  top: 0;
}

.metric-card {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

.dark-metric-card {
  background: linear-gradient(to bottom right, rgb(55 65 81), rgb(31 41 55));
  color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

.orange-metric-card {
  background: linear-gradient(to bottom right, rgb(251 146 60), rgb(249 115 22));
  color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}

.green-metric-card {
  background: linear-gradient(to bottom right, rgb(34 197 94), rgb(22 163 74));
  color: white;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  padding: 1.5rem;
}