/* Hardening #5: slow-mode pulse on Gen Lab progress bars -- amber gradient shimmer */
.gl-bar-slow { background-image: linear-gradient(90deg, #f59e0b 0%, #fcd34d 50%, #f59e0b 100%); background-size: 200% 100%; animation: glBarSlow 1.6s linear infinite; }
@keyframes glBarSlow { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Sprint 4 — Side-by-side preset diff highlighting (Feature 5.2.2)
   Per-cell spec mapping:
     identical          (gl-diff-match)     → no highlight (transparent)
     different IP only  (gl-diff-partial)   → amber
     different student/event (gl-diff-mismatch) → amber
     present only here  (gl-diff-added)     → green
     empty here, filled on other side (gl-diff-removed) → red
   Toggle: when document.body has class .gl-diff-off, all highlights collapse to neutral. */
.gl-diff-match    { background: transparent;                      border: 1px solid var(--navy-700); }
.gl-diff-mismatch { background: rgba(245,158,11,.14) !important;  border: 1px solid rgba(245,158,11,.35) !important; }
.gl-diff-partial  { background: rgba(245,158,11,.14) !important;  border: 1px solid rgba(245,158,11,.35) !important; }
.gl-diff-added    { background: rgba(34,197,94,.14) !important;   border: 1px solid rgba(34,197,94,.35) !important; }
.gl-diff-removed  { background: rgba(239,68,68,.14) !important;   border: 1px solid rgba(239,68,68,.35) !important; }
.gl-diff-empty    { background: var(--navy-900);                  border: 1px solid var(--navy-700); }
/* Legacy class — kept neutral (callers other than glBuildSideBySide may still emit it). */
.gl-diff-missing  { background: transparent;                      border: 1px dashed rgba(59,130,246,.3); }

/* Toggle OFF — strip diff colors back to neutral cells. */
body.gl-diff-off .gl-diff-mismatch,
body.gl-diff-off .gl-diff-partial,
body.gl-diff-off .gl-diff-added,
body.gl-diff-off .gl-diff-removed,
body.gl-diff-off .gl-diff-missing,
body.gl-diff-off .gl-diff-match {
  background: transparent !important;
  border: 1px solid var(--navy-700) !important;
}

/* Diff legend / toggle bar (rendered above the side-by-side grids). */
.gl-diff-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 10px; margin-bottom: 8px;
  background: var(--navy-800); border: 1px solid var(--navy-600);
  border-radius: 6px; font-size: 10px; color: var(--slate-300); }
.gl-diff-legend label { display: flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--slate-200); font-weight: 600; }
.gl-diff-legend .gl-swatch { display: inline-block; width: 10px; height: 10px;
  border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.gl-diff-legend .gl-swatch-match    { background: transparent; border: 1px solid var(--navy-600); }
.gl-diff-legend .gl-swatch-changed  { background: rgba(245,158,11,.6); border: 1px solid rgba(245,158,11,.9); }
.gl-diff-legend .gl-swatch-added    { background: rgba(34,197,94,.6);  border: 1px solid rgba(34,197,94,.9); }
.gl-diff-legend .gl-swatch-removed  { background: rgba(239,68,68,.6);  border: 1px solid rgba(239,68,68,.9); }

/* Sprint 4 — IP Utilization Heat Map */
.gl-heatmap { border-collapse: collapse; font-size: 10px; width: 100%; }
.gl-heatmap th { background: var(--navy-800); color: var(--slate-400); padding: 4px 8px; font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; }
.gl-heatmap td { padding: 4px 8px; border: 1px solid var(--navy-700); text-align: center; min-width: 50px; }
.gl-heatmap-active { background: rgba(34,197,94,.2); color: var(--green); }
.gl-heatmap-empty { background: var(--navy-900); color: var(--slate-400); }
.gl-heatmap-summary-good { color: var(--green); font-weight: 600; }
.gl-heatmap-summary-warn { color: #f59e0b; font-weight: 600; }
.gl-heatmap-summary-over { color: #ef4444; font-weight: 600; }

/* Sprint 4 — Insights tab 2-column grid */
.gl-insights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gl-insights-col { min-width: 0; }
@media (max-width: 900px) { .gl-insights-grid { grid-template-columns: 1fr; } }

/* 4-tab header styling */
#glTabGenerate, #glTabCompare, #glTabDiagnose, #glTabInsights {
  transition: color 0.15s, border-color 0.15s;
}
#glTabGenerate:hover, #glTabCompare:hover, #glTabDiagnose:hover, #glTabInsights:hover {
  color: rgba(255,255,255,.7) !important;
}

/* Context bar */
#glContextBar {
  transition: opacity 0.2s;
}

/* Diagnose tab — two-column layout */
.gl-diagnose-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 900px) {
  .gl-diagnose-columns { grid-template-columns: 1fr; }
}
.gl-diagnose-col {
  min-width: 0;
}

/* Diagnose tab — loading spinner */
.gl-diagnose-loading {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--navy-600);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: glDiagSpin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes glDiagSpin {
  to { transform: rotate(360deg); }
}

/* Diagnose tab — range slider styling */
.gl-diagnose-columns input[type="range"] {
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--navy-700);
  border-radius: 2px;
  outline: none;
}
.gl-diagnose-columns input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}
.gl-diagnose-columns input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  cursor: pointer;
}

/* "Why Not Here?" context menu */
.gl-whynot-menu { font-family: 'Inter', system-ui, sans-serif; }
.gl-whynot-menu::-webkit-scrollbar { width: 6px; }
.gl-whynot-menu::-webkit-scrollbar-thumb { background: var(--navy-600); border-radius: 3px; }