/* ─── Custom Fonts ──────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Aspekta';
  src: url('assets/fonts/Aspekta-400.woff2') format('woff2'),
       url('assets/fonts/Aspekta-400.ttf')   format('truetype'),
       url('assets/fonts/Aspekta-400.otf')   format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('assets/fonts/Aspekta-500.woff2') format('woff2'),
       url('assets/fonts/Aspekta-500.ttf')   format('truetype'),
       url('assets/fonts/Aspekta-500.otf')   format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('assets/fonts/Aspekta-600.woff2') format('woff2'),
       url('assets/fonts/Aspekta-600.ttf')   format('truetype'),
       url('assets/fonts/Aspekta-600.otf')   format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ─── Reset & Base ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:            #070c1b;
  --panel:         #0d1526;
  --panel-alt:     #0a1120;
  --section-bg:    #0f1a30;
  --border:        #1a2744;
  --border-dim:    #101d35;
  --text-hi:       #c8d8f0;
  --text-md:       #7b93b8;
  --text-lo:       #3d5275;
  --accent:        #2d7dd2;
  --accent-glow:   rgba(45,125,210,0.18);
  --today:         #ff6b6b;
  --today-glow:    rgba(255,107,107,0.25);
  --label-width:   210px;
  --header-h:      52px;
  --font-mono:     'IBM Plex Mono', 'Fira Code', monospace;
  --font-sans:     'Aspekta', system-ui, sans-serif;
}

html, body { height: 100%; background: var(--bg); color: var(--text-hi);
  font-family: var(--font-sans); font-size: 13px; -webkit-font-smoothing: antialiased; }

#app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ─── Header ───────────────────────────────────────────────────────────────── */

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--header-h);
  min-height: var(--header-h);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  gap: 16px;
  flex-shrink: 0;
  z-index: 20;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.header-logo {
  height: 56px;
  width: auto;
  display: block;
}

.controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: var(--text-lo);
  user-select: none;
}

.control-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
}

.pill-row { display: flex; gap: 4px; flex-wrap: wrap; }

/* ─── Pills ────────────────────────────────────────────────────────────────── */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-md);
  font-family: var(--font-mono);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  outline: none;
  user-select: none;
}

.pill:hover { border-color: var(--accent); color: var(--text-hi); background: var(--accent-glow); }

.pill.active {
  border-color: var(--accent);
  background: var(--accent-glow);
  color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.pill-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ─── Zoom controls ────────────────────────────────────────────────────────── */

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-md);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  outline: none;
  user-select: none;
}

.zoom-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.zoom-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.zoom-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-md);
  min-width: 26px;
  text-align: center;
  user-select: none;
}

/* ─── Status ───────────────────────────────────────────────────────────────── */

.status-group { display: flex; align-items: center; gap: 7px; }

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  animation: pulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.pulse-dot.stale { background: var(--text-lo); box-shadow: none; animation: none; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.status-text { font-family: var(--font-mono); font-size: 10px; color: var(--text-lo); }

/* ─── Chart outer layout ───────────────────────────────────────────────────── */

#chart-outer {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* Fixed label column */
#label-col {
  width: var(--label-width);
  min-width: var(--label-width);
  max-width: var(--label-width);
  overflow: hidden;
  position: relative;
  border-right: 1px solid var(--border);
  z-index: 10;
  flex-shrink: 0;
  background: var(--panel-alt);
}

#label-svg {
  position: absolute;
  top: 0; left: 0;
  display: block;
}

/* Scrollable timeline column */
#timeline-col {
  flex: 1;
  overflow: auto;
  min-width: 0;
}

#timeline-svg { display: block; }

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-lo);
  letter-spacing: 0.15em;
}

/* ─── SVG: Axis ────────────────────────────────────────────────────────────── */

.axis-bg { fill: var(--panel); }

.quarter-label {
  font-family: var(--font-mono);
  font-size: 9px;
  fill: var(--text-lo);
  letter-spacing: 0.12em;
}

.month-label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--text-md);
}

.month-line { stroke: var(--border-dim); stroke-width: 1; }

.week-tick { stroke: var(--border-dim); stroke-width: 1; opacity: 0.4; }

.axis-border { stroke: var(--border); stroke-width: 1; }

/* ─── SVG: Section headers ─────────────────────────────────────────────────── */

.section-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  fill: var(--text-md);
}

.section-sep { stroke: var(--border); stroke-width: 1; }

/* ─── SVG: Swim lanes ──────────────────────────────────────────────────────── */

.lane-label {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  fill: var(--text-md);
}

.lane-sep { stroke: var(--border-dim); stroke-width: 1; }

/* ─── SVG: Bars ────────────────────────────────────────────────────────────── */

.bar-group { cursor: pointer; }

.bar-group:hover .bar-rect,
.bar-group:hover .bar-path {
  opacity: 1 !important;
  filter: brightness(1.2) drop-shadow(0 1px 4px rgba(0,0,0,0.4));
}

.bar-group:hover .bar-label { fill: #fff; }

.bar-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  fill: rgba(255,255,255,0.9);
  pointer-events: none;
}

/* ─── SVG: Diamonds ────────────────────────────────────────────────────────── */

.diamond-group { cursor: pointer; }

.diamond-group:hover .diamond-shape {
  filter: brightness(1.3) drop-shadow(0 0 4px currentColor);
}

.diamond-group:hover .diamond-label { fill: var(--text-hi); }

.diamond-label {
  font-family: var(--font-sans);
  font-size: 11px;
  fill: var(--text-md);
  pointer-events: none;
}

/* ─── Today line ───────────────────────────────────────────────────────────── */

.today-line {
  stroke: var(--today);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
  opacity: 0.65;
  pointer-events: none;
}

.today-dot {
  fill: var(--today);
  filter: drop-shadow(0 0 4px var(--today-glow));
  pointer-events: none;
}

.today-label {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.1em;
  fill: var(--today);
  opacity: 0.75;
  pointer-events: none;
}

/* ─── Tooltip ──────────────────────────────────────────────────────────────── */

#tooltip {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  background: #111d38;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  min-width: 200px;
  max-width: 270px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(45,125,210,0.07);
}

.tt-header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.tt-title { font-weight: 600; font-size: 13px; color: var(--text-hi); line-height: 1.4; }
.tt-meta { font-size: 11px; color: var(--text-md); margin-bottom: 5px; }
.tt-date { font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
.tt-duration { font-family: var(--font-mono); font-size: 10px; color: var(--text-lo); margin-top: 2px; }
.tt-notes { font-size: 11px; color: var(--text-md); margin-top: 7px; padding-top: 7px;
  border-top: 1px solid var(--border-dim); line-height: 1.5; }
.tt-clip { font-family: var(--font-mono); font-size: 10px; color: var(--text-lo); margin-top: 5px; }

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-lo); }