/* =============================================================================
   Project Management Tool — CSS
   Phase 1: Canvas View
   ============================================================================= */

:root {
    --pm-toolbar-bg: #ffffff;
    --pm-border: #dee2e6;
    --pm-divider: #dee2e6;
    --pm-input-bg: #ffffff;
    --pm-input-text: #212529;
    --pm-canvas-bg: #f0f2f5;
    --pm-grid: rgba(0, 0, 0, 0.04);
    --pm-muted: #6c757d;
    --pm-empty: #adb5bd;
    --pm-dep-badge-bg: #e9ecef;
    --pm-warning-bg: #fff5f5;
}

[data-bs-theme="dark"] {
    --pm-toolbar-bg: #111827;
    --pm-border: #2b3545;
    --pm-divider: #334155;
    --pm-input-bg: #0f172a;
    --pm-input-text: #e5e7eb;
    --pm-canvas-bg: #0b1220;
    --pm-grid: rgba(148, 163, 184, 0.10);
    --pm-muted: #94a3b8;
    --pm-empty: #64748b;
    --pm-dep-badge-bg: #1e293b;
    --pm-warning-bg: rgba(220, 53, 69, 0.12);
}

/* Layout */
body.project-canvas-mode {
    overflow: hidden;
}

body.project-app-fullscreen-active {
    overflow: hidden;
}

#project-app {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px); /* subtract navbar height */
    overflow: hidden;
}

#project-app:fullscreen,
#project-app.is-manual-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: none;
    background: var(--pm-toolbar-bg);
}

#project-app:fullscreen {
    position: relative;
}

#project-app:fullscreen::backdrop {
    background: #0f172a;
}

#project-app.is-manual-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

/* ---- Toolbar ---- */
#project-toolbar {
    flex-shrink: 0;
    background: var(--pm-toolbar-bg);
    border-bottom: 1px solid var(--pm-border);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    z-index: 100;
    min-height: 52px;
}

#project-toolbar .toolbar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

#project-toolbar .btn-icon-only {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#ai-plan-composer {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    z-index: 1050;
    width: min(880px, calc(100% - 24px));
    padding: 10px;
    border: 1px solid rgba(15, 23, 42, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
}

#ai-plan-composer.is-disabled {
    opacity: 0.72;
}

#ai-plan-prompt-wrap {
    border-radius: 10px;
}

#ai-plan-prompt {
    min-height: 82px;
    max-height: 200px;
    padding: 10px 12px;
    resize: none;
    overflow-y: auto;
    scrollbar-gutter: stable;
    background-color: transparent;
    color: inherit;
    border-radius: 10px;
    width: 100%;
    display: block;
}

.ai-plan-composer-controls {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(15, 23, 42, 0.12);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ai-plan-controls-left {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

#btn-ai-plan-date {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    font-size: 0.78rem;
    padding: 3px 8px;
    border-radius: 6px;
    min-width: 0;
    overflow: hidden;
}

#ai-plan-date-label {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.ai-plan-date-suffix {
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}

#btn-ai-plan {
    min-width: 38px;
    height: 30px;
    font-size: 1rem;
    line-height: 1;
    padding: 3px 8px;
    flex-shrink: 0;
    background: transparent;
    border-color: transparent;
    color: inherit;
    box-shadow: none;
}

#btn-ai-plan:hover,
#btn-ai-plan:focus-visible {
    background: rgba(13, 110, 253, 0.08);
    border-color: transparent;
}

#btn-ai-plan:active {
    background: rgba(13, 110, 253, 0.16);
    border-color: transparent;
}

[data-bs-theme="dark"] #btn-ai-plan:hover,
[data-bs-theme="dark"] #btn-ai-plan:focus-visible {
    background: rgba(99, 179, 237, 0.14);
}

#btn-ai-plan.is-quota-exhausted {
    opacity: 0.45;
    cursor: not-allowed;
}

#project-toolbar .toolbar-divider {
    width: 1px;
    height: 24px;
    background: var(--pm-divider);
    margin: 0 4px;
}

#input-project-name {
    font-weight: 600;
    font-size: 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 4px 8px;
    background: transparent;
    color: var(--pm-input-text);
    min-width: 160px;
    max-width: 280px;
    transition: border-color 0.15s;
}

#input-project-name:hover,
#input-project-name:focus {
    border-color: #0d6efd;
    background: var(--pm-input-bg);
    outline: none;
}

#input-start-date {
    font-size: 0.875rem;
}

#save-indicator {
    font-size: 0.8rem;
    color: var(--pm-muted);
    min-width: 70px;
    text-align: right;
    white-space: nowrap;
}

#dependency-status {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    z-index: 1040;
    min-width: min(720px, calc(100% - 32px));
    max-width: calc(100% - 32px);
    padding: 10px 14px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease, visibility 0.16s ease;
}

#dependency-status.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.16);
    color: #0f172a;
}

[data-bs-theme="dark"] #dependency-status {
    border-color: rgba(148, 163, 184, 0.18);
    background: rgba(15, 23, 42, 0.88);
    box-shadow: 0 14px 34px rgba(2, 6, 23, 0.45);
    color: #cbd5e1;
}

[data-bs-theme="dark"] #dependency-status.is-active {
    box-shadow: 0 18px 40px rgba(14, 165, 233, 0.18);
    color: #f8fafc;
}

[data-bs-theme="dark"] .share-password-box {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.9));
}

#save-indicator.saving { color: #0d6efd; }
#save-indicator.saved  { color: #198754; }
#save-indicator.error  { color: #dc3545; }

/* Connect mode toggle — highlight when active */
/* View mode tabs */
#view-tabs .btn {
    font-size: 0.8125rem;
}

/* ---- Canvas Container ---- */
#canvas-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: var(--pm-canvas-bg);
    background-image:
        linear-gradient(var(--pm-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px);
    background-size: 40px 40px;
    cursor: default;
}

.share-password-box {
    background: linear-gradient(135deg, rgba(239, 246, 255, 0.8), rgba(248, 250, 252, 0.95));
}

.ai-plan-note {
    min-height: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 247, 237, 0.9), rgba(255, 255, 255, 0.96));
    color: #7c2d12;
    font-size: 0.9rem;
}

[data-bs-theme="dark"] .ai-plan-note {
    border-color: rgba(148, 163, 184, 0.22);
    background: linear-gradient(135deg, rgba(41, 37, 36, 0.88), rgba(30, 41, 59, 0.94));
    color: #fed7aa;
}

[data-bs-theme="dark"] #ai-plan-composer {
    border-color: rgba(148, 163, 184, 0.24);
    background: rgba(15, 23, 42, 0.9);
    box-shadow: 0 16px 34px rgba(2, 6, 23, 0.46);
}

[data-bs-theme="dark"] #ai-plan-prompt {
    background-color: transparent;
    border-color: #334155;
    color: #e2e8f0;
}

[data-bs-theme="dark"] .ai-plan-composer-controls {
    border-top-color: rgba(148, 163, 184, 0.24);
}

[data-bs-theme="dark"] #ai-plan-date-label,
[data-bs-theme="dark"] .ai-plan-date-suffix {
    color: #cbd5e1;
}

.ai-bridge-page {
    background:
        radial-gradient(circle at 20% 16%, rgba(14, 165, 233, 0.12), transparent 34%),
        radial-gradient(circle at 82% 8%, rgba(34, 197, 94, 0.08), transparent 30%),
        #f8fafc;
}

.ai-bridge-shell {
    min-height: calc(100vh - 56px);
}

.ai-bridge-ad {
    border: 1px solid rgba(148, 163, 184, 0.26);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.9);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
}

.ai-bridge-ad .ai-bridge-adsense {
    display: block !important;
    width: 100%;
    min-height: 90px;
}

.ai-bridge-ad-side .ai-bridge-adsense {
    min-height: 280px;
}

.ai-bridge-ad-side {
    min-height: 420px;
}

.ai-bridge-center {
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.28);
    background: rgba(255, 255, 255, 0.96);
    max-width: 560px;
    margin: 0 auto;
}

[data-bs-theme="dark"] .ai-bridge-page {
    background:
        radial-gradient(circle at 18% 16%, rgba(14, 165, 233, 0.12), transparent 34%),
        radial-gradient(circle at 84% 8%, rgba(34, 197, 94, 0.08), transparent 30%),
        #020617;
}

[data-bs-theme="dark"] .ai-bridge-ad {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(15, 23, 42, 0.9);
}

[data-bs-theme="dark"] .ai-bridge-center {
    border-color: rgba(148, 163, 184, 0.26);
    background: rgba(15, 23, 42, 0.95);
}

@media (max-width: 1200px) {
    .ai-bridge-ad-side {
        min-height: 150px;
    }
}

@media (max-width: 768px) {
    #ai-plan-composer {
        width: calc(100% - 16px);
        bottom: 8px;
        padding: 8px;
    }

    #dependency-status {
        top: 10px;
    }

    #ai-plan-date-label {
        max-width: 150px;
    }
}

@media (min-width: 1200px) {
    .ai-bridge-ad-side {
        min-width: 250px;
    }
}

.project-history-list .history-item:last-child {
    margin-bottom: 0 !important;
}

.project-readonly-mode .list-view-toolbar input,
.project-readonly-mode .list-view-toolbar select,
.project-readonly-mode #list-table input,
.project-readonly-mode #list-table select {
    background-color: #f8fafc;
}

[data-bs-theme="dark"] .project-readonly-mode .list-view-toolbar input,
[data-bs-theme="dark"] .project-readonly-mode .list-view-toolbar select,
[data-bs-theme="dark"] .project-readonly-mode #list-table input,
[data-bs-theme="dark"] .project-readonly-mode #list-table select,
[data-bs-theme="dark"] .project-readonly-mode .list-view-toolbar input:disabled,
[data-bs-theme="dark"] .project-readonly-mode .list-view-toolbar select:disabled,
[data-bs-theme="dark"] .project-readonly-mode #list-table input:disabled,
[data-bs-theme="dark"] .project-readonly-mode #list-table select:disabled {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    -webkit-text-fill-color: #e2e8f0;
    opacity: 1;
}

#list-view {
    flex: 1;
    overflow: auto;
    background: #f8fafc;
    padding: 14px 16px 18px;
}

#gantt-view {
    flex: 1;
    overflow: hidden;
    background: #f8fafc;
    padding: 12px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gantt-toolbar {
    background: var(--pm-toolbar-bg);
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    padding: 10px;
}

.gantt-scroll {
    flex: 1;
    overflow: auto;
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    background: #ffffff;
    position: relative;
}

.gantt-canvas {
    position: relative;
    min-height: 420px;
}

.gantt-grid {
    position: relative;
    z-index: 2;
}

.gantt-left-column {
    position: sticky;
    left: 0;
    width: 260px;
    height: 100%;
    z-index: 5;
    background: #ffffff;
    border-right: 1px solid var(--pm-border);
}

.gantt-left-header {
    position: sticky;
    top: 0;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-weight: 700;
    font-size: 1rem;
    border-bottom: 1px solid var(--pm-border);
    background: #f1f5f9;
}

.gantt-task-cell {
    position: absolute;
    left: 0;
    right: 0;
    padding: 5px 10px;
    border-bottom: 1px solid #edf2f7;
    overflow: hidden;
}

.gantt-task-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gantt-task-meta {
    font-size: 0.72rem;
    color: #64748b;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gantt-right {
    position: absolute;
    left: 260px;
    top: 0;
}

.gantt-header {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    border-bottom: 1px solid var(--pm-border);
    background: #f8fafc;
}

.gantt-header-cell {
    flex: 0 0 auto;
    border-right: 1px solid #e2e8f0;
    padding: 5px 6px;
    font-size: 0.72rem;
    color: #475569;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gantt-header-sub {
    display: block;
    opacity: 0.8;
    font-size: 0.68rem;
}

.gantt-body {
    position: relative;
    border-bottom: 1px solid var(--pm-border);
}

.gantt-row {
    position: absolute;
    left: 0;
    right: 0;
}

.gantt-row-bg {
    position: absolute;
    inset: 0;
    border-bottom: 1px solid #edf2f7;
}

.gantt-bar {
    --pm-gantt-bar-color: #2563eb;
    position: absolute;
    top: 7px;
    height: calc(100% - 14px);
    border-radius: 999px;
    background-color: var(--pm-gantt-bar-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.72rem;
    overflow: hidden;
}

.gantt-bar-label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.gantt-bar.status-done {
    --pm-gantt-bar-color: #16a34a;
}

.gantt-bar.status-in_progress {
    --pm-gantt-bar-color: #0284c7;
}

.gantt-bar.priority-high,
.gantt-bar.priority-critical {
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.35) inset;
}

.gantt-bar.deadline-warning {
    --pm-gantt-bar-color: #dc2626;
}

.gantt-bar-partial-day {
    border: 1px dashed rgba(255, 255, 255, 0.85);
}

.gantt-bar-week-partial {
    background-color: var(--pm-gantt-bar-color);
    background-image:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0.32) 0,
            rgba(255, 255, 255, 0.32) calc(var(--pm-gantt-start-ratio, 0) * var(--pm-gantt-cell-px, 72px)),
            transparent calc(var(--pm-gantt-start-ratio, 0) * var(--pm-gantt-cell-px, 72px)),
            transparent 100%
        ),
        linear-gradient(
            to left,
            rgba(255, 255, 255, 0.32) 0,
            rgba(255, 255, 255, 0.32) calc(var(--pm-gantt-end-remain-ratio, 0) * var(--pm-gantt-cell-px, 72px)),
            transparent calc(var(--pm-gantt-end-remain-ratio, 0) * var(--pm-gantt-cell-px, 72px)),
            transparent 100%
        );
    background-repeat: no-repeat;
    background-size: var(--pm-gantt-cell-px, 72px) 100%, var(--pm-gantt-cell-px, 72px) 100%;
    background-position: left top, right top;
}

.gantt-deps {
    position: absolute;
    left: 260px;
    top: 0;
    right: 0;
    bottom: 0;
    width: calc(100% - 260px);
    height: 100%;
    pointer-events: none;
    z-index: 3;
    overflow: visible;
}

.gantt-dep-path {
    fill: none;
    stroke: rgba(71, 85, 105, 0.75);
    stroke-width: 1.6;
}

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

.gantt-empty {
    padding: 28px;
    color: var(--pm-muted);
    text-align: center;
}

[data-bs-theme="dark"] #list-view {
    background: #0f172a;
}

[data-bs-theme="dark"] #gantt-view {
    background: #0f172a;
}

[data-bs-theme="dark"] .gantt-scroll,
[data-bs-theme="dark"] .gantt-left-column {
    background: #0b1220;
}

[data-bs-theme="dark"] .gantt-left-header,
[data-bs-theme="dark"] .gantt-header {
    background: #111827;
}

[data-bs-theme="dark"] .gantt-task-name {
    color: #e5e7eb;
}

[data-bs-theme="dark"] .gantt-task-meta,
[data-bs-theme="dark"] .gantt-header-cell {
    color: #94a3b8;
}

[data-bs-theme="dark"] .gantt-row-bg,
[data-bs-theme="dark"] .gantt-task-cell {
    border-bottom-color: #1f2937;
}

.list-view-toolbar {
    background: var(--pm-toolbar-bg);
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 12px;
}

.list-view-body .card {
    border-color: var(--pm-border);
}

#list-table th,
#list-table td {
    white-space: nowrap;
    vertical-align: middle;
}

#list-table input.form-control,
#list-table select.form-select {
    min-width: 110px;
}

#list-table .col-name {
    min-width: 220px;
}

#list-table .col-duration,
#list-table .col-progress {
    max-width: 98px;
}

#list-table .computed-date {
    font-size: 0.8rem;
    color: var(--pm-muted);
}

#budget-summary {
    line-height: 1.45;
    min-height: 68px;
}

@media (max-width: 992px) {
    #list-view {
        padding: 10px;
    }

    .list-view-toolbar {
        padding: 8px;
    }
}

#canvas-container.panning {
    cursor: grabbing;
}

#main-canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#btn-export-canvas-image {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 6;
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--pm-border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.16);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

#btn-export-canvas-image:hover,
#btn-export-canvas-image:focus-visible {
    background: #0d6efd;
    color: #ffffff;
    border-color: #0b5ed7;
}

[data-bs-theme="dark"] #btn-export-canvas-image {
    background: rgba(15, 23, 42, 0.9);
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] #btn-export-canvas-image:hover,
[data-bs-theme="dark"] #btn-export-canvas-image:focus-visible {
    background: #1d4ed8;
    color: #f8fafc;
    border-color: #2563eb;
}

/* Zoom hint overlay */
#zoom-hint {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 0.75rem;
    color: #adb5bd;
    pointer-events: none;
    user-select: none;
}

#project-floating-ad {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 1030;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    pointer-events: none;
}

#btn-toggle-project-ad {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.95);
    border-color: var(--pm-border);
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.14);
}

#project-floating-ad .project-floating-ad-inner {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    max-height: min(60vh, 420px);
    overflow: auto;
    border: 1px solid var(--pm-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(2px);
    padding: 34px 12px 10px;
    pointer-events: auto;
}

#project-floating-ad:not(.is-expanded) .project-floating-ad-inner {
    display: none;
}

[data-bs-theme="dark"] #project-floating-ad .project-floating-ad-inner {
    background: rgba(17, 24, 39, 0.94);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.44);
}

[data-bs-theme="dark"] #btn-toggle-project-ad {
    background: rgba(17, 24, 39, 0.94);
    color: #e5e7eb;
    border-color: #334155;
}

@media (max-width: 768px) {
    #dependency-status {
        top: 10px;
        min-width: calc(100% - 20px);
        max-width: calc(100% - 20px);
        padding: 9px 12px;
        border-radius: 16px;
        white-space: normal;
        line-height: 1.35;
    }

    #project-floating-ad {
        right: 10px;
        bottom: 10px;
    }

    #project-floating-ad .project-floating-ad-inner {
        width: min(360px, calc(100vw - 20px));
        max-height: 56vh;
    }
}

/* ---- Empty state ---- */
#empty-state {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--pm-empty);
    max-width: min(560px, calc(100% - 24px));
    pointer-events: none;
}

#empty-state .bi {
    font-size: 3rem;
    display: block;
    margin-bottom: 12px;
}

#empty-state .empty-actions {
    pointer-events: auto;
}

#empty-state .empty-actions .btn {
    min-width: 136px;
}

/* ---- Landing page ---- */
#project-landing {
    max-width: 680px;
    margin: 60px auto 40px;
    padding: 0 16px;
}

#project-landing .landing-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    padding: 40px;
}


.canvas-context-menu {
    position: fixed;
    z-index: 1080;
    min-width: 150px;
    background: var(--pm-toolbar-bg);
    border: 1px solid var(--pm-border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.24);
    padding: 6px;
}

.canvas-context-menu-item {
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pm-input-text);
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.2;
    padding: 9px 10px;
}

.canvas-context-menu-item:hover {
    background: rgba(13, 110, 253, 0.12);
}

.canvas-context-menu-item.danger {
    color: #dc3545;
}

.canvas-context-menu-item.danger:hover {
    background: rgba(220, 53, 69, 0.14);
}


/* ---- Dark mode — toolbar form overrides ---- */
[data-bs-theme="dark"] #input-project-name {
    color: var(--pm-input-text);
}

[data-bs-theme="dark"] .dep-badge {
    color: #e2e8f0;
}

/* dependency badge */
.dep-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--pm-dep-badge-bg);
    border-radius: 20px;
    padding: 2px 10px 2px 8px;
    margin: 2px;
    font-size: 0.8rem;
    user-select: none;
}

.dep-badge .btn-remove-dep {
    border: 0;
    background: none;
    padding: 0;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    font-size: 0.75rem;
}

.dep-badge .btn-remove-dep:hover { color: #dc3545; }

/* range sliders with filled progress */
#task-modal input[type="range"].pm-range-filled {
    --pm-range-filled: #0d6efd;
    --pm-range-empty: #d0d7de;
    --pm-range-progress: 0%;
    accent-color: var(--pm-range-filled);
}

#task-modal input[type="range"].pm-range-filled::-webkit-slider-runnable-track {
    background: linear-gradient(
        to right,
        var(--pm-range-filled) 0%,
        var(--pm-range-filled) var(--pm-range-progress),
        var(--pm-range-empty) var(--pm-range-progress),
        var(--pm-range-empty) 100%
    );
}

#task-modal input[type="range"].pm-range-filled::-moz-range-track {
    background: var(--pm-range-empty);
}

#task-modal input[type="range"].pm-range-filled::-moz-range-progress {
    background: var(--pm-range-filled);
}

/* deadline warning color in inputs */
input.deadline-warning {
    border-color: #dc3545 !important;
    background-color: var(--pm-warning-bg);
}

/* floating tutorial coachmark */
#tutorial-coachmark {
    position: fixed;
    inset: 0;
    z-index: 4000;
    pointer-events: none;
}

#tutorial-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: auto;
    z-index: 4000;
}

#tutorial-highlight {
    position: fixed;
    border-radius: 12px;
    box-shadow: 0 0 0 9999px transparent;
    background: transparent;
    pointer-events: none;
    z-index: 4001;
}

#tutorial-popover {
    position: fixed;
    width: min(340px, calc(100vw - 20px));
    max-width: calc(100vw - 20px);
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--pm-border);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 16px 36px rgba(2, 6, 23, 0.34);
    pointer-events: auto;
    z-index: 4002;
}

#tutorial-popover,
#tutorial-popover * {
    pointer-events: auto;
}

#tutorial-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border-left: 1px solid var(--pm-border);
    border-top: 1px solid var(--pm-border);
    transform: rotate(45deg);
}

#tutorial-popover.arrow-top #tutorial-arrow {
    top: -7px;
}

#tutorial-popover.arrow-bottom #tutorial-arrow {
    bottom: -7px;
    transform: rotate(225deg);
}

#tutorial-popover.arrow-left #tutorial-arrow {
    left: -7px;
    transform: rotate(-45deg);
}

#tutorial-popover.arrow-right #tutorial-arrow {
    right: -7px;
    transform: rotate(135deg);
}

.pm-tutorial-target-active {
    position: relative;
    z-index: 3990 !important;
    border-radius: 10px;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.95), 0 0 0 8px rgba(125, 211, 252, 0.3);
}

[data-bs-theme="dark"] #tutorial-popover {
    background: #0f172a;
    color: #e2e8f0;
    border-color: #334155;
}

[data-bs-theme="dark"] #tutorial-arrow {
    background: #0f172a;
    border-left-color: #334155;
    border-top-color: #334155;
}

[data-bs-theme="dark"] #tutorial-backdrop {
    background: transparent;
}

[data-bs-theme="dark"] #tutorial-highlight {
    background: transparent;
    box-shadow: 0 0 0 9999px transparent;
}

/* ---- Responsive ---- */
@media (max-width: 576px) {
    #project-toolbar {
        gap: 4px;
        padding: 6px 10px;
    }

    #input-project-name {
        min-width: 120px;
        max-width: 180px;
        font-size: 0.9rem;
    }

    #project-landing .landing-card {
        padding: 24px 20px;
    }
}