:root {
  --nv-green: #2c8f5c;
  --nv-green-dark: #155435;
  --nv-bg: #f8f9fe;
  --nv-text: #1f2937;
  --nv-muted: #6b7280;

  --nv-primary: #00B5DE;
  --nv-primary-dark: #003E8A;
  --nv-secondary: #DADEE0;
  --nv-secondary-dark: #C4C8CC;
  --nv-success: #3ABD79;
  --nv-success-dark: #227D4F;
  --nv-warning: #FFC800;
  --nv-warning-dark: #EB8A02;
  --nv-danger: #FF6242;
  --nv-danger-dark: #8F0000;
  --nv-info: #42FFB0;
  --nv-info-dark: #008F77;

  --nv-primary-light: #4255FF;
  --nv-secondary-light: #CBCBD1;
  --nv-success-light: #28A667;
  --nv-warning-light: #FFC117;
  --nv-danger-light: #FF1717;
  --nv-info-light: #00BDB6;


  --nv-primary-super-light: #cfe6ff;
  --nv-secondary-super-light: #ededf2;
  --nv-success-super-light: #d5f7e6;
  --nv-warning-super-light: #ffefc2;
  --nv-danger-super-light: #ffdbdb;
  --nv-info-super-light: #d4fffe;
}

.account-body {
  background: var(--nv-bg);
  color: var(--nv-text);
  font-family: "Poppins", "Open Sans", system-ui, -apple-system, sans-serif;
}

.account-body .bg-green {
  background: linear-gradient(135deg, var(--nv-green) 0%, var(--nv-green-dark) 100%) !important;
}

.account-body .sidenav {
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.account-body .navbar-brand .brand-logo {
  height: 32px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
}

.account-body .sidenav .nav-link.active {
  background: rgba(44, 143, 92, 0.12);
  color: var(--nv-green);
}

.account-body .offcanvas-backdrop {
  z-index: 1035;
}

.account-body .offcanvas {
  z-index: 1045;
}

.account-body #sidenav-main {
  z-index: 1020;
}

.card-soft {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  background: #fff;
}

.option-card {
  border-radius: 0.9rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1.1rem 1.2rem;
  background: #ffffff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.option-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
}

.account-footer {
  font-size: 0.85rem;
  color: var(--nv-muted);
}

.account-footer-logo {
  height: 22px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}
.navbar-vertical.navbar-expand-xs .navbar-collapse {
  display: block;
  overflow: auto;
  height: calc(100vh - 180px);
}

.schedule-track {
  position: relative;
  height: 12px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.schedule-track--ticks::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to right,
    rgba(15, 23, 42, 0.2) 0,
    rgba(15, 23, 42, 0.2) 1px,
    transparent 1px,
    transparent calc(100% / 24)
  );
  pointer-events: none;
  opacity: 0.45;
}

.schedule-bars {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.schedule-week {
  display: grid;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.schedule-week__row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0.75rem;
  align-items: center;
}

.schedule-week__row--scale {
  align-items: flex-end;
}

.schedule-week__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nv-muted);
}

.schedule-week__bars {
  display: grid;
  gap: 0.5rem;
}

.schedule-week__divider {
  margin: 0.4rem 0 0.6rem;
  border-color: rgba(15, 23, 42, 0.08);
}

.schedule-track--empty {
  background: rgba(15, 23, 42, 0.04);
}

.schedule-scale {
  position: relative;
  height: 14px;
  font-size: 0.65rem;
  color: var(--nv-muted);
  margin-bottom: 0.4rem;
}

.schedule-scale--row {
  margin-bottom: 0.5rem;
}

.schedule-scale__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  line-height: 1;
}

.schedule-scale__tick.is-start {
  transform: translateX(0);
}

.schedule-scale__tick.is-end {
  transform: translateX(-100%);
}

@media (max-width: 640px) {
  .schedule-week__row {
    grid-template-columns: 1fr;
  }

  .schedule-week__label {
    margin-bottom: -0.2rem;
  }
}

.schedule-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--segment-color, linear-gradient(90deg, var(--nv-green) 0%, var(--nv-green-dark) 100%));
  border-radius: 999px;
}

.schedule-track--base {
  height: 18px;
  background: #ef4444 !important;
}

.schedule-segment--base {
  left: 0;
  width: 100%;
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
  padding: 0 6px;
}

.schedule-list {
  display: grid;
  gap: 0.75rem;
}

.schedule-list__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(15, 23, 42, 0.04);
}

.schedule-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dot-color, var(--nv-green));
  flex-shrink: 0;
}

.btn-primary {
  background: linear-gradient(90deg, var(--nv-primary) 0%, var(--nv-primary-dark) 100%);
  border-color: var(--nv-primary);
}
.btn-outline-primary {
  color: var(--nv-primary);
  border-color: var(--nv-primary);
  border: 2px solid var(--nv-primary);
}
.btn-primary:hover,.btn-outline-primary:hover {
  background: linear-gradient(90deg, var(--nv-primary-dark) 0%, var(--nv-primary-dark) 100%);
  border-color: var(--nv-primary-dark) !important;
  color: #fff !important;
}

.btn-secondary {
  background: linear-gradient(90deg, var(--nv-secondary) 0%, var(--nv-secondary-dark) 100%);
  border-color: var(--nv-secondary);
}
.btn-outline-secondary {
  color: var(--nv-secondary);
  border-color: var(--nv-secondary);
  border: 2px solid var(--nv-secondary);
} 
.btn-secondary:hover,.btn-outline-secondary:hover {
  background: linear-gradient(90deg, var(--nv-secondary-dark) 0%, var(--nv-secondary-dark) 100%);
  border-color: var(--nv-secondary-dark) !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(90deg, var(--nv-success) 0%, var(--nv-success-dark) 100%);
  border-color: var(--nv-success);
}
.btn-outline-success {
  color: var(--nv-success);
  border-color: var(--nv-success);
  border: 2px solid var(--nv-success);
}
.btn-success:hover,.btn-outline-success:hover {
  background: linear-gradient(90deg, var(--nv-success-dark) 0%, var(--nv-success-dark) 100%);
  border-color: var(--nv-success-dark) !important;
  color: #fff !important;
}

.btn-warning {
  background: linear-gradient(90deg, var(--nv-warning) 0%, var(--nv-warning-dark) 100%);
  border-color: var(--nv-warning);
}
.btn-outline-warning {
  color: var(--nv-warning);
  border-color: var(--nv-warning);
  border: 2px solid var(--nv-warning);
}
.btn-warning:hover,.btn-outline-warning:hover {
  background: linear-gradient(90deg, var(--nv-warning-dark) 0%, var(--nv-warning-dark) 100%);
  border-color: var(--nv-warning-dark) !important;
  color: #fff !important;
} 

.btn-danger {
  background: linear-gradient(90deg, var(--nv-danger) 0%, var(--nv-danger-dark) 100%);
  border-color: var(--nv-danger);
}
.btn-outline-danger {
  color: var(--nv-danger);
  border-color: var(--nv-danger);
  border: 2px solid var(--nv-danger);
}
.btn-danger:hover,.btn-outline-danger:hover {
  background: linear-gradient(90deg, var(--nv-danger-dark) 0%, var(--nv-danger-dark) 100%);
  border-color: var(--nv-danger-dark) !important;
  color: #fff !important;
}

.btn-info {
  background: linear-gradient(90deg, var(--nv-info) 0%, var(--nv-info-dark) 100%);
  border-color: var(--nv-info);
}
.btn-outline-info {
  color: var(--nv-info);
  border-color: var(--nv-info);
  border: 2px solid var(--nv-info);
}
.btn-info:hover,.btn-outline-info:hover {
  background: linear-gradient(90deg, var(--nv-info-dark) 0%, var(--nv-info-dark) 100%);
  border-color: var(--nv-info-dark) !important;
  color: #fff !important;
}
.alert-primary { 
  --bs-alert-color:  var(--nv-primary-dark);
  --bs-alert-bg:  var(--nv-primary-super-light);
  --bs-alert-border-color:  var(--nv-primary);
  background-image: var(--nv-primary-super-light);
}

.alert-secondary { 
  --bs-alert-color:  var(--nv-secondary-dark);
  --bs-alert-bg:  var(--nv-secondary-super-light);
  --bs-alert-border-color:  var(--nv-secondary);
  background-image: var(--nv-secondary-super-light);
}

.alert-success { 
  --bs-alert-color:  var(--nv-success-dark);
  --bs-alert-bg:  var(--nv-success-super-light);
  --bs-alert-border-color:  var(--nv-success);
  background-image: var(--nv-success-super-light);
}

.alert-warning { 
  --bs-alert-color:  var(--nv-warning-dark);
  --bs-alert-bg:  var(--nv-warning-super-light);
  --bs-alert-border-color:  var(--nv-warning);
  background-image: var(--nv-warning-super-light);
}

.alert-danger { 
  --bs-alert-color:  var(--nv-danger-dark);
  --bs-alert-bg:  var(--nv-danger-super-light);
  --bs-alert-border-color:  var(--nv-danger);
  background-image: var(--nv-danger-super-light);
}

.alert-info { 
  --bs-alert-color:  var(--nv-info-dark);
  --bs-alert-bg:  var(--nv-info-super-light);
  --bs-alert-border-color:  var(--nv-info);
  background-image: var(--nv-info-super-light);
}
.text-primary {
  color: var(--nv-primary-light) !important;
}
.text-secondary {
  color: var(--nv-secondary-light) !important;
}
.text-success {
  color: var(--nv-success-light) !important;
}
.text-warning {
  color: var(--nv-warning-light) !important;
}
.text-danger {
  color: var(--nv-danger-light) !important;
}
.text-info {
  color: var(--nv-info-light) !important;
}
.bg-primary {
  background: var(--nv-primary-light) !important;
}
.bg-secondary {
  background: var(--nv-secondary-light) !important;
}
.bg-success {
  background: var(--nv-success-light) !important;
}
.bg-warning {
  background: var(--nv-warning-light) !important;
}
.bg-danger {
  background: var(--nv-danger-light) !important;
}
.bg-info {
  background: var(--nv-info-light) !important;
}
.bg-primary-soft {
  background: var(--nv-primary-super-light) !important;
  color: var(--nv-primary-dark) !important;
}
.bg-secondary-soft {
  background: var(--nv-secondary-super-light) !important;
  color: var(--nv-secondary-dark) !important;
}
.bg-success-soft {
  background: var(--nv-success-super-light) !important;
  color: var(--nv-success-dark) !important;
}
.bg-warning-soft {
  background: var(--nv-warning-super-light) !important;
  color: var(--nv-warning-dark) !important;
}
.bg-danger-soft {
  background: var(--nv-danger-super-light) !important;
  color: var(--nv-danger-dark) !important;
}
.bg-info-soft {
  background: var(--nv-info-super-light) !important;
  color: var(--nv-info-dark) !important;
}
.form-control:focus {
  color:#495057;
  background-color:#fff;
  border-color: var(--nv-green);
}