body {
  font-family: 'Roboto', 'Arial', sans-serif;
  background-color: #f8f9fa; /* Bootstrap light background */
  color: #212529; /* Bootstrap dark text color */
}

/* Interactive elements should show pointer cursor */
a, button, select, input[type="checkbox"], input[type="radio"], 
input[type="submit"], input[type="button"], 
.table thead th, .nav-link, .dropdown-toggle, .btn, .page-link,
.interactive, .clickable, [role="button"] {
  cursor: pointer;
}

/* Ensure tooltip trigger elements show a help cursor */
[data-bs-toggle="tooltip"], .bi-info-circle-fill, .tooltip-trigger {
  cursor: help;
}

/* Legend toggle needs a pointer cursor */
.legend-toggle {
  cursor: pointer;
}

.navbar {
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.diagram-section {
    position: relative;
    margin-top: 40px;
    padding: 2rem 0;
  }
  /* Example “block” styling */
  .data-block {
    border: 1px solid #dee2e6; /* Bootstrap table border color */
    padding: 8px;
    margin-bottom: 8px;
    border-radius: 0.25rem; /* Bootstrap table border radius */
    background-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Bootstrap table box shadow */
  }
  /* p5 canvas can sit behind everything */
  #arrowCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; 
  }
  
  /* Enhanced hover effect with transition */
  #addr1Row,
  #addr2Row,
  #addr12Row,
  #indirectRow,
  #indBlockAddr1,
  #indBlockAddr2,
  #indBlockAddr256 {
    transition: background-color 0.3s ease, transform 0.2s ease;
    position: relative;
  }
  
  #addr1Row:hover,
  #addr2Row:hover,
  #addr12Row:hover,
  #indirectRow:hover,
  #indBlockAddr1:hover,
  #indBlockAddr2:hover,
  #indBlockAddr256:hover {
    background-color: rgba(13, 110, 253, 0.15) !important; /* Slightly darker blue on hover */
    cursor: pointer; /* Change cursor to pointer on hover */
    transform: translateX(3px); /* Subtle shift on hover */
  }
  
  /* Add a visual indicator for clickable rows */
  #addr1Row td:last-child,
  #addr2Row td:last-child,
  #addr12Row td:last-child,
  #indirectRow td:last-child,
  #indBlockAddr1 td:last-child,
  #indBlockAddr2 td:last-child,
  #indBlockAddr256 td:last-child {
    position: relative;
  }
  
  #addr1Row td:last-child::after,
  #addr2Row td:last-child::after,
  #addr12Row td:last-child::after,
  #indirectRow td:last-child::after,
  #indBlockAddr1 td:last-child::after,
  #indBlockAddr2 td:last-child::after,
  #indBlockAddr256 td:last-child::after {
    content: "↗";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #0d6efd;
    font-size: 0.9rem;
  }
  
  #addr1Row:hover td:last-child::after,
  #addr2Row:hover td:last-child::after,
  #addr12Row:hover td:last-child::after,
  #indirectRow:hover td:last-child::after,
  #indBlockAddr1:hover td:last-child::after,
  #indBlockAddr2:hover td:last-child::after,
  #indBlockAddr256:hover td:last-child::after {
    opacity: 1;
  }

  td {
    background-color: transparent !important;
  }

  /* Table styling enhancements */
  .table-responsive {
    overflow-x: auto;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
    padding-bottom: 15px;
  }

  .table {
    margin-bottom: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow to the table */
    border-collapse: separate;
    border-spacing: 0;
  }

  .table th, .table td {
    vertical-align: middle;
    transition: all 0.2s ease;
  }
  
  /* Highlight effect for rows */
  .highlight-row td {
    background-color: rgba(13, 110, 253, 0.1) !important;
    transition: background-color 0.3s ease;
  }

  /* Improve table header appearance */
  .table thead th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    position: relative;
    cursor: pointer;
    background: linear-gradient(to bottom, #0d6efd, #0a58ca);
    color: white;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.2);
  }

  /* Tooltip trigger area */
  .table thead th[data-bs-toggle="tooltip"] {
    cursor: help;
  }

  /* Remove underline from header text */
  .table thead th span.text-decoration-underline {
    text-decoration: none !important;
  }

  /* Better tooltip styling */
  .tooltip-inner {
    max-width: 300px;
    padding: 8px 12px;
    text-align: left;
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  /* Tooltip icon styling */
  .bi-info-circle-fill {
    font-size: 0.85rem;
    vertical-align: middle;
    opacity: 0.8;
    transition: opacity 0.2s;
  }

  .table thead th:hover .bi-info-circle-fill {
    opacity: 1;
  }

  /* Remove background-light from cells to ensure consistent styling */
  .fw-medium.bg-light {
    background-color: transparent !important;
  }

  /* Better spacing and alignment */
  h5 {
    margin-bottom: 1rem;
    position: relative;
    font-weight: 600;
    color: #0d6efd;
    border-left: 4px solid #0d6efd;
    padding-left: 12px;
  }

  /* Remove the decorative underline that appears as an outline */
  h5::after {
    content: none; /* This removes the line completely */
  }

  /* Responsive adjustments */
  @media (max-width: 768px) {
    .col-md-4 {
      margin-bottom: 2rem;
    }
  }

  /* glossary styling */
  .legend-container {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 1000;
  }

  .legend-toggle {
    border-radius: 4px;
    margin-bottom: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    cursor: pointer;
  }

  .legend-content {
    max-width: 300px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  }

  .legend-content .card {
    border: none;
  }

  .legend-content .card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0d6efd;
    margin-bottom: 0.5rem;
  }

  .legend-content ul li {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
  }

  /* Make sure the legend is responsive */
  @media (max-width: 576px) {
    .legend-container {
      top: auto;
      bottom: 20px;
      right: 20px;
    }
    
    .legend-content {
      max-width: 250px;
    }
  }

  /* Language selector styles */
#languageDropdown {
  cursor: pointer;
  color: #333;
  font-weight: 500;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

/* Hover effect for language options */
.dropdown-item:hover {
  background-color: #f0f0f0;
}

/* Ensure the language dropdown appears in front of the glossary */
.navbar .dropdown-menu {
  z-index: 1100;
}

/* Ensure columns have consistent width */
.col-4.text-primary {
  width: 40%;
}

/* Make sure the table maintains its structure */
.table-responsive table {
  table-layout: fixed;
}