body {
  background-color: #0a192f; /* Deep navy background */
  color: #e6f1ff; /* Light blue-white text */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  padding-top: 80px; /* Make room for the fixed header */
}

/* Header Styles */
.main-header {
  background-color: #0c1c33; /* Slightly darker navy for header */
  padding: 15px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
}

.main-header .container-fluid {
  padding-left: 12px;
  padding-right: 12px;
}

.logo-container {
  background-color: #00b4d8; /* Marine blue accent */
  width: 38px; /* Reduced from 45px */
  height: 38px; /* Reduced from 45px */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-icon {
  font-size: 19px; /* Reduced from 22px */
  color: #0a192f; /* Dark navy */
}

.header-title {
  margin: 0;
  font-size: 1.3rem; /* Smaller from 1.4rem */
  font-weight: 600;
  color: #e6f1ff;
  white-space: nowrap;
}

.header-user-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
  border: 2px solid #00b4d8; /* Marine blue */
}

.user-name {
  font-weight: 600;
  color: #e6f1ff;
  margin-right: 10px;
}

.user-role {
  color: #8892b0; /* Muted blue-gray */
  font-size: 0.8rem;
}

/* Logo and Title Alignment Styles */
.logo-wrapper {
  display: flex;
  align-items: center;
}

.header-logo {
  height: 40px;
  width: auto;
  margin-right: 5px;
}

/* Responsive adjustments for logo and title */
@media (max-width: 767.98px) {
  .header-logo {
    height: 32px;
  }

  .header-title {
    font-size: 1.1rem;
  }
}

@media (max-width: 575.98px) {
  .header-logo {
    height: 28px;
  }

  .header-title {
    font-size: 1rem;
  }
}

/* Enhanced Navigation */
.navbar {
  background-color: #112240; /* Medium navy */
}

.navbar .container {
  padding-left: 5px;
  padding-right: 5px;
  max-width: 99%;
}

.side-navbar {
  margin-top: 8px; /* Reduced from 10px */
  margin-bottom: 12px;
  border-radius: 8px; /* Smaller radius */
  padding: 2px 0; /* Add compact vertical padding */
}

.nav-link {
  padding: 5px 8px; /* More compact menu items */
  border-radius: 6px; /* Smaller radius */
  font-size: 0.9rem; /* Smaller font size */
  margin: 0 2px; /* Add small margin between items */
}

.navbar-nav {
  gap: 2px; /* Small gap between nav items */
}

.nav-link:hover {
  background-color: rgba(0, 180, 216, 0.1); /* Transparent marine blue */
}

.nav-link.active {
  background-color: #00b4d8; /* Marine blue */
  color: #0a192f !important;
  font-weight: 600;
}

.navbar-dark .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.85); /* Slightly brighter text */
}

.logout-btn {
  color: #ef476f !important; /* Coral red */
  border: 1px solid #ef476f;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.logout-btn:hover {
  background-color: #ef476f;
  color: white !important;
}

.card {
  background-color: #112240; /* Medium navy */
  border-radius: 15px;
  margin-bottom: 15px; /* Reduced from 20px */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
  border: none;
}

.card-header {
  background-color: #0c1c33; /* Darker navy */
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 1px solid #1d3557; /* Border color */
  font-weight: bold;
  padding: 0.5rem 0.75rem; /* More compact header */
}

.card-body {
  padding: 0.75rem; /* Reduced padding inside cards */
}

.gauge-container {
  position: relative;
  height: 200px;
}

.gauge {
  width: 100%;
  height: 200px;
}

.value-display {
  position: absolute;
  bottom: 40px;
  width: 100%;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #00b4d8; /* Marine blue */
}

.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 5px;
}

.online {
  background-color: #06d6a0; /* Teal-green success */
}

.offline {
  background-color: #ef476f; /* Coral red */
}

.warning {
  background-color: #ffd60a; /* Yellow */
}

.device-card {
  transition: transform 0.3s;
}

.device-card:hover {
  transform: translateY(-5px);
}

.dashboard-title {
  color: #00b4d8; /* Marine blue */
  margin-bottom: 30px;
}

.last-update {
  font-size: 12px;
  color: #8892b0; /* Muted blue-gray */
}

/* Submenu Styles */
.dropdown-menu.submenu {
  background-color: #0a192f; /* Deep navy */
  border: 1px solid #1d3557; /* Border color */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 5px; /* Reduced from 8px */
  margin-top: 3px; /* Reduced from 5px */
  min-width: 200px; /* Reduced from 220px */
}

.dropdown-item {
  color: #e6f1ff;
  padding: 5px 10px; /* Reduced from 8px 15px */
  border-radius: 4px; /* Smaller radius */
  font-size: 0.85rem; /* Smaller font */
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(0, 180, 216, 0.15); /* Transparent marine blue */
  color: #00b4d8; /* Marine blue */
}

.dropdown-divider {
  border-top: 1px solid #1d3557; /* Border color */
  margin: 5px 0;
}

.dropdown-toggle::after {
  margin-left: 5px; /* Reduced from 10px */
  font-size: 0.8em; /* Smaller dropdown arrow */
}

/* Mobile submenu adjustments */
@media (max-width: 991.98px) {
  .dropdown-menu.submenu {
    background-color: rgba(10, 25, 47, 0.5); /* Transparent deep navy */
    border: none;
    box-shadow: none;
    padding-left: 15px;
  }

  .navbar-nav .dropdown-menu {
    position: static;
  }
}

/* Mobile Optimization Styles */
@media (max-width: 767.98px) {
  body {
    padding-top: 60px; /* Reduce top padding on mobile */
  }

  /* Header adjustments for mobile */
  .main-header {
    padding: 10px 0;
  }

  .logo-container {
    width: 35px;
    height: 35px;
  }

  .header-title {
    font-size: 1.1rem;
  }

  .user-name {
    display: none; /* Hide user name on very small screens */
  }

  .user-avatar {
    width: 30px;
    height: 30px;
  }

  /* Dashboard content adjustments */
  .dashboard-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
  }

  .card {
    margin-bottom: 15px;
  }

  .card-header {
    padding: 0.5rem; /* Smaller padding for card headers on mobile */
  }

  .gauge-container {
    height: 150px; /* Smaller gauges on mobile */
  }

  .gauge {
    height: 150px;
  }

  .value-display {
    bottom: 25px;
    font-size: 20px;
  }

  /* Improve table display on mobile */
  .table-responsive {
    font-size: 0.85rem;
  }

  /* Better touch targets for mobile navigation */
  .nav-link {
    padding: 8px 12px; /* Ensure touch targets remain usable */
    font-size: 0.95rem; /* Slightly larger font on mobile */
  }

  .dropdown-item {
    padding: 10px 15px; /* Keep larger touch targets on mobile */
    font-size: 0.9rem; /* Slightly larger font on mobile */
  }

  /* Adjust submenu appearance on mobile */
  .dropdown-menu.submenu {
    width: 100%;
    margin-top: 0;
    padding: 0;
    border: none;
    background-color: rgba(0, 180, 216, 0.05); /* Transparent marine blue */
  }

  /* Reduced extra spacing */
  .side-navbar {
    margin-top: 8px;
    margin-bottom: 15px;
  }

  /* Give more vertical spacing between cards */
  .row > [class*="col-"] {
    margin-bottom: 15px;
  }
}

/* Small mobile devices */
@media (max-width: 575.98px) {
  .main-header .container-fluid {
    padding: 0 10px;
  }

  .user-role {
    display: none; /* Hide role on tiny screens */
  }

  .container {
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* Stack the menu items for better touch usability */
  .navbar-nav {
    width: 100%;
  }

  .navbar-nav .nav-item {
    width: 100%;
  }

  /* Make logout button full width on mobile */
  .logout-btn {
    width: 100%;
    text-align: center;
    margin-top: 10px;
  }

  /* Simplified table on very small screens */
  .table-dark th,
  .table-dark td {
    padding: 8px 5px;
  }

  /* Hide less important table columns on very small screens */
  .table-responsive table th:nth-child(5),
  .table-responsive table td:nth-child(5) {
    display: none;
  }
}

/* Fix for chart responsiveness */
canvas#historyChart {
  max-height: 300px;
}

/* More compact layout with reduced side margins */
.container {
  max-width: 98%;
  padding-left: 10px;
  padding-right: 10px;
}

/* Adjust row gutters to be smaller */
.row {
  margin-right: -8px;
  margin-left: -8px;
}

.row > [class*="col-"] {
  padding-right: 8px;
  padding-left: 8px;
}

/* Make equal height cards more compact */
.equal-height-cards {
  margin-top: 0;
}

/* Responsive adjustments for compact layout */
@media (min-width: 992px) {
  /* For desktop, make it even more compact */
  .container {
    max-width: 99%;
  }
}

/* Mobile-optimized footer */
footer {
  padding: 8px 0;
  margin-top: 15px; /* Reduced from 20px */
}

/* Map footer adjustments for better spacing */
.card-footer small {
  display: inline-block;
}

/* Responsive adjustments for map footer */
@media (max-width: 767.98px) {
  .text-md-start,
  .text-md-end {
    text-align: center !important;
  }
}

/* Enhanced scrolling for mobile */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(230, 241, 255, 0.05); /* Very light blue */
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 216, 0.5); /* Semi-transparent marine blue */
  border-radius: 3px;
}

/* Content placeholder styling */
.content-placeholder {
  color: #8892b0;
  padding: 60px 20px;
  border-radius: 15px;
  background-color: #112240;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.content-placeholder i {
  color: #00b4d8;
  margin-bottom: 20px;
}

.content-placeholder h2 {
  color: #e6f1ff;
  margin-bottom: 15px;
}

.content-placeholder p {
  color: #8892b0;
  max-width: 500px;
  margin: 0 auto;
}

/* Sea Map Styles */
.sea-map {
  width: 100%;
  height: 500px;
  background-color: #0077be; /* Ocean blue background */
  border-radius: 0;
  z-index: 1;
}

.map-controls .btn {
  border-color: #00b4d8;
  color: #e6f1ff;
}

.map-controls .btn:hover {
  background-color: #00b4d8;
  color: #0a192f;
}

/* Ensure proper leaflet popup styling in our theme */
.leaflet-popup-content-wrapper {
  background-color: #0c1c33;
  color: #e6f1ff;
  border-radius: 8px;
}

.leaflet-popup-tip {
  background-color: #0c1c33;
}

.leaflet-container a.leaflet-popup-close-button {
  color: #e6f1ff;
}

.leaflet-container a {
  color: #00b4d8;
}

/* Make map responsive on mobile */
@media (max-width: 767.98px) {
  .sea-map {
    height: 400px;
  }
}

@media (max-width: 575.98px) {
  .sea-map {
    height: 350px;
  }

  .map-controls {
    margin-bottom: 5px;
  }
}

/* Sea Depth Visualization Styles */
.depth-legend {
  background-color: #0c1c33;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  color: #e6f1ff;
  max-width: 150px;
}

.depth-legend h4 {
  font-size: 14px;
  margin: 0 0 8px 0;
  text-align: center;
}

.depth-scale {
  display: flex;
  align-items: center;
}

.depth-gradient {
  width: 20px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #b5d0d0,
    /* Shallow */ #a2c9d9,
    #93b7c9,
    #729dc8,
    #5087bc,
    #2d70ae,
    #0f5e9c,
    #064b87,
    #043b6f,
    /* Deep */ #032855 /* Very deep */
  );
  margin-right: 8px;
  border-radius: 3px;
}

.depth-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  font-size: 12px;
}

.depth-info {
  max-width: 250px;
}

.depth-info .card {
  margin-bottom: 0;
}

.depth-info .card-body {
  padding: 10px;
  font-size: 14px;
}

#depth-value {
  font-weight: bold;
  margin-top: 5px;
  color: #00b4d8;
}

.profile-button {
  margin: 10px;
}

.depth-profile-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 1000;
  max-width: 800px;
  margin: 0 auto;
}

.depth-profile-container .card {
  margin-bottom: 0;
}

.depth-profile-container .card-body {
  padding: 10px;
  background-color: #0a192f;
}

/* Responsive adjustments for depth elements */
@media (max-width: 767.98px) {
  .depth-legend {
    max-width: 120px;
  }

  .depth-gradient {
    height: 150px;
  }

  .depth-labels {
    height: 150px;
    font-size: 10px;
  }

  .depth-profile-container {
    bottom: 10px;
    left: 10px;
    right: 10px;
  }
}

@media (max-width: 575.98px) {
  .depth-legend {
    padding: 5px;
    max-width: 80px;
  }

  .depth-legend h4 {
    font-size: 12px;
  }

  .depth-gradient {
    width: 15px;
    height: 120px;
  }

  .depth-labels {
    height: 120px;
    font-size: 9px;
  }
}

/* Enhanced Depth Visualization Styles */
.depth-color-scale-container {
  background-color: rgba(12, 28, 51, 0.8);
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.depth-color-scale {
  display: flex;
  align-items: center;
}

.color-scale-gradient {
  position: relative;
  width: 25px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #aad3df,
    /* Very light blue - shallow */ #69b0c9,
    /* Light blue */ #3585b5,
    /* Medium blue */ #2271b2,
    /* Blue */ #1a5c9f,
    /* Deeper blue */ #0d4a89,
    /* Dark blue */ #083872,
    /* Very dark blue */ #052555,
    /* Darkest blue - deep */ #031840 /* Almost black blue - very deep */
  );
  border-radius: 3px;
  margin-right: 8px;
}

.color-scale-highlight {
  position: absolute;
  left: -5px;
  width: 35px;
  height: 2px;
  background-color: #ffffff;
  pointer-events: none;
  transform: translateY(-50%);
}

.color-scale-labels {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
  font-size: 12px;
  color: #e6f1ff;
}

.depth-hover-info {
  max-width: 250px;
}

.depth-hover-info .card {
  margin-bottom: 0;
}

.depth-hover-info .card-body {
  padding: 10px;
  font-size: 14px;
}

#hover-depth-value {
  font-weight: bold;
  color: #00b4d8;
}

/* Depth contour label styling */
.depth-contour-label {
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: bold;
  text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000;
  background: none;
  border: none;
  text-align: center;
}

.depth-contour-label div {
  padding: 2px 4px;
  border-radius: 3px;
  background-color: rgba(0, 0, 0, 0.3);
}

/* Media queries for depth visualization elements */
@media (max-width: 767.98px) {
  .color-scale-gradient {
    height: 150px;
  }

  .color-scale-labels {
    height: 150px;
    font-size: 10px;
  }

  .depth-contour-label {
    font-size: 9px;
  }
}

@media (max-width: 575.98px) {
  .color-scale-gradient {
    width: 20px;
    height: 120px;
  }

  .color-scale-labels {
    height: 120px;
    font-size: 9px;
  }

  .color-scale-highlight {
    left: -3px;
    width: 26px;
  }
}

/* Jakarta Bay Shallow Water Depth Scale */
.coastal-scale-gradient {
  position: relative;
  width: 25px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #c4e0f0,
    /* Very light blue - extremely shallow */ #a6d1e6,
    /* Light blue - very shallow */ #7db9df,
    /* Light medium blue - shallow */ #5aa4d9,
    /* Medium blue - moderate */ #4190c0,
    /* Medium deep blue - mid depth */ #3072a3,
    /* Deep blue - deeper */ #205886 /* Dark blue - deepest in bay */
  );
  border-radius: 3px;
  margin-right: 8px;
}

.depth-at-ship {
  font-size: 13px;
  background-color: rgba(0, 180, 216, 0.1);
  padding: 5px 8px;
  border-radius: 4px;
  text-align: center;
}

.depth-at-ship span {
  color: #8892b0;
  font-size: 0.9em;
}

.depth-at-ship strong {
  font-size: 1.1em;
}

/* Marine Ship Icon Styles - Replace Triangle */
.ship-marker-icon {
  background: none;
  border: none;
}

.ship-icon-container {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
}

/* Create smaller red triangle */
.triangle-marker {
  width: 0;
  height: 0;
  border-left: 8px solid transparent; /* Reduced from 12px */
  border-right: 8px solid transparent; /* Reduced from 12px */
  border-bottom: 20px solid #ff3333; /* Reduced from 30px */
  position: relative;
  transform-origin: center bottom;
  filter: drop-shadow(
    0 0 3px rgba(255, 51, 51, 0.7)
  ); /* Reduced shadow spread */
}

/* Hide the ship icon */
.ship-icon {
  display: none;
}

/* Updated tracking notification */
.tracking-notification .alert {
  background-color: rgba(255, 51, 51, 0.15);
  border: 1px solid #ff3333;
  box-shadow: 0 0 15px rgba(255, 51, 51, 0.3);
  color: #e6f1ff;
  padding: 8px 15px;
  margin-bottom: 0;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.tracking-notification .btn-close {
  font-size: 10px;
  padding: 5px;
}

/* Ship Marker and Information Styles */
.ship-info-popup {
  min-width: 220px;
}

.ship-info-popup h4 {
  color: #00e5ff;
  font-size: 16px;
  margin-bottom: 10px;
  text-align: center;
  border-bottom: 1px solid #1d3557;
  padding-bottom: 5px;
}

.ship-details {
  width: 100%;
  font-size: 13px;
}

.ship-details td {
  padding: 3px 0;
}

.ship-details td:first-child {
  width: 40%;
}

.status-active {
  color: #06d6a0;
  font-weight: bold;
}

.ship-action-buttons {
  display: flex;
  justify-content: space-between;
}

.ship-action-buttons .btn {
  font-size: 12px;
  flex: 1;
  margin: 0 3px;
}

.ship-action-buttons .btn-info {
  background-color: #00b4d8;
  border-color: #00b4d8;
  box-shadow: 0 0 10px rgba(0, 180, 216, 0.3);
  transition: all 0.3s ease;
}

.ship-action-buttons .btn-info:hover {
  background-color: #00e5ff;
  border-color: #00e5ff;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.5);
  transform: translateY(-2px);
}

.ship-info-panel {
  max-width: 250px;
}

.ship-info-panel .card-body {
  padding: 10px;
}

.ship-info-panel h5 {
  color: #00b4d8;
  margin: 0;
  font-size: 16px;
}

.ship-stats {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

.ship-stats div {
  font-size: 13px;
}

.ship-stats span {
  color: #8892b0;
  margin-right: 5px;
}

.tracking-notification {
  max-width: 300px;
}

.tracking-notification .alert {
  background-color: rgba(0, 180, 216, 0.3);
  border: 1px solid #00e5ff;
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.3);
  color: #e6f1ff;
  padding: 8px 15px;
  margin-bottom: 0;
  border-radius: 5px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.tracking-notification .btn-close {
  font-size: 10px;
  padding: 5px;
}

/* Responsive adjustments for ship marker */
@media (max-width: 767.98px) {
  .ship-info-panel {
    max-width: 200px;
  }

  .ship-info-panel h5 {
    font-size: 14px;
  }

  .ship-stats div {
    font-size: 12px;
  }

  .tracking-notification {
    max-width: 250px;
  }

  .tracking-notification .alert {
    font-size: 12px;
    padding: 6px 10px;
  }
}

/* Refined Nautical Speedometer Styles */
.speedometer-container {
  position: relative;
  height: auto;
  min-height: 280px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px; /* Add some bottom margin */
}

.speedometer {
  position: relative;
  width: 220px; /* Slightly smaller for better proportions */
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px; /* Add space between gauge and markers */
}

/* Refine the scale appearance */
.speedometer-scale {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #041a2e;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
  border: 8px solid #18364f; /* Slightly thinner border */
  background-image: radial-gradient(circle at center, #0a2642 0%, #041a2e 70%);
}

/* Improve the scale markings */
.speedometer-scale::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background-image: conic-gradient(
    from 150deg,
    transparent 0deg,
    transparent 5deg,
    rgba(255, 255, 255, 0.15) 5deg,
    rgba(255, 255, 255, 0.15) 6deg,
    transparent 6deg,
    transparent 10deg,
    rgba(255, 255, 255, 0.15) 10deg,
    rgba(255, 255, 255, 0.15) 11deg,
    transparent 11deg,
    transparent 15deg,
    rgba(255, 255, 255, 0.15) 15deg,
    rgba(255, 255, 255, 0.15) 16deg,
    transparent 16deg,
    transparent 20deg,
    rgba(255, 255, 255, 0.4) 20deg,
    rgba(255, 255, 255, 0.4) 21deg,
    transparent 21deg
  );
  background-size: 40deg 100%;
  background-repeat: repeat;
  z-index: 2;
}

/* Refine the colored gradient */
.speedometer-scale-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 150deg,
    #052555 0%,
    #0d4a89 40%,
    #00b4d8 70%,
    #06d6a0 85%,
    #ff3333 95%,
    #ff3333 100%
  );
  clip-path: polygon(
    0% 0%,
    100% 0%,
    100% 100%,
    50% 82%,
    0% 100%
  ); /* Adjusted clip path */
  opacity: 0.9; /* Slightly more opaque */
}

/* Refined brass trim */
.speedometer::after {
  content: "";
  position: absolute;
  width: 104%;
  height: 104%;
  border-radius: 50%;
  border: 3px solid #b38b30;
  box-shadow: inset 0 0 8px rgba(179, 139, 48, 0.5);
  z-index: 1;
}

/* Improve center dial */
.speedometer-center {
  position: relative;
  z-index: 5;
  background-color: #0a192f;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border: 3px solid #18364f;
  background-image: radial-gradient(circle at center, #0d2642 0%, #0a192f 90%);
}

/* Refined decorative mark */
.speedometer-center::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  background-color: #b38b30;
  clip-path: polygon(0% 100%, 35% 35%, 100% 0%, 65% 65%);
  opacity: 0.9;
}

/* Improved value styling */
.speedometer-value {
  font-size: 2.1rem;
  font-weight: 700;
  color: #e6f1ff;
  line-height: 1;
  margin-bottom: 4px;
  text-shadow: 0 0 5px rgba(230, 241, 255, 0.3);
}

.speedometer-value .units {
  font-size: 0.75rem;
  font-weight: normal;
  color: #8892b0;
  margin-left: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.speedometer-label {
  font-size: 0.75rem;
  color: #8892b0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Improved needle */
.speedometer-needle {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 3px; /* Slightly thinner */
  height: 46%;
  background-color: #ff3333;
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 7;
  filter: drop-shadow(0 0 3px rgba(255, 51, 51, 0.8));
  animation: needle-vibrate 0.1s infinite;
}

@keyframes needle-vibrate {
  0%,
  100% {
    transform: translateX(-50%) rotate(var(--needle-angle, 75deg));
  }
  50% {
    transform: translateX(-50%)
      rotate(calc(var(--needle-angle, 75deg) + 0.5deg));
  }
}

/* Better arrow tip */
.speedometer-needle::before {
  content: "";
  position: absolute;
  top: -2px; /* Slight overlap for a cleaner connection */
  left: 50%;
  transform: translateX(-50%);
  width: 9px;
  height: 9px;
  background-color: inherit;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/* Better needle center */
.speedometer-needle-center {
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 16px; /* Slightly smaller */
  height: 16px;
  border-radius: 50%;
  transform: translate(-50%, 50%);
  z-index: 8;
  background: radial-gradient(circle at center, #ff5555, #cc2828);
  box-shadow: 0 0 5px rgba(255, 51, 51, 0.8), inset 0 0 3px #ffa0a0;
  border: 2px solid #871515;
}

/* Organize markers better */
.speedometer-markers {
  display: flex;
  justify-content: space-between;
  width: 180px; /* Controlled width */
  padding: 0;
  margin-top: 8px;
  position: relative;
}

.speedometer-markers span {
  color: #a4b1cf; /* Brighter color for better visibility */
  font-size: 0.75rem;
  position: relative;
  padding-top: 6px;
  font-weight: 600;
}

/* Better marker dots */
.speedometer-markers span::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #00b4d8;
  border-radius: 50%;
}

.speedometer-markers .low::before {
  background-color: #06d6a0;
}

.speedometer-markers .high::before {
  background-color: #ff3333;
}

/* Cleaner text labels */
.speedometer-extra-labels {
  position: relative;
  width: 200px;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-top: 3px;
  font-size: 0.65rem;
  color: #8892b0;
}

.speedometer-extra-labels .label {
  transform: translateX(-50%);
}

.speedometer-extra-labels .label:first-child {
  transform: translateX(0);
}

.speedometer-extra-labels .label:last-child {
  transform: translateX(-100%);
}

/* Better ship icon */
.ship-icon-decoration {
  position: absolute;
  top: 33%;
  color: rgba(0, 180, 216, 0.12);
  font-size: 1.8rem;
  z-index: 1;
  transform: translateY(-50%);
}

/* Better responsive adjustments */
@media (max-width: 767.98px) {
  .speedometer {
    width: 180px;
    height: 180px;
  }

  .speedometer-container {
    height: auto;
    min-height: 240px;
  }

  .speedometer-value {
    font-size: 1.7rem;
  }

  .speedometer-markers {
    width: 160px;
  }

  .speedometer-extra-labels {
    width: 170px;
    font-size: 0.6rem;
  }

  .speedometer::after {
    border-width: 2px;
  }

  .speedometer-center {
    border-width: 2px;
  }

  .speedometer-scale {
    border-width: 6px;
  }
}

/* Speed Stats Styles */
.speed-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.speed-stat-card {
  background-color: #0c1c33;
  border-radius: 10px;
  padding: 12px 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.stat-header {
  display: flex;
  align-items: center;
  color: #8892b0;
  font-size: 0.85rem;
  margin-bottom: 5px;
}

.stat-header i {
  margin-right: 8px;
  color: #00b4d8;
}

.stat-value {
  font-size: 1.5rem;
  font-weight: 600;
  color: #e6f1ff;
}

.stat-unit {
  font-size: 0.9rem;
  color: #8892b0;
  margin-left: 3px;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
  .speedometer {
    width: 200px;
    height: 200px;
  }

  .speedometer-value {
    font-size: 1.8rem;
  }

  .speedometer-container {
    height: auto;
    min-height: 220px;
  }

  .stat-value {
    font-size: 1.3rem;
  }
}

/* Equal Height Card Styles */
.equal-height-cards {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
}

.equal-height-cards > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

.full-height-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.full-height-card .card-body {
  flex: 1;
}

/* Map container adjustments for equal height */
.sea-map-container {
  width: 100%;
  height: 100%;
  min-height: 380px;
  position: relative;
}

/* Adjust the sea map to fill available space */
.sea-map {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0077be;
  border-radius: 0;
  z-index: 1;
}

/* Smaller ship position and map data text */
.map-footer-info {
  font-size: 0.65rem; /* Reduced from default size */
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
}

.map-footer-info i {
  font-size: 0.7rem;
}

.map-attribution {
  font-size: 0.6rem; /* Even smaller for attribution */
  opacity: 0.7;
}

.map-attribution a {
  opacity: 0.9;
}

/* More compact card footer for the map */
.map-card .card-footer {
  padding: 0.4rem 0.75rem;
  line-height: 1.2;
}

/* Responsive adjustments for the footer information */
@media (max-width: 767.98px) {
  .map-footer-info,
  .map-attribution {
    text-align: center;
    display: block;
    max-width: 100%;
  }

  .map-footer-info {
    margin-bottom: 0.2rem;
  }
}

/* Responsive adjustments for equal heights */
@media (max-width: 991.98px) {
  .sea-map-container {
    min-height: 350px;
  }

  .speedometer-container {
    min-height: 240px;
  }
}

@media (max-width: 767.98px) {
  .equal-height-cards {
    display: block;
  }

  .equal-height-cards > [class*="col-"] {
    display: block;
  }

  .full-height-card {
    height: auto;
  }

  .sea-map-container {
    min-height: 300px;
  }

  .speedometer-container {
    min-height: 220px;
  }
}

/* Hide old styles that are no longer needed */
.speed-display,
.current-speed,
.average-speed,
.speed-icon {
  display: none;
}

/* Engine Monitoring Styles */
.engine-monitor-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  height: 100%;
}

.gauge-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #00b4d8;
  margin-bottom: 15px;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.gauge-status {
  font-size: 0.85rem;
  color: #8892b0;
  text-align: center;
  margin-top: 10px;
}

.gauge-status::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #06d6a0;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: status-pulse 1.5s infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.2);
  }
}

/* Temperature Gauge Styles */
.temperature-gauge-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.temperature-gauge {
  position: relative;
  width: 200px;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.temperature-scale {
  width: 180px;
  height: 35px;
  background-color: #0c1c33;
  border-radius: 8px;
  position: relative;
  margin-top: 20px;
  border: 2px solid #1d3557;
  overflow: hidden;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
}

.temperature-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 60%; /* Initial width - will be controlled by JS */
  background: linear-gradient(
    to right,
    #06d6a0 0%,
    #06d6a0 30%,
    #00b4d8 60%,
    #ef476f 90%
  );
  transition: width 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}

.temperature-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 5px;
  background-color: rgba(255, 255, 255, 0.4);
  animation: temp-pulse 3s infinite;
}

@keyframes temp-pulse {
  0%,
  100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}

.temperature-markers {
  position: absolute;
  top: 38px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #8892b0;
  padding: 0 5px;
}

.temperature-value {
  font-size: 2.5rem;
  font-weight: 700;
  margin-top: 25px;
  color: #e6f1ff;
  text-shadow: 0 0 10px rgba(0, 180, 216, 0.3);
}

.temperature-value .unit {
  font-size: 1rem;
  font-weight: normal;
  color: #8892b0;
}

.temperature-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #00b4d8;
  font-size: 1.3rem;
  opacity: 0.8;
}

.temperature-warning {
  position: absolute;
  bottom: 55px;
  left: 0;
  right: 0;
  text-align: center;
  color: #ef476f;
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.temperature-warning i {
  margin-right: 5px;
  animation: pulse 1.5s infinite;
}

.engine-image-container {
  position: relative;
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.engine-image {
  width: 120px;
  height: auto;
  opacity: 0.8;
  filter: drop-shadow(0 0 5px rgba(0, 180, 216, 0.5));
}

.engine-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(239, 71, 111, 0.3) 0%,
    rgba(239, 71, 111, 0) 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Enhanced RPM Gauge Styles */
.rpm-gauge-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  gap: 15px;
}

.rpm-gauge {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Improved RPM Dial */
.rpm-dial {
  position: relative;
  width: 220px; /* Slightly wider */
  height: 120px; /* Slightly taller */
  background: radial-gradient(
    circle at bottom center,
    #112240,
    #0c1c33
  ); /* Better gradient background */
  border-radius: 110px 110px 0 0; /* Match the width */
  border: 3px solid #1d3557; /* Thicker border */
  border-bottom: none; /* Remove bottom border */
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8), 0 5px 10px rgba(0, 0, 0, 0.4); /* Better shadow */
  overflow: hidden;
  margin-bottom: 15px; /* More space below the dial */
}

/* Add clear tick marks */
.rpm-tick {
  position: absolute;
  bottom: 20px; /* Raise them up a bit */
  transform-origin: center bottom;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75); /* Brighter text */
  z-index: 2;
}

/* Position the tick marks */
.rpm-tick-0 {
  left: 10px;
}
.rpm-tick-1 {
  left: 20%;
}
.rpm-tick-2 {
  left: 33%;
}
.rpm-tick-3 {
  left: 50%;
  transform: translateX(-50%);
}
.rpm-tick-4 {
  right: 33%;
}
.rpm-tick-5 {
  right: 20%;
}
.rpm-tick-6 {
  right: 10px;
}

/* Add colored segments to the dial */
.rpm-dial::before {
  content: "";
  position: absolute;
  bottom: 40px;
  left: 10px;
  right: 10px;
  height: 3px;
  background: linear-gradient(
    to right,
    rgba(6, 214, 160, 0.5),
    /* Green for low RPM */ rgba(0, 180, 216, 0.6) 30%,
    /* Blue for medium RPM */ rgba(255, 214, 10, 0.7) 75%,
    /* Yellow for high RPM */ rgba(239, 71, 111, 0.8) /* Red for max RPM */
  );
  border-radius: 3px;
  z-index: 1;
}

/* Add tick mark lines */
.rpm-dial::after {
  content: "";
  position: absolute;
  bottom: 35px;
  left: 10px;
  right: 10px;
  height: 20px;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 15.5%,
    rgba(255, 255, 255, 0.2) 15.5%,
    rgba(255, 255, 255, 0.2) 16%
  );
  opacity: 0.7;
  z-index: 1;
}

/* Improved needle */
.rpm-needle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px; /* Slightly thicker */
  height: 95px; /* Longer needle */
  background: linear-gradient(
    to top,
    #ef476f,
    #ff6b6b
  ); /* Gradient for needle */
  transform-origin: bottom center;
  transform: translateX(-50%) rotate(0deg);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 3;
  filter: drop-shadow(0 0 5px rgba(239, 71, 111, 0.8));
  animation: needle-vibrate 0.1s infinite;
}

.rpm-needle::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background-color: #ff6b6b; /* Match needle color */
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

.rpm-needle-center {
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: radial-gradient(
    circle at center,
    #ff6b6b,
    #cc2828
  ); /* Better gradient */
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 0 5px rgba(239, 71, 111, 0.8),
    inset 0 0 3px rgba(255, 255, 255, 0.6);
  border: 2px solid #871515;
  z-index: 4;
}

/* Improved RPM value display */
.rpm-value {
  font-size: 3rem; /* Larger font */
  font-weight: 700;
  margin: 5px 0 0 0; /* Better spacing */
  color: #e6f1ff;
  text-shadow: 0 0 10px rgba(0, 180, 216, 0.4);
  line-height: 1;
  letter-spacing: -1px; /* Tighter spacing for numbers */
}

.rpm-value .unit {
  font-size: 1rem;
  font-weight: normal;
  color: #8892b0;
  margin-left: 4px;
  letter-spacing: 0;
}

/* Responsive adjustments for engine monitors */
@media (max-width: 991.98px) {
  .engine-data-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .temperature-gauge-container,
  .rpm-gauge-container {
    flex-direction: column;
  }

  .temperature-gauge,
  .rpm-gauge {
    margin-bottom: 20px;
  }

  .temperature-scale {
    width: 150px;
  }

  .rpm-dial {
    width: 180px;
    height: 100px;
  }

  .rpm-needle {
    height: 75px;
  }

  .rpm-tick {
    font-size: 0.7rem;
    bottom: 15px;
  }

  .rpm-dial::before {
    bottom: 35px;
  }

  .rpm-dial::after {
    bottom: 30px;
  }

  .temperature-value,
  .rpm-value {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .engine-data-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .gauge-title {
    font-size: 1rem;
    margin-bottom: 10px;
  }
}

/* Enhanced Engine 1 Animation Effects */
.engine-vibration {
  animation: none !important; /* Override and disable the vibration animation */
}

@keyframes engine-vibrate {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-0.5px, -0.5px);
  }
  20% {
    transform: translate(0.5px, 0);
  }
  30% {
    transform: translate(-0.5px, 0.5px);
  }
  40% {
    transform: translate(0.5px, 0.5px);
  }
  50% {
    transform: translate(-0.5px, -0.5px);
  }
  60% {
    transform: translate(0.5px, -0.5px);
  }
  70% {
    transform: translate(-0.5px, 0.5px);
  }
  80% {
    transform: translate(0.5px, 0.5px);
  }
  90% {
    transform: translate(-0.5px, 0);
  }
}