/* Gantt grid - modelled on the Excel "Planning" sheet */
.scroll { overflow: auto; background: #fff; border: 1px solid var(--line); }
.gantt { max-height: calc(100vh - 170px); }
.scroll.tall { max-height: calc(100vh - 130px); }
table.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12px; }
table.grid td, table.grid th { border-right: 1px solid #e3e7ec; border-bottom: 1px solid #e3e7ec; padding: 0 3px; height: 17px; overflow: hidden; white-space: nowrap; }

/* header: dark grey bars like Excel */
table.grid thead th { position: sticky; background: #595959; color: #fff; z-index: 3; text-align: center; font-weight: 600; border-color: #7a7a7a; }
table.grid thead tr:nth-child(1) th { top: 0; }
table.grid thead tr:nth-child(2) th { top: 17px; }
table.grid thead tr:nth-child(3) th { top: 34px; font-weight: 400; font-size: 9px; line-height: 9px; height: 26px; padding: 0; }
table.grid thead th.h0 { z-index: 5; left: 0; }
th.mon { background: #404040 !important; }
th.wk { text-align: left !important; background: #7f7f7f !important; }
th.d.we { background: #a6a6a6; color: #333; }
th.d.today { background: #c00000; color: #fff; }

.sticky { position: sticky; z-index: 2; background: #fff; }
.s0 { left: 0; } .s1 { left: 34px; } .s2 { left: 110px; }
td.seq { text-align: right; color: var(--muted); }

/* people block: light blue panel */
tr.phead th { background: #7f7f7f; color: #fff; font-weight: 600; text-align: center; height: 17px; }
tr.phead th.av { padding: 0; border-color: #fff; }
tr.phead th { text-align: left; padding-left: 8px; }
tr.phead th.av { padding: 0; }
tr.phead th .hsub { font-weight: 400; opacity: .85; margin-left: 4px; }
td.lwc { padding: 1px 4px; }
/* workload bars: informational only -> one calm blue tone, no traffic-light colours */
.lw { position: relative; display: block; height: 14px; border-radius: 3px; background: rgba(255,255,255,.55); overflow: hidden; }
.lw .lbar { position: absolute; left: 0; top: 0; bottom: 0; background: #c4d8ee; }
.lw .ltxt { position: relative; display: block; text-align: center; font-size: 11px; line-height: 14px; color: #4a5a70; white-space: nowrap; }
.lv-none { background: transparent; box-shadow: inset 0 0 0 1px #c9d6e6; } .lv-none .ltxt { color: #7b8aa0; font-style: italic; }
.lv-off { background: rgba(255,255,255,.4); } .lv-off .ltxt { color: #98a3b3; font-style: italic; }
.av-g { background: #cfe8cf !important; } .av-y { background: #f7f3c6 !important; }
.av-o { background: #f9e0c7 !important; } .av-r { background: #f4cccc !important; }
th.av.we { background: #dadada !important; }
th.av.today { outline: 1px solid #c00000; outline-offset: -1px; }
tr.prow td { background: #ddebf7; border-color: #fff; }
.sw { display: inline-block; width: 12px; height: 10px; vertical-align: middle; border: 1px solid #fff; }
.pname { text-align: left; }
.pbg { background: #ddebf7 !important; }
td.pname { padding-left: 8px; background: #ddebf7 !important; }
td.c { text-align: center; padding: 0; font-size: 10px; cursor: crosshair; user-select: none; width: 21px; }
td.c.we, td.g.we { background: var(--we) !important; }
td.c.today, td.g.today { box-shadow: inset 1px 0 #c00000, inset -1px 0 #c00000; }
td.c.leave { background: #c5e0a5 !important; }
td.c.vac.pend, .sw.vac.pend { background: #E36B08 !important; color: #fff; }
td.c.vac.ok, .sw.vac.ok { background: #76933c !important; color: #fff; }
td.c.bh, .sw.bh { background: #355e92 !important; color: #fff; }

/* task table */
tr.thead th { position: sticky; top: 60px; z-index: 4; background: #404040 !important; color: #fff; text-align: left; padding: 2px 4px; height: 26px; white-space: normal; line-height: 1.1; }
tr.thead th.sticky { z-index: 6; }
tr.trow td { background: #fff; }
tr.trow { cursor: pointer; }
tr.trow:hover td:not(.g.work):not(.g.span) { background: #eef4fb; }
td.desc, td.asg { text-overflow: ellipsis; }
td[class*="stc-"] { text-align: left; }
.stc-OnHold { background: #dbe8f7 !important; color: #1f4e79; }
.stc-Inprogress { background: #fde9d9 !important; color: #c0504d; }
.stc-Completed { color: #6b7a8c; }
.stc-Cancelled { color: #9aa5b1; text-decoration: line-through; }
tr.trow td.g { padding: 0; position: relative; overflow: visible; background: #fff; }
tr.trow td.g.we { background: #dadada !important; }
td.g .lbl { position: absolute; left: 2px; top: 0; z-index: 1; font-size: 11px; line-height: 17px; color: #123; background: transparent; pointer-events: none; }
tr.st-Cancelled td:not(.g):not(.sticky) { color: #9aa5b1; }
tr.st-Cancelled td.g.work { background: #d0d5db !important; }

/* inline date editing */
td.dt { cursor: cell; }
td.dt:hover { background: #e8f0fb; outline: 1px solid #9dc3e6; outline-offset: -1px; }
td.dt.editing { padding: 0; overflow: visible; position: relative; z-index: 8; }
td.dt input { width: 128px; height: 20px; font-size: 11px; padding: 0 2px; border: 2px solid var(--accent); position: absolute; left: 0; top: -1px; background: #fff; }
/* work bar (Start..End): light blue */
td.g.work { background: #8cb9e8 !important; }
/* window bar (Ready..Due): thin hatching (the original look) */
td.g.span { background: repeating-linear-gradient(135deg, #fff, #fff 2px, #c5dcf1 2px, #c5dcf1 4px) !important; }
/* one continuous block: no vertical day separator inside a bar (the row separator below stays) */
tr.trow td.g.work, tr.trow td.g.span { border-right-color: transparent; }
/* weekends stay grey and interrupt the bars, like in Excel */
td.g.we.work, td.g.we.span { background: var(--we) !important; }
tr.trow td.g.we { border-right-color: #e3e7ec; }

/* inline Activity / Assignee editing */
td.ed { cursor: cell; }
td.ed:hover { background: #e8f0fb; outline: 1px solid #9dc3e6; outline-offset: -1px; }
td.ed.editing { padding: 0; overflow: visible; }
select.cell-select { width: 100%; height: 19px; font-size: 11px; padding: 0; border: 2px solid var(--accent); }
.pop { position: fixed; z-index: 100; background: #fff; border: 1px solid var(--accent); border-radius: 4px; box-shadow: 0 6px 24px rgba(0,0,0,.25); padding: 6px 8px; min-width: 170px; }
.pop-list { display: grid; grid-template-columns: repeat(2, minmax(100px, 1fr)); gap: 1px 10px; max-height: 260px; overflow: auto; }
.pop-list label { display: flex; gap: 4px; align-items: center; font-size: 12px; white-space: nowrap; cursor: pointer; }
.pop-actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; font-size: 11px; }

/* People calendar: highlight the row under the mouse (like the task rows). It is a tint laid over every cell,
   so the colours of vacations, holidays and tasks stay visible. The legend cell is excluded. */
tr.prow:hover td { background-image: linear-gradient(rgba(31, 73, 125, .16), rgba(31, 73, 125, .16)) !important; }

/* a day of an open task on which an assignee is on vacation: that person cannot work then */
tr.trow td.g.off { background: #e0434a !important; }
tr.trow td.g.off .lbl { color: #fff; }

/* header: overview of today + compact legend in one big dark cell over the three header rows */
table.grid thead th.hdinfo { position: sticky; left: 0; z-index: 5; text-align: left; vertical-align: top; padding: 4px 8px; background: #4a4f57; font-weight: 400; white-space: normal; overflow: visible; }
.hd { display: flex; flex-direction: column; gap: 5px; color: #d3d9e0; font-size: 11.5px; line-height: 1.3; }
.hd-ov { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; font-size: 12px; }
.hd-ov b { color: #f1f4f7; font-size: 12.5px; font-weight: 600; }
/* availability today: only a soft tint of the text, no coloured badge */
.hd-ov .ov-ok, .hd-ov .ov-mid, .hd-ov .ov-bad { font-weight: 600; }
.ov-ok { color: #c3dfc4; } .ov-mid { color: #e8dcae; } .ov-bad { color: #e8c0c0; }
.lg { display: flex; flex-direction: column; gap: 3px; }
.lg b { color: #f1f4f7; font-weight: 600; }
.hd .sw { margin: 0 3px 0 6px; vertical-align: -1px; }
.lgi { white-space: nowrap; margin-right: 8px; }
.lgi .sw { margin-left: 0; }
.lgsep { margin: 0 8px 0 2px; color: #8d949e; }
.hd .lg > div > .sw:first-child { margin-left: 0; }

/* current brush shown next to the palette */
.brush-now { background: #1f497d; color: #fff; border-radius: 3px; padding: 2px 8px; min-width: 110px; text-align: center; }