:root {
  --pd-blue-900: #0f2f66;
  --pd-blue-800: #17448c;
  --pd-blue-700: #1f5bb8;
  --pd-blue-100: #edf4ff;
  --pd-red-700: #d5333f;
  --pd-red-600: #e04855;
  --pd-red-100: #ffecef;
}

body {
  font-family: "Kanit", "Noto Sans Thai", sans-serif;
  background: linear-gradient(135deg, #f6f9ff 0%, #ffffff 42%, #fff2f4 100%);
}

#content-wrapper {
  background: linear-gradient(160deg, rgba(15, 47, 102, 0.04) 0%, rgba(255, 255, 255, 1) 35%, rgba(213, 51, 63, 0.06) 100%);
}

.bg-gradient-primary {
  background-color: var(--pd-blue-800);
  background-image:
    radial-gradient(circle at 88% 12%, rgba(224, 72, 85, 0.38) 0, rgba(224, 72, 85, 0) 32%),
    linear-gradient(180deg, var(--pd-blue-800) 8%, var(--pd-blue-900) 100%);
}

.sidebar .sidebar-brand {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-dark .sidebar-heading {
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.08em;
}

.sidebar-dark .nav-item .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.sidebar-dark .nav-item .nav-link i,
.sidebar-dark .nav-item .nav-link[data-toggle="collapse"]::after {
  color: rgba(255, 255, 255, 0.72) !important;
}

.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item .nav-link:focus {
  color: #ffffff !important;
  background-color: rgba(224, 72, 85, 0.22);
  transform: translateX(2px);
}

.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item .nav-link:focus i,
.sidebar-dark .nav-item.active .nav-link,
.sidebar-dark .nav-item.active .nav-link i {
  color: #ffffff !important;
}

.sidebar .nav-item .collapse .collapse-inner {
  border: 1px solid rgba(23, 68, 140, 0.12);
}

.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  background-color: var(--pd-blue-100);
  color: var(--pd-blue-800);
}

.topbar {
  border-bottom: 2px solid rgba(213, 51, 63, 0.28);
}

.topbar .nav-item .nav-link {
  color: #3d4a5f;
}

.card,
.dropdown-menu,
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 0.7rem;
}

.card {
  border: 1px solid rgba(23, 68, 140, 0.1);
  box-shadow: 0 0.55rem 1.6rem rgba(15, 47, 102, 0.09);
}

.btn-primary {
  color: #fff;
  background: linear-gradient(120deg, var(--pd-blue-700) 0%, var(--pd-blue-800) 72%, var(--pd-red-700) 100%);
  border-color: var(--pd-blue-800);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background: linear-gradient(120deg, var(--pd-blue-800) 0%, var(--pd-blue-900) 60%, var(--pd-red-700) 100%);
  border-color: var(--pd-blue-900);
}

.btn-success {
  background-color: var(--pd-red-700);
  border-color: var(--pd-red-700);
}

.btn-success:hover,
.btn-success:focus {
  background-color: #b92734;
  border-color: #b92734;
}

.form-control:focus {
  border-color: rgba(31, 91, 184, 0.45);
  box-shadow: 0 0 0 0.2rem rgba(31, 91, 184, 0.2);
}

.text-primary,
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
.sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
  color: var(--pd-blue-800) !important;
}

#content a {
  color: var(--pd-blue-800);
}

#content a:hover {
  color: var(--pd-red-700);
}

.border-left-primary,
.border-bottom-primary {
  border-color: var(--pd-red-700) !important;
}

.scroll-to-top {
  background: linear-gradient(135deg, var(--pd-blue-800) 0%, var(--pd-red-700) 100%);
}

.scroll-to-top:focus,
.scroll-to-top:hover {
  background: linear-gradient(135deg, var(--pd-blue-900) 0%, #b92734 100%);
}

@media (max-width: 768px) {
  .sidebar .sidebar-brand .sidebar-brand-text {
    font-size: 0.95rem;
  }

  .topbar {
    border-bottom-width: 1px;
  }
}