html, body {
  font-family: "Roboto", sans-serif;
  background: linear-gradient(135deg, #0b0f1f 0%, #1a0f2e 100%) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

.content {
  padding: 5vh 1vw;
  overflow-y: auto;
  height: calc(100vh - 8px);
  max-height: calc(100vh - 8px);
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* max-height: 100vh; */
  /* font-family: "Montserrat", sans-serif; */
}

.content::-webkit-scrollbar {
  display: none;
}

.home-page-fligen-logo {
  height: 15vh;
}

@media only screen and (max-width: 600px) {
  .home-page-fligen-logo {
    height: 70px;
  }
}

.menu-nav {
  display: flex;
  justify-content: space-between;
}

.menu-item {
  color: #fcc;
  padding: 3px;
}

a div {
  padding: 2px;
}

.drone_details_col {
  background-color: rgba(128, 128, 128, 0);
  border: solid black;
  padding-left: 5px;
  /* box-shadow: 0px 0px 5px 2px #6bebf7; */
  /* box-shadow: 0px 0px 10px 5px #6bebf7; */
}

.status {
  height: 15px;
  width: 15px;
  /* background-color: greenyellow; */
  border-radius: 50%;
  display: inline-block;
  /* padding: 20px; */
}

.online {
  background-color: greenyellow;
}

.offline {
  background-color: rgb(253, 2, 2);
}

.ready {
  background-color: rgb(253, 136, 2);
}

.VisualBtn1 {
  margin-top: 10px;
}

.ViewDroneLive {
  margin-top: 10px;
}

.SettingDropdown {
  margin-top: 10px;
}

.logoIMG1 {
  height: 18vh !important;
  width: auto !important;
  max-width: 100% !important;
}

a {
  color: black;
}

.droneBtnCol1 {
  padding-left: 20px;
}

b {
  color: white;
}

.mantine-Accordion-label {
  color: white;
}

.mantine-Accordion-control {
  background-color: black;
}

.mantine-Accordion-control:hover {
  background-color: black;
}

.mantine-Accordion-icon {
  color: white;
}

.mantine-Accordion-item {
  border-bottom: none;
}

.nav-link {
  padding: 0.5rem 0.5rem;
  color: #06325e;
}

a.nav-link {
  margin: 5px;
}

.card {
  box-shadow: #2c2c2c6b 0px 0px 20px -3px;
}

button {
  border-radius: 50px;
  box-shadow: #2c2c2c6b 1px 2px 18px -5px;
}

.dropdown-item {
  border-radius: none;
  box-shadow: none;
}

/* #video-display {
  box-shadow: #131313 1px 2px 30px -5px;
} */

.video-player-modal-dialog {
  min-width: 75vw;
}

/* .video-player-modal-content {
  height: 90vh;
} */

.gradient-border {
  border: 0px;
  border-top: 8px solid;
  border-image: linear-gradient(to right, #d1af3c, #384a9f);
  border-image-slice: 1;
}

#sidebarX {
  padding: 2% 2%;
  box-shadow: inset 0 4px 25px gray;
  height: 100vh;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  /* font-family: "Roboto", sans-serif; */
}

#sidebarX::-webkit-scrollbar {
  display: none;
}

/* #sidebarX::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #f5f5f5;
}

#sidebarX::-webkit-scrollbar {
  width: 10px;
  background-color: #f5f5f5;
}

#sidebarX::-webkit-scrollbar-thumb {
  background-color: #000000;
  border: 2px solid #555555;
} */

.sidebar-subtitle {
  margin-top: 2vh;
  margin-bottom: 1vh;
  color: gray;
  /* font-family: "Poppins", sans-serif; */
}

/* ══════════════════════════════════════════════════════════════════ */
/* CYBERPUNK HOME PAGE ANIMATIONS */
/* ══════════════════════════════════════════════════════════════════ */

/* Table Row Hover Effect - Completely Disabled */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner tr:hover td,
.dash-table-container tr:hover td,
.dash-spreadsheet-inner tr:hover td {
  background-color: rgba(30, 32, 38, 0.55) !important;
  background: rgba(30, 32, 38, 0.55) !important;
  cursor: default !important;
}

/* Override any active/focus/selected row states */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr.row td,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr td.focused,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr td.cell--selected,
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr.row--selected td,
.dash-table-container td.cell--selected,
.dash-table-container td.focused {
  background-color: rgba(30, 32, 38, 0.55) !important;
  background: rgba(30, 32, 38, 0.55) !important;
  box-shadow: none !important;
  border: 1px solid rgba(100, 100, 100, 0.15) !important;
}

/* Smooth transition for table cells - Disabled */
.dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr td {
  transition: none !important;
}

/* Card Header Shimmer Animation */
@keyframes shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes headerGlow {
  0%, 100% {
    box-shadow: 0 2px 15px rgba(209, 174, 58, 0.3);
  }
  50% {
    box-shadow: 0 2px 25px rgba(209, 174, 58, 0.6), 0 0 35px rgba(79, 220, 255, 0.3);
  }
}

/* Apply shimmer to card headers */
.card-header {
  position: relative;
  overflow: hidden;
  animation: headerGlow 3s ease-in-out infinite;
}

.card-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(209, 174, 58, 0.3),
    transparent
  );
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════ */
/* RECORDINGS PAGE - MODERN TABLE STYLING */
/* ══════════════════════════════════════════════════════════════════ */

/* Recording row cards */
.recording-row {
  background: linear-gradient(135deg, rgba(20, 27, 58, 1) 0%, rgba(26, 15, 46, 0.95) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 15px 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.recording-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recording-row:hover {
  background: linear-gradient(135deg, rgba(30, 40, 70, 0.95) 0%, rgba(35, 25, 55, 0.9) 100%);
  border-color: rgba(209, 174, 58, 0.6);
  box-shadow: 0 5px 25px rgba(209, 174, 58, 0.2), 0 0 30px rgba(79, 220, 255, 0.1);
  transform: translateX(5px);
}

.recording-row:hover::before {
  opacity: 1;
}

/* Recording text styling */
.recording-row .recording-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.recording-row:hover .recording-text {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Recording action buttons */
.recording-row .btn-action {
  background: transparent;
  border: 1px solid rgba(209, 174, 58, 0.5);
  color: #a89050;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  margin: 0 3px;
}

.recording-row .btn-action:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%);
  color: #0b0f1f;
  border-color: #a89050;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5);
}

.recording-row .btn-action.btn-danger {
  border-color: rgba(255, 59, 59, 0.5);
  color: #ff3b3b;
}

.recording-row .btn-action.btn-danger:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
  color: white;
  border-color: #ff3b3b;
  box-shadow: 0 0 15px rgba(255, 59, 59, 0.5);
}

/* Play button special styling */
.recording-row .btn-play {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%);
  border: 1px solid rgba(79, 220, 255, 0.5);
  color: #8a9aa8;
}

.recording-row .btn-play:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%);
  color: #0b0f1f;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6);
}

/* Column header row styling */
.recordings-header-row {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.9) 0%, rgba(20, 27, 58, 0.8) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 15px;
}

/* Badge/Tag styling for recording type */
.recording-type-badge {
  background: linear-gradient(135deg, rgba(209, 174, 58, 0.2) 0%, rgba(209, 174, 58, 0.1) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  color: #a89050;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Thermal type badge */
.recording-type-badge.thermal {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(255, 59, 59, 0.1) 100%);
  border-color: rgba(255, 107, 107, 0.4);
  color: #ff6b6b;
}

/* RGB type badge */
.recording-type-badge.rgb {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(0, 184, 212, 0.1) 100%);
  border-color: rgba(79, 220, 255, 0.4);
  color: #8a9aa8;
}

/* ══════════════════════════════════════════════════════════════════ */
/* FILTER CONTAINER - COMPACT PILL DESIGN */
/* ══════════════════════════════════════════════════════════════════ */

.filter-container {
  transition: all 0.3s ease;
}

.filter-container:hover {
  border-color: rgba(209, 174, 58, 0.6) !important;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(209, 174, 58, 0.15), inset 0 1px 0 rgba(209, 174, 58, 0.2) !important;
}

/* Style dropdowns inside filter container */
.filter-container .Select-control {
  border-radius: 20px !important;
  border: 1px solid rgba(209, 174, 58, 0.3) !important;
  background: rgba(255, 255, 255, 0.95) !important;
}

.filter-container .Select-control:hover {
  border-color: rgba(209, 174, 58, 0.6) !important;
}

/* Date picker styling */
.filter-container .DateInput_input {
  border-radius: 20px !important;
  font-size: 0.9rem !important;
  padding: 6px 12px !important;
}

/* ══════════════════════════════════════════════════════════════════ */
/* VIDEO PLAYER MODAL - CYBERPUNK THEME */
/* ══════════════════════════════════════════════════════════════════ */

/* Modal backdrop */
.video-player-modal .modal-content {
  background: linear-gradient(135deg, #0b0f1f 0%, #1a0f2e 100%) !important;
  border: 2px solid rgba(209, 174, 58, 0.5) !important;
  border-radius: 15px !important;
  box-shadow: 0 0 50px rgba(209, 174, 58, 0.3), 0 0 100px rgba(79, 220, 255, 0.1) !important;
}

/* Modal body */
.video-player-modal .modal-body {
  background: transparent !important;
  padding: 20px 30px !important;
}

/* Modal footer */
.video-player-modal .modal-footer {
  background: rgba(0, 0, 0, 0.3) !important;
  border-top: 1px solid rgba(209, 174, 58, 0.3) !important;
  padding: 15px 30px !important;
}

/* Video player container */
.video-player-modal .player1 {
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

/* Control buttons - rewind, forward */
.video-player-modal .btn-secondary {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.9) 0%, rgba(26, 15, 46, 0.8) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.5) !important;
  color: #a89050 !important;
  border-radius: 25px !important;
  padding: 8px 20px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.video-player-modal .btn-secondary:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  border-color: #a89050 !important;
  box-shadow: 0 0 20px rgba(209, 174, 58, 0.5) !important;
}

/* Capture and Extract Clip buttons */
.video-player-modal .btn-secondary:has(.bi-camera),
.video-player-modal .btn-secondary:has(.bi-record-circle) {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%) !important;
  border: 1px solid rgba(79, 220, 255, 0.5) !important;
  color: #8a9aa8 !important;
}

.video-player-modal .btn-secondary:has(.bi-camera):hover,
.video-player-modal .btn-secondary:has(.bi-record-circle):hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6) !important;
}

/* Dropdown menu styling */
.video-player-modal .dropdown-menu {
  background: linear-gradient(135deg, #141b3a 0%, #1a0f2e 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 10px !important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.5) !important;
}

.video-player-modal .dropdown-item {
  color: #e0e6ed !important;
  padding: 10px 20px !important;
  transition: all 0.2s ease !important;
}

.video-player-modal .dropdown-item:hover {
  background: rgba(209, 174, 58, 0.2) !important;
  color: #a89050 !important;
}

/* Buttons row spacing */
.video-player-modal .row:has(.bi-camera) {
  margin-bottom: 20px !important;
}

/* Detections table styling */
.video-player-modal .dash-table-container {
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-top: 15px !important;
}

.video-player-modal .dash-spreadsheet-container .dash-spreadsheet-inner table {
  background: transparent !important;
}

.video-player-modal .dash-spreadsheet-container .dash-spreadsheet-inner table thead tr th {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.95) 0%, rgba(20, 27, 58, 0.9) 100%) !important;
  color: #a89050 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  border-bottom: 2px solid rgba(209, 174, 58, 0.4) !important;
  padding: 12px 15px !important;
}

.video-player-modal .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr td {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.8) 0%, rgba(26, 15, 46, 0.7) 100%) !important;
  color: #ffffff !important;
  border-bottom: 1px solid rgba(79, 220, 255, 0.1) !important;
  padding: 10px 15px !important;
}

.video-player-modal .dash-spreadsheet-container .dash-spreadsheet-inner table tbody tr:hover td {
  background: linear-gradient(135deg, rgba(30, 40, 70, 0.9) 0%, rgba(35, 25, 55, 0.85) 100%) !important;
  color: #ffffff !important;
}

/* CSV download button */
.video-player-modal .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid rgba(209, 174, 58, 0.5) !important;
  color: #a89050 !important;
  border-radius: 20px !important;
}

.video-player-modal .btn-outline-secondary:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
}

/* Close button */
.video-player-modal .bg-danger {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%) !important;
  border: none !important;
  border-radius: 25px !important;
  padding: 10px 30px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.video-player-modal .bg-danger:hover {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8888 100%) !important;
  box-shadow: 0 0 20px rgba(255, 59, 59, 0.5) !important;
}

/* Scrollbar styling for detections table */
.video-player-modal .dash-spreadsheet-container::-webkit-scrollbar {
  width: 8px;
}

.video-player-modal .dash-spreadsheet-container::-webkit-scrollbar-track {
  background: rgba(20, 27, 58, 0.5);
  border-radius: 4px;
}

.video-player-modal .dash-spreadsheet-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%);
  border-radius: 4px;
}

.video-player-modal .dash-spreadsheet-container::-webkit-scrollbar-thumb:hover {
  background: #a89050;
}

/* ══════════════════════════════════════════════════════════════════ */
/* REPORTS PAGE (LOGS) - CYBERPUNK THEME */
/* ══════════════════════════════════════════════════════════════════ */

/* Header row styling */
.logs-header-row {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.9) 0%, rgba(20, 27, 58, 0.8) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 15px;
}

/* Log entry row styling */
.log-row {
  background: linear-gradient(135deg, rgba(20, 27, 58, 1) 0%, rgba(26, 15, 46, 0.95) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  margin-bottom: 10px;
  padding: 15px 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  color: #ffffff;
}

.log-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.log-row:hover {
  background: linear-gradient(135deg, rgba(30, 40, 70, 0.95) 0%, rgba(35, 25, 55, 0.9) 100%);
  border-color: rgba(209, 174, 58, 0.6);
  box-shadow: 0 5px 25px rgba(209, 174, 58, 0.2), 0 0 30px rgba(79, 220, 255, 0.1);
  transform: translateX(5px);
}

.log-row:hover::before {
  opacity: 1;
}

/* Log text styling */
.log-row .log-text {
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.log-row:hover .log-text {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Log action buttons */
.log-row .btn-action {
  background: transparent;
  border: 1px solid rgba(209, 174, 58, 0.5);
  color: #a89050;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 0.85rem;
  transition: all 0.3s ease;
  margin: 0 3px;
}

.log-row .btn-action:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%);
  color: #0b0f1f;
  border-color: #a89050;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5);
}

/* View button styling */
.log-row .btn-view {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%);
  border: 1px solid rgba(79, 220, 255, 0.5);
  color: #8a9aa8;
}

.log-row .btn-view:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%);
  color: #0b0f1f;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6);
}

/* Delete button styling */
.log-row .btn-action.btn-danger {
  border-color: rgba(255, 59, 59, 0.5);
  color: #ff3b3b;
}

.log-row .btn-action.btn-danger:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%);
  color: white;
  border-color: #ff3b3b;
  box-shadow: 0 0 15px rgba(255, 59, 59, 0.5);
}

/* Log type badge */
.log-type-badge {
  background: linear-gradient(135deg, rgba(209, 174, 58, 0.2) 0%, rgba(209, 174, 58, 0.1) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  color: #a89050;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Status badges for logs */
.log-status-badge.success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.2) 0%, rgba(76, 175, 80, 0.1) 100%);
  border: 1px solid rgba(76, 175, 80, 0.4);
  color: #4caf50;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.log-status-badge.warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2) 0%, rgba(255, 193, 7, 0.1) 100%);
  border: 1px solid rgba(255, 193, 7, 0.4);
  color: #ffc107;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

.log-status-badge.error {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.2) 0%, rgba(255, 59, 59, 0.1) 100%);
  border: 1px solid rgba(255, 59, 59, 0.4);
  color: #ff3b3b;
  padding: 4px 12px;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════ */
/* PIDWS PAGE - CYBERPUNK THEME */
/* ══════════════════════════════════════════════════════════════════ */

/* Tab styling - target the tabs container */
#pidws_tabs {
  border-bottom: 1px solid rgba(209, 174, 58, 0.3) !important;
}

#pidws_tabs .nav-link {
  color: #a89050 !important;
  background: transparent !important;
  border: 1px solid rgba(209, 174, 58, 0.3) !important;
  border-bottom: none !important;
  border-radius: 10px 10px 0 0 !important;
  margin-right: 5px;
  transition: all 0.3s ease;
  padding: 10px 20px;
}

#pidws_tabs .nav-link:hover {
  background: rgba(209, 174, 58, 0.15) !important;
  border-color: rgba(209, 174, 58, 0.5) !important;
}

#pidws_tabs .nav-link.active {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.95) 0%, rgba(26, 15, 46, 0.9) 100%) !important;
  border-color: rgba(209, 174, 58, 0.5) !important;
  border-bottom: 1px solid transparent !important;
  color: #a89050 !important;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(209, 174, 58, 0.5);
}

/* Tab content area */
#pidws_tabs .tab-content {
  background: transparent !important;
}

#pidws_tabs .tab-pane {
  background: transparent !important;
  padding-top: 20px;
}

/* Header row styling */
.pidws-header-row {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.9) 0%, rgba(20, 27, 58, 0.8) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 10px;
  width: 100%;
}

.pidws-header-text {
  color: #a89050;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(209, 174, 58, 0.6);
}

/* Data row styling */
.pidws-row {
  background: linear-gradient(135deg, rgba(20, 27, 58, 1) 0%, rgba(26, 15, 46, 0.95) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 12px 20px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  width: 100% !important;
  cursor: pointer;
}

.pidws-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.pidws-row:hover {
  background: linear-gradient(135deg, rgba(40, 50, 85, 0.98) 0%, rgba(45, 35, 65, 0.95) 100%) !important;
  border-color: rgba(209, 174, 58, 0.8) !important;
  box-shadow: 0 8px 30px rgba(209, 174, 58, 0.3), 0 0 40px rgba(79, 220, 255, 0.15) !important;
  transform: translateX(8px) !important;
}

.pidws-row:hover::before {
  opacity: 1;
}

/* Text styling */
.pidws-text {
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.pidws-text-small {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 0.75rem !important;
  font-weight: 400 !important;
}

.pidws-row:hover .pidws-text {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

.pidws-row:hover .pidws-text-small {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Status badge */
.pidws-status-badge {
  background: linear-gradient(135deg, rgba(209, 174, 58, 0.2) 0%, rgba(209, 174, 58, 0.1) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  color: #a89050;
  padding: 4px 10px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Action buttons */
.pidws-btn-action {
  background: transparent !important;
  border: 1px solid rgba(209, 174, 58, 0.5) !important;
  color: #a89050 !important;
  padding: 6px 12px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  transition: all 0.3s ease !important;
  margin: 0 3px !important;
}

.pidws-btn-action:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  border-color: #a89050 !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5) !important;
}

/* Manage button (cyan) */
.pidws-btn-manage {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%) !important;
  border: 1px solid rgba(79, 220, 255, 0.5) !important;
  color: #8a9aa8 !important;
}

.pidws-btn-manage:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6) !important;
}

/* Danger button (red) */
.pidws-btn-danger {
  border-color: rgba(255, 59, 59, 0.5) !important;
  color: #ff3b3b !important;
}

.pidws-btn-danger:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%) !important;
  color: white !important;
  border-color: #ff3b3b !important;
  box-shadow: 0 0 15px rgba(255, 59, 59, 0.5) !important;
}

/* Success button (green) */
.pidws-btn-success {
  border-color: rgba(76, 175, 80, 0.5) !important;
  color: #4caf50 !important;
}

.pidws-btn-success:hover {
  background: linear-gradient(135deg, #4caf50 0%, #66bb6a 100%) !important;
  color: white !important;
  border-color: #4caf50 !important;
  box-shadow: 0 0 15px rgba(76, 175, 80, 0.5) !important;
}

/* Search button */
.pidws-search-btn:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6) !important;
}

/* Add button */
.pidws-add-btn:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5) !important;
}

/* Map card styling */
#pidws_tabs .card {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.95) 0%, rgba(26, 15, 46, 0.9) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 10px !important;
}

#pidws_tabs .card-header {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.9) 0%, rgba(20, 27, 58, 0.8) 100%) !important;
  border-bottom: 1px solid rgba(209, 174, 58, 0.3) !important;
  color: #a89050 !important;
}

#pidws_tabs .card-header .card-title {
  color: #a89050 !important;
  text-shadow: 0 0 8px rgba(209, 174, 58, 0.6);
}

#pidws_tabs .card-body {
  background: transparent !important;
}

/* Pagination styling - Global override */
.pagination .page-link,
.pagination .page-item .page-link,
.page-link {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.95) 0%, rgba(26, 15, 46, 0.9) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  color: #a89050 !important;
  transition: all 0.3s ease !important;
}

.pagination .page-link:hover,
.pagination .page-item .page-link:hover,
.page-link:hover {
  background: linear-gradient(135deg, rgba(209, 174, 58, 0.3) 0%, rgba(209, 174, 58, 0.2) 100%) !important;
  color: #a89050 !important;
  border-color: rgba(209, 174, 58, 0.6) !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.3) !important;
}

.pagination .page-item.active .page-link,
.pagination .page-item .page-link.active,
.page-item.active .page-link {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  border-color: #a89050 !important;
  color: #0b0f1f !important;
  font-weight: 600 !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5) !important;
}

/* Disabled pagination buttons */
.pagination .page-item.disabled .page-link,
.page-item.disabled .page-link {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.5) 0%, rgba(26, 15, 46, 0.4) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.2) !important;
  color: rgba(209, 174, 58, 0.5) !important;
  cursor: not-allowed;
}

/* Focus state */
.pagination .page-link:focus,
.page-link:focus {
  box-shadow: 0 0 0 0.2rem rgba(209, 174, 58, 0.25) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════════ */
/* MANAGE DRONES PAGE - CYBERPUNK THEME */
/* ══════════════════════════════════════════════════════════════════ */

/* Header row styling */
.manage-header-row {
  background: linear-gradient(135deg, rgba(5, 7, 10, 0.9) 0%, rgba(20, 27, 58, 0.8) 100%);
  border: 1px solid rgba(209, 174, 58, 0.4);
  border-radius: 10px;
  padding: 12px 20px;
  margin-bottom: 10px;
  width: 100%;
}

.manage-header-text {
  color: #a89050;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem;
  text-shadow: 0 0 8px rgba(209, 174, 58, 0.6);
}

/* Drone row styling */
.manage-drone-row {
  background: linear-gradient(135deg, rgba(20, 27, 58, 1) 0%, rgba(26, 15, 46, 0.95) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  padding: 12px 20px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  color: #ffffff !important;
  width: 100% !important;
  cursor: pointer;
}

.manage-drone-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.manage-drone-row:hover {
  background: linear-gradient(135deg, rgba(40, 50, 85, 0.98) 0%, rgba(45, 35, 65, 0.95) 100%) !important;
  border-color: rgba(209, 174, 58, 0.8) !important;
  box-shadow: 0 8px 30px rgba(209, 174, 58, 0.3), 0 0 40px rgba(79, 220, 255, 0.15) !important;
  transform: translateX(8px) !important;
}

.manage-drone-row:hover::before {
  opacity: 1;
}

/* Text styling */
.manage-text {
  color: #ffffff !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

.manage-drone-row:hover .manage-text {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5) !important;
}

/* Action buttons */
.manage-btn-action {
  background: transparent !important;
  border: 1px solid rgba(209, 174, 58, 0.5) !important;
  color: #a89050 !important;
  padding: 8px 14px !important;
  border-radius: 20px !important;
  font-size: 0.9rem !important;
  transition: all 0.3s ease !important;
}

.manage-btn-action:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  border-color: #a89050 !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5) !important;
}

/* Settings button (cyan) */
.manage-btn-settings {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%) !important;
  border: 1px solid rgba(79, 220, 255, 0.5) !important;
  color: #8a9aa8 !important;
}

.manage-btn-settings:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6) !important;
}

/* Danger button (red) */
.manage-btn-danger {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.2) 0%, rgba(255, 59, 59, 0.1) 100%) !important;
  border: 1px solid rgba(255, 59, 59, 0.5) !important;
  color: #ff3b3b !important;
}

.manage-btn-danger:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%) !important;
  color: white !important;
  border-color: #ff3b3b !important;
  box-shadow: 0 0 15px rgba(255, 59, 59, 0.5) !important;
}

/* Add Drone button */
.manage-add-btn:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(209, 174, 58, 0.5) !important;
}

/* ===== FLIGHTS PAGE STYLES ===== */

/* Flight row styling */
.flights-row {
  background: linear-gradient(135deg, rgba(20, 25, 45, 0.95) 0%, rgba(30, 20, 50, 0.9) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.2) !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin-bottom: 10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.flights-row::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 3px !important;
  background: linear-gradient(180deg, #a89050 0%, #8a9aa8 100%) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.flights-row:hover {
  transform: translateX(8px) !important;
  border-color: rgba(209, 174, 58, 0.5) !important;
  box-shadow: 0 5px 25px rgba(209, 174, 58, 0.2),
              0 0 30px rgba(79, 220, 255, 0.1) !important;
}

.flights-row:hover::before {
  opacity: 1 !important;
}

/* Flights text */
.flights-text {
  color: #e0e0e0 !important;
  font-size: 0.95rem !important;
}

/* Edit button (cyan) */
.flights-btn-edit {
  background: linear-gradient(135deg, rgba(79, 220, 255, 0.2) 0%, rgba(79, 220, 255, 0.1) 100%) !important;
  border: 1px solid rgba(79, 220, 255, 0.5) !important;
  color: #8a9aa8 !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  transition: all 0.3s ease !important;
}

.flights-btn-edit:hover {
  background: linear-gradient(135deg, #8a9aa8 0%, #6a7a88 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(79, 220, 255, 0.6) !important;
}

/* Danger button (red) */
.flights-btn-danger {
  background: linear-gradient(135deg, rgba(255, 59, 59, 0.2) 0%, rgba(255, 59, 59, 0.1) 100%) !important;
  border: 1px solid rgba(255, 59, 59, 0.5) !important;
  color: #ff3b3b !important;
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.85rem !important;
  transition: all 0.3s ease !important;
}

.flights-btn-danger:hover {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%) !important;
  color: white !important;
  border-color: #ff3b3b !important;
  box-shadow: 0 0 15px rgba(255, 59, 59, 0.5) !important;
}

/* Action button (gold) */
.flights-btn-action:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  border-color: #a89050 !important;
  box-shadow: 0 0 15px rgba(209, 174, 58, 0.5) !important;
}

/* Add Flight button */
.flights-add-btn:hover {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  color: #0b0f1f !important;
  box-shadow: 0 0 20px rgba(209, 174, 58, 0.5) !important;
}

/* Flights dropdown styling */
.flights-dropdown .Select-control {
  background: rgba(20, 25, 45, 0.8) !important;
  border: 1px solid rgba(209, 174, 58, 0.3) !important;
  border-radius: 20px !important;
}

.flights-dropdown .Select-value-label,
.flights-dropdown .Select-placeholder {
  color: #e0e0e0 !important;
}

/* Date picker styling for flights */
.flights-date-picker .DateInput_input {
  background: rgba(20, 25, 45, 0.8) !important;
  border: 1px solid rgba(209, 174, 58, 0.3) !important;
  border-radius: 20px !important;
  color: #e0e0e0 !important;
}

/* ===== VIEW LIVE PAGE - DRONE CARDS ===== */

/* Drone card container */
.view-live-drone-card {
  background-color: #141b3a !important;
  border: 2px solid #a89050 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 20px rgba(209, 174, 58, 0.2), inset 0 0 10px rgba(209, 174, 58, 0.1) !important;
  overflow: hidden !important;
  position: relative !important;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* Hover effects */
.view-live-drone-card:hover {
  transform: translateY(-10px) scale(1.02) !important;
  border-color: #a89050 !important;
  box-shadow:
    0 15px 40px rgba(209, 174, 58, 0.3),
    0 0 30px rgba(209, 174, 58, 0.2),
    0 0 60px rgba(79, 220, 255, 0.15),
    inset 0 0 20px rgba(209, 174, 58, 0.1) !important;
}

/* Drone title glow on hover */
.view-live-drone-card:hover .drone-title {
  color: #a89050 !important;
  text-shadow: 0 0 10px rgba(209, 174, 58, 0.8), 0 0 20px rgba(209, 174, 58, 0.5) !important;
}

/* Image zoom effect on hover */
.view-live-drone-card:hover .drone-thumbnail {
  transform: scale(1.1) !important;
  opacity: 1 !important;
}

.drone-thumbnail {
  transition: transform 0.4s ease, opacity 0.3s ease !important;
}

/* Status pill pulse animation */
.status-pill-online {
  animation: pulse-online 2s infinite !important;
}

.status-pill-ready {
  animation: pulse-ready 2s infinite !important;
}

.status-pill-offline {
  animation: pulse-offline 3s infinite !important;
}

@keyframes pulse-online {
  0%, 100% {
    box-shadow: 0 0 15px rgba(81, 209, 58, 0.9);
  }
  50% {
    box-shadow: 0 0 25px rgb(81, 209, 58), 0 0 40px rgba(106, 209, 58, 0.6);
  }
}

@keyframes pulse-ready {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.9);
  }
  50% {
    box-shadow: 0 0 25px rgba(255, 170, 0, 1), 0 0 40px rgba(255, 170, 0, 0.6);
  }
}

@keyframes pulse-offline {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(255, 59, 59, 0.7);
  }
}

/* View Live button hover effect */
.view-live-drone-card .view-live-btn:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(209, 174, 58, 0.5) !important;
}

/* Start/End buttons hover */
.view-live-drone-card .pilot-btn-start:hover:not(:disabled) {
  background: linear-gradient(135deg, #a89050 0%, #c9a84c 100%) !important;
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.6) !important;
  transform: translateY(-2px) !important;
}

.view-live-drone-card .pilot-btn-end:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff3b3b 0%, #ff6b6b 100%) !important;
  box-shadow: 0 0 20px rgba(255, 59, 59, 0.6) !important;
  transform: translateY(-2px) !important;
}

/* ===== SIDEBAR HOVER EFFECTS ===== */

/* Sidebar nav links hover effect */
#sidebarX .nav-link {
  position: relative !important;
  transition: all 0.3s ease !important;
  border-left: 3px solid transparent !important;
}

#sidebarX .nav-link:hover {
  background: linear-gradient(90deg, rgba(209, 174, 58, 0.15) 0%, transparent 100%) !important;
  border-left: 3px solid #a89050 !important;
  color: #a89050 !important;
  transform: translateX(5px) !important;
  text-shadow: 0 0 8px rgba(209, 174, 58, 0.5) !important;
}

/* Icon glow on hover */
#sidebarX .nav-link:hover i {
  filter: drop-shadow(0 0 8px rgba(209, 174, 58, 0.8)) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

/* Active nav link styling */
#sidebarX .nav-link.active {
  background: linear-gradient(90deg, rgba(209, 174, 58, 0.25) 0%, rgba(209, 174, 58, 0.05) 100%) !important;
  border-left: 3px solid #a89050 !important;
  color: #a89050 !important;
  font-weight: 600 !important;
  text-shadow: 0 0 10px rgba(209, 174, 58, 0.6) !important;
}

#sidebarX .nav-link.active i {
  filter: drop-shadow(0 0 10px rgba(209, 174, 58, 1)) !important;
}

/* Logout button hover */
#sidebarX .logout-btn:hover {
  transform: scale(1.2) !important;
  filter: drop-shadow(0 0 10px rgba(255, 59, 59, 1)) !important;
}

/* Profile icon hover */
#sidebarX .bi-person-circle:hover {
  filter: drop-shadow(0 0 10px rgba(209, 174, 58, 1)) !important;
  transform: scale(1.1) !important;
  transition: all 0.3s ease !important;
}

/* Section headers subtle animation */
#sidebarX .nav-item {
  transition: all 0.3s ease !important;
}

#sidebarX .nav-item:hover {
  text-shadow: 0 0 10px rgba(209, 174, 58, 0.8) !important;
  border-left-color: #8a9aa8 !important;
}

/* ===== DASHBOARD TABLE ROWS HOVER EFFECTS ===== */

/* Dashboard table row styling - No hover effects */
.dashboard-table-row {
  padding: 12px 15px !important;
  margin-bottom: 4px !important;
  border-radius: 0 25px 25px 0 !important;
  border-left: 3px solid transparent !important;
  transition: none !important;
  cursor: default !important;
}

/* Hover effect - Disabled */
.dashboard-table-row:hover {
  background: transparent !important;
  border-left: 3px solid transparent !important;
  transform: none !important;
}

/* Text styling */
.dashboard-row-text {
  color: #e0e6ed !important;
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  transition: none !important;
}

/* Text glow on hover - Disabled */
.dashboard-table-row:hover .dashboard-row-text {
  color: #e0e6ed !important;
  text-shadow: none !important;
}

/* Status badge styling - No glow */
.dashboard-status-badge {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  padding: 4px 12px !important;
  border-radius: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  transition: none !important;
}

.status-online {
  color: #00ff88 !important;
  background: rgba(0, 255, 136, 0.15) !important;
  border: 1px solid rgba(0, 255, 136, 0.4) !important;
  text-shadow: none !important;
}

.status-offline {
  color: #ff3b3b !important;
  background: rgba(255, 59, 59, 0.15) !important;
  border: 1px solid rgba(255, 59, 59, 0.4) !important;
  text-shadow: none !important;
}

.status-ready {
  color: #a89050 !important;
  background: rgba(255, 170, 0, 0.15) !important;
  border: 1px solid rgba(255, 170, 0, 0.4) !important;
  text-shadow: none !important;
}

/* Status badge hover glow - Disabled */
.dashboard-table-row:hover .status-online {
  box-shadow: none !important;
}

.dashboard-table-row:hover .status-offline {
  box-shadow: none !important;
}

.dashboard-table-row:hover .status-ready {
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DROPDOWN & DATE PICKER - Cyberpunk Theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* Dash Dropdown - All variations */
.dash-dropdown .Select-control,
.Select-control,
.dash-dropdown .Select--single > .Select-control,
.dash-dropdown .Select--multi > .Select-control {
  background-color: #141b3a !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 20px !important;
  min-height: 38px !important;
}

.dash-dropdown .Select-control:hover,
.Select-control:hover {
  border-color: #a89050 !important;
  box-shadow: 0 0 10px rgba(209, 174, 58, 0.3) !important;
}

/* Dropdown placeholder and value text */
.dash-dropdown .Select-placeholder,
.dash-dropdown .Select-value-label,
.dash-dropdown .Select--single > .Select-control .Select-value,
.Select-placeholder,
.Select-value-label,
.Select--single > .Select-control .Select-value {
  color: #e0e6ed !important;
  line-height: 36px !important;
}

.dash-dropdown .Select-input,
.Select-input {
  height: 36px !important;
}

.dash-dropdown .Select-input > input,
.Select-input > input {
  color: #e0e6ed !important;
  padding: 8px 0 !important;
}

/* Dropdown arrow */
.dash-dropdown .Select-arrow-zone,
.Select-arrow-zone {
  padding-right: 15px !important;
}

.dash-dropdown .Select-arrow,
.Select-arrow {
  border-color: #a89050 transparent transparent !important;
}

.dash-dropdown.is-open .Select-arrow,
.is-open .Select-arrow {
  border-color: transparent transparent #a89050 !important;
}

/* Dropdown Menu */
.dash-dropdown .Select-menu-outer,
.Select-menu-outer {
  background-color: #141b3a !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(209, 174, 58, 0.2) !important;
  margin-top: 4px !important;
  overflow: hidden !important;
}

.dash-dropdown .Select-menu,
.Select-menu {
  background-color: #141b3a !important;
}

/* Dropdown Options */
.dash-dropdown .Select-option,
.Select-option,
.VirtualizedSelectOption {
  background-color: #141b3a !important;
  color: #e0e6ed !important;
  padding: 10px 15px !important;
  transition: all 0.2s ease !important;
}

.dash-dropdown .Select-option:hover,
.dash-dropdown .Select-option.is-focused,
.Select-option:hover,
.Select-option.is-focused,
.VirtualizedSelectOption:hover,
.VirtualizedSelectFocusedOption {
  background-color: rgba(209, 174, 58, 0.2) !important;
  color: #a89050 !important;
}

.dash-dropdown .Select-option.is-selected,
.Select-option.is-selected,
.VirtualizedSelectSelectedOption {
  background-color: rgba(209, 174, 58, 0.3) !important;
  color: #a89050 !important;
  font-weight: bold !important;
}

/* Clear button */
.dash-dropdown .Select-clear-zone,
.Select-clear-zone {
  color: #a89050 !important;
  padding-right: 10px !important;
}

.dash-dropdown .Select-clear,
.Select-clear {
  color: #a89050 !important;
  font-size: 18px !important;
}

/* Multi-select tags */
.dash-dropdown .Select--multi .Select-value,
.Select--multi .Select-value {
  background-color: rgba(209, 174, 58, 0.2) !important;
  border: 1px solid #a89050 !important;
  color: #a89050 !important;
  border-radius: 15px !important;
  margin: 3px !important;
}

.dash-dropdown .Select--multi .Select-value-label,
.Select--multi .Select-value-label {
  color: #a89050 !important;
}

.dash-dropdown .Select--multi .Select-value-icon,
.Select--multi .Select-value-icon {
  border-right-color: rgba(209, 174, 58, 0.4) !important;
  padding: 2px 6px !important;
}

.dash-dropdown .Select--multi .Select-value-icon:hover,
.Select--multi .Select-value-icon:hover {
  background-color: rgba(255, 59, 59, 0.3) !important;
  color: #ff3b3b !important;
}

/* No results message */
.dash-dropdown .Select-noresults,
.Select-noresults {
  background-color: #141b3a !important;
  color: #e0e6ed !important;
  padding: 10px 15px !important;
}

/* ── DATE PICKER STYLES ─────────────────────────────────────────────────── */

/* Date input container */
.DateInput {
  background-color: transparent !important;
}

.DateInput_input {
  background-color: #141b3a !important;
  color: #e0e6ed !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 20px !important;
  padding: 8px 15px !important;
  font-family: 'Segoe UI', sans-serif !important;
  font-size: 14px !important;
}

.DateInput_input:focus {
  border-color: #a89050 !important;
  box-shadow: 0 0 10px rgba(209, 174, 58, 0.3) !important;
  outline: none !important;
}

.DateInput_input::placeholder {
  color: rgba(224, 230, 237, 0.5) !important;
}

/* Single Date Picker wrapper */
.SingleDatePickerInput {
  background-color: transparent !important;
  border: none !important;
}

.SingleDatePickerInput__withBorder {
  border: none !important;
  background-color: transparent !important;
}

/* Date picker calendar popup */
.DayPicker {
  background-color: #141b3a !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(209, 174, 58, 0.2) !important;
}

.DayPicker__withBorder {
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
}

.SingleDatePicker_picker {
  background-color: transparent !important;
}

/* Calendar header (month/year) */
.CalendarMonth_caption {
  color: #a89050 !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding-top: 15px !important;
  padding-bottom: 40px !important;
}

/* Day of week headers */
.DayPicker_weekHeader {
  color: #8a9aa8 !important;
}

.DayPicker_weekHeader_li small {
  color: #8a9aa8 !important;
  font-weight: 600 !important;
}

/* Calendar days */
.CalendarDay__default {
  background-color: #141b3a !important;
  color: #e0e6ed !important;
  border: 1px solid rgba(79, 220, 255, 0.1) !important;
  transition: all 0.2s ease !important;
}

.CalendarDay__default:hover {
  background-color: rgba(209, 174, 58, 0.2) !important;
  color: #a89050 !important;
  border-color: #a89050 !important;
}

/* Selected day */
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
  background: linear-gradient(135deg, #a89050 0%, #b8941f 100%) !important;
  color: #000000 !important;
  border-color: #a89050 !important;
  font-weight: bold !important;
}

/* Today */
.CalendarDay__today {
  border: 2px solid #8a9aa8 !important;
}

/* Days outside current month */
.CalendarDay__outside {
  color: rgba(224, 230, 237, 0.3) !important;
}

/* Blocked/unavailable days */
.CalendarDay__blocked_out_of_range {
  color: rgba(224, 230, 237, 0.2) !important;
  background-color: rgba(20, 27, 58, 0.5) !important;
}

/* Navigation arrows */
.DayPickerNavigation_button {
  background-color: rgba(209, 174, 58, 0.1) !important;
  border: 1px solid rgba(209, 174, 58, 0.3) !important;
  border-radius: 50% !important;
  transition: all 0.2s ease !important;
}

.DayPickerNavigation_button:hover {
  background-color: rgba(209, 174, 58, 0.3) !important;
  border-color: #a89050 !important;
}

.DayPickerNavigation_svg {
  fill: #a89050 !important;
}

/* Calendar month background */
.CalendarMonth {
  background-color: #141b3a !important;
}

.CalendarMonthGrid {
  background-color: #141b3a !important;
}

/* Date range selection */
.CalendarDay__selected_span {
  background-color: rgba(209, 174, 58, 0.3) !important;
  color: #a89050 !important;
  border-color: rgba(209, 174, 58, 0.4) !important;
}

.CalendarDay__hovered_span {
  background-color: rgba(79, 220, 255, 0.2) !important;
  color: #8a9aa8 !important;
  border-color: rgba(79, 220, 255, 0.3) !important;
}

/* ========== Upload Modal Theme Styling ========== */

/* Modal content container */
.modal-content {
  background: linear-gradient(135deg, rgba(20, 27, 58, 0.98) 0%, rgba(26, 15, 46, 0.95) 100%) !important;
  border: 1px solid rgba(209, 174, 58, 0.4) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(209, 174, 58, 0.1) !important;
}

/* Modal header */
.modal-header {
  background: transparent !important;
  border-bottom: 1px solid rgba(209, 174, 58, 0.3) !important;
  padding: 1rem 1.5rem !important;
}

/* Modal title */
.modal-title {
  color: #a89050 !important;
  font-weight: bold !important;
  text-shadow: 0 0 10px rgba(209, 174, 58, 0.5) !important;
}

/* Modal close button */
.modal-header .btn-close {
  filter: invert(1) !important;
  opacity: 0.7 !important;
}

.modal-header .btn-close:hover {
  opacity: 1 !important;
}

/* Modal body */
.modal-body {
  background: transparent !important;
  color: #e0e6ed !important;
  padding: 1.5rem !important;
}

/* Modal footer */
.modal-footer {
  background: transparent !important;
  border-top: 1px solid rgba(209, 174, 58, 0.3) !important;
  padding: 1rem 1.5rem !important;
}

/* Labels in modal */
.modal-body .form-label,
.modal-body label {
  color: #e0e6ed !important;
  font-weight: 500 !important;
}

/* Upload area styling */
.modal-body .dash-uploader {
  background-color: rgba(20, 27, 58, 0.6) !important;
  border: 2px dashed rgba(209, 174, 58, 0.4) !important;
  border-radius: 8px !important;
  color: #e0e6ed !important;
}

.modal-body .dash-uploader:hover {
  border-color: rgba(209, 174, 58, 0.7) !important;
  background-color: rgba(20, 27, 58, 0.8) !important;
}

/* Radio items in modal */
.modal-body .form-check-label {
  color: #e0e6ed !important;
}

.modal-body .form-check-input:checked {
  background-color: #a89050 !important;
  border-color: #a89050 !important;
}

/* Form switch styling */
.modal-body .form-switch .form-check-input {
  background-color: rgba(209, 174, 58, 0.3) !important;
  border-color: rgba(209, 174, 58, 0.5) !important;
}

.modal-body .form-switch .form-check-input:checked {
  background-color: #a89050 !important;
}