:root {
  --nby-dark: #211832;
  --nby-orange: #f05b2c;
  --nby-orange-light: #ff7c45;
  --nby-orange-dark: #d9491d;
  --nby-gray: #707e8b;
  --nby-bg: #f7f6f3;
}

body {
  background-color: var(--nby-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #2c2438;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: var(--nby-dark);
  letter-spacing: -0.02em;
}

a {
  color: var(--nby-orange);
}

a:hover {
  color: var(--nby-orange-dark);
}

.text-muted {
  color: var(--nby-gray) !important;
}

.nby-sidebar {
  min-height: 100vh;
  background-color: var(--nby-dark) !important;
  --bs-offcanvas-width: 240px;
}

.nby-sidebar .offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.nby-sidebar .nav-link {
  color: #c7bfd6;
}

.nby-sidebar .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.08);
}

.nby-sidebar .nav-link.active {
  color: #ffffff;
  background-color: var(--nby-orange);
}

.nby-brand {
  color: #ffffff;
  font-weight: 600;
}

.nby-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(33, 24, 50, 0.08);
}

.nby-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--nby-dark);
}

.nby-login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Brand buttons -------------------------------------------------------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--nby-orange);
  --bs-btn-border-color: var(--nby-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nby-orange-dark);
  --bs-btn-hover-border-color: var(--nby-orange-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nby-orange-dark);
  --bs-btn-active-border-color: var(--nby-orange-dark);
  --bs-btn-disabled-bg: var(--nby-orange);
  --bs-btn-disabled-border-color: var(--nby-orange);
  --bs-btn-focus-shadow-rgb: 240, 91, 44;
}

.btn-outline-primary {
  --bs-btn-color: var(--nby-orange);
  --bs-btn-border-color: var(--nby-orange);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--nby-orange);
  --bs-btn-hover-border-color: var(--nby-orange);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--nby-orange);
  --bs-btn-active-border-color: var(--nby-orange);
  --bs-btn-focus-shadow-rgb: 240, 91, 44;
}

.text-primary {
  color: var(--nby-orange) !important;
}

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

.border-primary {
  border-color: var(--nby-orange) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--nby-orange-light);
  box-shadow: 0 0 0 0.25rem rgba(240, 91, 44, 0.25);
}

.nav-pills .nav-link.active {
  background-color: var(--nby-orange);
}

.nby-card {
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(33, 24, 50, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: nbyFadeUp 0.4s ease both;
}

.nby-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(33, 24, 50, 0.14);
}

.row > *:nth-child(1) > .nby-card { animation-delay: 0s; }
.row > *:nth-child(2) > .nby-card { animation-delay: 0.05s; }
.row > *:nth-child(3) > .nby-card { animation-delay: 0.1s; }
.row > *:nth-child(4) > .nby-card { animation-delay: 0.15s; }

@keyframes nbyFadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.progress-bar {
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .nby-card {
    animation: none;
  }
  .nby-card,
  .progress-bar {
    transition: none;
  }
}