:root {
  --color-blue-900: #080f1e;
  --color-blue-800: #0a1628;
  --color-blue-700: #0d1e36;
  --color-blue-600: #132244;
  --color-blue-500: #1a3a6b;
  --color-blue-400: #234a8a;
  --color-blue-300: #3b6bb5;
  --color-blue-200: #6d9ed4;
  --color-blue-100: #b8d4f0;

  --color-black: #000;
  --color-white: #fff;
  --color-gray-50: #f5f6fa;
  --color-gray-100: #f0f1f5;
  --color-gray-200: #e4e6eb;
  --color-gray-300: #d1d4db;
  --color-gray-400: #a8adb8;
  --color-gray-500: #7c8291;
  --color-gray-600: #5a5f6e;
  --color-gray-700: #3d4250;
  --color-gray-800: #282c38;
  --color-gray-900: #1a1d26;

  --bg-page: #f5f6fa;
  --sidebar-width: 280px;
  --sidebar-rail: 84px;
  --topbar-height: 72px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

body {
  background: var(--bg-page) !important;
}

/* ========== TOPBAR ========== */
.topbar {
  background: var(--color-white) !important;
  border-bottom: 1px solid var(--color-gray-300) !important;
  color: var(--color-black) !important;
}

/* ========== SIDEBAR ========== */
#sidebar.sidebar,
.offcanvas,
.offcanvas-body,
.offcanvas .sidebar {
  background: var(--color-blue-800) !important;
  color: var(--color-blue-100) !important;
  border-right-color: var(--color-blue-700) !important;
}

#sidebar.sidebar {
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
}

#sidebar.sidebar.collapsed {
  width: var(--sidebar-rail) !important;
  min-width: var(--sidebar-rail) !important;
  max-width: var(--sidebar-rail) !important;
}

#content {
  margin-left: var(--sidebar-width) !important;
}

#sidebar.sidebar.collapsed ~ #content,
body.sidebar-is-collapsed #content {
  margin-left: var(--sidebar-rail) !important;
}

.sidebar-header,
.offcanvas-header {
  background: var(--color-blue-900) !important;
  border-bottom: 1px solid var(--color-blue-700) !important;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 18px 20px !important;
}

.sidebar-header h3,
.offcanvas-title {
  color: var(--color-white) !important;
  font-family: "Space Grotesk", "DM Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.sidebar-header h3 i,
.offcanvas-title i {
  color: var(--color-blue-300) !important;
}

.sidebar .components {
  padding: 14px 10px 22px !important;
  display: grid;
  gap: 4px;
}

.sidebar .components li {
  list-style: none;
  padding: 0 !important;
}

.sidebar .components a {
  min-height: 44px;
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 11px 14px !important;
  border-radius: var(--radius-md) !important;
  background: transparent !important;
  color: var(--color-blue-100) !important;
  font-weight: 600;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease;
}

.sidebar .components a:hover,
.sidebar .components a:focus {
  background: var(--color-blue-600) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-500) !important;
}

.sidebar .components a.active,
.sidebar .components a[aria-current="page"] {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-400) !important;
}

.sidebar .components a i {
  color: var(--color-blue-300) !important;
  width: 20px;
  text-align: center;
}

.sidebar .components a.active i,
.sidebar .components a:hover i {
  color: var(--color-white) !important;
}

.sidebar .collapse {
  margin: 6px 0 10px 18px !important;
  padding: 8px !important;
  border: 1px solid var(--color-blue-700) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--color-blue-700) !important;
}

.sidebar .collapse a {
  color: var(--color-blue-100) !important;
}

.sidebar .collapse a:hover {
  background: var(--color-blue-600) !important;
  color: var(--color-white) !important;
}

.sidebar .collapse a.active {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
}

.sidebar.collapsed .sidebar-header h3 span,
.sidebar.collapsed .components a span,
.sidebar.collapsed .dropdown-toggle::after,
.sidebar.collapsed .collapse {
  display: none !important;
}

.sidebar.collapsed .sidebar-header,
.sidebar.collapsed .components a {
  justify-content: center !important;
  padding-inline: 10px !important;
}

/* ========== PAGE ========== */
.page-header,
.card,
.filters-bar,
.table-responsive,
.modal-content,
.dropdown-menu,
.list-group-item,
.config-card,
.accordion-item {
  background: var(--color-white) !important;
  border-color: var(--color-gray-300) !important;
  box-shadow: 0 2px 8px rgba(10,22,40,0.06) !important;
}

.card-header,
.card-footer,
.modal-header,
.modal-footer {
  background: var(--color-white) !important;
  border-color: var(--color-gray-300) !important;
}

.table thead th {
  background: var(--color-blue-800) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-800) !important;
}

.table tbody tr:nth-child(even) td {
  background: var(--color-gray-50) !important;
}

/* ========== BUTTONS ========== */
.btn-primary,
.btn-info {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-500) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background: var(--color-blue-400) !important;
  border-color: var(--color-blue-400) !important;
}

.btn-dark,
#sidebarCollapse,
#sidebarCollapseDesktop {
  background: var(--color-blue-800) !important;
  color: var(--color-white) !important;
  border-color: var(--color-blue-800) !important;
}

.btn-dark:hover,
#sidebarCollapse:hover,
#sidebarCollapseDesktop:hover {
  background: var(--color-blue-600) !important;
  border-color: var(--color-blue-600) !important;
}

.btn-success {
  background: #1a7a3a !important;
  color: var(--color-white) !important;
  border-color: #1a7a3a !important;
}

.btn-success:hover {
  background: #145d2d !important;
}

.btn-danger {
  background: #c0392b !important;
  color: var(--color-white) !important;
  border-color: #c0392b !important;
}

.btn-danger:hover {
  background: #a93226 !important;
}

.btn-warning {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
  border: 1px solid var(--color-gray-400) !important;
}

.btn-secondary,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-dark,
.btn-light {
  background: var(--color-white) !important;
  color: var(--color-blue-800) !important;
  border: 1px solid var(--color-blue-800) !important;
}

.btn-outline-primary:hover,
.btn-outline-secondary:hover {
  background: var(--color-blue-50) !important;
  border-color: var(--color-blue-500) !important;
}

/* ========== LOGIN ========== */
.login-page {
  background: var(--color-blue-800) !important;
}

.login-shell {
  background: var(--color-white) !important;
  border-radius: var(--radius-xl) !important;
}

.login-showcase {
  background: var(--color-blue-800) !important;
  color: var(--color-white) !important;
}

.login-showcase * {
  color: var(--color-white) !important;
}

.login-brand-badge,
.login-highlight {
  background: var(--color-blue-700) !important;
  border-color: var(--color-blue-500) !important;
}

.login-card {
  background: var(--color-white) !important;
  color: var(--color-black) !important;
}

.login-card * {
  color: var(--color-black) !important;
}

/* ========== BADGES ========== */
.badge.bg-primary { background: var(--color-blue-500) !important; color: var(--color-white) !important; }
.badge.bg-success { background: #1a7a3a !important; color: var(--color-white) !important; }
.badge.bg-danger  { background: #c0392b !important; color: var(--color-white) !important; }
.badge.bg-warning { background: var(--color-white) !important; color: var(--color-blue-800) !important; border: 1px solid var(--color-blue-800) !important; }
.badge.bg-info    { background: var(--color-blue-500) !important; color: var(--color-white) !important; }
.badge.bg-secondary { background: var(--color-white) !important; color: var(--color-blue-800) !important; border: 1px solid var(--color-blue-800) !important; }

/* ========== RESPONSIVE ========== */
@media (max-width: 991.98px) {
  #sidebar.sidebar { display: none !important; }
  #content { margin-left: 0 !important; }
  #sidebar.sidebar.collapsed ~ #content { margin-left: 0 !important; }
  .login-shell { grid-template-columns: 1fr !important; }
}

@media (max-width: 767.98px) {
  .topbar-title-kicker { display: none !important; }
  .user-name-full { display: none !important; }
  .user-name-short { display: inline-block !important; }
}

.header-bg-override {
  background: var(--color-blue-800) !important;
  color: var(--color-white) !important;
}

.bg-primary {
  background: var(--color-blue-500) !important;
  color: var(--color-white) !important;
}