/* Custom styling for the Wave Glider Buddy System */

/* Error chart container styling */
.chart-container {
    position: relative;
    height: 300px !important;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

/* Center chart titles */
h5.mt-3 {
    text-align: center;
    margin-bottom: 1rem !important;
}

.chart-container canvas {
    max-width: 100% !important;
    max-height: 100% !important;
}

/* Apply highlight to the table cells (td) within the marked row (tr) */
.table > tbody > tr.pic-handoff-highlight > td {
  background-color: var(--highlight-bg) !important;
  /* This targets the <td> elements directly, ensuring the background is visible. */
}

/* PIC Handoff: highlight row when value has changed since last PIC (most recent submission only) */
.pic-handoff-item-changed {
  border-left: 3px solid var(--bs-warning);
}

/* PIC Handoff: unverified data when viewing a submission */
.pic-unverified-value {
  font-weight: bold;
  color: var(--bs-danger, #dc3545);
}

/* PIC Handoff details modal: at-a-glance block */
.pic-handoff-at-glance {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  padding: 0.75rem 1rem;
}

/* PIC Handoff details modal: category subheadings – stand out more */
.pic-handoff-category {
  font-weight: 600;
  font-size: 1rem;
  color: var(--bs-body-color);
  padding: 0.35rem 0 0.35rem 0.5rem;
  border-left: 3px solid var(--bs-primary);
  background-color: var(--bs-tertiary-bg);
  margin-bottom: 0.5rem;
  border-radius: 0 var(--bs-border-radius) 0 0;
}

/* PIC Handoff details modal: color guide legend at top */
.pic-handoff-color-guide {
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}
.pic-handoff-color-guide-label {
  font-weight: 600;
  color: var(--bs-body-color);
}
.pic-handoff-color-guide-changed {
  display: inline-block;
  padding-left: 0.25rem;
  border-left: 3px solid var(--bs-warning);
  margin-left: 0.15rem;
}

/* PIC Handoff: "no issues" status text (e.g. No recent errors, No recent AIS contacts) */
.pic-handoff-value-success {
  color: var(--bs-success-text-emphasis, var(--bs-success));
}

/* PIC Handoff: autofilled value with hover tooltip (e.g. % Battery Remaining) */
.autofilled-value--has-tooltip {
  cursor: help;
}

/* Text inputs with hover tooltip (e.g. sensor sampling rate fields) */
.form-control--has-tooltip {
  cursor: help;
}

/* Visible "?" next to sample/interval labels – hover for hint tooltip */
.sampling-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.15em;
  font-size: 0.85em;
  font-weight: bold;
  line-height: 1;
  color: var(--bs-info, #0dcaf0);
  background: var(--app-info-soft-bg);
  border: 1px solid var(--bs-info, #0dcaf0);
  border-radius: 50%;
  cursor: help;
  vertical-align: middle;
}
.sampling-hint-icon:hover {
  background: var(--app-info-soft-bg-hover);
  color: var(--bs-info, #0dcaf0);
}

/* PIC Handoff: preserve newlines in static text (e.g. Boats in Area, Recent Errors) */
.form-item .static-text {
  white-space: pre-wrap;
  max-height: 12em;
  overflow-y: auto;
}

/* Make sure the value is a shade lighter that the one */
/* defined by bootstrap for bg-dark */
.navbar-dark.bg-dark {
    background-color: var(--navbar-bg) !important;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

/* Fix responsive banner behavior */
.navbar {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    min-height: var(--banner-height);
}

/* Prevent navbar collapse on smaller screens */
.navbar-collapse {
    flex-basis: auto !important;
    flex-grow: 0 !important;
}

/* Ensure navbar items stay in banner area */
.navbar-nav {
    flex-direction: row !important;
    align-items: center;
}

/* Stack banner rows vertically on very small screens */
@media (max-width: 576px) {
    .navbar-top-row,
    .navbar-bottom-row {
        flex-direction: column;
        height: auto;
        min-height: 25px;
    }
    
    .navbar-top-row .d-flex {
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    
    .navbar-bottom-row .navbar-nav {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .navbar-bottom-row .nav-item {
        margin: 0.25rem;
    }
}

/* Increase font size for major banner elements by ~10% */
.navbar .navbar-brand,
.navbar .nav-link {
    color: var(--navbar-link-color);
    font-size: 1.05em; /* A subtle increase */
}
/* Apply Inter Tight font to navbar and items */
.navbar,
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .dropdown-item,
.navbar-title {
  font-family: "Inter Tight", Helvetica, Arial, Lucida, sans-serif;
}

/* Logo styling in navbar */
.navbar-logo {
  height: 40px; /* Match banner row height proportionally */
  width: auto; /* Maintain aspect ratio */
  filter: brightness(0) invert(1); /* Make logo white to match navbar text */
}

/* Fix dropdown visibility in light/dark themes */
.navbar .dropdown-menu {
  background-color: var(--dropdown-bg);
  border: 1px solid var(--card-border);
}

.navbar .dropdown-item {
  color: var(--dropdown-text);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background-color: var(--dropdown-hover-bg);
  color: var(--dropdown-text);
}
/* Fine-tune navbar font weights */
.navbar-title {
  font-weight: 600; /* Semi-bold for title */
}
.navbar .nav-link,
.navbar .dropdown-item {
  font-weight: 500; /* Medium for links */
}
/* Adjust the new UTC clock and refresh countdown text size */
.navbar #utcClockBanner,
.navbar #refreshCountdown {
    color: var(--navbar-link-color);

    font-size: 1.05em;
    white-space: nowrap; /* Prevent the clock from wrapping on smaller screens */
}


html {
  /* Reduce base font size to scale rem and em units accordingly */
  /* 100% is typically 16px. 16px * 0.67 = ~10.72px. Using % is often smoother. */
  font-size: 67%;
}

body {
  /* Prefer app tokens, with Bootstrap vars as fallback for compatibility */
  background-color: var(--app-bg, var(--bs-body-bg));
  color: var(--app-text, var(--bs-body-color));
  font-family: 'Inter Tight', sans-serif;
}
/* Apply Inter Tight to all elements across the site */
* {
  font-family: "Inter Tight", Helvetica, Arial, Lucida, sans-serif;
}

/* Apply Inter Tight to header titles across the site */
h1, h2, h3, h4, h5, h6 {
  font-family: "Inter Tight", Helvetica, Arial, Lucida, sans-serif;
}
/* Heading-specific weights to match brand tone */
h1 { font-weight: 700; }
h2 { font-weight: 600; }
h3 { font-weight: 600; }
h4 { font-weight: 500; }
h5 { font-weight: 500; }
h6 { font-weight: 500; }

.card {
  /* Add a subtle border that works with the dark theme */
  /* 1px * 0.67 = 0.67px. Consider keeping at 1px if too thin, or use a lighter color for perceived thinness. */
  border: 1px solid var(--card-border); /* Kept at 1px for visibility, adjust if needed */
  /* You could add a very subtle box-shadow if desired, but be careful not to overdo it */
  /* box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); */
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* For hover effect */
}

/* This hover effect is subtle, might need adjustment for light theme */
.card:hover {
  transform: translateY(-1px); /* Scaled: -2px * 0.67 = -1.34px, rounded to -1px */
  box-shadow: 0 0.25rem 0.5rem var(--app-shadow-medium); /* Slightly more pronounced shadow on hover */
}

.card-header h2, .card-header h5 {
  margin-bottom: 0; /* Remove default bottom margin from headings in card headers */
  font-size: 1.25rem; /* Will scale with html font-size. Original: 20px, New: ~13.4px */
}

.card-body ul {
  padding-left: 1.2rem; /* Will scale */
  margin-bottom: 1rem; /* Will scale */
}

.card-body li {
  margin-bottom: 0.3rem; /* Add a little space between list items */
}

/* Refined chart container to ensure spinner is centered */
.chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.chart-spinner {
  position: absolute; /* Position spinner in the center of the chart area */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Precise centering */
  z-index: 10; /* Ensure spinner appears above canvas */
  /* Spinner is visible by default, hidden after data loads */
}

footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
  margin: 0 !important; /* Remove all margins to eliminate gaps */
  padding: 1rem 0; /* Add internal padding instead */
  width: 100%; /* Ensure full width coverage */
}
footer a { color: var(--footer-text); }
footer .text-muted { color: var(--footer-text) !important; }
footer .text-muted {
  font-size: 0.875em; /* Make footer text slightly smaller */
  text-align: center; /* Center footer text if desired */
  display: block; /* To allow text-align: center to work */
}

.na-value {
  color: var(--secondary-color);
  font-style: italic;
}

.scrollable-list-card {
  max-height: 400px; /* Set a maximum height - Updated from previous value */
  overflow-y: auto;
}

.summary-content-area {
  min-height: 101px; /* Scaled: 150px * 0.67 = 100.5px, rounded */
  /* You can add a subtle border for debugging alignment if you like:
     border: 1px solid red; 
     Remove it once you're happy with the alignment.
  */
}

/* Ensure chart containers themselves don't have varying top margins
   that could affect alignment. The `mt-3` class already provides
   a consistent top margin for the chart container itself. */
  /* height: 300px; is already set inline, which is good for consistent plot size */
  /* width: 100%; is already set inline */



/* Optional: If the "Loading data..." or "Data unavailable." paragraphs
   need specific styling within the summary-content-area to better match
   the height of the <ul> lists.
*/

/* New styles for Task Manager-like UI */
#dashboard-main-content {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping to new line on small screens if not desired */
}

#left-nav-panel {
  padding: 10px; /* Scaled: 15px * 0.67 = 10.05px, rounded */
  height: calc(100vh - 168px); /* Scaled: 250px * 0.67 = 167.5px, rounded */
  overflow-y: auto;
  border-right: 1px solid var(--card-border); /* Separator line */
  display: flex;
  flex-direction: column;
  gap: 7px; /* Scaled: 10px * 0.67 = 6.7px, rounded */
}

.summary-card {
  background-color: var(--bs-card-bg); /* Use Bootstrap card background */
  border: 1px solid var(--bs-border-color); /* Kept at 1px */
  border-radius: var(--bs-card-border-radius);
  padding: 7px; /* Scaled: 10px * 0.67 = 6.7px, rounded */
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  display: flex;
  flex-direction: column; /* Stack main content and footer vertically */
}

.summary-card:hover {
  background-color: var(--card-hover-bg);
  border-color: var(--card-hover-border);
}

.summary-card.active-card {
  background-color: var(--active-card-bg);
  border-color: var(--active-card-border);
  border-left-width: 2px;    /* Scaled: 3px * 0.67 = 2.01px, rounded */
  border-left-color: var(--active-card-accent);
  /* The main text color is handled by the more specific rules below to ensure readability */
  /* Ensure padding is consistent or adjusted for the new internal layout */
  padding: 5px; /* Scaled: 8px * 0.67 = 5.36px, rounded */
}

.summary-card.active-card h5,
.summary-card.active-card .mini-summary,
.summary-card.active-card .summary-card-footer {
  color: var(--active-card-text) !important;
}
.summary-card.active-card .summary-card-footer {
  opacity: 0.85;
}



.summary-card-main-content {
  display: flex;
  flex-direction: row; /* Chart and text side-by-side */
  align-items: center; /* Vertically align chart and text block */
  margin-bottom: 5px; /* Scaled: 8px * 0.67 = 5.36px, rounded */
}

.summary-card-text-content {
  flex-grow: 1; /* Allow text content to take remaining space */
  padding-left: 7px; /* Scaled: 10px * 0.67 = 6.7px, rounded */
  position: relative; /* Establish positioning context for absolute children like the error icon */
}

.summary-card-text-content.full-width { /* For cards without a chart like AIS/Errors */
  width: 100%;
  padding-left: 0; /* No padding if it's full width */
}

.summary-card h5 {
  margin-bottom: 3px; /* Scaled: 5px * 0.67 = 3.35px, rounded */
  font-size: 1.25rem; /* Will scale with html font-size */
  font-weight: 500;
}

.mini-summary {
  font-size: 0.85rem; /* Will scale */
  margin-bottom: 5px; /* Scaled: 8px * 0.67 = 5.36px, rounded */
  line-height: 1.3;
}

.mini-chart-container {
  height: 47px; /* Scaled: 70px * 0.67 = 46.9px, rounded */
  width: 80%;  /* Chart takes about 35% of the main content width - adjust as needed */
}

.mini-chart-placeholder {
  width: 80%; /* Match the width of .mini-chart-container */
  height: 47px; /* Match .mini-chart-container height */
  flex-shrink: 0; /* Prevent it from shrinking */
  display: flex;
  flex-direction: column; /* Stack items vertically */
  justify-content: center; /* Center "No errors" message / align list */
  align-items: flex-start; /* Align list to the start */
  padding: 2px 4px; /* Minimal padding */
  overflow: hidden; /* Hide overflow for the placeholder itself */
}

.mini-chart-container canvas {
  display: block;
  height: 100% !important;
  width: 100% !important;
}

.mini-chart-placeholder .error-message-list { /* Target ul inside placeholder */
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%; /* List takes full width of placeholder */
  font-size: 0.75rem; /* Approx 8px with 67% root font. Adjust as needed. */
  line-height: 1.3; /* Adjust for readability */
  max-height: 100%; /* Ensure list doesn't overflow placeholder height */
  overflow-y: auto; /* Add scroll if content exceeds max-height */
}

.mini-chart-placeholder .error-message-list li {
  margin-bottom: 1px; /* Very tight spacing */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-chart-placeholder .error-message-list li small.text-muted {
    font-size: 0.9em; /* Slightly smaller for the timestamp part */
}

.mini-chart-placeholder .no-errors-message { /* Target span for "no errors" */
  font-size: 0.85rem; /* Similar to .mini-summary font size */
  color: var(--secondary-color);
  text-align: center;
  width: 100%;
}

.summary-card-footer {
  font-size: 0.75rem;
  border-top: 1px solid var(--card-border); /* Kept at 1px */
  padding-top: 3px; /* Scaled: 5px * 0.67 = 3.35px, rounded */
  margin-top: 5px; /* Scaled: 8px * 0.67 = 5.36px, rounded */
}

#main-display-area {
  padding: 10px; /* Scaled: 15px * 0.67 = 10.05px, rounded */
  overflow-y: auto; /* If content in right panel might also overflow */
  height: calc(100vh - 200px); /* Increased to account for navbar and provide more space */
}

/* Ensure category detail views fill the card height if their content is short */
.category-detail-view .card {
  height: 100%;
}

/* Adjust chart container height in the main display area if needed */
#main-display-area .chart-container {
  height: 300px !important; /* Match the inline style in HTML */
  min-height: 300px !important; /* Ensure minimum height */
  /* The canvas itself will be managed by Chart.js to fill this container */
  margin-top: 1.5rem !important; /* Ensure a bit more space above the chart */
}

/* Slocum dashboard: match Wave Glider chart sizing standard (300px height, 100% width) */
.slocum-chart-container,
.slocum-uwp-chart {
  width: 100%;
  min-height: 300px;
  height: 300px;
  position: relative;
}
.slocum-chart-container canvas,
.slocum-uwp-chart canvas {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
}

/*
 * Slocum dashboard: restore readable font size so text and labels match Wave Glider perceived size.
 * The global html { font-size: 67% } makes rem/em smaller site-wide; the WG dashboard often has
 * larger blocks (summary values, cards) that feel bigger. Scoping 100% to .slocum-dashboard
 * makes rem-based text in the Slocum dashboard match typical 16px-based sizing for readability.
 */
.slocum-dashboard {
  font-size: 100%;
}

/* Power Task Manager Summary Styles - reserved for future styling */

/* New style for the bordered/shaded summary box inside detail views */
.detail-summary-box {
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-card-border-radius); /* Use Bootstrap's border radius for consistency */
  padding: 1rem; /* Add some internal padding */
  box-shadow: inset 0 1px 2px var(--app-shadow-inset); /* A subtle inner shadow for depth */
}

.power-summary-column .text-center .power-summary-header {
  font-size: 0.9rem; /* Will scale with html font-size: 67% */
  color: var(--secondary-color);
  margin-bottom: 0.1rem; /* Small space */
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Slight letter spacing for headers */
  font-weight: 400;
}

.power-summary-column .text-center .power-summary-value-large {
  font-size: 2.2rem; /* Large font, will scale. (e.g., 2.2 * 16px * 0.67 = ~23.5px) */
  font-weight: 300; /* Lighter font weight for large numbers */
}

.power-summary-small {
  font-size: 0.75rem;
  margin-top: 0.15rem;
  color: var(--text-color);
  line-height: 1.1; /* Adjust line height for large font */
}

.power-summary-details-list {
  font-size: 0.9rem; /* Base size for this list, will scale */
  padding-left: 0; /* Remove default ul padding */
}

.power-summary-details-list li {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0; /* Approx 3px scaled */
  border-bottom: 1px solid var(--card-border); /* Subtle separator */
}
.power-summary-details-list li:last-child {
  border-bottom: none;
}

.power-summary-label {
  color: var(--secondary-color); /* Muted text color for labels */
}

.power-summary-value-right {
  font-weight: 500; /* Slightly bolder for values */
  color: var(--text-color); /* Brighter text color */
}

/* Status text styling for Time To Charge if it's not a numeric time */
.status-text-success { color: var(--bs-success-text-emphasis) !important; font-size: 1.5rem; font-weight: 400; } /* Adjusted font-size for status text */
.status-text-warning { color: var(--bs-warning-text-emphasis) !important; font-size: 1.5rem; font-weight: 400; } /* Adjusted font-size for status text */
.status-text-info { color: var(--bs-info-text-emphasis) !important; font-size: 1.5rem; font-weight: 400; } /* Adjusted font-size for status text */

.wave-propagation-arrow-container {
  margin-top: 1rem; /* Provides a little space below the numeric direction */
}

.wave-propagation-arrow {
  display: inline-block; /* Allows transform and respects line height */
  font-size: 3.5rem;     /* Arrow size, scales with root font-size. (1.8 * 16px * 0.67 = ~19.3px) */
  line-height: 1;        /* Prevents extra vertical space due to large font size */
  color: var(--secondary-color);       /* Arrow color */
}

.sm-badge {
    font-size: 1.0em; /* Adjust as needed */
    padding: 0.2em 0.4em; /* Adjust as needed */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
  #dashboard-main-content {
    flex-direction: column; /* Stack panels on smaller screens */
  }

  #left-nav-panel {
    height: auto; /* Allow left panel to size to content */
    max-height: 201px; /* Scaled: 300px * 0.67 = 201px */
    overflow-y: auto;
    border-right: none;
    border-bottom: 1px solid var(--card-border); /* Separator line when stacked */
    margin-bottom: 10px; /* Scaled: 15px * 0.67 = 10.05px, rounded */
  }
}

/* Schedule Page Specific Styles */
.schedule-calendar-container {
    /* Enhanced container for better calendar sizing */
    min-height: 80vh; /* Use viewport height for better space utilization */
    padding: 0 1rem; /* Add horizontal padding for better spacing */
}

.schedule-calendar-container #calendar {
    /* Ensure calendar takes full available width */
    width: 100%;
    height: 100%;
    min-height: 75vh; /* Minimum height to prevent cramped appearance */
}

/* Enhanced FullCalendar styling for better space utilization */
.fc .fc-toolbar {
    /* Improve toolbar spacing and layout */
    margin-bottom: 1.5rem;
    padding: 0.5rem 0;
}

.fc .fc-toolbar-title {
    /* Larger, more prominent title */
    font-size: 1.5rem;
    font-weight: 600;
}

.fc .fc-button {
    /* Better button sizing and spacing */
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Improve month view cell sizing */
.fc-daygrid-day-frame {
    min-height: 12em; /* Increased from 10em for better content display of merged events */
    padding: 0.25rem;
}

.fc-daygrid-day-number {
    /* Better day number positioning */
    font-weight: 600;
    font-size: 1.1rem;
}

/* Enhanced event display in month view */
.fc-daygrid-event {
    /* Better event sizing and spacing */
    margin: 1px 0;
    padding: 2px 4px;
    font-size: 0.85rem;
    line-height: 1.2;
}

/* Improve week/day view slot sizing */
.fc-timegrid-slot {
    /* Better time slot sizing */
    min-height: 3.5em;
}

.fc-timegrid-slot-lane {
    /* Consistent slot heights */
    height: 3.5em !important;
}

/* Better responsive design for schedule page */
@media (max-width: 1200px) {
    .schedule-calendar-container {
        padding: 0 0.5rem;
    }
    
    .fc .fc-toolbar {
        flex-direction: column;
        gap: 1rem;
    }
    
    .fc .fc-toolbar-chunk {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .schedule-calendar-container {
        padding: 0 0.25rem;
        min-height: 70vh;
    }
    
    .fc-daygrid-day-frame {
        min-height: 8em; /* Slightly smaller on mobile */
    }
    
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
    }
}

/* Enhanced download controls styling */
.schedule-download-controls {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
}

/* Better form control spacing in schedule modals */
.schedule-modal .form-control,
.schedule-modal .form-select {
    margin-bottom: 1rem;
}

.schedule-modal .modal-body {
    padding: 1.5rem;
}

/* Enhanced schedule controls layout */
.schedule-controls-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.schedule-controls-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.schedule-controls-right {
    display: flex;
    gap: 0.5rem;
}

/* Better spacing for schedule page elements */
.schedule-page-header {
    margin-bottom: 2rem;
}

.schedule-page-header h1 {
    margin-bottom: 0.5rem;
    font-size: 2.5rem;
    font-weight: 700;
}

.schedule-page-header p {
    font-size: 1.1rem;
    margin-bottom: 0;
}

/* Enhanced calendar event tooltips */
.fc-event-tooltip {
    background: var(--bs-dark);
    color: var(--bs-light);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem;
    font-size: 0.9rem;
    max-width: 300px;
    z-index: 9999;
}

/* Enhanced consecutive shifts styling */
.fc-event-shift {
    /* Base styling for shift events */
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}

/* Consecutive shifts styling - remove borders between adjacent shifts */
.fc-event-shift + .fc-event-shift {
    /* Remove left border when shift follows another shift */
    border-left: none;
    margin-left: -1px; /* Overlap borders slightly */
}

/* Special styling for LRI blocks that span multiple shifts */
.fc-event-lri-block {
    /* Enhanced LRI block styling */
    border-radius: 6px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Consecutive LRI blocks - seamless appearance */
.fc-event-lri-block + .fc-event-lri-block {
    border-left: none;
    margin-left: -2px;
    border-radius: 0 6px 6px 0; /* Round only right corners */
}

.fc-event-lri-block:first-of-type {
    border-radius: 6px 0 0 6px; /* Round only left corners for first in sequence */
}

/* Week/Day view specific consecutive shift styling */
.fc-timegrid-event.fc-event-shift + .fc-timegrid-event.fc-event-shift {
    /* Remove borders between consecutive time grid events */
    border-left: none;
    margin-left: -1px;
}

/* Month view consecutive shift optimization */
.fc-daygrid-event.fc-event-shift {
    /* Better month view event appearance */
    border-radius: 3px;
    margin: 1px 0;
}

/* Consecutive shifts in month view */
.fc-daygrid-event.fc-event-shift + .fc-daygrid-event.fc-event-shift {
    /* Optimize spacing for consecutive month view events */
    margin-top: 0;
    border-top: none;
}

/* Enhanced event grouping for better visual flow */
.fc-event-group {
    /* Better grouping of related events */
    border-radius: 6px;
    overflow: hidden;
}

/* Better event overlap handling */
.fc-event-overlap {
    /* Improved styling for overlapping events */
    opacity: 0.9;
    border-left: 3px solid var(--bs-primary);
}

/* Enhanced styling for merged events (consecutive shifts) */
.fc-event-merged {
    /* Special styling for merged consecutive shift events */
    font-weight: 600;
    border-width: 2px;
    box-shadow: 0 2px 4px var(--app-shadow-soft);
}

/* LRI Block merged events - keep LRI styling */
.fc-event-lri-block.fc-event-merged {
    background: linear-gradient(135deg, var(--app-lri-merged-start) 0%, var(--app-lri-merged-end) 100%) !important;
    color: var(--app-lri-merged-text) !important;
    border: 2px solid var(--app-lri-merged-border);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Regular pilot merged events - preserve user colors but enhance styling */
.fc-event-shift.fc-event-merged {
    /* Let FullCalendar handle all colors - don't override anything */
    /* Only add non-color styling */
    font-weight: 600;
    border-width: 2px;
    border-radius: 4px;
    box-shadow: 0 1px 3px var(--app-shadow-soft);
}

/* Month view specific merged event styling (appearance, not colors) */
.fc-daygrid-event.fc-event-merged {
    /* Better month view appearance for merged events */
    min-height: 2.5em;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.85rem; /* Slightly smaller to fit time information */
    line-height: 1.2;
    margin: 2px 0; /* Better spacing between merged events */
    white-space: nowrap; /* Prevent time text from wrapping */
    overflow: hidden;
    text-overflow: ellipsis; /* Show ... if text is too long */
}

/* Week/Day view merged event styling (appearance, not colors) */
.fc-timegrid-event.fc-event-merged {
    /* Better time grid appearance for merged events */
    min-height: 3em;
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Enhanced styling for merged events with time information */
.fc-event-merged .fc-event-title {
    /* Ensure time information is readable */
    font-weight: 600;
    line-height: 1.2;
}

/* Enhanced navigation for schedule views */
.fc-prev-button,
.fc-next-button {
    /* Better navigation button styling */
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

.fc-prev-button:hover,
.fc-next-button:hover {
    background-color: var(--bs-primary-dark);
    border-color: var(--bs-primary-dark);
}

.fc-today-button {
    /* Better today button styling */
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.fc-today-button:hover {
    background-color: var(--bs-secondary-dark);
    border-color: var(--bs-secondary-dark);
}

/* Extreme Sea State (ESS) indicators */
.table > tbody > tr.ess-calm {
    border-left: 4px solid var(--bs-success, #198754);
}
.table > tbody > tr.ess-increasing {
    border-left: 4px solid var(--bs-warning, #ffc107);
}
.table > tbody > tr.ess-extreme {
    border-left: 4px solid var(--bs-danger, #dc3545);
}

.ess-indicator {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-left: 0.25rem;
    vertical-align: middle;
}
.ess-indicator.ess-calm { background-color: var(--bs-success, #198754); }
.ess-indicator.ess-increasing { background-color: var(--bs-warning, #ffc107); }
.ess-indicator.ess-extreme { background-color: var(--bs-danger, #dc3545); }

.ess-legend-dot {
    display: inline-block;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.15rem;
}
.ess-legend-dot.ess-calm { background-color: var(--bs-success, #198754); }
.ess-legend-dot.ess-increasing { background-color: var(--bs-warning, #ffc107); }
.ess-legend-dot.ess-extreme { background-color: var(--bs-danger, #dc3545); }