/* === General Color Variables === */
:root {
  --primary-blue: #002bbb;
  --primary-red: #e30613;
  --light-bg: #f7f9fc;
  --hover-bg: #eef1f8;
}

/* === Login Page === */
body.login {
  background-color: var(--light-bg);
}
body.login .form-signin {
  border: 2px solid var(--primary-blue);
  box-shadow: 0 0 15px rgba(0, 43, 187, 0.2);
}

/* === Top Navigation Bar === */
.navbar {
  background-color: var(--primary-blue);
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-toggle {
  color: white !important;
}
.navbar .nav-link:hover {
  background-color: var(--primary-red);
}

/* === Sidebar === */
.sidebar {
  background-color: var(--primary-red);
}
.sidebar .nav > li > a {
  color: white;
}
.sidebar .nav > li.active > a,
.sidebar .nav > li > a:hover {
  background-color: var(--primary-blue);
}

/* === Buttons === */
.btn-primary {
  background-color: var(--primary-blue);
  border-color: var(--primary-blue);
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primary-red);
  border-color: var(--primary-red);
}
.btn-danger {
  background-color: var(--primary-red);
  border-color: var(--primary-red);
}
.btn-danger:hover {
  background-color: #b3000f;
}

/* === Dashboard Boxes === */
.dashboard .panel {
  border-top: 3px solid var(--primary-blue);
}
.dashboard .panel:hover {
  border-top-color: var(--primary-red);
}

/* === Tables === */
.table thead {
  background-color: var(--primary-blue);
  color: white;
}
.table-hover tbody tr:hover {
  background-color: var(--hover-bg);
}

/* === Form Elements === */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 0.2rem rgba(0, 43, 187, 0.25);
}

/* === Modals === */
.modal-header {
  background-color: var(--primary-blue);
  color: white;
}
.modal-footer .btn {
  margin-left: 5px;
}

/* === Footer or Powered by === */
.footer {
  background-color: #222;
  color: #aaa;
  text-align: center;
  padding: 10px;
}

/* === Custom Scrollbar === */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--primary-blue);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-red);
}