:root {
  /* Primary Colors */
  --deep-blue: #021da5;
  --vibrant-blue: #1571fe;
  --light-blue: #60a5fa;

  /* Secondary Colors */
  --success-green: #008d67;
  --light-green: #edfdfa;
  --warning-yellow: #c79700;
  --error-red: #d12626;
  --info-cyan: #11bce3;

  /* Background Colors */
  --light-bg: #f8fafc;
  --white: #ffffff;
  --dark-gray: #1f2937;
  --dark-gray1: #e3e3e3;
  --light-purple: #ebeeff;

  /* Text Colors */
  --dark-text: #111827;
  --medium-gray: #616161;
  --light-gray: #f5f5f5;
  --light-gray1: #bfbfbf;
}

/* Navbar styling */
.navbar {
  /*background: var(--deep-blue) !important; */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 3px solid var(--vibrant-blue);
  background: linear-gradient(to right, #021da5 0%, #00d5a0 100%);
  border-bottom: none;
}

.login__title {
  font-size: 28px;
}

/* Logo styling */
.navbar-brand img {
  height: 40px;
  max-width: 200px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .navbar-brand img {
    height: 30px;
  }
}

/* Cards styling */
.card {
  border: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s;
  /* border-top: 3px solid var(--vibrant-blue); */
  background: var(--white);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.cardone_wrap {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
}

.cardone {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 350px;
  height: 100px;
  padding: 25px;
  position: relative;
  background-color: #ffffff;
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
  .cardone {
    gap: 12px;
    padding: 10px;
  }
}

@media (max-width: 768px) {
  .cardone_img {
    width: 30px;
    height: 30px;
  }
}

.cardone_row {
  display: flex;
  flex-direction: column;
  height: 40px;
}

.cardone_title {
  font-size: 12px;
  color: black;
  font-weight: 500;
}

.cardone_subtitle {
  font-size: 22px;
  color: black;
  font-weight: bold;
  line-height: 15px;
}

@media (max-width: 767px) {
  .cardone_subtitle {
    font-size: 14px;
  }
}

.status_txt {
  font-size: 14px;
  position: absolute;
  right: 25px;
  bottom: 24px;
  color: #0b6efb;
}

@media (max-width: 767px) {
  .status_txt {
    position: absolute;
    bottom: 5px;
    right: 8px;
    font-size: 10px;
  }
}

/* Card Two */

.cardtwo_wrap {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
}

@media (max-width: 768px) {
  .cardtwo_wrap {
    display: flex;
    flex-direction: column;
  }
}

.cardtwo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  width: 350px;
  height: 100px;
  padding: 25px;
  position: relative;
  background-color: rgba(21, 113, 254, 10%);
  border-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  border: 2px solid #1571fe;
  cursor: pointer;
}

@media (max-width: 768px) {
  .cardtwo {
    width: 100%;
  }
}

.cardtwo:nth-child(2) {
  border: 2px solid #fdc106;
  background-color: rgba(253, 193, 6, 10%);
}
.cardtwo:nth-child(3) {
  border: 2px solid #11e3ab;
  background-color: rgba(17, 227, 171, 10%);
}

.cardtwo_row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.cardtwo_title {
  font-size: 22px;
  color: #1571fe;
  font-weight: 500;
}

.cardtwo_title1 {
  font-size: 22px;
  color: #000000;
  font-weight: 500;
}

.cardthree_wrap {
  display: flex;
  gap: 25px;
  margin-bottom: 25px;
  overflow-x: scroll;
}

/* Add gradient background to body */
body {
  background: var(--light-bg);
  min-height: 100vh;
  color: var(--dark-text);
}

/* Dashboard cards enhancement */
.dashboard-stat {
  border-left: 4px solid var(--vibrant-blue);
  background: var(--white);
}

/* Table enhancements */
.table {
  background-color: transparent;
  border-radius: 8px;
  overflow: hidden;
  border-collapse: separate;
}

/* Tables styling */
.table thead th {
  background-color: var(--light-gray);
  color: var(--medium-gray);
  border-radius: 0;
  border-width: 0;
  /* border-bottom: 2px solid var(--vibrant-blue); */
}

.table tbody tr:nth-child(even) {
  background-color: none;
}

.table tbody td {
  border-width: 0;
}

.table tbody tr:hover {
  background-color: rgba(96, 165, 250, 0.1);
}

/* Navigation active state */
.nav-item.active .nav-link {
  background-color: var(--vibrant-blue);
  color: var(--white) !important;
  border-radius: 4px;
}

/* Form controls */
.form-control {
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--dark-gray1);
  color: var(--dark-text);
}

.form-label {
  color: var(--medium-gray);
}

.form-select {
  background: transparent;
  border-radius: 8px;
  border: 1px solid var(--dark-gray1);
  color: var(--dark-text);
}

.form-control:focus {
  border-color: var(--vibrant-blue);
  box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

/* Status badges */
.badge.bg-success {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-green) !important;
  color: var(--success-green);
  width: 116px;
  height: 30px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .badge.bg-success {
    width: 80px;
    font-size: 12px;
  }
}

.badge.bg-warning {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 192, 8, 20%) !important;
  color: var(--warning-yellow);
  width: 116px;
  height: 30px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .badge.bg-warning {
    width: 80px;
    font-size: 12px;
  }
}

.badge.bg-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(255, 0, 0, 20%) !important;
  color: var(--error-red);
  width: 116px;
  height: 30px;
  font-size: 16px;
}

@media (max-width: 768px) {
  .badge.bg-danger {
    width: 80px;
    font-size: 12px;
  }
}

.badge.bg-info {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--info-cyan) !important;
  color: var(--white);
  width: 116px;
  height: 30px;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .badge.bg-info {
    width: 80px;
    font-size: 12px;
  }
}

.badge.bg-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--deep-blue) !important;
  color: var(--white);
  width: 116px;
  height: 30px;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .badge.bg-primary {
    width: 80px;
    font-size: 12px;
  }
}

.btn_wrap {
  display: flex;
  gap: 8px;
}

.badge.bg-secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-gray) !important;
  color: var(--medium-gray);
  width: 116px;
  height: 30px;
  font-size: 16px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .badge.bg-secondary {
    width: 80px;
    font-size: 12px;
  }
}

/* Buttons styling */
.btn-primary {
  background-color: var(--deep-blue);
  border-color: var(--deep-blue);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--deep-blue);
  border-color: var(--deep-blue);
}

.btn-secondary {
  background-color: var(--light-gray1);
  border-color: var(--light-gray1);
  color: var(--white);
}

.btn-primary:hover {
  background-color: var(--light-gray1);
  border-color: var(--light-gray1);
}

.btn-success {
  background-color: var(--success-green);
  border-color: var(--success-green);
  color: var(--white);
}

.btn-success:hover {
  background-color: #0d9488;
  border-color: #0d9488;
}

.btn-danger {
  background-color: var(--error-red);
  border-color: var(--error-red);
}

.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* Card headers */
.card-header {
  background-color: var(--white);
  color: var(--dark-text);
}

.cardheader_title {
  font-size: 18px;
  font-weight: 500;
  color: var(--medium-gray);
}

.btn_cm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 30px;
  gap: 2px;
  font-size: 12px;
  font-weight: 500;
  color: var(--deep-blue);
  background-color: var(--light-purple);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 3.2px;
}

.btn_cm:hover {
  color: var(--deep-blue);
}

/* Alerts */
.alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--success-green);
  color: var(--success-green);
}

.alert-warning {
  background-color: rgba(251, 191, 36, 0.1);
  border-color: var(--warning-yellow);
  color: var(--dark-text);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--error-red);
  color: var(--error-red);
}

.alert-info {
  background-color: rgba(6, 182, 212, 0.1);
  border-color: var(--info-cyan);
  color: var(--info-cyan);
}

/* Secondary text */
.text-muted {
  color: var(--medium-gray) !important;
}

/* Pagination */
.page-link {
  color: var(--vibrant-blue);
}

.page-item.active .page-link {
  background-color: var(--vibrant-blue);
  border-color: var(--vibrant-blue);
  color: var(--white);
}

.page-link:hover {
  background-color: var(--light-bg);
  color: var(--deep-blue);
}

/* Dropdown menus */
.dropdown-menu {
  background-color: var(--white);
  border: 1px solid var(--light-gray);
}

.dropdown-item:hover {
  background-color: var(--light-bg);
  color: var(--deep-blue);
}