/* <Gantt /> — default styling, lm-gantt-* convention.
   Everything horizontal is %-positioned: instances sharing a range
   align across any containers (the table-row embedding story). */
.lm-gantt {
    /* Typography + framing follow the chart's Highcharts standards:
       Helvetica Neue stack on a 1rem base, em-scaled labels (0.8em axis,
       0.7em bold data labels), #333/#666 text, #e6e6e6 rules. Colours
       read the shared template tokens with those values as fallbacks so
       the gantt matches the chart with or without the global stylesheet. */
    --lm-gantt-font: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --lm-gantt-font-size: 1rem;
    --lm-gantt-text: var(--lm-font-color, #333333);
    --lm-gantt-muted: var(--lm-font-grayout, #666666);
    --lm-gantt-grid: var(--lm-border-color, #e6e6e6);
    /* the categorical series tokens keep gantt bars in step with chart
       series: bar = series-1, milestone = series-2, today = series-4 */
    --lm-gantt-bar: var(--lm-series-1, #4b81de);
    --lm-gantt-milestone: var(--lm-series-2, #6342a1);
    --lm-gantt-today: var(--lm-series-4, #bd7f40);
    --lm-gantt-bar-radius: 2px;
    font-family: var(--lm-gantt-font);
    font-size: var(--lm-gantt-font-size);
    line-height: 1.4;
    color: var(--lm-gantt-text);
    position: relative;
    width: 100%;
}

/* ---- timeline header */
.lm-gantt-header {
    position: relative;
    user-select: none;
    border-bottom: 1px solid var(--lm-gantt-grid);
    cursor: grab; /* drag to pan the viewport */
}

.lm-gantt-header.lm-gantt-panning {
    cursor: grabbing;
}

.lm-gantt-months {
    position: relative;
    height: 22px;
}

.lm-gantt-month {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 8px;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 0.8em;
    color: var(--lm-gantt-text);
    border-left: 1px solid var(--lm-gantt-grid);
    white-space: nowrap;
    overflow: hidden;
}

/* the first segment starts at the chart edge — no divider needed there */
.lm-gantt-month:first-child {
    border-left: none;
}

.lm-gantt-days {
    position: relative;
    height: 18px;
}

.lm-gantt-day {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    color: var(--lm-gantt-muted);
    overflow: hidden;
}

.lm-gantt-day[data-weekend='true'] {
    color: var(--lm-gantt-grid);
}

/* ---- chart area */
.lm-gantt-rows {
    position: relative;
    overflow: hidden;
}

.lm-gantt-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lm-gantt-weekend {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(0, 0, 0, 0.03);
}

.lm-gantt-today {
    position: absolute;
    top: 0;
    height: 100%;
    width: 0;
    border-left: 2px dashed var(--lm-gantt-today);
    pointer-events: none;
    z-index: 2;
}

.lm-gantt-row {
    position: relative;
    box-sizing: border-box;
}

/* ---- the bars: the sexy part */
.lm-gantt-bar {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 62%;
    min-width: 6px;
    /* flat series colour, like the chart bars (no gloss gradient) */
    background: var(--lm-gantt-bar);
    border-radius: var(--lm-gantt-bar-radius, 2px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    transition: box-shadow 0.15s ease, filter 0.15s ease;
    z-index: 1;
}

.lm-gantt-bar:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28);
    filter: brightness(1.06);
    z-index: 3;
}

.lm-gantt-editable {
    cursor: grab;
}

/* edge affordances appear on hover of an editable bar */
.lm-gantt-editable:hover::before,
.lm-gantt-editable:hover::after {
    content: '';
    position: absolute;
    top: 20%;
    height: 60%;
    width: 3px;
    border-radius: var(--lm-radius, 6px);
    background: rgba(255, 255, 255, 0.75);
    cursor: ew-resize;
}

.lm-gantt-editable:hover::before {
    left: 3px;
}

.lm-gantt-editable:hover::after {
    right: 3px;
}

.lm-gantt-dragging {
    opacity: 0.85;
    cursor: grabbing;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    transition: none;
    z-index: 4;
}

.lm-gantt-progress {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    border-radius: inherit;
    pointer-events: none;
}

.lm-gantt-label {
    position: relative;
    padding: 0 10px;
    color: #fff;
    font-weight: bold;
    font-size: 0.7em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* ---- milestones: a diamond on the date */
.lm-gantt-milestone {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    background: var(--lm-gantt-milestone);
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: box-shadow 0.15s ease;
    z-index: 1;
}

.lm-gantt-milestone:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
}

/* ---- dependency links: finish→start connectors between task bars.
   The SVG fills the rows on x (in %) and stretches with the timeline; the
   non-scaling stroke keeps the lines a constant 1.5px at any width. The
   arrowheads are CSS triangles so they never skew under that x-stretch. */
.lm-gantt-link-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.lm-gantt-links {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: visible;
    pointer-events: none;
}

.lm-gantt-link {
    fill: none;
    stroke: var(--lm-gantt-link, var(--lm-icon-color, #666666));
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
}

.lm-gantt-link-arrow {
    position: absolute;
    width: 0;
    height: 0;
    transform: translate(-100%, -50%);
    border: 4px solid transparent;
    border-left-color: var(--lm-gantt-link, var(--lm-icon-color, #666666));
    pointer-events: none;
    z-index: 2;
}

/* editable: a wide invisible hit-line over each connector — click to delete
   the dependency (reddens on hover so it's clear what will go) */
.lm-gantt-link-hit {
    fill: none;
    stroke: transparent;
    stroke-width: 9;
    vector-effect: non-scaling-stroke;
    pointer-events: stroke;
    cursor: pointer;
}

.lm-gantt-link-hit:hover {
    stroke: var(--lm-color-danger, #dc2626);
    stroke-width: 2.5;
    opacity: 0.7;
}

/* the line drawn while dragging a new dependency from a link handle */
.lm-gantt-link-temp {
    fill: none;
    stroke: var(--lm-main-color, #2563eb);
    stroke-width: 1.6;
    stroke-dasharray: 4 3;
    vector-effect: non-scaling-stroke;
}

/* the connector handle: a dot near a bar's right edge, shown on hover;
   drag it onto another task to create a finish→start dependency */
/* sits LEFT of the right-edge resize zone (EDGE=8px) so the two controls
   don't overlap — the link line still originates from the bar's right edge */
.lm-gantt-link-handle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--lm-main-color, #2563eb);
    border: 2px solid var(--lm-background-color, #fff);
    box-sizing: border-box;
    cursor: crosshair;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 5;
}

.lm-gantt-bar:hover .lm-gantt-link-handle {
    opacity: 1;
    pointer-events: auto;
}

/* ---- accessibility: bars (and the header) are focusable — visible
   focus rings, plus the visually hidden keyboard hint the bars point
   their aria-describedby at (title tooltips alone are mouse-only) */
.lm-gantt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.lm-gantt-bar:focus-visible,
.lm-gantt-milestone:focus-visible,
.lm-gantt-header:focus-visible {
    outline: 2px solid var(--lm-main-color, #2563eb);
    outline-offset: 1px;
}

/* keyboard focus on a connector hit-line: same red as its hover */
.lm-gantt-link-hit:focus-visible {
    stroke: var(--lm-color-danger, #dc2626);
    stroke-width: 2.5;
    opacity: 0.7;
    outline: none;
}

/* During any drag: keep the grabbing cursor everywhere */
.lm-gantt[data-editable='true']:active {
    user-select: none;
}

/* Disabled: dimmed, inert — the guards in TS back this up for
   programmatic events; readonly needs no visual change (it just
   looks like a non-editable chart) */
.lm-gantt[data-disabled='true'] {
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
}

/* ---- table mode: the injected lane cell */
.lm-gantt-cell {
    padding: 0 !important;
}

.lm-gantt-lane {
    position: relative;
    height: 100%;
    min-height: 32px;
    width: 100%;
    overflow: hidden;
}