/* =========================================================
   WBS Manager
   Project View (WBS Editor)

   CSS rules:
   docs/CSS_ARCHITECTURE.md
   ========================================================= */

/* =========================================================
   Project view / WBS / Gantt
   v0.4.1 consolidated
   ========================================================= */

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: #1f2937;
    color: #fff;
}

.topbar a {
    color: #fff;
    text-decoration: none;
    margin-left: 14px;
}

.brand {
    font-weight: 700;
}

.panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.panel-header h2 {
    margin: 0 0 4px;
    font-size: 1.2rem;
}

.actions {
    margin: 12px 0;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px,1fr));
    gap: 12px;
    margin: 18px 0;
}

.metric {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px;
    text-align: center;
}

.metric strong {
    font-size: 2rem;
}

.metric.danger { border-color: #fecaca; }
.metric.warn { border-color: #fde68a; }
.metric.ok { border-color: #bbf7d0; }

.project-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 18px 0;
}

.hint {
    color: #64748b;
    font-size: .9em;
}

/* WBS */

.wbs-panel {
    overflow-x: auto;
}

.tree-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.button.small {
    padding: 6px 10px;
    font-size: 12px;
}

.wbs-tree {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.wbs-tree .wbs-tree {
    margin-left: 22px;
    border-left: 1px dashed #cbd5e1;
    padding-left: 12px;
}

.wbs-node {
    margin: 0;
}

.wbs-node-row {
    display: grid;
    grid-template-columns: 22px 24px minmax(220px, 1fr) max-content max-content max-content;
    gap: 6px;
    align-items: center;
    min-height: 34px;
    padding: 5px 6px;
    border-radius: 8px;
    border-bottom: 1px solid #f1f5f9;
}

.wbs-node-row:hover,
.wbs-node.collapsed > .wbs-node-row {
    background: #f8fafc;
}

.wbs-node-row.has-children {
    font-weight: 600;
}

.wbs-toggle-button {
    width: 24px;
    height: 24px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #334155;
    padding: 0;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.wbs-toggle-button:hover {
    background: #f1f5f9;
}

.wbs-toggle-placeholder {
    display: inline-block;
    width: 24px;
    text-align: center;
    color: #94a3b8;
}

.wbs-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wbs-dates {
    color: #64748b;
    font-size: 0.82rem;
    white-space: nowrap;
    text-align: right;
}

/* Task table */

.task-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.88rem;
    table-layout: fixed;
}

.task-table th,
.task-table td {
    border-bottom: 1px solid #e5e7eb;
    padding: 8px 9px;
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.task-table th {
    background: #f8fafc;
    color: #334155;
    white-space: nowrap;
}

.task-table tr.parent-task {
    background: #fbfdff;
}

.task-table tr.parent-task td:nth-child(2) {
    font-weight: 600;
}

.path-cell {
    max-width: 360px;
    color: #64748b;
    font-size: 0.82rem;
    line-height: 1.35;
}

/* Task code */

.task-code-header {
    background: #f8fafc;
    border: 1px solid #e1e5ea;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 22px;
}

.task-code-label {
    font-weight: 700;
    margin-bottom: 6px;
    color: #334155;
}

.task-code-copy-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 6px;
}

.task-code-input {
    max-width: 320px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.task-code-inline {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.78rem;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    padding: 1px 5px;
    margin-right: 4px;
}

.readonly {
    background: #f1f5f9;
    color: #334155;
    cursor: default;
}

.readonly:focus {
    box-shadow: none;
    border-color: #cfd6df;
}

.copy-button {
    white-space: nowrap;
}

/* Status / health */

.badge.hold {
    background: #ede9fe;
    color: #5b21b6;
}

.badge.deadline_over,
.gantt-bar.deadline_over {
    background: #dc2626;
}

.badge.delayed,
.gantt-bar.delayed {
    background: #f97316;
}

.badge.on_track,
.gantt-bar.on_track,
.gantt-bar.ok {
    background: #2563eb;
}

.gantt-bar.done {
    background: #16a34a;
}

.gantt-bar.not_started {
    background: #94a3b8;
}

.gantt-bar.hold,
.gantt-bar.on_hold {
    background: #7c3aed;
}

.health.deadline_over {
    background: #fee2e2;
    color: #991b1b;
}

.health.delayed {
    background: #ffedd5;
    color: #9a3412;
}

.health.on_track {
    background: #dbeafe;
    color: #1d4ed8;
}

.health.hold {
    background: #ede9fe;
    color: #5b21b6;
}

/* Gantt layout */

.gantt-panel {
    overflow: hidden;
}

.gantt-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.gantt-scale-buttons {
    display: flex;
    gap: 6px;
}

.gantt-scale-button.active {
    background: #1f5fbf;
    color: #fff;
}


.gantt-fixed-layout {
    display: grid;
    grid-template-columns: 360px max-content;
    align-items: flex-start;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    max-height: 620px;
    overflow: auto;
    position: relative;
}


.gantt-label-column {
    position: sticky;
    left: 0;
    background: #fff;
    border-right: 1px solid #e5e7eb;
    z-index: 70;
    padding-bottom: 16px;
}


.gantt-timeline-scroll {
    overflow: visible;
    position: relative;
    padding-bottom: 16px;
}


.gantt-timeline-inner {
    position: relative;
    min-width: 1200px;
    transition: min-width 0.15s ease;
}

/* Gantt axis */

.gantt-axis-spacer {
    height: 28px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.gantt-axis-spacer.double {
    height: 52px;
    position: sticky;
    top: 0;
    z-index: 60;
    background: #fff;
}

.gantt-axis-month-row {
    display: block;
    height: 24px;
    position: sticky;
    top: 0;
    z-index: 55;
    background: #fff;
}

.gantt-axis-month {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    line-height: 24px;
    font-size: 11px;
    font-weight: 700;
    color: #374151;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #94a3b8;
    background: linear-gradient(#f8fafc, #eef2f7);
    letter-spacing: 0.02em;
}

.gantt-axis-month:first-child {
    border-left: 1px solid #cbd5e1;
}

.gantt-axis-row {
    display: flex;
    height: 28px;
    position: sticky;
    top: 24px;
    z-index: 54;
    background: #fff;
}

.gantt-axis-tick {
    flex: 0 0 16px;
    width: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #6b7280;
    border-right: 1px solid #edf2f7;
    white-space: nowrap;
    overflow: hidden;
    line-height: 1.05;
    font-size: 9px;
}

.gantt-axis-tick.saturday {
    background: #eff6ff;
    color: #1d4ed8;
}

.gantt-axis-tick.sunday {
    background: #fef2f2;
    color: #b91c1c;
}

.tick-weekday-label {
    display: block;
    order: 1;
    font-size: 9px;
    line-height: 11px;
}

.tick-day-label {
    display: block;
    order: 2;
    font-size: 10px;
    line-height: 12px;
    font-weight: 600;
}

.tick-week-label {
    display: none;
}

/* Gantt rows */

.gantt-label-row,
.gantt-timeline-row {
    height: 32px;
    min-height: 32px;
    border-bottom: 1px solid #f1f5f9;
}

.gantt-timeline-row {
    position: relative;
    z-index: 1;
    background: transparent;
}

.gantt-label-row {
    display: flex;
    align-items: center;

    /*
     * 階層インデントは文字ではなくCSSで管理する。
     * 左ペイン幅を変更しても親子関係の位置が崩れない。
     */
    padding-top: 0;
    padding-right: 8px;
    padding-bottom: 0;
    padding-left:
        calc(
            8px +
            (var(--gantt-level, 0) * 22px)
        );

    box-sizing: border-box;
    min-width: 0;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-label-row:nth-child(even),
.gantt-timeline-row:nth-child(even) {
    background: #fafafa;
}

.gantt-label-row:hover,
.gantt-timeline-row:hover {
    background: #f1f5f9;
}

.gantt-timeline-row {
    position: relative;
}

.gantt-weekday-grid {
    position: absolute;
    inset: 0;
    display: flex;
    z-index: 0;
    pointer-events: none;
}

.gantt-day-cell {
    flex: 0 0 16px;
    width: 16px;
    border-right: 1px solid #edf2f7;
}

.gantt-day-cell:first-child {
    border-left: 1px solid #edf2f7;
}

.gantt-day-cell.saturday {
    background: rgba(219, 234, 254, 0.5);
}

.gantt-day-cell.sunday {
    background: rgba(254, 226, 226, 0.65);
}

.gantt-day-cell.today {
    background: rgba(254, 249, 195, 0.85);
}

/* Gantt bars */

.gantt-bar {
    position: absolute;
    top: 7px;
    height: 18px;
    border-radius: 5px;
    color: #fff;
    font-size: 0.72rem;
    line-height: 18px;
    text-align: center;
    overflow: hidden;
    min-width: 4px;
    background: #2563eb;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
    transition: left 0.15s ease, width 0.15s ease;
}

.gantt-bar.gantt-milestone {
    width: 14px;
    height: 14px;
    min-width: 14px;
    padding: 0;
    border-radius: 2px;
    transform: rotate(45deg);
    transform-origin: center center;
}

.gantt-bar.gantt-milestone::after {
    content: "";
}

.gantt-bar.gantt-milestone.done,
.gantt-bar.gantt-milestone.on_track,
.gantt-bar.gantt-milestone.delayed,
.gantt-bar.gantt-milestone.deadline_over,
.gantt-bar.gantt-milestone.not_started,
.gantt-bar.gantt-milestone.hold,
.gantt-bar.gantt-milestone.on_hold {
    color: transparent;
}

.gantt-milestone.done {
    background:#43a047;
}

.gantt-milestone.not_started {
    background:#9e9e9e;
}

.gantt-milestone.on_track {
    background:#1976d2;
}

.gantt-milestone.delayed {
    background:#e53935;
}

.gantt-milestone.deadline_over {
    background:#b71c1c;
}

.gantt-milestone.hold {
    background:#fb8c00;
}

/* Today line */

.gantt-today-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ef4444;
    z-index: 20;
    pointer-events: none;
}

.gantt-today-marker {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    color: #dc2626;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

/* Dependency layer */

.gantt-dependency-layer {
    position: absolute;

    top: 0;
    left: 0;
    right: auto;
    bottom: auto;

    max-width: none;
    max-height: none;
    overflow: visible;

    z-index: 5;

    pointer-events: none;
}



.gantt-dependency-line {
    stroke-linejoin: round;
    stroke-linecap: round;
    opacity: 0.85;
}

.gantt-dependency-line.dependency-fs {
    stroke: #1976d2;
}

.gantt-dependency-line.dependency-ss {
    stroke: #2e7d32;
}

.gantt-dependency-line.dependency-ff {
    stroke: #6a1b9a;
}

.gantt-dependency-line.dependency-sf {
    stroke: #ef6c00;
}

.gantt-dependency-hitarea {
    pointer-events: stroke;
    cursor: help;
}

/* Scale-specific axis */

.gantt-axis-row.scale-day {
    height: 30px;
}

.gantt-axis-row.scale-day .gantt-axis-tick {
    line-height: 1.05;
}

.gantt-axis-row.scale-day .tick-weekday-label {
    display: block;
}

.gantt-axis-row.scale-day .tick-day-label {
    display: block;
}

.gantt-axis-row.scale-day .tick-week-label {
    display: none;
}

.gantt-axis-row.scale-week {
    height: 28px;
}

.gantt-axis-row.scale-week .gantt-axis-tick {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.02em;
    overflow: visible;
}

.gantt-axis-row.scale-week .tick-weekday-label,
.gantt-axis-row.scale-week .tick-day-label {
    display: none;
}

.gantt-axis-row.scale-week .tick-week-label {
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    position: relative;
    left: 2px;
    z-index: 2;
}

.gantt-axis-row.scale-month .tick-week-label,
.gantt-axis-row.scale-month .tick-weekday-label,
.gantt-axis-row.scale-month .tick-day-label {
    display: none;
}

/* Calendar coloring
   Priority:
   1. work                 -> yellow, even on weekends
   2. weekend              -> existing saturday/sunday colors
   3. national non-weekend -> same as sunday
   4. company non-weekend  -> orange
*/

.gantt-axis-tick.calendar-work,
.gantt-axis-tick.today.calendar-work,
.gantt-axis-tick.saturday.calendar-work,
.gantt-axis-tick.sunday.calendar-work,
.gantt-day-cell.calendar-work,
.gantt-day-cell.today.calendar-work,
.gantt-day-cell.saturday.calendar-work,
.gantt-day-cell.sunday.calendar-work {
    background: #fff7b2 !important;
    color: #854d0e;
}

.gantt-axis-tick.calendar-national,
.gantt-day-cell.calendar-national {
    background: #fef2f2 !important;
}

.gantt-axis-tick.calendar-national {
    color: #b91c1c;
}

.gantt-axis-tick.calendar-company,
.gantt-day-cell.calendar-company,
.gantt-axis-tick.calendar-holiday,
.gantt-day-cell.calendar-holiday {
    background: #ffdca8 !important;
}

.gantt-axis-tick.calendar-company,
.gantt-axis-tick.calendar-holiday {
    color: #9a3412;
}

/* Today background disabled: red vertical line is enough */
.gantt-axis-tick.today,
.gantt-axis-tick.today.saturday,
.gantt-axis-tick.today.sunday,
.gantt-day-cell.today {
    background: inherit !important;
    box-shadow: none !important;
}

/* Remaining working days */

.remaining-days {
    display: inline-block;
    min-width: 48px;
    text-align: center;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
}

.remaining-days.remaining-ok {
    background: #dcfce7;
    color: #166534;
}

.remaining-days.remaining-warn {
    background: #fef3c7;
    color: #92400e;
}

.remaining-days.remaining-danger {
    background: #fee2e2;
    color: #991b1b;
}

/* =========================================================
   Gantt legend
   ========================================================= */

.gantt-legend {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    font-size: 12px;
    color: #475569;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.legend-box {
    width: 14px;
    height: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 3px;
    display: inline-block;
}

.legend-company {
    background: #ffdca8;
}

.legend-national {
    background: #fef2f2;
}

.legend-work {
    background: #fff7b2;
}

.legend-line {
    width: 0;
    height: 16px;
    border-left: 2px solid #ef4444;
    display: inline-block;
}

/* =========================================================
   v0.4.3 Task table column customization
   ========================================================= */

.task-table-header {
    position: relative;
}

.task-column-menu {
    position: relative;
    flex-shrink: 0;
}

.task-column-menu-content {
    display: none;
    position: absolute;
    top: 42px;
    right: 0;
    z-index: 50;
    min-width: 220px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
}

.task-column-menu-content.open {
    display: block;
}

.task-column-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 6px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
}

.task-column-option:hover {
    background: #f3f6fa;
}

.task-column-option input {
    width: auto;
}

.task-column-menu-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.task-column-menu-actions .button {
    padding: 6px 10px;
    font-size: 12px;
}

.task-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: var(--task-table-height, 1800px);
}

.task-table-resize-handle {
    margin: 6px 0;
}

body.task-table-resizing {
    cursor: ns-resize !important;
    user-select: none;
}

/* =========================================================
   v0.4.3 Task table sorting
   ========================================================= */

.task-table th[data-sort-key] {
    cursor: pointer;
    user-select: none;
}

.task-table th[data-sort-key]::after {
    content: " ⇅";
    color: #9ca3af;
    font-size: 11px;
}

.task-table th.sorted-asc::after {
    content: " ▲";
    color: #1f5fbf;
}

.task-table th.sorted-desc::after {
    content: " ▼";
    color: #1f5fbf;
}

/* =========================================================
   v0.4.3 Task table column resizing
   ========================================================= */

.task-table th[data-column] {
    position: relative;
}

.column-resize-handle {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    z-index: 50;
    background: transparent;
}

.column-resize-handle::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 5px;
    width: 2px;
    background: #94a3b8;
    border-radius: 2px;
}

.column-resize-handle:hover::before {
    background: #1f5fbf;
}

body.column-resizing {
    cursor: col-resize;
    user-select: none;
}

/* =========================================================
   v0.4.3 WBS drag and drop
   ========================================================= */

.wbs-drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    min-width: 22px;
    height: 24px;
    color: #94a3b8;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-drag: element;
}

.wbs-drag-handle:active,
.wbs-dragging .wbs-drag-handle {
    cursor: grabbing;
    color: #1f5fbf;
    background: #dbeafe;
    border-radius: 4px;
}

.wbs-drag-handle:hover {
    color: #1f5fbf;
}

.wbs-dragging {
    opacity: 0.55;
}

.wbs-node-row {
    position: relative;
}

.wbs-drop-before > .wbs-node-row::before,
.wbs-drop-after > .wbs-node-row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #1f5fbf;
    pointer-events: none;
    z-index: 2;
}

.wbs-drop-before > .wbs-node-row::before {
    top: -1px;
}

.wbs-drop-after > .wbs-node-row::after {
    bottom: -1px;
}

.wbs-drop-child > .wbs-node-row {
    outline: 2px solid #1f5fbf;
    outline-offset: -2px;
    background: #eff6ff;
}

.wbs-tree.wbs-saving {
    opacity: 0.7;
}

.wbs-tree.wbs-saved > .wbs-node > .wbs-node-row {
    animation: wbsSavedFlash 0.7s ease-out;
}

@keyframes wbsSavedFlash {
    0% {
        background: #dcfce7;
    }
    100% {
        background: transparent;
    }
}

/* Responsive */


@media(max-width:900px) {
    .gantt-panel {
        min-width: 0;
    }

    .gantt-fixed-layout {
        grid-template-columns: 280px minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .container {
        padding: 16px;
    }

    .page-header {
        flex-direction: column;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .span-2 {
        grid-column: span 1;
    }

    .dependency-list {
        grid-template-columns: 1fr;
    }

    .gantt-row {
        grid-template-columns: 1fr;
    }
}

/* Critical path */

.gantt-bar.gantt-critical {
    background: #dc2626;
}

.gantt-bar.gantt-critical.gantt-milestone {
    background: #dc2626;
}


.gantt-dependency-line.dependency-critical {
    stroke: #dc2626 !important;
    stroke-width: 3px;
}

.gantt-dependency-hitarea.dependency-critical {
    stroke-width: 24px;
}

/* Critical dependency line */

.gantt-dependency-line.dependency-critical {
    stroke: #dc2626 !important;
    stroke-width: 3px;
}

.gantt-dependency-hitarea.dependency-critical {
    stroke-width: 24px;
}

/* ============================================================
   v0.4.9 Gantt drag edit
   ============================================================ */

.gantt-bar {
    cursor: grab;
}

.gantt-bar.is-dragging {
    cursor: grabbing;
    opacity: 0.75;
    z-index: 60;
}

body.gantt-dragging {
    user-select: none;
}

.gantt-dependency-layer {
    z-index: 20;
}

.gantt-bar.is-dragging::after {
    content: attr(data-drag-date);
    position: absolute;
    left: 50%;
    top: -1.8em;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: #222;
    color: #fff;
    pointer-events: none;
}


.gantt-dependency-hitarea,
.gantt-dependency-line {
    pointer-events: stroke;
}

/* ============================================================
   v0.4.9 Gantt bar inner structure
   ============================================================ */

.gantt-bar {
    overflow: visible;
    -webkit-user-drag: none;
    user-select: none;
}

.gantt-bar-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

.gantt-resize-handle {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 8px;
    z-index: 70;
    cursor: ew-resize !important;
    -webkit-user-drag: none;
    user-select: none;
}

.gantt-resize-handle-right {
    right: -4px;
    cursor: ew-resize !important;
}

.gantt-resize-handle-right:hover {
    background: rgba(0, 0, 0, 0.18);
    cursor: ew-resize !important;
}

.gantt-resize-handle,
.gantt-resize-handle-right,
.gantt-bar .gantt-resize-handle-right {
    cursor: ew-resize !important;
}

/* ============================================================
   v0.4.9 Gantt custom tooltip
   ============================================================ */

.gantt-tooltip {
    position: fixed;
    display: none;
    z-index: 9999;
    max-width: 360px;
    white-space: pre-line;
    font-size: 12px;
    line-height: 1.5;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(32, 32, 32, 0.94);
    color: #fff;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.gantt-resize-handle-left {
    left: -4px;
    cursor: ew-resize !important;
}

.gantt-resize-handle-left:hover {
    background: rgba(0, 0, 0, 0.18);
    cursor: ew-resize !important;
}

.gantt-resize-handle,
.gantt-resize-handle-left,
.gantt-resize-handle-right {
    -webkit-user-drag: none;
    user-select: none;
}

/* ============================================================
   v0.5.0 UI polish
   ============================================================ */

.topbar {
    gap: 20px;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 22px;
    min-width: 0;
}

.topbar-nav,
.topbar-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.topbar-nav a,
.topbar-user a {
    margin-left: 0;
    color: #e5e7eb;
}

.topbar-nav a:hover,
.topbar-user a:hover {
    color: #fff;
}

.topbar-logout-form {
    margin: 0;
}

.topbar-logout-button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #e5e7eb;
    font: inherit;
    cursor: pointer;
}

.topbar-logout-button:hover,
.topbar-logout-button:focus-visible {
    color: #fff;
    text-decoration: underline;
}

.topbar-user span {
    color: #f9fafb;
    font-weight: 600;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 18px;
}

.admin-card {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.admin-card h2 {
    margin: 0 0 8px;
}

.admin-note {
    margin: 10px 0 0;
    padding-left: 20px;
    color: #475569;
}

.admin-note code {
    background: #f1f5f9;
    padding: 2px 5px;
    border-radius: 4px;
}

.project-table {
    min-width: 1080px;
}

.project-table th,
.project-table td {
    white-space: normal;
}

.project-code-cell {
    width: 130px;
}

.project-name-cell {
    width: 260px;
}

.project-status-cell {
    width: 110px;
}

.project-count-cell {
    width: 90px;
    text-align: center;
}

.project-description-cell {
    min-width: 280px;
}

.project-actions-cell {
    width: 250px;
    white-space: nowrap !important;
}

.project-description-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.45;
    color: #475569;
}

.compact-actions {
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.small-note {
    font-size: 12px;
    white-space: nowrap;
}

.badge.project-status-planning {
    background: #e0f2fe;
    color: #075985;
}

.badge.project-status-active {
    background: #dcfce7;
    color: #166534;
}

.badge.project-status-hold {
    background: #ede9fe;
    color: #5b21b6;
}

.badge.project-status-done {
    background: #f3f4f6;
    color: #374151;
}

.gantt-panel {
    margin-left: -8px;
    margin-right: -8px;
}

@media (min-width: 1500px) {
    .gantt-fixed-layout {
        max-height: 720px;
    }

    .gantt-label-column {
        min-width: 380px;
    }
}

@media (max-width: 900px) {
    .container {
        padding: 16px;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .topbar-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .topbar-nav,
    .topbar-user {
        flex-wrap: wrap;
    }
}


/* ============================================================
   Application footer
   ============================================================ */

.app-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-top: 24px;
    padding: 10px 20px;

    border-top: 1px solid #d1d5db;

    font-size: 12px;
    color: #64748b;

    background: #fafafa;
}

.app-footer-left,
.app-footer-right {
    white-space: nowrap;
}

@media (max-width: 700px) {
    .app-footer {
        flex-direction: column;
        gap: 4px;
    }
}

@media print {
    .app-footer {
        display: none;
    }
}



/* ============================================================
   v0.5.1 Schedule edit mode
   ============================================================ */

.gantt-edit-toggle {
    min-width: 132px;
    font-weight: 700;
}

.gantt-edit-toggle.is-enabled {
    background: #1f5fbf;
    color: #fff;
}

.gantt-panel.gantt-edit-disabled .gantt-bar {
    cursor: default;
}

.gantt-panel.gantt-edit-disabled .gantt-resize-handle {
    display: none;
}

.gantt-panel.gantt-edit-disabled .gantt-bar::after {
    display: none;
}

/* ============================================================
   Task schedule lock
   ============================================================ */

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.checkbox-inline input[type="checkbox"] {
    width: 18px;
    height: 18px;
}



/* ============================================================
   v0.5.1 Schedule locked task
   ============================================================ */

.gantt-bar.gantt-schedule-locked {
    border: 2px solid #111827;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.85);
}

.gantt-bar.gantt-schedule-locked::before {
    content: "🔒";
    position: absolute;
    right: -18px;
    top: -3px;
    font-size: 12px;
    line-height: 1;
}

.gantt-bar.gantt-schedule-locked .gantt-resize-handle {
    display: none;
}

/* ============================================================
   v0.5.1 Schedule lock notice
   ============================================================ */

.schedule-lock-notice {
    display: none;
    margin-top: 8px;
    padding: 9px 11px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    line-height: 1.5;
}

.gantt-edit-notice {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    z-index: 10000;

    max-width: min(720px, calc(100vw - 32px));
    padding: 10px 14px;

    border-radius: 999px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, bottom 0.15s ease;
}

.gantt-edit-notice.show {
    bottom: 40px;
    opacity: 1;
}

/* ============================================================
   v0.5.1 Export menu
   ============================================================ */

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% - 1px);
    z-index: 3000;
    min-width: 240px;
    padding: 8px;
    background: #fff;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu {
    display: block;
}

.dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu,
.dropdown-menu:hover {
    display: block;
}

.dropdown-menu a,
.dropdown-disabled {
    display: block;
    padding: 8px 10px;
    border-radius: 7px;
    font-size: 13px;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: #f3f6fa;
    text-decoration: none;
}

.dropdown-disabled {
    color: #94a3b8;
    cursor: not-allowed;
}

/* Confirm dialog */
.confirm-dialog-backdrop {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    background: rgba(15, 23, 42, 0.45);
    padding: 1.5rem;
}

.confirm-dialog-backdrop.is-open {
    display: flex;
}

.confirm-dialog-panel {
    width: min(560px, 100%);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
    overflow: hidden;
}

.confirm-dialog-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
}

.confirm-dialog-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.confirm-dialog-body {
    padding: 1.25rem;
}

.confirm-dialog-body p {
    margin: 0 0 0.9rem;
}

.confirm-dialog-target {
    padding: 0.9rem 1rem;
    margin: 0.75rem 0 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
}

.confirm-dialog-code {
    font-weight: 700;
    font-size: 1rem;
}

.confirm-dialog-name {
    margin-top: 0.25rem;
    font-size: 1.05rem;
}

.confirm-dialog-warning {
    color: #b91c1c;
    font-weight: 600;
}

.confirm-dialog-expected {
    margin: 0.25rem 0 1rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 1rem;
    font-weight: 700;
    white-space: pre-wrap;
}

.confirm-dialog-input-wrap {
    display: block;
}

.confirm-dialog-input-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 600;
}

.confirm-dialog-input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.65rem 0.75rem;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 1rem;
}

.confirm-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.button.danger,
.button.primary.danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.button.danger:hover,
.button.primary.danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.confirm-dialog-copy-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 1rem;
}

.confirm-dialog-copy-row .confirm-dialog-expected {
    flex: 1;
    display: block;
    margin: 0;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f1f5f9;
    font-size: 1rem;
    font-weight: 700;
    white-space: pre-wrap;
}

.confirm-dialog-actions .confirm-dialog-ok {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

.confirm-dialog-actions .confirm-dialog-ok:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
}

/* WBS tree: keep panel usable with large task trees */
.wbs-panel > .wbs-tree {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 8px;
}

.wbs-panel {
    overflow-x: auto;
}

.wbs-panel .wbs-tree {
    min-width: 760px;
}

.wbs-panel .panel-header {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
}

/* WBS tree resize handle */
.wbs-tree-resize-handle {
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    user-select: none;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 6px;
    border-radius: 6px;
}

.wbs-tree-resize-handle span {
    width: 72px;
    height: 4px;
    border-radius: 999px;
    background: #cbd5e1;
}

.wbs-tree-resizing,
.wbs-tree-resizing * {
    cursor: ns-resize !important;
    user-select: none !important;
}

/* Display options */
.task-display-options {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-display-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #374151;
    white-space: nowrap;
}

body.hide-task-code .task-code-inline {
    display: none !important;
}

body.hide-task-code .task-code-input {
    display: none !important;
}

/* Compact project display option */
.project-display-option {
    margin-left: 4px;
}

.task-display-option {
    gap: 3px;
}

.task-display-option input {
    margin: 0;
}

/* Compact dashboard metrics */
.dashboard {
    gap: 8px;
    margin: 8px 0 10px;
}

.metric {
    padding: 8px 12px;
    min-height: 0;
}

.metric span {
    font-size: 0.78rem;
    line-height: 1.1;
}

.metric strong {
    font-size: 1.35rem;
    line-height: 1.1;
}

/* Project header display option alignment */
.project-display-option {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 0 4px;
    white-space: nowrap;
}

.project-display-option input {
    margin: 0;
}

/* Topbar display option */
.topbar-task-code-option {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 14px;
    font-size: 0.85rem;
    color: #e5e7eb;
    white-space: nowrap;
}

.topbar-task-code-option input {
    margin: 0;
}

/* Topbar display menu */
.topbar-display-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 14px;
}

.topbar-display-button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #e5e7eb;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
}

.topbar-display-button:hover {
    background: rgba(255, 255, 255, 0.12);
}

.topbar-display-content {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 190px;
    padding: 8px;
    background: #fff;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    z-index: 200;
}

.topbar-display-content.open {
    display: block;
}

.topbar-display-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #6b7280;
    padding: 4px 6px 8px;
}

.topbar-display-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.topbar-display-option input {
    margin: 0;
}

.topbar-display-separator {
    height: 1px;
    background: #e5e7eb;
    margin: 6px 0;
}

.topbar-display-action {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 7px 6px;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 0.9rem;
}

.topbar-display-option:hover,
.topbar-display-action:hover {
    background: #f3f4f6;
}

/* Fix display menu checkbox alignment */
.topbar-display-content .topbar-display-option {
    display: grid;
    grid-template-columns: 16px auto;
    column-gap: 6px;
    align-items: center;
    justify-content: start;
}

.topbar-display-content .topbar-display-option input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    justify-self: start;
}

.topbar-display-content .topbar-display-option span {
    display: inline;
    width: auto;
    min-width: 0;
    white-space: nowrap;
}

/* =========================================================
   Project page gantt scroll layout
   ========================================================= */

/*
 * 3ペインのプロジェクト画面では、ガントパネルを縦Flexにし、
 * ヘッダーを除いた残りの高さをガント本体へ割り当てる。
 *
 * 独立ガントビューには専用CSSがあるため、
 * .project-stack 配下に限定して適用する。
 */
.project-stack .gantt-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.project-stack .gantt-panel > .panel-header {
    flex: 0 0 auto;
}

.project-stack .gantt-panel > .gantt-fixed-layout {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}


/* =========================================================
   Gantt panel resize handle
   ========================================================= */

.gantt-panel-resize-handle {
    margin: 6px 0;
}

body.gantt-panel-resizing {
    cursor: ns-resize !important;
    user-select: none;
}

.gantt-toggle-button{
    width:18px;
    height:18px;
    padding:0;
    margin-right:2px;

    border:none;
    background:transparent;

    cursor:pointer;
    color:#555;
    font-size:13px;
}

.gantt-toggle-button:hover{
    color:#0b63c9;
}

/* =========================================================
   WBS tree column header / column resizing
   ========================================================= */

.wbs-panel {
    overflow-x: auto;
}

.wbs-tree-header,
.wbs-node-row {
    grid-template-columns:
        22px
        24px
        minmax(140px, var(--wbs-tree-title-width, 260px))
        var(--wbs-tree-status-width, 86px)
        var(--wbs-tree-health-width, 86px)
        var(--wbs-tree-dates-width, 150px);
}

.wbs-tree-header {
    display: grid;
    gap: 6px;
    align-items: center;
    min-width: max-content;
    padding: 5px 6px;
    border-bottom: 1px solid #dbe3ee;
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
    position: sticky;
    top: 0;
    z-index: 5;
}

.wbs-node-row {
    min-width: max-content;
}

.wbs-tree-header-cell {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 12px;
}

.wbs-column-resize-handle {
    position: absolute;
    top: 0;
    right: -6px;
    width: 12px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
}

.wbs-column-resize-handle::before {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    left: 5px;
    width: 2px;
    background: #94a3b8;
    border-radius: 2px;
}

.wbs-column-resize-handle:hover::before {
    background: #1f5fbf;
}

body.wbs-column-resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* =========================================================
   WBS tree badge layout
   ========================================================= */

.wbs-node-row > .badge,
.wbs-node-row > .health {
    justify-self: start;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    text-align: center;
}

.wbs-node-row > .wbs-dates {
    justify-self: start;
}

/* =========================================================
   WBS tree table-like layout override
   ========================================================= */

.wbs-tree-header,
.wbs-node-row {
    display: grid;
    grid-template-columns:
        22px
        24px
        var(--wbs-tree-title-width, 360px)
        var(--wbs-tree-status-width, 120px)
        var(--wbs-tree-health-width, 120px)
        var(--wbs-tree-dates-width, 180px);
    gap: 6px;
    align-items: center;
}

.wbs-tree-header {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
}

.wbs-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wbs-node-row > .badge,
.wbs-node-row > .health,
.wbs-node-row > .wbs-dates {
    align-self: center;
}

/* =========================================================
   WBS tree badge layout
   ========================================================= */

.wbs-node-row > .badge,
.wbs-node-row > .health {
    justify-self: start;
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    text-align: center;
}

.wbs-node-row > .wbs-dates {
    justify-self: start;
}

/* =========================================================
   WBS tree table-like layout override
   ========================================================= */

.wbs-tree-header,
.wbs-node-row {
    display: grid;
    grid-template-columns:
        22px
        24px
        var(--wbs-tree-title-width, 360px)
        var(--wbs-tree-status-width, 120px)
        var(--wbs-tree-health-width, 120px)
        var(--wbs-tree-dates-width, 180px);
    gap: 6px;
    align-items: center;
}

.wbs-tree-header {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
}

.wbs-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.wbs-node-row > .badge,
.wbs-node-row > .health,
.wbs-node-row > .wbs-dates {
    align-self: center;
}

/* =========================================================
   WBS tree table layout final override
   ========================================================= */

.wbs-panel {
    overflow-x: auto;
}

.wbs-panel > .wbs-tree {
    min-width: max-content;
}

/* Keep DOM tree structure, but visually flatten rows */
.wbs-panel .wbs-tree,
.wbs-panel .wbs-children,
.wbs-panel .wbs-node {
    display: contents;
}

.wbs-tree-header,
.wbs-node-row {
    display: grid;
    grid-template-columns:
        520px
        100px
        100px
        160px;
    gap: 6px;
    align-items: center;
    min-width: max-content;
}

.wbs-tree-header {
    background: #f8fafc !important;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-bottom: 1px solid #cbd5e1;
    padding: 5px 6px;
    font-weight: 700;
}

.wbs-node-row {
    padding: 5px 6px;
    border-bottom: 1px solid #f1f5f9;
}

/* Indent only task title */
.wbs-title {
    padding-left: calc(var(--wbs-level, 0) * 24px);
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Other columns stay aligned */
.wbs-node-row > .badge,
.wbs-node-row > .health,
.wbs-node-row > .wbs-dates {
    justify-self: start;
    align-self: center;
}

/* Badge width fixed */
.wbs-node-row > .badge,
.wbs-node-row > .health {
    width: 92px;
    min-width: 92px;
    max-width: 92px;
    text-align: center;
}

.wbs-dates {
    white-space: nowrap;
    text-align: left;
}

/* WBS table row polish */
.wbs-node-row:hover {
    background: #f1f7ff;
}

.wbs-tree-header {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Fix: hidden WBS children must really disappear even when using display: contents */
.wbs-panel .wbs-children[hidden] {
    display: none !important;
}

/* WBS task cell: drag handle, toggle and title move together */
.wbs-task-cell {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    padding-left: calc(var(--wbs-level, 0) * 24px);
}

.wbs-task-cell .wbs-title {
    padding-left: 0 !important;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* =========================================================
   Gantt label column resize
   ========================================================= */

.gantt-fixed-layout {
    grid-template-columns:
        var(--gantt-label-width, 360px)
        max-content;
}

.gantt-label-resize-handle {
    /*
     * ハンドルは左ラベル列の右端に所属させる。
     * 左列の幅が変わっても常に境界中央へ追従する。
     */
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    width: 10px;
    z-index: 75;
    cursor: col-resize;
    background: #eceff3;
    border-left: 1px solid #d6dbe2;
    border-right: 1px solid #d6dbe2;
}

.gantt-label-resize-handle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 36px;
    transform: translate(-50%, -50%);
    border-left: 1px solid #94a3b8;
    border-right: 1px solid #94a3b8;
}

.gantt-label-resize-handle:hover {
    background: #d7e4f5;
}

body.gantt-label-resizing {
    cursor: col-resize !important;
    user-select: none;
}

/* Fix: root WBS tree must keep box height for resize handle */
.wbs-panel > .wbs-tree {
    display: block !important;
    overflow-y: auto;
}


/* ==================================================
   Gantt dedicated view
   ================================================== */

body.gantt-view-page {
    height: 100vh;
    overflow: hidden;
}

body.gantt-view-page .app-footer {
    display: none;
}

.gantt-view-container {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    height: calc(100vh - 52px);
    padding: 12px 16px;
    overflow: hidden;
}

.gantt-view {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.gantt-view-header {
    flex: 0 0 auto;
    margin-bottom: 10px;
}

.gantt-view-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.gantt-view-content > .gantt-panel {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
}

.gantt-view-content .gantt-panel > .panel-header {
    flex: 0 0 auto;
}

.gantt-view-content .gantt-fixed-layout {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px) !important;
    overflow: auto;
}

/*
 * 縦横スクロールは gantt-fixed-layout が一括管理する。
 * 左ラベル列とタイムライン側には独立したスクロールを持たせない。
 */
.gantt-view-content .gantt-label-column,
.gantt-view-content .gantt-timeline-scroll {
    height: auto;
    max-height: none;
}

.gantt-view-content .gantt-label-column {
    overflow: visible;
}

.gantt-view-content .gantt-timeline-scroll {
    overflow: visible;
}

@media (max-width: 800px) {
    .gantt-view-container {
        padding: 8px;
    }

    .gantt-view-header {
        align-items: flex-start;
    }

    .gantt-view-header .actions {
        flex-wrap: wrap;
    }
}


/* ==================================================
   Dedicated gantt print controls
   ================================================== */

.gantt-print-size-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #475569;
    font-size: 0.9rem;
}

.gantt-print-size-control select {
    min-height: 36px;
    padding: 6px 28px 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    color: #1f2937;
}


/* ==================================================
   Dedicated gantt print layout
   ================================================== */

@media print {
    html,
    body.gantt-view-page {
        width: auto;
        height: auto;
        overflow: visible !important;
        background: #fff;
    }

    body.gantt-view-page .topbar,
    body.gantt-view-page .app-footer,
    body.gantt-view-page .gantt-view-header .actions,
    body.gantt-view-page .gantt-label-resize-handle {
        display: none !important;
    }

    body.gantt-view-page .gantt-view-container {
        width: auto;
        height: auto;
        padding: 0;
        overflow: visible;
    }

    body.gantt-view-page .gantt-view {
        display: block;
        width: auto;
        height: auto;
    }

    body.gantt-view-page .gantt-view-header {
        display: block;
        margin: 0 0 5mm;
    }

    body.gantt-view-page .gantt-view-header h1 {
        margin: 0 0 2mm;
        font-size: 16pt;
    }

    body.gantt-view-page .gantt-view-content {
        display: block;
        width: auto;
        height: auto;
        overflow: visible;
    }

    body.gantt-view-page .gantt-panel {
        display: block;
        width: auto;
        height: auto !important;
        max-height: none !important;
        margin: 0;
        padding: 0;
        overflow: visible !important;
        border: 0;
        box-shadow: none;
    }

    body.gantt-view-page .gantt-panel > .panel-header {
        display: none;
    }

    body.gantt-view-page .gantt-fixed-layout {
        display: grid;
        width: max-content;
        min-width: 100%;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: 1px solid #94a3b8;
        border-radius: 0;
    }

    body.gantt-view-page .gantt-label-column {
        position: static;
        height: auto !important;
        overflow: visible !important;
    }

    body.gantt-view-page .gantt-timeline-scroll {
        height: auto !important;
        overflow: visible !important;
    }

    body.gantt-view-page .gantt-timeline-inner {
        height: auto !important;
    }

    body.gantt-view-page .gantt-axis-spacer.double,
    body.gantt-view-page .gantt-axis-month-row,
    body.gantt-view-page .gantt-axis-row {
        position: static;
    }

    body.gantt-view-page .gantt-label-row,
    body.gantt-view-page .gantt-timeline-row {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    body.gantt-view-page .gantt-bar {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    body.gantt-view-page .gantt-dependency-layer {
        overflow: visible;
    }
}



/* =========================================================
   Gantt label hierarchy layout
   ========================================================= */

.gantt-label-row .gantt-toggle-button {
    flex: 0 0 18px;
}

.gantt-label-row .task-code-inline {
    flex: 0 0 auto;
}

.gantt-label-row .muted {
    flex: 0 0 auto;
}


.gantt-axis-month-text {
    display: inline-block;
}


/* =========================================================
   Gantt quarter scale
   ========================================================= */

.gantt-axis-row.scale-quarter {
    height: 28px;
}

.gantt-axis-row.scale-quarter .tick-week-label,
.gantt-axis-row.scale-quarter .tick-weekday-label,
.gantt-axis-row.scale-quarter .tick-day-label {
    display: none;
}

.gantt-axis-row.scale-quarter .gantt-axis-tick {
    overflow: hidden;
}

.gantt-axis-month-row:has(+ .gantt-axis-row.scale-quarter)
.gantt-axis-month {
    font-size: 11px;
    font-weight: 700;
}

/* ==================================================
   Task comments
   ================================================== */

.task-comment-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.task-comment {
    padding: 14px 16px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #f8f9fa;
}

.task-comment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.task-comment-body {
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.task-comment-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.task-comment-delete-form .button {
    padding: 4px 10px;
    font-size: 0.85rem;
}

.task-comment-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dfe3e8;
}

.task-comment-form textarea {
    width: 100%;
    resize: vertical;
}

@media (max-width: 640px) {
    .task-comment-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
}

/* ==================================================
   Task links
   ================================================== */

.task-link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}

.task-link-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 14px;
    border: 1px solid #dfe3e8;
    border-radius: 8px;
    background: #f8f9fa;
}

.task-link-main {
    min-width: 0;
    flex: 1;
}

.task-link-title {
    font-weight: 600;
}

.task-link-url {
    margin-top: 4px;
    font-size: 0.85rem;
    overflow-wrap: anywhere;
}

.task-link-form {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dfe3e8;
}

@media (max-width: 640px) {
    .task-link-item {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ==================================================
   Task history
   ================================================== */

.task-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.task-history-item {
    padding: 10px 14px;
    border-left: 3px solid #dfe3e8;
    background: #f8f9fa;
}

.task-history-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

.task-history-change {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.task-history-value {
    overflow-wrap: anywhere;
}

@media (max-width: 640px) {
    .task-history-meta {
        flex-direction: column;
        gap: 2px;
    }
}

/* =========================================================
   Shared Gantt background grid
   ========================================================= */

/*
 * 日付背景セルはタスク行ごとに生成せず、
 * タイムライン全体で1組だけ共有する。
 */
.gantt-shared-weekday-grid {
    top: 64px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    z-index: 0;
    overflow: hidden;
}

/*
 * Shared background grid
 *
 * 日付背景セルはタイムライン全体で1組だけ生成するため、
 * 各タイムライン行は背景を描画せず透明とする。
 *
 * hover 時のみ行背景を重ねて表示し、
 * 行境界線 (border-bottom) は従来どおり維持する。
 */
.gantt-timeline-row:nth-child(even) {
    background: transparent;
}

.gantt-timeline-row:hover {
    background: rgba(241, 245, 249, 0.72);
}

/* ==================================================
   Task view presets
   ================================================== */

.task-view-preset {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.task-view-preset label {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.task-view-preset select {
    min-width: 10rem;
}

@media (max-width: 900px) {
    .task-view-preset {
        width: 100%;
    }

    .task-view-preset select {
        flex: 1 1 12rem;
    }
}

/* Task dependency picker */

.dependency-picker-toolbar {
    display: flex;
    align-items: end;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.dependency-picker-search {
    flex: 1 1 22rem;
}

.dependency-picker-search input {
    width: 100%;
}

.dependency-selected-only {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0.4rem 0.6rem;
    white-space: nowrap;
}

.dependency-selection-status {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--border-color, #d8dce3);
    border-radius: 0.4rem;
    background: var(--panel-background, #fff);
}

.dependency-selection-count {
    margin-left: 0.4rem;
}

.dependency-selection-summary {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.dependency-selection-chip {
    border: 1px solid #b7c4d6;
    border-radius: 999px;
    background: #eef4fb;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    font-size: 0.85rem;
}

.dependency-selection-chip:hover {
    background: #dfeafa;
}

.dependency-filter-result {
    margin-bottom: 0.5rem;
}

.dependency-item[hidden] {
    display: none !important;
}

.dependency-task-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .dependency-picker-toolbar {
        align-items: stretch;
    }

    .dependency-picker-toolbar > * {
        flex: 1 1 100%;
    }
}


/* WBS keyboard navigation */

.wbs-node-row[tabindex] {
    outline: none;
}

.wbs-node.wbs-keyboard-selected > .wbs-node-row {
    background: rgba(37, 99, 235, 0.10);
    box-shadow: inset 3px 0 0 #2563eb;
}

.wbs-node.wbs-keyboard-selected > .wbs-node-row:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: -2px;
}

.wbs-node.wbs-keyboard-selected
    > .wbs-node-row
    .wbs-title a {
    font-weight: 600;
}

/* Gantt schedule impact preview */

.schedule-preview-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.55);
}

.schedule-preview-backdrop.is-open {
    display: flex;
}

.schedule-preview-panel {
    display: flex;
    flex-direction: column;
    width: min(760px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow: hidden;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3);
}

.schedule-preview-header {
    padding: 18px 22px;
    border-bottom: 1px solid #e2e8f0;
}

.schedule-preview-header h2 {
    margin: 0;
    font-size: 1.15rem;
}

.schedule-preview-body {
    padding: 18px 22px;
    overflow-y: auto;
}

.schedule-preview-section + .schedule-preview-section {
    margin-top: 22px;
}

.schedule-preview-section h3 {
    margin: 0 0 10px;
    font-size: 1rem;
}

.schedule-preview-target,
.schedule-preview-task {
    padding: 12px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
}

.schedule-preview-target dl {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 6px 12px;
    margin: 12px 0 0;
}

.schedule-preview-target dt {
    color: #64748b;
}

.schedule-preview-target dd {
    margin: 0;
}

.schedule-preview-list {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.schedule-preview-task-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.schedule-preview-task-dates {
    margin-top: 4px;
    font-size: 0.9rem;
}

.schedule-preview-before {
    color: #64748b;
    text-decoration: line-through;
}

.schedule-preview-arrow {
    display: inline-block;
    margin: 0 7px;
    color: #64748b;
}

.schedule-preview-after {
    color: #0f766e;
    font-weight: 700;
}

.schedule-preview-critical {
    margin-top: 8px;
    color: #7c3aed;
    font-size: 0.86rem;
}

.schedule-preview-count {
    color: #475569;
    font-weight: 400;
}

.schedule-preview-lock {
    display: inline-flex;
    padding: 2px 7px;
    border-radius: 999px;
    color: #991b1b;
    background: #fee2e2;
    font-size: 0.76rem;
    font-weight: 700;
}

.schedule-preview-conflict {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 8px;
    color: #991b1b;
    background: #fef2f2;
    font-weight: 700;
}

.schedule-preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Project schedule baseline */

.gantt-baseline-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    font-size: 0.82rem;
    color: #475569;
    cursor: pointer;
}

.gantt-baseline-toggle input:disabled {
    cursor: not-allowed;
}

.gantt-baseline-bar {
    position: absolute;
    top: 26px;
    height: 4px;
    min-width: 3px;
    border-radius: 999px;
    background: #64748b;
    opacity: 0.72;
    z-index: 8;
    pointer-events: auto;
    transition:
        left 0.15s ease,
        width 0.15s ease,
        opacity 0.15s ease;
}

.gantt-baseline-bar:hover {
    opacity: 1;
}

.gantt-baseline-hidden .gantt-baseline-bar {
    display: none;
}

/* ==================================================
   Project portfolio dashboard
   ================================================== */

.portfolio-metrics {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.portfolio-metric {
    border: 1px solid #dbe3ec;
    border-radius: 10px;
    background: #fff;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.portfolio-metric span {
    display: block;
    color: #64748b;
    font-size: 0.82rem;
    margin-bottom: 5px;
}

.portfolio-metric strong {
    display: block;
    color: #0f172a;
    font-size: 1.65rem;
    line-height: 1.1;
}

.portfolio-metric.danger {
    border-color: #fecaca;
    background: #fffafa;
}

.portfolio-metric.warn {
    border-color: #fde68a;
    background: #fffdf5;
}

.portfolio-project-table,
.portfolio-task-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 880px;
}

.portfolio-project-table th,
.portfolio-project-table td,
.portfolio-task-table th,
.portfolio-task-table td {
    padding: 9px 10px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
}

.portfolio-project-table th,
.portfolio-task-table th {
    background: #f8fafc;
    color: #475569;
    font-size: 0.78rem;
    font-weight: 700;
}

.portfolio-project-table tbody tr:hover,
.portfolio-task-table tbody tr:hover {
    background: #f8fafc;
}

.portfolio-health,
.portfolio-attention {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}

.portfolio-health.ok,
.portfolio-health.done {
    background: #dcfce7;
    color: #166534;
}

.portfolio-health.warn {
    background: #ffedd5;
    color: #9a3412;
}

.portfolio-health.danger {
    background: #fee2e2;
    color: #991b1b;
}

.portfolio-attention.overdue {
    background: #fee2e2;
    color: #991b1b;
}

.portfolio-attention.delayed {
    background: #ffedd5;
    color: #9a3412;
}

.portfolio-attention.due_this_week {
    background: #fef3c7;
    color: #92400e;
}

.portfolio-progress {
    display: grid;
    grid-template-columns: minmax(72px, 120px) 42px;
    align-items: center;
    gap: 8px;
}

.portfolio-progress-track {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.portfolio-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #2563eb;
}

.portfolio-generated-at {
    text-align: right;
    margin-top: 12px;
}

@media (max-width: 700px) {
    .portfolio-metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* Project dashboard visibility */

.project-dashboard-option {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 12px 14px;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #f8fafc;
}

.project-dashboard-option > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.project-dashboard-option input[type="checkbox"] {
    width: auto;
    margin: 0;
}

.project-dashboard-cell {
    width: 112px;
    text-align: center;
}

.badge.dashboard-visible {
    background: #dcfce7;
    color: #166534;
}

.badge.dashboard-hidden {
    background: #e2e8f0;
    color: #475569;
}

/* Multiple project baselines */

.gantt-baseline-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.gantt-baseline-select {
    min-width: 180px;
    max-width: 280px;
    height: 30px;
    padding: 3px 8px;
    font-size: 0.85rem;
}

@media (max-width: 900px) {
    .gantt-baseline-controls {
        width: 100%;
    }

    .gantt-baseline-select {
        flex: 1 1 200px;
        max-width: none;
    }
}

/* Project effort report */

.effort-report-filter {
    margin-bottom: 20px;
}

.effort-report-filter-form {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.effort-report-filter-form .field {
    min-width: 180px;
    margin: 0;
}

.effort-report-range {
    margin: 14px 0 0;
}

.effort-report-summary {
    margin-bottom: 20px;
}

.effort-report-table th,
.effort-report-table td {
    white-space: nowrap;
}

.effort-report-table td.effort-overrun {
    font-weight: 700;
    color: #b91c1c;
    background: #fef2f2;
}