:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #1d2330;
  --muted: #6b7280;
  --line: #e3e6ea;
  --accent: #2563eb;
  --danger: #c0352b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}

/* Full-height layout: the header block stays put, the chart scrolls inside its own box,
   so Frappe's sticky date header stays visible while scrolling down. */
html, body { height: 100%; }
body { margin: 0; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }
.top { flex: none; background: var(--panel); border-bottom: 1px solid var(--line); }

.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 20px;
}
.toolbar h1 { font-size: 17px; margin: 0 12px 0 0; }

button {
  font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer;
}
button:hover { border-color: #c5cad1; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.danger { color: var(--danger); border-color: #efc9c5; }

.views { display: inline-flex; }
.views button { border-radius: 0; margin-left: -1px; }
.views button:first-child { border-radius: 6px 0 0 6px; }
.views button:last-child { border-radius: 0 6px 6px 0; }
.views button.active { background: #eef3ff; border-color: var(--accent); color: var(--accent); position: relative; }

.filter { font-size: 13px; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
select, input, textarea { font: inherit; font-size: 13px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; }

.status { margin-left: auto; font-size: 12px; color: var(--muted); }
.status.saving { color: var(--accent); }
.status.error { color: var(--danger); font-weight: 600; }

.legend-row { display: flex; align-items: center; gap: 16px; padding: 0 20px 10px; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.banner { margin: 0 20px 10px; padding: 8px 12px; border-radius: 6px; background: #fff4e5; color: #8a4b00; font-size: 13px; }
button:disabled { opacity: .45; cursor: not-allowed; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

#gantt {
  flex: 1; min-height: 0; margin: 12px 20px 16px; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
}
#gantt .gantt-container { flex: 1; min-height: 0; height: auto !important; }
.hint { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; }

dialog { border: none; border-radius: 10px; padding: 0; width: min(560px, 92vw); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20, 24, 33, .35); }
dialog form { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
dialog h2 { margin: 0; font-size: 16px; }
dialog label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); flex: 1; }
dialog .row { display: flex; gap: 12px; }
dialog menu { display: flex; gap: 8px; margin: 8px 0 0; padding: 0; }
dialog .spacer { flex: 1; }

/* Resize handles: visible on hover, easy to grab */
.gantt .bar-wrapper .handle.left,
.gantt .bar-wrapper .handle.right { cursor: ew-resize; fill: rgba(29, 35, 48, .55); }
.gantt .bar-wrapper:hover .handle.left,
.gantt .bar-wrapper:hover .handle.right { opacity: 1; }

/* Milestones: flag instead of bar (the bar stays as an invisible drag target) */
.gantt .bar-wrapper.milestone .bar,
.gantt .bar-wrapper.milestone .bar-progress { fill: transparent !important; outline: none; }
.gantt .bar-wrapper.milestone .handle { display: none; }
.gantt .bar-wrapper.milestone .bar-label { font-weight: 600; }
.gantt .bar-wrapper.milestone:hover .ms-flag { filter: brightness(1.15); }

/* Row reordering */
.gantt .row-grip { cursor: grab; fill: #9aa1ac; opacity: .55; }
.gantt .row-grip:hover { opacity: 1; fill: var(--text); }
.gantt .reorder-line { fill: var(--accent); pointer-events: none; }
.gantt .bar-wrapper.reordering { opacity: .4; }
body.is-reordering, body.is-reordering * { cursor: grabbing !important; }

/* Folders: light summary bar spanning their lines (name inside), click to fold */
.gantt .bar-wrapper.folder .bar { fill: #e4e8f0; outline: 1.5px solid #1d2330; rx: 4px; ry: 4px; }
.gantt .bar-wrapper.folder .bar-progress,
.gantt .bar-wrapper.folder .handle { display: none; }
.gantt .bar-wrapper.folder .bar-label { font-weight: 700; font-size: 13.5px; fill: #1d2330 !important; }
.gantt .bar-wrapper.folder { cursor: pointer; }
.gantt .bar-wrapper.folder:hover .bar { fill: #d3dbeb; }