:root {
    --bg-dark: #1a202c;
    --bg-light: #2d3748;
    --border-color: #4a5568;
    --text-primary: #f7fafc;
    --text-secondary: #a0aec0;
    --accent-primary: #4299e1;
    --status-ok: #48bb78;
    --status-warning: #ed8936;
    --status-critical: #f56565;
  }

  body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

  .card-dashboard {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    flex: 1; /* Added for equal height cards */
    display: flex; /* Added for equal height cards */
    flex-direction: column; /* Added for equal height cards */
    position: relative; /* Ensure stretched-link works correctly */
  }

  .section-title {
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--accent-primary);
    margin-bottom: 1rem;
    text-transform: uppercase;
  }

  .card-footer {
    position: relative;
    z-index: 1; /* Ensure the links are above other content */
  }

  /* Specific styles for the metric cards to retain their background colors */
  .card-metric {
    color: var(--text-primary) !important; /* Ensure text is primary color */
  }
  .card-metric .card-footer a {
    color: var(--text-primary) !important; /* Ensure link text is primary color */
  }

  /* Table styling for dark theme */
  .table {
    color: var(--text-primary);
  }
  .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05); /* Slightly lighter for stripe effect */
  }
  .table-bordered {
    border-color: var(--border-color);
  }
  .table-bordered th,
  .table-bordered td {
    border-color: var(--border-color);
  }
  .table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
  .table thead th {
    border-bottom: 2px solid var(--border-color);
  }

  /* Adjustments for layout */
  .row {
    display: flex;
    flex-wrap: wrap;
  }
  .col-xl-6,
  .col-lg-12,
  .col-xl-3,
  .col-md-6 {
    display: flex;
    flex-direction: column;
  }

  #map {
    width: 100%;
    min-height: 526px;
    height: 100%;
    background: grey; /* Keep original map background */
  }

/* SweetAlert2 Customization */
.swal2-popup {
  background-color: var(--bg-light) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.5rem !important;
}

.swal2-title {
  color: var(--text-primary) !important;
}

.swal2-html-container {
  color: var(--text-secondary) !important;
}

.swal2-confirm.swal2-styled,
.swal2-confirm.swal2-styled:focus {
  background-color: var(--accent-primary) !important;
  color: var(--bg-dark) !important;
  border: none !important;
  box-shadow: none !important;
}

.swal2-cancel.swal2-styled,
.swal2-cancel.swal2-styled:focus {
  background-color: var(--bg-dark) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: none !important;
}

.swal2-icon.swal2-error {
  border-color: var(--status-critical) !important;
  color: var(--status-critical) !important;
}

.swal2-icon.swal2-warning {
  border-color: var(--status-warning) !important;
  color: var(--status-warning) !important;
}

.swal2-icon.swal2-success {
  border-color: var(--status-ok) !important;
  color: var(--status-ok) !important;
}

.swal2-icon.swal2-success .swal2-success-line-tip,
.swal2-icon.swal2-success .swal2-success-line-long {
  background-color: var(--status-ok) !important;
}

/* Settings Page */
.card-settings .card-header {
    background-color: #1a202c;
    border-bottom: 1px solid #4a5568;
}

.card-settings .nav-tabs .nav-link {
    color: #a0aec0;
    border: none;
}

.card-settings .nav-tabs .nav-link.active {
    color: #f7fafc;
    background-color: #2d3748;
    border-bottom: 2px solid #4299e1;
}

.card-settings .card-body {
    background-color: #2d3748;
    color: #f7fafc;
}

.card-settings .form-control {
    background-color: #1a202c;
    color: #f7fafc;
    border: 1px solid #4a5568;
}

.card-settings .form-control:focus {
    background-color: #1a202c;
    color: #f7fafc;
    border-color: #4299e1;
    box-shadow: none;
}

.card-settings .form-control:disabled {
    background-color: #4a5568;
}

/* Login Page Specific Styles */
body#layoutAuthentication {
    background-color: var(--bg-dark);
    color: var(--text-primary);
}

.card.shadow-lg {
    background-color: var(--bg-light);
    border: 1px solid var(--border-color);
}

.card-header.justify-content-center {
    background-color: var(--bg-light); /* Use bg-light for header to match card */
    border-bottom: 1px solid var(--border-color);
}

.card-header .logo-img {
    max-width: 150px; /* Adjust as needed */
    height: auto;
    display: block;
    margin: 0 auto 20px auto; /* Center the logo and add some bottom margin */
}

.card-header h3 {
    color: var(--text-primary); /* Ensure heading is primary text color */
}

.form-floating > .form-control,
.form-floating > .form-control-plaintext {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.form-floating > .form-control:focus,
.form-floating > .form-control-plaintext:focus {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 0.25rem rgba(66, 153, 225, 0.25); /* Accent primary with transparency */
}

.form-floating > label {
    color: var(--text-secondary);
}

.form-check-input:checked {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--bg-dark); /* Dark text on accent primary button */
}

.btn-primary:hover {
    background-color: #3182ce; /* Slightly darker accent primary for hover */
    border-color: #3182ce;
}

a.small {
    color: var(--accent-primary);
}

a.small:hover {
    color: #3182ce;
}

.text-muted {
    color: var(--text-secondary) !important;
}

.py-4.bg-light {
    background-color: var(--bg-light) !important;
    border-top: 1px solid var(--border-color);
}

/* Sticky Footer adjustments */
html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#layoutAuthentication {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#layoutAuthentication_content {
    flex-grow: 1;
}

/* Global Dropdown Menu Styles */
.dropdown-menu {
    background-color: var(--bg-light) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3) !important;
    border-radius: 0.375rem !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.dropdown-item:hover, 
.dropdown-item:focus {
    background-color: var(--accent-primary) !important;
    color: var(--bg-dark) !important;
}

.dropdown-header {
    color: var(--accent-primary) !important;
    font-weight: bold !important;
    font-size: 0.875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.dropdown-divider {
    border-color: var(--border-color) !important;
}

.dropdown-item-text {
    color: var(--text-secondary) !important;
}

.dropdown-item i {
    opacity: 0.7;
}

.dropdown-item:hover i,
.dropdown-item:focus i {
    opacity: 1;
}

/* Navigation dropdowns specific styles */
.navbar-nav .dropdown-menu {
    min-width: 200px;
}

/* Notification dropdown styles */
.notification-dropdown {
    max-width: 350px !important;
}

.notification-dropdown .dropdown-header {
    background-color: var(--bg-dark) !important;
    border-bottom: 1px solid var(--border-color) !important;
}