#ganttView { min-width: 0; }
#ganttView .gx-workspace { overflow: visible; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }
.gx-icon { display: inline-block; width: 16px; height: 16px; flex: 0 0 16px; background: currentColor; mask: var(--gx-icon) center / contain no-repeat; }
#ganttView .gx-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 12px 18px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
#ganttView .gx-navigation, #ganttView .gx-analysis { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
#ganttView .gx-analysis { margin-left: auto; }
#ganttView .gx-scope .gantt-scope-controls { margin: 0; }
#ganttView .gx-toolbar button, #ganttView .gx-toolbar select, #ganttView .gx-toolbar input[type="search"], #ganttView .gx-display > summary { min-height: 32px; height: 32px; padding: 5px 9px; font-size: 12px; border-radius: 5px; border: 1px solid var(--line); background-color: var(--control); color: var(--text); }
#ganttView .gx-toolbar select { padding-right: 32px; width: auto; max-width: 230px; }
#ganttView .gx-toolbar button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
#ganttView .gx-toolbar input[type="search"] { width: 150px; }
#ganttView .gx-toolbar label { font-size: 11px; }
.gx-display { position: relative; }
.gx-display > summary { cursor: pointer; }
.gx-display > div { position: absolute; z-index: 30; top: 36px; right: 0; width: 230px; display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: 0 8px 24px #0003; }
#ganttView .gx-display label { display: flex; align-items: center; gap: 10px; color: var(--text); }
#ganttView .gx-display input[type="checkbox"] { width: 16px; height: 16px; min-height: 16px; padding: 0; margin: 0; flex: 0 0 16px; accent-color: var(--accent); }
#ganttView .gx-display label:has(input[type="range"]) { display: grid; }
#ganttView .gx-display input[type="range"] { min-height: 24px; padding: 0; }
.gx-layout { display: flex; align-items: stretch; min-width: 0; position: relative; }
.gx-scroll { overflow: auto; min-width: 0; flex: 1 1 auto; max-height: 70vh; border: 1px solid var(--line); scrollbar-width: auto; scrollbar-color: var(--line-strong) var(--panel-soft); }
#ganttView .gantt-header, #ganttView .gantt-row { display: grid; grid-template-columns: var(--gx-label-width) var(--gx-timeline-width); width: calc(var(--gx-label-width) + var(--gx-timeline-width)); min-width: 100%; }
#ganttView .gantt-header { height: 54px; z-index: 12; top: 0; }
#ganttView .gantt-row { height: 48px; min-height: 48px; border: 0; }
#ganttView .gantt-label.gx-columns { display: grid; grid-template-columns: minmax(130px, 1fr) 88px 84px; gap: 8px; height: 48px; min-height: 48px; padding: 0 10px; border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); z-index: 8; background: var(--panel); }
#ganttView .gantt-header .gantt-label { height: 54px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--panel-soft); }
#ganttView .gx-compact-grid .gantt-label.gx-columns { grid-template-columns: minmax(0,1fr); }
#ganttView .gx-compact-grid .gx-columns > :nth-child(2), #ganttView .gx-compact-grid .gx-columns > :nth-child(3) { display: none; }
.gx-divider { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 14; touch-action: none; }
.gx-divider:hover, .gx-divider:focus-visible { background: var(--accent); }
.gx-track, .gx-capacity-periods, .gx-months, .gx-periods { display: grid; grid-template-columns: repeat(var(--gantt-column-count), var(--gantt-column-width)); position: relative; }
.gx-time-header { display: grid; grid-template-rows: 24px 30px; }
.gx-months span { padding: 5px 10px; font-size: 10px; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--panel-soft); overflow: hidden; white-space: nowrap; }
.gx-date { min-width: 0; padding: 7px 4px; text-align: center; display: grid; align-content: center; gap: 4px; border-right: 1px solid var(--line); background: var(--panel-soft); font-size: 11px; }
.gx-date small { color: var(--muted); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-date strong { overflow: hidden; white-space: nowrap; font-weight: 500; }
.gx-date.today-cell { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.gx-name { display: flex; align-items: center; padding-left: calc(var(--gx-level) * 12px); gap: 4px; min-width: 0; }
#ganttView .gx-item { padding: 0; display: grid; gap: 3px; border: 0; background: transparent; text-align: left; color: var(--text); min-width: 0; cursor: pointer; }
#ganttView .gx-item strong, #ganttView .gx-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#ganttView .gx-item small { color: var(--muted); font-size: 10px; font-weight: 400; }
.gx-owner, .gx-status { font-size: 11px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.gx-owner { color: var(--muted); }
#ganttView .gantt-tree-toggle, #ganttView .gantt-tree-spacer { width: 18px; height: 24px; flex: 0 0 18px; min-height: 24px; padding: 0; border: 0; background: transparent; border-radius: 3px; }
.gx-track { height: 48px; border-bottom: 1px solid var(--line); }
.gx-grid-cell { border-right: 1px solid color-mix(in srgb,var(--line) 55%,transparent); height: 48px; }
.gx-grid-cell.gx-weekend { background: color-mix(in srgb,var(--muted) 7%,transparent); }
#ganttView .gantt-canvas { position: relative; width: calc(var(--gx-label-width) + var(--gx-timeline-width)); min-width: 100%; }
#ganttView .gantt-bar { position: absolute; top: 13px; height: 22px; min-height: 22px; min-width: 0; padding: 0; border: 0; border-radius: 4px; background: var(--gx-color); color: white; display: flex; align-items: center; justify-content: center; z-index: 4; touch-action: none; }
#ganttView .gantt-bar .gx-progress { background: #fff4; inset: 0 auto 0 0; }
#ganttView .gantt-bar strong { font-size: 10px; }
#ganttView .gantt-bar .resize { width: 7px; }
#ganttView .gantt-bar.overdue { outline: 1px solid var(--red); outline-offset: 2px; }
#ganttView .gantt-bar.critical { background: var(--red); box-shadow: none; }
#ganttView .gantt-bar.gx-summary { background: transparent; color: var(--muted); border-top: 3px solid currentColor; border-left: 2px solid currentColor; border-right: 2px solid currentColor; height: 9px; min-height: 9px; top: 19px; border-radius: 0; overflow: visible; }
#ganttView .gx-summary > * { display: none; }
#ganttView .gantt-milestone { position: absolute; top: 17px; height: 14px; min-height: 14px; width: 14px !important; min-width: 14px; margin-left: 3px; padding: 0; border-radius: 2px; background: var(--amber); }
#ganttView .gantt-baseline { position: absolute; height: 3px; bottom: 5px; margin: 0; background: var(--muted); opacity: .65; z-index: 3; border-radius: 0; }
#ganttView .gantt-dependencies { position: absolute; left: var(--gx-label-width); top: 0; width: var(--gx-timeline-width); height: auto; z-index: 5; pointer-events: none; overflow: hidden; }
#ganttView .gantt-dependencies path { fill: none; stroke: var(--muted); stroke-width: 1; }
#ganttView .gantt-dependencies .gx-conflict, #ganttView .gantt-dependencies .gx-critical { stroke: var(--red); stroke-width: 1.5; }
.gx-today { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--accent); z-index: 6; pointer-events: none; }
#ganttView .gx-selected .gantt-label { background: color-mix(in srgb,var(--accent) 8%,var(--panel)); box-shadow: inset 3px 0 var(--accent); }
.gx-unscheduled { position: absolute; left: 15px; top: 16px; font-size: 11px; color: var(--muted); }
.gx-drawer { flex: 0 0 300px; width: 300px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-left: 0; background: var(--panel); max-height: 70vh; overflow: auto; }
.gx-drawer[hidden], .gx-pending[hidden], .gx-capacity[hidden], .gx-notice[hidden] { display: none; }
.gx-drawer header, .gx-capacity header { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
.gx-drawer h3 { font-size: 16px; line-height: 1.4; margin: 0; overflow-wrap: anywhere; }
.gx-drawer header button, .gx-capacity header button { padding: 5px; display: inline-flex; flex: 0 0 28px; background: none; color: var(--text); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.gx-drawer-meta { display: flex; gap: 12px; padding: 12px 0; color: var(--muted); font-size: 11px; }
.gx-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 15px 0; font-size: 11px; }
.gx-dates strong { display: block; color: var(--text); margin-top: 5px; }
.gx-date-form, .gx-dependency-form { display: grid; gap: 12px; padding: 15px 0; border-top: 1px solid var(--line); }
#ganttView .gx-drawer input, #ganttView .gx-drawer select { min-width: 0; width: 100%; padding: 6px; font-size: 12px; }
.gx-drawer label, .gx-dependency-editor summary { font-size: 12px; }
.gx-dependency-editor { margin: 12px 0; }
.gx-dependency-editor summary { cursor: pointer; }
.gx-warning { color: var(--amber); font-size: 11px; line-height: 1.6; }
.gx-pending { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; border-top: 2px solid var(--accent); background: var(--panel-soft); }
.gx-pending > div { display: grid; gap: 6px; flex: 1 1 260px; font-size: 12px; }
.gx-pending small { color: var(--muted); }
.gx-pending button { padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.gx-legend { display: flex; gap: 16px; flex-wrap: wrap; padding: 12px 0; color: var(--muted); font-size: 11px; }
.gx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gx-legend i { width: 14px; height: 7px; display: inline-block; }
.gx-key-task { background: var(--accent); border-radius: 2px; }
.gx-key-summary { border: 1px solid var(--muted); border-bottom: 0; }
.gx-key-milestone { width: 7px !important; background: var(--amber); transform: rotate(45deg); }
.gx-key-overdue { outline: 1px solid var(--red); }
.gx-notice { padding: 10px 0; font-size: 12px; color: var(--text); }
.gx-empty { padding: 24px; font-size: 12px; color: var(--muted); }
.gx-capacity { border-top: 2px solid var(--line-strong); width: calc(var(--gx-label-width) + var(--gx-timeline-width)); }
.gx-capacity header { position: sticky; left: 0; width: min(750px, 100%); padding: 14px 10px; align-items: center; font-size: 13px; }
.gx-capacity header span { color: var(--muted); font-size: 11px; }
.gx-capacity-row { display: grid; grid-template-columns: var(--gx-label-width) var(--gx-timeline-width); height: 56px; border-bottom: 1px solid var(--line); }
.gx-capacity-name { position: sticky; left: 0; background: var(--panel); z-index: 8; display: grid; align-content: center; padding: 8px 14px; gap: 4px; font-size: 12px; border-right: 1px solid var(--line-strong); }
.gx-capacity-name small { color: var(--muted); font-size: 10px; }
#ganttView .gx-capacity-periods button { min-width: 0; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: color-mix(in srgb,var(--accent) 6%,transparent); color: var(--text); padding: 5px 2px; font-size: 11px; display: grid; align-content: center; gap: 4px; cursor: pointer; overflow: hidden; }
#ganttView .gx-capacity-periods button.gx-over { background: color-mix(in srgb,var(--red) 14%,var(--panel)); color: var(--red); }
.gx-capacity-periods small { white-space: nowrap; font-size: 10px; }
.gx-capacity-detail { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 12px; }
.gx-capacity-detail small { color: var(--muted); }
.gx-capacity-detail button { background: none; border: 0; color: var(--text); text-align: left; font-size: 12px; cursor: pointer; }
#ganttView button:focus-visible, #ganttView summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media(max-width: 900px) { .gx-layout { flex-direction: column; } .gx-drawer { width: 100%; flex-basis: auto; border: 1px solid var(--line); max-height: 50vh; } #ganttView .gx-analysis { margin-left: 0; } }
@media(max-width: 650px) { body:has(#ganttView.active) { grid-template-columns: minmax(0,1fr); } body:has(#ganttView.active) .sidebar, body:has(#ganttView.active) .shortcut-rail { min-width: 0; position: static; width: 100%; height: auto; min-height: 0; } body:has(#ganttView.active) .app-shell { min-width: 0; padding: 10px; } .gx-scroll { max-height: 60vh; } }
@media(max-width: 650px) {
  body.sidebar-collapsed:has(#ganttView.active) .sidebar .compact-dock { display: flex; overflow-x: auto; gap: 6px; }
  body.sidebar-collapsed:has(#ganttView.active) .compact-dock-button { width: 40px; min-width: 40px; flex: 0 0 40px; }
  body:has(#ganttView.active) .topbar, body:has(#ganttView.active) .topbar-primary { flex-wrap: wrap; }
  body:has(#ganttView.active) .header-search, body:has(#ganttView.active) .header-search-main, body:has(#ganttView.active) .global-search { min-width: 0; max-width: 100%; }
  #ganttView .gx-toolbar .gantt-scope-controls { flex-wrap: wrap; }
}