body {
    /* background-color: black;
    color: white; */
}

/* Fail-closed access gate (T9): page content stays invisible until
   DeviceAccessControl (js/main.js) confirms access and adds .dac-granted
   to <html>. Denied / pending / endpoint-down = page stays hidden.
   The DAC dialog and its overlays re-enable visibility through their own
   injected styles (#dac-overlay { visibility: visible !important }), so they
   remain visible on top of the hidden page. */
html:not(.dac-granted) body {
  visibility: hidden;
}

/* Critical CSS - Add this to your HTML <head> section */
/* This prevents flash of unstyled content by hiding sections immediately */
div[id^="section-"] {
  display: none;
}

/* Loading overlay styles */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Spinner animation */
.loading-spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin-right: 15px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

table {
    min-width: 90%;
    margin: 20px auto;
    margin-left: 64px;
    margin-top: 0px;
    border-collapse: collapse;
    background: white;
}

th, td {
    border: 1px solid #ccc;
    padding: 12px;
    text-align: left;
}

th {
    background-color: grey;
    color: white;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

tr:hover {
    background-color: #f1f1f1;
}




#controls {
  padding: 1rem;
  background-color: #fafafa;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-family: system-ui, sans-serif;
  /* position: sticky; */
  top: 0;
  z-index: 10;
  overflow-x: auto;
}

.control-heading {
  font-weight: bold;
  font-size: 1.1rem;
  color: #333;
  margin-right: 16px;
  white-space: nowrap;
}

.switch-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 6px 10px;
  border-radius: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: background-color 0.3s;
}

.switch-wrapper:hover {
  background-color: #f3f3f3;
}

.switch-label {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch-label input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 20px;
}

.slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.switch-label input:checked + .slider {
  background-color: #4caf50;
}

.switch-label input:checked + .slider::before {
  transform: translateX(20px);
}





/* Base line styling */
.line {
  margin-bottom: 0.5rem;
  line-height: 1.6;
  font-family: system-ui, sans-serif;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* Vertical hierarchy lines */
.line::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  z-index: 1;
  border-left: 1px solid #f4f6f8;
}

/* Dynamic positioning for all levels */
.line[data-level]::before {
  left: var(--line-position);
  box-shadow: var(--parent-lines);
}

.line-marker {
  flex-shrink: 0;
  margin-right: 0.5rem;
  min-width: 1.5rem;
  position: relative;
  z-index: 2;
}

.line-content {
  flex: 1;
  white-space: pre-wrap;
  position: relative;
  z-index: 2;
}

.heading {
  font-weight: bold;
  color: #2c3e50;
}

/* Make headings stand out with slightly stronger lines */
.heading::before {
  border-color: #e8ebef !important;
}

.heading[data-level]::before {
  box-shadow: var(--parent-lines-heading);
}

.bullet .line-marker {
  color: #34495e;
  font-weight: 500;
}

.numbered .line-marker {
  color: #3c6382;
  font-weight: 500;
}

.paragraph .line-content {
  color: #555;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Heading font sizes based on indent level - apply margins to entire line, not just content */
.heading.level-0 {
  margin-top: 1.2rem;
  margin-bottom: 0.8rem;
}

.heading.level-0 .line-content {
  font-size: 1.5rem;
}

.heading.level-1 {
  margin-top: 1rem;
  margin-bottom: 0.6rem;
}

.heading.level-1 .line-content {
  font-size: 1.3rem;
}

.heading.level-2 {
  margin-top: 0.8rem;
  margin-bottom: 0.5rem;
}

.heading.level-2 .line-content {
  font-size: 1.15rem;
  font-weight: 600;
}

.heading.level-3 {
  margin-top: 0.6rem;
}

.heading.level-3 .line-content {
  font-size: 1.05rem;
  font-weight: 600;
  font-style: italic;
}

.heading.level-4,
.heading.level-5 {
  margin-top: 0.5rem;
}

.heading.level-4 .line-content,
.heading.level-5 .line-content {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3436;
}

.heading.level-deep {
  margin-top: 0.4rem;
}

.heading.level-deep .line-content {
  font-size: 0.9rem;
  font-weight: 600;
  font-style: italic;
  color: #2d3436;
}


/* Special styling for level 0 and 1 */
.level-0 .line-content {
  font-size: 1.4rem;
}

.level-1 .line-content {
  font-size: 1.2rem;
}

/* No-marker lines (plain text) */
.no-marker {
  display: block;
  padding-left: 0;
}

.no-marker .line-content {
  white-space: pre-wrap;
}

#scroll-controls {
  position: fixed;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: opacity 0.3s ease;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
}

#scroll-controls button {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.play-icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./../notes/images/system/play.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.pause-icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./../notes/images/system/pause.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.scroll-up-icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./../notes/images/system/scroll_up.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

.scroll-down-icon::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('./../notes/images/system/scroll_down.png');
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}


/* Constrain wide elements */
img, table, pre, code, iframe {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}

/* Only scroll if needed */
table, pre, code {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/* This makes sure long tables/images don't break layout */
.line-content > * {
  max-width: 100%;
  overflow-x: auto;
}

/* Force container (and body) to not scroll sideways */
body, html {
  overflow-x: hidden !important;
  max-width: 100vw;
}

/* Container for the hidden content */
.blurred-block {
  cursor: pointer;
  position: relative;
  border-radius: 8px;
  margin: 10px 0;
  /* Ensure the container itself transitions smoothly if dimensions change */
  transition: all 0.4s ease-in-out;
}

/* 1. Content Transition - Logic for both ways */
.blurred-block > * {
  /* This handles the 'Hiding' transition */
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
  pointer-events: none;
}

.blurred-block.revealed > * {
  /* This handles the 'Showing' transition */
  opacity: 1;
  pointer-events: auto;
}

/* 2. The Frosted Glass + Dot Pattern Layer */
.blurred-block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  
  /* Glass & Pattern Styling */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1.5px, transparent 1.5px);
  background-size: 20px 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;

  /* Crucial: Transition defined on the base state for two-way animation */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease-in-out, visibility 0.4s;
  pointer-events: auto; /* Allow clicking the overlay to trigger reveal */
}

.blurred-block.revealed::before {
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Allow clicking content once revealed */
}

/* 3. The Static Reveal Button */
.blurred-block::after {
  content: "HIDDEN ANALYSIS • TAP TO VIEW";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  background: rgba(30, 145, 4, 0.95);
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.8px;
  z-index: 11;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  
  /* Transition for both ways */
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
  pointer-events: none;
}

.blurred-block.revealed::after {
  opacity: 0;
  visibility: hidden;
}


/* Make #controls a flex container */
#controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;  /* Wrap if content overflows */
    gap: 0.5rem;
    margin-bottom: 1rem;
}

/* Wrap toggles (left side controls) */
#controls .switch-wrapper {
    flex: 0 0 auto; /* Prevent it from growing */
}

.outline-toggle-button {
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: #f1f3f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    margin-left: auto; /* push outline button right */
}

.outline-toggle-button:hover {
    background-color: #e4e8ed;
    border-color: #bbb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.outline-toggle-button:active {
    background-color: #d9dde2;
    transform: scale(0.98);
}

.bust-cache-button {
    padding: 0.4rem 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    background-color: #f1f3f5;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    margin-left: 10px; /* spacing between buttons */
}

.bust-cache-button:hover {
    background-color: #e4e8ed;
    border-color: #bbb;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.bust-cache-button:active {
    background-color: #d9dde2;
    transform: scale(0.98);
}

input[type="checkbox"]:disabled + .slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.table-expand-icon {
    background-image: url('./../notes/images/system/expand.webp');
    background-size: contain;
    background-repeat: no-repeat;
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: -20px;
    left: 45px;
    z-index: 10;
    transition: background-color 0.2s ease; 
}

.table-expand-icon:hover {
    background-color: rgba(0, 0, 0, 0.1); /* Optional hover effect */
}

.table-expand-icon:hover {
    color: #007bff;
}

.fullscreen-table-wrapper {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 99vw;
    height: 99vh;
    background: rgba(255, 255, 255, 0.95);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.fullscreen-table-wrapper.show {
    opacity: 1;
}

/* ============================================ */
/* STICKY TABLE HEADERS - FULLSCREEN MODE */
/* ============================================ */

.fullscreen-table {
    width: 100%;
    max-width: 98vw;
    max-height: 95%;
    overflow: auto; /* ✅ This container scrolls */
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    box-sizing: border-box;
}

.fullscreen-table table {
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    table-layout: auto; /* Allow natural column widths */
    overflow: visible; /* ✅ Don't scroll on table itself */
}

/* Sticky header row */
.fullscreen-table table thead {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Sticky header cells */
.fullscreen-table table thead th {
    position: sticky;
    top: 0;
    background-color: grey;
    color: white;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Shadow when scrolling */
}

/* Sticky first column for body cells */
/* .fullscreen-table table tbody td:first-child {
    position: sticky;
    left: 0;
    background-color: white;
    z-index: 50;
    border-right: 2px solid #ccc;
} */

/* Sticky first column for header */
/* .fullscreen-table table thead th:first-child {
    position: sticky;
    left: 0;
    background-color: grey;
    z-index: 101; 
    border-right: 2px solid #888;
} */

/* Handle alternating row colors for sticky column */
.fullscreen-table table tbody tr:nth-child(even) td:first-child {
    background-color: #f9f9f9;
}

.fullscreen-table table tbody tr:hover td:first-child {
    background-color: #f1f1f1;
}

/* ============================================ */
/* STICKY SECTION HEADER ROWS (Topic Separators) */
/* ============================================ */

/* 
  Add the class "section-header" to rows that separate topics.
  These will stick below the main header until next section arrives.
  
  HTML example:
  <tr class="section-header">
    <td colspan="3">Topic 1: Introduction</td>
  </tr>
*/

.fullscreen-table table tbody tr.section-header {
    position: sticky;
    top: 48px; /* Adjust based on your header height - usually th height */
    z-index: 90;
    background-color: #e0e0e0;
    font-weight: bold;
}

.fullscreen-table table tbody tr.section-header td {
    background-color: #e0e0e0;
    color: #333;
    font-weight: bold;
    padding: 10px 12px;
    border-top: 2px solid #999;
    border-bottom: 2px solid #999;
}

.fullscreen-table table tbody tr.section-header:hover td {
    background-color: #d5d5d5;
}

/* If first column should also stick for section headers */
.fullscreen-table table tbody tr.section-header td:first-child {
    position: sticky;
    left: 0;
    z-index: 91;
    background-color: #e0e0e0;
    border-right: 2px solid #999;
}

.fullscreen-table table tbody tr.section-header:hover td:first-child {
    background-color: #d5d5d5;
}

/* Alternative: Auto-detect rows with bold/centered text spanning multiple columns */
.fullscreen-table table tbody tr:has(td[colspan]) {
    position: sticky;
    top: 48px; /* Adjust to match your header height */
    z-index: 90;
    background-color: #e8e8e8;
}

.fullscreen-table table tbody tr:has(td[colspan]) td {
    background-color: #e8e8e8;
    font-weight: bold;
    color: #333;
    text-align: center;
    padding: 10px 12px;
    border-top: 2px solid #aaa;
    border-bottom: 2px solid #aaa;
}

/* ============================================ */
/* END STICKY TABLE HEADERS */
/* ============================================ */

.fullscreen-table-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    cursor: pointer;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
}

.fullscreen-table-close:hover {
    background-color: rgba(255, 255, 255, 1);
}

#highlight-indicator {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(76, 175, 80, 0.1);
    border-top: 2px solid #555955;
    border-left: 2px solid #5d605d;
    border-radius: 50%;
    z-index: 10001;
    opacity: 0;
    filter: drop-shadow(0 0 5px #797c79);
    transition: opacity 0.3s ease;
    pointer-events: none;

  /* Surrounding blur/shadow effect */
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2); /* Blur aura around the circle */
    backdrop-filter: blur(4px);    /* Blur for content directly underneath */
    -webkit-backdrop-filter: blur(4px);
  }

  #highlight-indicator.active {
    opacity: 1;
    animation: re-spin 0.6s linear infinite;
  }

  @keyframes re-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }