/* Custom on top of Pico — drop zone visuals + summary grid. */

/* Tab navigation (step-by-step flow) */
nav.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 1rem 0 1.5rem;
  border-bottom: 2px solid var(--pico-muted-border-color, #ccc);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--pico-background-color, #fff);
  z-index: 50;
  padding: 0.25rem 0;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  padding: 0.6rem 1.2rem;
  margin: 0 0 -2px 0;
  font-size: 1rem;
  font-weight: bold;
  color: var(--pico-muted-color, #888);
  cursor: pointer;
  border-radius: 0;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab-btn:hover:not(:disabled) { color: var(--pico-color, #222); }
.tab-btn.is-active {
  color: var(--pico-primary, #1095c1);
  border-bottom-color: var(--pico-primary, #1095c1);
}
.tab-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.tab-pane[hidden] { display: none; }
.tab-pane { animation: fade-in 180ms ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

nav.tab-step-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--pico-muted-border-color, #ccc);
}
nav.tab-step-nav button { margin: 0; }
nav.tab-step-nav button[data-goto-tab="export"],
nav.tab-step-nav button[data-goto-tab="explore"].primary {
  margin-left: auto;
}

@media (max-width: 600px) {
  .tab-btn { padding: 0.4rem 0.6rem; font-size: 0.9rem; }
}

/* Footer theme radios should sit inline next to the rest of the text */
footer label {
  display: inline-block;
  margin-left: 0.25rem;
}
footer label input[type=radio] {
  margin-right: 0.15rem;
}

.drop-zone {
  border: 2px dashed var(--pico-muted-border-color, #a0a0a0);
  border-radius: var(--pico-border-radius, 0.5rem);
  padding: 3rem 1rem;
  text-align: center;
  background: var(--pico-card-background-color);
  transition: border-color 120ms ease, background 120ms ease;
  cursor: pointer;
}
.drop-zone.is-dragging {
  border-color: var(--pico-primary, #1095c1);
  background: var(--pico-primary-background, #e1f5fa);
}
.drop-zone-inner {
  pointer-events: none;
}
.drop-zone-inner label[role="button"] {
  pointer-events: auto;
  margin: 0 0.25rem;
}
.drop-icon {
  font-size: 2.5rem;
  margin: 0 0 0.5rem 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.5rem;
  margin: 1rem 0;
  font-variant-numeric: tabular-nums;
}
.summary-grid dt {
  font-weight: bold;
  color: var(--pico-muted-color, #555);
}
.summary-grid dd {
  margin: 0;
}

pre.error {
  background: var(--pico-form-element-invalid-active-border-color, #f5c6cb);
  color: #842029;
  padding: 1rem;
  border-radius: 0.4rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Sessions bar (multi-session compare) */
.sessions-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0;
}
.session-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--pico-muted-border-color, #aaa);
  border-left: 4px solid currentColor;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  background: var(--pico-card-background-color);
  user-select: none;
}
.session-pill.is-active {
  background: rgba(0, 0, 0, 0.06);
  font-weight: bold;
}
.session-pill .close-btn {
  background: none;
  border: none;
  padding: 0 0.2rem;
  font-size: 1rem;
  cursor: pointer;
  color: var(--pico-muted-color, #888);
  line-height: 1;
  margin: 0;
}
.session-pill .close-btn:hover { color: #cc0000; }
.session-pill .label-text {
  outline: none;
  min-width: 1ch;
}

#compare-toggle-btn.is-on {
  background: var(--pico-primary, #1095c1);
  color: #fff;
  border-color: var(--pico-primary, #1095c1);
}

/* Range selector */
.range-label { font-size: 0.9rem; margin-bottom: 0.3rem; }
.range-label button { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.8rem; }
.range-strip { width: 100%; min-height: 90px; }

/* Snap-to-event button on each event row */
.snap-btn {
  background: none;
  border: 1px solid var(--pico-muted-border-color, #aaa);
  border-radius: 3px;
  padding: 0.1rem 0.4rem;
  font-size: 0.75rem;
  cursor: pointer;
  margin: 0;
}
.snap-btn:hover { background: rgba(0, 0, 0, 0.04); }

/* Insights cards */
.insights-list { display: flex; flex-direction: column; gap: 0.6rem; }
.insight-card {
  border-left: 4px solid var(--pico-muted-border-color, #aaa);
  padding: 0.6rem 1rem;
  background: var(--pico-card-background-color);
  border-radius: 0 var(--pico-border-radius, 0.4rem) var(--pico-border-radius, 0.4rem) 0;
}
.insight-card.severity-alert { border-left-color: #cc0000; }
.insight-card.severity-warn  { border-left-color: #cc6600; }
.insight-card.severity-info  { border-left-color: #0066cc; }
.insight-card h3 { margin: 0 0 0.2rem 0; font-size: 1rem; }
.insight-card .insight-meta {
  color: var(--pico-muted-color, #888);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.insight-card details > summary {
  cursor: pointer; color: var(--pico-primary, #1095c1);
  margin-top: 0.3rem; font-size: 0.85rem;
}
.insight-card details[open] > summary { color: var(--pico-muted-color, #888); }
.insight-card ul { margin: 0.3rem 0 0 1.2rem; font-size: 0.9rem; }
.insight-related {
  font-size: 0.8rem; margin-top: 0.3rem;
  color: var(--pico-muted-color, #888);
}
.insight-related a { margin-right: 0.4rem; }

.events-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.events-toolbar input[type=search] {
  flex: 1 1 16rem;
  min-width: 12rem;
  margin: 0;
}
.events-toolbar button {
  margin: 0;
  padding: 0.3rem 0.7rem;
  font-size: 0.85rem;
}
.kind-chips {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.kind-chip {
  padding: 0.15rem 0.6rem;
  border-radius: 1rem;
  border: 1px solid var(--pico-muted-border-color, #aaa);
  background: var(--pico-card-background-color);
  cursor: pointer;
  font-size: 0.8rem;
  user-select: none;
  transition: opacity 100ms ease;
}
.kind-chip.is-off {
  opacity: 0.35;
  text-decoration: line-through;
}
.events-table tr.is-hidden { display: none; }
.events-table tr.note-row td { background: rgba(255, 235, 100, 0.10); padding: 0.3rem; }
.events-table tr.note-row textarea {
  resize: vertical;
  font-family: inherit;
  font-size: 0.85rem;
  width: 100%;
  margin: 0;
}
.events-table th { user-select: none; }
.events-table th:hover { background: rgba(0, 0, 0, 0.03); }
.note-btn.has-note { background: rgba(255, 235, 100, 0.25); }

/* Shortcuts overlay */
#shortcuts-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
#shortcuts-overlay > article {
  background: var(--pico-background-color, #fff);
  padding: 1.5rem 2rem;
  border-radius: var(--pico-border-radius, 0.4rem);
  min-width: 26rem;
  max-width: 90vw;
}
#shortcuts-overlay kbd {
  background: var(--pico-code-background-color, #f0f0f0);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-family: monospace;
}

.events-table {
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.events-table th:first-child, .events-table td:first-child {
  width: 2rem;
}
.events-table tr.kind-outage  { background: rgba(255, 0, 0, 0.06); }
.events-table tr.kind-dip     { background: rgba(255, 153, 0, 0.06); }
.events-table tr.kind-swell   { background: rgba(255, 153, 0, 0.06); }
.events-table tr.kind-high_current { background: rgba(204, 0, 0, 0.04); }
.events-table tr.kind-freq_excursion { background: rgba(102, 0, 102, 0.05); }
.events-table tr.kind-imbalance_spike { background: rgba(0, 102, 204, 0.05); }
.events-table tr.kind-power_step { background: rgba(0, 153, 51, 0.04); }

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.25rem 1rem;
  margin: 0.5rem 0;
}
.zoom-controls label {
  display: inline-block;
  margin-right: 1rem;
}

.charts-area {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.chart-wrapper {
  margin: 0;
  padding: 0.5rem 0.75rem;
}
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  gap: 1rem;
}
.chart-header h3 {
  margin: 0;
  font-size: 1rem;
}
.decimate-notice {
  font-size: 0.75rem;
  color: #b06000;
  font-style: italic;
  white-space: nowrap;
}
.chart-toolbar {
  display: flex;
  gap: 0.4rem;
}
.chart-toolbar button {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
  margin: 0;
}
.chart-canvas {
  width: 100%;
  min-height: 280px;
  position: relative;
}

/* P2: anomaly band tooltip */
.anomaly-tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  font-size: 0.8rem;
  font-family: monospace;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

/* P4: uPlot legend / crosshair styling (dark-mode safe) */
.u-legend { font-size: 0.85rem; }
[data-theme="dark"] .u-legend { color: #ddd; }
[data-theme="dark"] .u-tooltip,
[data-theme="dark"] .u-cursor-pt { color: #ddd; }

/* P3: mobile responsive */
@media (max-width: 600px) {
  main.container { padding: 0 0.5rem; margin-top: 1rem; }
  .summary-grid { grid-template-columns: 1fr; gap: 0.2rem 0; }
  .summary-grid dt { margin-top: 0.4rem; }
  .events-table { display: block; overflow-x: auto; white-space: nowrap; }
  .chart-header { flex-direction: column; align-items: flex-start; }
  .chart-toolbar { flex-wrap: wrap; }
  .events-toolbar { flex-direction: column; align-items: stretch; }
  .range-strip { touch-action: pan-x; user-select: none; }
  .sessions-bar { flex-direction: column; align-items: stretch; }
}

/* CT-reversal banner (Feature C) */
.ct-reversal-banner {
  background: #fff3cd;
  border: 1px solid #ffec99;
  color: #663c00;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.ct-reversal-banner button { margin-left: auto; }
[data-theme="dark"] .ct-reversal-banner {
  background: #3a2f00; border-color: #5c4a00; color: #ffe69c;
}

/* Statistics table (Feature B) */
.stats-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.stats-table th, .stats-table td { padding: 0.25rem 0.5rem; text-align: right; border-bottom: 1px solid #ddd; }
.stats-table th:first-child, .stats-table td:first-child { text-align: left; }