body {
  margin: 0;
  padding: 0;
  font-family: 'Merriweather Sans', sans-serif;
}

h4.map-label {
  padding: 5px 8px;
  font-size: 9px;
}




.grid-container {
  display: grid;
  /* FOR h1088 x w1920 SCREEN */
  grid-template-columns: var(--gcol-a) var(--gcol-b) var(--gcol-c);
  grid-gap: 0px;  
}


#map {
  height: 0vh;
  width: 0vw;
  visibility: hidden;
}

#map.active {
  margin: .1rem;
  height: 100vh;
  width: 100vw;
  visibility: visible;
}

#vessdata {
  background-color: black;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:2;
  grid-row-end:3;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
}

#vessevnt {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:3;
  grid-row-end:4;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
}
#waypoint {
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:3;
  grid-row-end:4;
  min-height: 41.66vh; max-height: 41.66vh;
  min-width:  41.64vw; max-width:  41.64vw;
  text-align: center;
  position: relative;
}

#waypoint-inner h3 {
  font-size: 0.6rem;
}


#vess-list {
  visibility: hidden;
  background-color: rgba(228, 225, 225, 0.836);
  /* min-height: 83.33vh; max-height: 86.33vh;
    min-width:  16.72vw; max-width:  16.72vw; */
  text-align: center;
}

#vess-list.active {
  visibility: visible;
}

#titlebar {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  min-height: 8.33vh; max-height: 8.33vh;
  min-width:  100vw; max-width:  100vw;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  
}
#newsbar {
  background-color: black;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start:4;
  grid-row-end:5;
  text-align: center;
  min-height: 8.33vh; max-height: 8.33vh;
  min-width:  100vw; max-width:  100vw;
}

/* Label that's outside the Flow  */
h2#overlay {
  position: absolute;
  top: 8.33vh;
  text-align: center;
  width: 41.02vw;
  min-width: 41.02vw; max-width: 41.02vw;
  margin: 2px 6px;
}



h1 {
  font-size: 2rem;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:black;
  
}


/* Secondary Titles */
h2 {
  /* background-color: silver; */
  border-radius: 8px;
  margin: 2px 4px;
  font-family: 'Merriweather Sans', sans-serif;
  color: black;
  text-shadow: 2px 2px 2px rgba(134, 132, 132, 0.5);
  z-index: 100;   
  background: #000; /* Safari 4-5, Chrome 1-9 */ 
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(silver)); /* Safari 5.1, Chrome 10+ */ 
  background: -webkit-linear-gradient(top, #555, silver); /* Firefox 3.6+ */ 
  background: -moz-linear-gradient(top, #555, silver); /* IE 10 */ 
  background: -ms-linear-gradient(top, #555, silver); /* Opera 11.10+ */ 
  background: -o-linear-gradient(top, #555, silver); 
  
}

/* Text in newsbar */
#newstext {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 17pt;
  color: white;
}




/* Vessel List styling */
span.waypoint {
  display:inline-block;
  letter-spacing: .4rem;
  width: 100%;
  background-color: red;
  color: rgb(245, 230, 230);
  margin: 2px; 
  padding: 2px;
}

img.dir-img {
  margin-left: auto;
  margin-right: auto;
  height: 25px;
  filter: drop-shadow(2px 2px 4px #4444dd);
}
.listMode ul {
  padding: 0px .2rem;
  max-width: 98vw;
  /*  max-height: var(--list-ht); */
  overflow: hidden;
}
.listMode ul li {
  margin: 0px;
  padding: 0px;
}
.list-wrap  {
  background-color: #2c3e50;
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  display: flex;
  font-size: 20pt;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  /* padding: 10px 0.5rem; MEDIA OVERRIDE */
  
}
.listMode h5 {
  font-size: 1rem;
  border-radius: 0px 0px 8px 8px;
  color: rgba(255, 255, 255, 0.829);
  padding: .3rem;
  margin-top: 0px;
  background: rgb(168, 179, 14);
  text-align: center;
  text-shadow: 1px 1px #000;
}
h4.map-label {
  display: inline;
  background: aquamarine;
  color: black;
  /* padding: 5px 8px; MEDIA OVER RIDE */
  border-radius: 60%;
  /* font-size: 15px; MEDIA OVER RIDE*/
  border: 2px solid black;  
}
.listMode .list-wrap h4.map-label {
  margin: 5px;
}
.list-wrap .tile-title {
  /* font-size: var(--h4vsli); */
  color: white;
  margin: auto;
  margin-bottom: 2px;
  margin-left:auto;
  margin-right: auto;
}

.list-wrap div.dir-container {
  position: relative;
  text-align: center;
}

.list-wrap span.speed {
  color: white;
  font-size: small;
  display: inline-block; 
  position: absolute; 
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

a.btn {
  background-color: #888a89; /* Green */
  border: none;
  color: rgb(12, 8, 8);
  padding: 10px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  box-shadow: 4px 4px rgba(0,0,0,0.5);
}


/* Data frame styling*/
.grid2-container {
  background-color: black;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: .07rem;
  padding: .01rem;  
}
#data-table {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start:1;
  grid-row-end:3;
  width: 17rem;  height: auto;
}
#img-frame {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start:2;
  grid-row-end:  3;
  background-color: black;
  width: 25vw;  height: auto;
}
div#img-frame img {
  max-width: 100%; overflow: hidden;
}


ul#all-vessels {  
  list-style-type: none;
  bottom: 0px;
  padding: 1px;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.4);
}
#selected-vessel > li {
  text-align: left !important;
  line-height: .9rem !important;
  margin: 5px 5% !important;
  padding-left: 10px !important; /* Restore left padding */
  overflow: hidden !important; /* Contain floated content */
  display: grid !important; /* Use CSS Grid for precise control */
  grid-template-columns: auto 1fr !important; /* Auto width for label, remaining space for value */
  gap: 1px !important; /* Very small controlled gap - should be very noticeable */
  align-items: center !important; /* Vertically center items */
}
.th {
  font-size: 1rem; /* Remove !important to allow media query override */
  color: rgb(255, 165, 56) !important;
  display: block !important; /* Change to block for grid */
  grid-column: 1 !important; /* First column */
  margin: 0 !important; /* Remove any margin */
  padding: 0 !important; /* Remove any padding */
  width: auto !important;
}

.td {
  color: white !important;
  font-size: 1rem; /* Remove !important to allow media query override */
  overflow-wrap: break-word !important;
  text-align: right !important; /* Right align the values */
  grid-column: 2 !important; /* Second column */
  margin: 0 !important; /* Remove any margin */
  padding: 0 !important; /* Remove any padding */
  width: auto !important;
  float: none !important;
}
.td.dir {
  text-transform: capitalize;
}





/* Activity Section */
.grid3-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
  padding: 0px;  
}
#event-passenger {
  grid-column-start: 1;
  grid-column-end: 2;
  width: 20vw;  height: 20vh;
}
#event-other {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 20vw;  height: 20vh;
}

li.card {
  list-style: none;
  color: black;
  /* font-family: 'Fira Sans'; */
  font-family: 'Merriweather Sans', sans-serif;
  text-align: left;
  background-color: aquamarine;
  padding-top: 0px;
  margin-top: 5px;
  width: var(--evli-wd);
  height: auto;
  margin: 6px 0px;
  border: 2px solid red;   
}

li.card.isNew {
  background-color: aquamarine;
  animation-name: colorfade;
  animation-duration: 120s;
}

@keyframes colorfade {
  0%   { background-color: aquamarine; }
  1%   { background-color: salmon;     }
  100% { background-color: aquamarine; }
}

li.card h4 {
  color: blue;
  font-size: var(--h4evt-f);
  line-height: var(--h4evt-s);
  padding: 0px 0px 0px 5px;
  margin-bottom: 5px;
  margin-top: .2rem;
}
li.card h4 time {
  color: black;
  padding-left: 25px;
}
li.card p {
  color: black;
  font-family: Arial;
  font-size: 0.6rem;
  margin-top: 0px;
  margin-bottom: 2px;
  padding: 0px 0px 0px 2px;
}
#passenger-ul {
  margin-top: 2px;
  padding-left: 10px;
}
#other-ul {
  margin-top: 2px;
  padding-left: 0px;
}

/* Waypoint section styling */
#waypoint-inner {
  background-color: rgba(81, 186, 190, 0.897);
  position: absolute;
  width: 40%;
  padding: 3px;
  border: black solid 2px;
  bottom: 25px;
  right: 25px;
  margin: auto auto;
  text-align: left;
}

em {
  color: rgb(255, 165, 56);
  font-style: normal;
}

/* List View Unit Styling - matches tile view */
.list-view-unit h5 {
  font-size: 1rem;
  border-radius: 0px 0px 8px 8px;
  color: rgba(255, 255, 255, 0.829);
  padding: .3rem;
  margin-top: 0px;
  background: rgb(168, 179, 14);
  text-align: center;
  text-shadow: 1px 1px #000;
}

/* Ensure tile view and list view h5 have same styling */
.listMode h5,
.list-view-unit h5 {
  font-size: 1rem;
  border-radius: 0px 0px 8px 8px;
  color: rgba(255, 255, 255, 0.829);
  padding: .3rem;
  margin-top: 0px;
  background: rgb(168, 179, 14);
  text-align: center;
  text-shadow: 1px 1px #000;
}

.list-view-unit .list-wrap {
  background-color: #2c3e50;
  opacity: 1;
  border-radius: 8px 8px 0px 0px;
  display: flex;
  font-size: 20pt;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  padding: 10px 0.5rem;
}

.list-view-unit .data-cont {
  background-color: black;
  padding: 10px;
  overflow: visible;
  min-height: fit-content;
}

.list-view-unit ul {
  list-style-type: none;
  padding: 0px .2rem;
  margin: 0;
  overflow: visible;
}

.list-view-unit ul li {
  margin: 0px;
  padding: 0px;
  white-space: nowrap;
  overflow: visible;
}

.list-view-unit .td {
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}

.list-view-unit .grid2-container {
  background-color: black;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: .07rem;
  padding: .01rem;
  min-height: fit-content;
  height: auto;
}

/* ===== MAPS VIEW VESSEL CARD LAYOUT ===== */
/* Desktop base layout for vessel cards */
.vessel-card {
    flex: 0 0 18rem;
    width: 18rem;
    max-width: 18rem;
    min-width: 15rem;
}

/* Ensure vessel grid maintains proper flex layout */
.vessel-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    align-content: flex-start !important;
    justify-content: flex-start !important;
}

/* ===== RESPONSIVE DESIGN FOR MAPS VIEW ===== */
/* Tablet responsiveness */
@media screen and (max-width: 1280px) {
    .vessel-card {
        flex: 0 0 11rem !important;
        width: 17rem !important;
        max-width: 17em !important;
        min-width: 12rem !important;
    }
    
    /* Scale down tile content */
    .list-wrap .tile-title {
        font-size: 1rem;
    }
    
    .list-wrap {
        font-size: 16pt;
        padding: 5px 0.3rem;
    }
    
    h4.map-label {
        font-size: 0.5rem;
        padding: 0.2rem 0.3rem;
        margin: 0.4vh;
    }
    
    img.dir-img {
        height: 1.5rem;
    }
    
    .list-wrap span.speed {
        font-size: 0.7rem;
    }
    
    .listMode h5,
    .list-view-unit h5 {
        font-size: 0.8rem;
        padding: 0.2rem;
    }
    
    /* Scale data table for tablets while preserving alignment */
    #selected-vessel > li {
        line-height: 0.8rem !important;
        margin: 3px 5% !important;
        padding-left: 8px !important; /* Slightly less padding for smaller tiles */
        display: grid !important; /* Use CSS Grid like base styles */
        grid-template-columns: auto 1fr !important; /* Auto width for label, remaining space for value */
        gap: 1px !important; /* Very small controlled gap */
        align-items: center !important; /* Vertically center items */
    }

    #data-table {
      width: 11rem;  
   }
    
    .th {
        font-size: 0.5rem !important; /* Force smaller size for tablet */
        display: block !important; /* Grid layout */
        grid-column: 1 !important; /* First column */
        margin: 0 !important; /* Remove any margin */
        padding: 0 !important; /* Remove any padding */
    }
    
    .td {
        font-size: 0.5rem !important; /* Force smaller size for tablet */
        display: block !important; /* Grid layout */
        grid-column: 2 !important; /* Second column */
        margin: 0 !important; /* Remove any margin */
        padding: 0 !important; /* Remove any padding */
        text-align: right !important; /* Keep right alignment for values */
    }
}


/* Map button styling with active state */
.map-btn {
    background: #2c3e50;
    color: #f39c12;
    border: 1px solid #f39c12;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0.5rem;
}

.map-btn.active {
    background: #f39c12;
    color: #2c3e50;
}

.map-btn.hidden {
    display: none;
}

/* Map button visibility rules */
/* Desktop views - show map buttons in both tile and list views */
@media screen and (min-width: 769px) {
    .map-btn {
        display: inline-block !important;
    }

   /* Ensure proper desktop list view display */
    .vessel-list-view[style*="display: block"] {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: calc(100vh - 200px) !important;
        overflow-y: auto !important;
        padding: 1rem !important;
        background: white;
    }
    
    /* Hide tiles when list is active */
    .vessel-list-view[style*="display: block"] + #vessel-tiles,
    #vessel-tiles[style*="display: none"] {
        display: none !important;
    }
    
    /* Show tiles with flex when list is not active */
    #vessel-tiles[style*="display: flex"],
    #vessel-tiles:not([style*="display: none"]):not([style*="display: block"]) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 1rem !important;
        padding: 1rem !important;
    }
}

/* Tablet views - show map buttons in both tile and list views */
@media screen and (max-width: 1280px) and (min-width: 769px) {
    .map-btn {
        display: inline-block !important;
        font-size: 0.6rem;
        padding: 0.1rem 0.4rem;
    }
}


/* Fix vessel tiles container flexbox */
#vessel-tiles {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding: 1rem !important;
    overflow-y: auto !important;
    max-height: calc(100vh - 200px) !important;
}

/* Ensure vessel cards have proper flex basis for wrapping */
.vessel-card {
    flex: 0 0 auto !important;
    min-width: 250px !important;
    max-width: 300px !important;
    margin-bottom: 1rem !important;
}

/* Desktop vessel card sizing */
@media screen and (min-width: 1281px) {
    .vessel-card {
        flex: 0 0 calc(33.333% - 1rem) !important;
        min-width: 280px !important;
        max-width: 320px !important;
    }
}

/* Tablet vessel card sizing */
@media screen and (max-width: 1280px) and (min-width: 769px) {
    .vessel-card {
        flex: 0 0 calc(50% - 0.5rem) !important;
        min-width: 240px !important;
        max-width: 280px !important;
    }
}

/* ========================================
   VESSEL MARKER STYLES (for AdvancedMarkerElement)
   ======================================== */

.vessel-marker {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    cursor: pointer;
}

.vessel-icon {
    width: 20px;
    height: 60px;
    transition: transform 0.2s ease;
}

.vessel-marker:hover .vessel-icon {
    transform: scale(1.1);
}

.vessel-label {
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    margin-top: 2px;
    text-align: center;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Watched vs Normal vessel styling */
.vessel-marker.watched .vessel-label {
    background: black; /* Yellow background for watched */
    color: yellow;
}

.vessel-marker.normal .vessel-label {
    background: black; /* Blue background for normal */
    color: cyan;
}

/* Simple marker styles for lower zoom levels (< 13) */
.vessel-simple-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
    font-family: 'Merriweather Sans', sans-serif;
    user-select: none;
}

.vessel-simple-marker:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4) !important;
}