/* ===== CSS Variables ===== */
:root {
  --bg-base:      #181825;
  --bg-surface:   #1e1e2e;
  --bg-overlay:   #313244;
  --border:       #45475a;
  --border-subtle:#313244;
  --text-primary: #cdd6f4;
  --text-muted:   #a6adc8;
  --text-dim:     #6c7086;
  --accent:       #89b4fa;
  --accent-red:   #f38ba8;
  --day-width:    28px; /* keep in sync with DAY_WIDTH in app.js */
  --row-height:   36px;
  --label-width:  320px;
  --header-h:     62px;
}

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

html, body { height: 100%; }

body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ===== Toolbar ===== */
.toolbar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  gap: 8px;
  flex-wrap: wrap;
}
.toolbar-primary {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  justify-content: space-between;
}
.toolbar-filter {
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-subtle);
}
.app-title { font-weight: bold; font-size: 15px; }
.toolbar-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctrl-label { color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.toolbar-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }

/* Period buttons */
.period-btns { display: flex; gap: 4px; }
.btn-period {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-period--active {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  font-weight: bold;
}

/* Toggle */
.toggle-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 12px; cursor: pointer; }
input[type="checkbox"] { accent-color: var(--accent); }

/* Refresh button */
.btn-refresh {
  background: var(--bg-overlay);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}

/* Toggle button (前年比較) */
.btn-toggle {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.btn-toggle[aria-pressed="true"] {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  font-weight: bold;
}

/* ===== Tag chips ===== */
.tag-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 12px;
  font-size: 12px;
  cursor: pointer;
}
.chip--active {
  background: var(--accent);
  color: var(--bg-base);
  border-color: var(--accent);
  font-weight: bold;
}

/* Keyword input */
.keyword-input {
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  width: 160px;
  outline: none;
}

/* ===== Gantt container (sections stack vertically; each section is a 2-panel scrollable area) ===== */
.gantt-container {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.gantt-section {
  display: flex;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
}

/* 比較モード時の上下60:40分割 */
.gantt-container--compare .gantt-section--current { flex: 0 0 60%; }
.gantt-container--compare .gantt-section--prev    { flex: 0 0 40%; border-top: 2px solid var(--border); }

.gantt-left {
  width: var(--label-width);
  min-width: var(--label-width);
  flex-shrink: 0;
  background: var(--bg-base);
  border-right: 2px solid var(--border);
  z-index: 2;
}

.gantt-right {
  flex: 1;
  overflow-x: auto;
}

/* ===== Gantt header row ===== */
.gantt-header-label,
.gantt-header-dates {
  height: var(--header-h);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 3;
}
.gantt-header-label {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.gantt-header-dates {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  user-select: none;
}
.gantt-month-row {
  height: 20px;
  display: flex;
  align-items: center;
}
.gantt-month-block {
  display: flex;
  align-items: center;
  height: 100%;
}
.gantt-month-label {
  padding: 0 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: bold;
  position: sticky;
  left: 0;
}
.gantt-day-row { display: flex; }
.gantt-day-cell {
  width: var(--day-width);
  min-width: var(--day-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 3px;
  border-left: 1px solid var(--border-subtle);
  font-size: 10px;
  color: var(--text-dim);
}
.gantt-day-cell--sat { color: var(--accent); background: rgba(137,180,250,0.06); }
.gantt-day-cell--sun { color: var(--accent-red); background: rgba(243,139,168,0.06); }
.gantt-day-cell--today {
  border-left: 2px solid var(--accent);
  color: var(--accent);
  font-weight: bold;
  background: rgba(137,180,250,0.12);
}
.gantt-day-num { line-height: 1.4; }
.gantt-day-dow { font-size: 9px; }

/* ===== Gantt rows ===== */
.gantt-row-label {
  height: var(--row-height);
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 7px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  overflow: hidden;
}
.gantt-row-label--past { opacity: 0.45; }
.color-marker {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.tag-badge {
  background: var(--bg-overlay);
  color: var(--text-dim);
  font-size: 10px;
  font-weight: bold;
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex-shrink: 0;
}
.event-title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt-row-label--past .event-title { text-decoration: line-through; color: var(--text-dim); }

/* ===== Gantt bars ===== */
.gantt-row-bars {
  height: var(--row-height);
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}
.gantt-row-bars--past { background: rgba(0,0,0,0.12); }
.gantt-bar {
  position: absolute;
  top: 8px;
  height: 20px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 11px;
  font-weight: bold;
  color: var(--bg-base);
  white-space: nowrap;
  overflow: hidden;
  min-width: 4px;
}
.gantt-bar--past { background: var(--bg-overlay) !important; color: var(--text-dim); }

/* Today line (overlay on bars area) */
.today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

/* Weekend column overlay */
.weekend-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(137,180,250,0.04);
  pointer-events: none;
}

/* ===== Footer ===== */
.footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 16px;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
  color: var(--text-dim);
  font-size: 11px;
}
.footer-divider { color: var(--border); }
.today-legend { display: flex; align-items: center; gap: 6px; }
.today-line-demo { display: inline-block; width: 8px; height: 2px; background: var(--accent); }