/* General Dark Background */
body {
    background-color: #121212 !important; /* Dark background */
    color: #f8f9fa !important; /* Light text color */
  }
  
  /* Navbar */
  .navbar {
    background-color: #1e1e2f !important; /* Dark gray for navbar */
    color: #f8f9fa !important; /* Light text for navbar links */
  }
  
  .navbar .nav-link {
    color: #f8f9fa !important;
  }
  
  .navbar .nav-link:hover {
    color: #ffd700 !important; /* Gold hover effect */
  }
  
  /* Buttons */
  .btn-primary {
    background-color: #ffbf00 !important; /* Warm yellow */
    border-color: #ffbf00 !important;
    color: #000 !important; /* Dark text for contrast */
  }
  
  .btn-primary:hover {
    background-color: #ffd700 !important; /* Brighter yellow */
    border-color: #ffd700 !important;
  }
  
  .btn-secondary {
    background-color: #d9534f !important; /* Warm red */
    border-color: #d9534f !important;
    color: #fff !important;
  }
  
  .btn-secondary:hover {
    background-color: #e74c3c !important; /* Bright red */
    border-color: #e74c3c !important;
  }
  
  /* Links */
  a {
    color: #f8c471 !important; /* Warm orange */
  }
  
  a:hover {
    color: #ffd700 !important; /* Gold hover effect */
  }
  
  /* Cards */
  .card {
    background-color: #1e1e2f !important; /* Darker gray for cards */
    border-color: #343a40 !important; /* Dark border */
    color: #f8f9fa !important;
  }
  
  .card-header {
    background-color: #2c2f33 !important; /* Slightly lighter dark gray */
    color: #f8f9fa !important;
  }
  
  .card-footer {
    background-color: #2c2f33 !important;
  }
  
  /* Alerts */
  .alert-primary {
    background-color: #ffbf00 !important;
    color: #000 !important;
  }
  
  .alert-danger {
    background-color: #d9534f !important;
    color: #fff !important;
  }
  
  .alert-success {
    background-color: #28a745 !important; /* Green */
    color: #fff !important;
  }
  
  .alert-warning {
    background-color: #ffc107 !important; /* Yellow */
    color: #000 !important;
  }
  
  /* Tables */
  .table {
    background-color: #1e1e2f !important;
    color: #f8f9fa !important;
  }
  
  .table thead th {
    background-color: #2c2f33 !important;
    color: #f8f9fa !important;
  }
  
  .table tbody tr {
    background-color: #121212 !important;
  }
  
  .table tbody tr:hover {
    background-color: #343a40 !important;
  }
  
  /* Forms */
  input,
  textarea,
  select {
    background-color: #1e1e2f !important;
    color: #f8f9fa !important;
    border: 1px solid #343a40 !important;
  }
  
  input::placeholder,
  textarea::placeholder {
    color: #f8c471 !important; /* Light orange placeholder */
  }
  
  /* Footer */
  footer {
    background-color: #1e1e2f !important;
    color: #f8f9fa !important;
  }
  
  /* Sidebar */
  .left-sidebar {
    background-color: #1e1e2f !important; /* Sidebar background */
    color: #1e1e2f !important;
    border-right: 1px solid #1e1e2f !important;
    height: 100%;
  }

  .left-sidebar .brand-logo {
    background-color: #1e1e2f !important;
    color: #f8f9fa !important;
  }

  .left-sidebar .sidebar-nav .sidebar-item a {
    color: #f8f9fa !important;
  }

  .left-sidebar .sidebar-nav .sidebar-item a:hover {
    color: #ffd700 !important; /* Gold hover effect */
  }

  .left-sidebar .sidebar-item {
    border-bottom: 1px solid #343a40 !important;
  }
  .app-header {
    background: #1e1e2f !important;

  }

  .left-sidebar .sidebar-nav .nav-small-cap {
    color: #ffbf00 !important; /* Yellow for section headings */
  }

  .left-sidebar .sidebar-nav .sidebar-item i {
    color: #f8f9fa !important;
  }

  .left-sidebar .sidebar-nav .sidebar-item a:hover i {
    color: #ffd700 !important; /* Gold hover effect for icons */
  }

  /* Close Button */
  .close-btn {
    color: #f8f9fa !important;
  }
/* Forms */
input,
textarea,
select {
  background-color: #1e1e2f !important;
  color: #f8f9fa !important;
  border: 1px solid #343a40 !important;
  padding: 10px;
  border-radius: 5px;
}

input::placeholder,
textarea::placeholder {
  color: #f8c471 !important; /* Light orange placeholder */
}

label {
  color: #f8f9fa !important;
  font-weight: bold;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #ffd700 !important; /* Gold border on focus */
  outline: none !important;
}

/* Active Sidebar Item */
.sidebar-item.active > .sidebar-link {
  background-color: #343a40 !important; /* Active item background */
  color: #ffd700 !important; /* Gold text color for active items */
}

.sidebar-item.active > .sidebar-link:hover {
  color: #fff !important; /* White text when hovering over active item */
}
@media (max-width: 767px) {
  .card-body {
    padding: 10px;
  }
  .total-users-count, .total-ads-count, .total-inflow-count, .total-outflow-count {
    font-size: 1.5rem; /* Slightly smaller text on smaller screens */
  }
}

/* Adjusting for extra small screens (Mobile) */
@media (max-width: 576px) {
  .col-md-3 {
    flex: 0 0 100%; /* Full width on mobile */
    max-width: 100%;
  }

  .total-users-count, .total-ads-count, .total-inflow-count, .total-outflow-count {
    font-size: 1.2rem; /* Smaller font size for mobile */
  }
}
  /* Overriding Bootstrap Colors */
  :root {
    --bs-primary: #ffbf00; /* Warm yellow */
    --bs-secondary: #d9534f; /* Warm red */
    --bs-success: #28a745; /* Green */
    --bs-danger: #e74c3c; /* Bright red */
    --bs-warning: #ffc107; /* Bright yellow */
    --bs-info: #17a2b8; /* Cyan */
    --bs-light: #f8f9fa; /* Light gray */
    --bs-dark: #121212; /* Dark background */
  }