:root {
  --day-width: 20px;
  --sticky-body-offset: 54.67px;
  --meta-task-width: 160px;
  --meta-start-width: 80px;
  --meta-end-width: 80px;
  --meta-days-width: 60px;
  --font-size-base: 14px;
  --font-size-task: calc(var(--font-size-base) * 1.5);
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 1.18rem;
}

/* Header controls */
#header {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

#header h1 {
  text-align: center;
  margin: 0 0 10px;
}

#header .controls {
  text-align: center;
  margin-bottom: 10px;
}

#header .controls .zoomControl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 10px;
}

#header .controls input[type="range"] {
  vertical-align: middle;
}

/* Scroll container */
#tableContainer {
  overflow: auto;
  height: calc(100vh - 100px);
}

#tableInner {
  position: relative;
  display: inline-block;
}

/* Unified table styling: enforce uniform cell height */
#ganttTable {
  border-collapse: collapse;
  width: 100%;
}

#ganttTable th,
#ganttTable td {
  border: 0px solid #ccc;
  text-align: center;
  font-size: var(--font-size-base);
  padding: 6px;
  box-sizing: border-box;
  height: 32px; /* Increased fixed height for readability */
  vertical-align: middle;
}

/* Fixed width for metadata columns */
.fixed {
  background: #fff;
}

.fixed--task {
  min-width: var(--meta-task-width);
  max-width: var(--meta-task-width);
}

.fixed--start {
  min-width: var(--meta-start-width);
  max-width: var(--meta-start-width);
}

.fixed--end {
  min-width: var(--meta-end-width);
  max-width: var(--meta-end-width);
}

.fixed--days {
  min-width: var(--meta-days-width);
  max-width: var(--meta-days-width);
}

/* Uniform day cells */
.dayCell {
  min-width: var(--day-width);
  max-width: var(--day-width);
  width: var(--day-width);
  height: 32px;
  line-height: 32px;
  padding: 0;
}

/* Shading for break days */
.breakCell {
  background: #a4a4a4;
}

/* Overlay lines for major/current dates */
#dateLinesOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 15;
}

.dateLine {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  pointer-events: auto;
  cursor: help;
}

.dateLine--major {
  background: red;
}

.dateLine--current {
  background: #2ecc71;
  z-index: 16;
}

.majorDateCell {
  border-left: 0 !important;
}

thead tr.dayHeader .majorDateCell,
thead tr.dayHeader .currentDateCell {
  padding-left: 6px;
}

/* Task cell style */
.taskBar {
  background: #1f77b4;
  color: #fff;
  border-radius: 3px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  height: 100%;
  line-height: 32px;
  padding: 0 8px;
  font-size: var(--font-size-task);
}

.important {
  font-weight: bold;
}

/* Sticky header rows */
thead tr.weekGroup th {
  position: sticky;
  top: 0;
  background: #eee;
  z-index: 11;
  max-height: 34.67px;
  min-height: 34.67px;
}

thead tr.dayHeader th {
  position: sticky;
  top: 34.67px;
  background: #ddd;
  z-index: 9;
}

/* Sticky left columns in body */
tbody .fixed {
  position: sticky;
  top: var(--sticky-body-offset);
  z-index: 25;
  background: #fff;
}

/* Tooltip styling */
#tooltip {
  position: absolute;
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 3px;
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 100;
}