/* 1. Root Colors */
:root {
  --primary: #2A3F54;     /* Dark navy for sidebar/nav */
  --secondary: #34495E;   /* Steel blue-gray for table headers */
  --accent: #1ABB9C;      /* Teal highlight / buttons */
  --link-blue: #1A82C3;   /* Link or info button color */
  --bg-color: #F7F7F7;    /* Background */
  --card-bg: #FFFFFF;     /* Cards */
  --text-color: #2F2F2F;  /* Main text */
}


/* 2. Body & Canvas */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1.6;
}

/* 3. Navbar */
.main-header {
  background-color: var(--primary) !important;
  border-bottom: 1px solid var(--secondary);
  color: #FFFFFF;
}
.brand-link,
.nav-link,
.navbar-text {
  color: #FFFFFF !important;
}
.nav-link:hover {
  background-color: var(--secondary) !important;
  border-radius: 5px;
}

/* 4. Sidebar */
.sidebar-dark-primary {
  background-color: var(--primary) !important;
}
.sidebar-dark-primary .nav-link {
  color: #FFFFFF !important;
  margin: 4px 8px;
  border-radius: 5px;
  transition: all 0.3s ease;
}
.sidebar-dark-primary .nav-link:hover {
  background-color: var(--secondary) !important;
}

/* 5. Cards & Forms */
.card,
.alert,
.table,
.form-control,
.breadcrumb,
.select2-selection,
.input-group-text,
.change-list .results {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.3s ease;
}
.form-control,
.select2-selection {
  background-color: #F9FAFB !important;
  caret-color: var(--accent);
}

/* 6. Buttons */
.btn-primary {
  background-color: var(--accent) !important;
  border: none !important;
  color: #FFFFFF !important;
  border-radius: 50px;
  padding: 0.6rem 1.6rem;
  box-shadow: 0 4px 10px rgba(23,162,184,0.3);
  transition: all 0.3s ease;
}
.btn-primary:hover {
  background-color: #138496 !important;
  box-shadow: 0 6px 14px rgba(23,162,184,0.4);
  transform: translateY(-2px);
}
.btn-success { background-color: var(--success) !important; color: #fff !important; }
.btn-warning { background-color: var(--warning) !important; color: #000 !important; }
.btn-danger  { background-color: var(--danger) !important; color: #fff !important; }

/* 7. Tables */
.table thead th,
.change-list table thead th,
.card .table thead th {
  background-color: var(--secondary) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  text-transform: uppercase;
  border-bottom: 2px solid var(--primary);
}
.table tbody tr:nth-child(odd),
.change-list table tbody tr:nth-child(odd) {
  background-color: #F9FAFB !important;
}
.table tbody tr:hover,
.change-list table tbody tr:hover {
  background-color: #E2E8F0 !important;
}

/* 8. Breadcrumb & Titles */
.breadcrumb {
  background-color: #FFFFFF !important;
  border-radius: 50px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--border-color);
}
.content-header h1,
.page-header h1 {
  color: var(--text-color) !important;
  font-weight: 700;
}

/* 9. Alerts */
.alert-success { background-color: var(--success) !important; color: #fff !important; }
.alert-warning { background-color: var(--warning) !important; color: #000 !important; }
.alert-danger  { background-color: var(--danger) !important; color: #fff !important; }

/* 10. Footer */
.main-footer {
  background-color: #FFFFFF !important;
  color: var(--text-color);
  border-top: 1px solid var(--border-color);
}

/* 11. Calm Mode */
body.calm .card,
body.calm .alert,
body.calm .table,
body.calm .form-control,
body.calm .breadcrumb,
body.calm .select2-selection {
  background-color: #E9EEF4 !important;
  border-color: var(--border-color) !important;
  opacity: 0.97;
}

/* 12. Misc Polishes */
.nav-link,
.btn {
  cursor: pointer;
  transition: all 0.3s ease;
}
.card,
.alert,
.table {
  will-change: transform, box-shadow;
}