/* Milestone Board (list view inside the project-view shell) and Project View styles. */

/* ============================================================
   Scope view header — breadcrumb (← Project / Scope) and actions
   Uses .project-view-card-header from ProjectView for the base.
   ============================================================ */

/* The scope/milestone variants reuse `.project-view-card-header` for the
   vertical layout (breadcrumb on top, tabs on the bottom) — this class just
   tweaks horizontal padding and adds a small bottom row gap. */
.scope-view-header {
    /* Inherits flex-direction:column, padding-top, border-bottom, etc. from
       `.project-view-card-header`. We only override the gap so the breadcrumb
       row sits slightly closer to the tab strip. */
    gap: 14px;
}

.scope-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    width: 100%;
    font-size: 16px;
}

.scope-breadcrumb-back {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 120ms ease-in-out, border-color 120ms ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.scope-breadcrumb-back:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.scope-breadcrumb-project {
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.8;
    font-size: 15px;
    font-weight: 500;
    transition: background 120ms ease-in-out, opacity 120ms ease-in-out;
}

.scope-breadcrumb-project:hover {
    background: var(--bg-secondary);
    opacity: 1;
}

.scope-breadcrumb-sep {
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.4;
    font-size: 16px;
}

.scope-breadcrumb-current {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scope-view-title-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    padding: 4px 0;
    margin: 0;
    transition: background-color 120ms ease-in-out;
    border-radius: 4px;
}

.scope-view-title-input:hover,
.scope-view-title-input:focus {
    background-color: var(--bg-secondary);
    padding: 4px 8px;
}

.scope-view-actions {
    display: flex;
    gap: 8px;
}

/* ============================================================
   Milestone sections (Now / Next / Backlog as vertical list)
   ============================================================ */

.milestone-sections {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ============================================================
   Drag-to-attach rail — a thin bar of milestone chips shown only while a
   backlog task is being dragged. Fixed to the top of the viewport so it
   stays reachable no matter how far the backlog is scrolled, and compact so
   it doesn't bury the task rows. Drop a task on a chip to attach it.
   ============================================================ */
.drag-rail {
    position: fixed;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    max-width: min(90vw, 1100px);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--accent);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    animation: drag-rail-in 140ms ease-out;
}

@keyframes drag-rail-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.drag-rail-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary, var(--text-primary));
    white-space: nowrap;
    flex-shrink: 0;
}

.drag-rail-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.drag-rail-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: copy;
    transition: background 120ms, border-color 120ms, transform 120ms;
    max-width: 280px;
}

.drag-rail-chip.hover {
    border-style: solid;
    border-color: var(--accent);
    background: var(--accent-bg, color-mix(in srgb, var(--accent) 14%, transparent));
    transform: scale(1.04);
}

.drag-rail-chip-lane {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--accent);
    color: #fff;
    flex-shrink: 0;
}

.drag-rail-chip.next .drag-rail-chip-lane {
    background: var(--text-secondary, #6b7280);
}

.drag-rail-chip-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.drag-rail-empty {
    font-size: 13px;
    color: var(--text-secondary, var(--text-primary));
    font-style: italic;
}

.milestone-sections-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.milestone-section-action {
    margin-left: 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out;
}

.milestone-section-action:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Archive list (done/cancelled milestones) */

.milestone-archive {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.milestone-row.archived {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.milestone-row.archived:hover {
    opacity: 0.85;
}

.milestone-section {
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    overflow: hidden;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.milestone-section.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-bg);
}

.milestone-section.disabled-drop.drag-over {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192, 57, 43, 0.18);
    cursor: not-allowed;
}

.milestone-section.disabled-drop.drag-over::after {
    content: "Já existe uma milestone ativa";
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(192, 57, 43, 0.12);
    color: #c0392b;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(1px);
    pointer-events: none;
}

.milestone-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    cursor: pointer;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    user-select: none;
    transition: background 120ms ease-in-out;
}

.milestone-section-header:hover {
    background: var(--border);
}

.milestone-section.collapsed .milestone-section-header {
    border-bottom: none;
}

.milestone-section-chevron {
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.6;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.milestone-section-label {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.milestone-section[data-lane="now"] .milestone-section-label {
    color: var(--accent);
}

.milestone-section-count {
    margin-left: auto;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.85;
}

.milestone-section-body {
    padding: 8px;
}

.milestone-section-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.6;
    font-size: 13px;
    font-style: italic;
}

/* ============================================================
   Milestone rows
   ============================================================ */

.milestone-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.milestone-row {
    display: grid;
    grid-template-columns: 24px 1fr 200px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease-in-out, border-color 120ms ease-in-out, transform 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.milestone-row:hover {
    background: var(--bg-secondary);
    border-color: var(--border);
}

.milestone-row.dragging {
    opacity: 0.4;
    transform: scale(0.98);
}

.milestone-row.drop-target {
    border-color: var(--accent);
    background: var(--accent-bg);
    box-shadow: 0 0 0 1px var(--accent);
}

.milestone-row-drag-handle {
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.3;
    font-size: 14px;
    cursor: grab;
    text-align: center;
    transition: opacity 120ms ease-in-out;
    user-select: none;
}

.milestone-row:hover .milestone-row-drag-handle {
    opacity: 0.7;
}

.milestone-row-drag-handle:active {
    cursor: grabbing;
}

.milestone-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.milestone-row-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.milestone-row-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.75;
}

.milestone-row-dates {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.milestone-row-overdue {
    color: #c0392b;
    font-weight: 600;
    display: none;
}

.milestone-row-overdue.visible {
    display: inline-flex;
}

.milestone-row-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.milestone-row-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 3px;
    overflow: hidden;
}

.milestone-row-progress-fill {
    height: 100%;
    background: var(--accent);
    transition: width 200ms ease-in-out;
}

.milestone-row-progress-text {
    font-size: 11px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.75;
    min-width: 32px;
    text-align: right;
}

/* ============================================================
   View switcher inside the filter bar
   ============================================================ */

.task-filter-spacer {
    flex: 1;
    min-width: 0;
}

.task-filter-main .view-switcher {
    margin-left: auto;
}

/* ============================================================
   Tags manager — page-style component (used in MilestoneScreen
   Tags tab). Modern chip-grid layout with hover actions.
   ============================================================ */

.tags-manager {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ---- Hero (title + count badge) ---- */

.tags-manager-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.tags-manager-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.tags-manager-hint {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
    max-width: 60ch;
}

.tags-manager-count-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 999px;
    flex-shrink: 0;
}

.tags-manager-count-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

.tags-manager-count-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
}

/* ---- Inline create form ---- */

.tags-manager-create {
    display: flex;
    align-items: stretch;
    gap: 8px;
    padding: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 10px;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out;
}

.tags-manager-create:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.tags-create-color {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 120ms ease-in-out;
}

.tags-create-color:hover {
    transform: scale(1.05);
}

.tags-create-color input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.tags-create-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    padding: 0 8px;
    min-width: 0;
}

.tags-create-btn {
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
}

/* ---- Tags grid ---- */

.tags-manager-grid-section {
    display: contents;
}

.tags-manager-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.tag-chip {
    --tag-color: #6366f1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px 8px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-left: 3px solid var(--tag-color);
    border-radius: 8px;
    transition: border-color 120ms ease-in-out, box-shadow 120ms ease-in-out, transform 120ms ease-in-out;
    position: relative;
}

.tag-chip:hover {
    border-color: var(--tag-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.tag-chip.editing {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}

.tag-chip-swatch {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.tag-chip-name {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tag-chip-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms ease-in-out;
}

.tag-chip:hover .tag-chip-actions,
.tag-chip.editing .tag-chip-actions {
    opacity: 1;
}

.tag-chip-btn {
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-secondary, var(--text-primary));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms ease-in-out, color 120ms ease-in-out;
}

.tag-chip-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tag-chip-btn-danger:hover {
    background: #fee2e2;
    color: #b91c1c;
}

.tag-chip-btn-confirm {
    color: #16a34a;
}

.tag-chip-btn-confirm:hover {
    background: #dcfce7;
    color: #15803d;
}

/* Edit mode internals */

.tag-chip-color-pick {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.tag-chip-color-pick input[type="color"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

.tag-chip-edit-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    padding: 2px 0;
}

/* ---- Empty state ---- */

.tags-manager-empty {
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 36px 24px;
    text-align: center;
}

.tags-manager-empty-icon {
    font-size: 32px;
    margin-bottom: 10px;
    opacity: 0.45;
}

.tags-manager-empty-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tags-manager-empty-hint {
    font-size: 12px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
}

/* ---- Copy from another scope ---- */

.tags-manager-copy {
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

.tags-copy-toggle {
    background: transparent;
    border: none;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.75;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    transition: opacity 120ms ease-in-out, color 120ms ease-in-out;
}

.tags-copy-toggle:hover {
    opacity: 1;
    color: var(--accent);
}

.tags-copy-toggle-chev {
    font-size: 10px;
    width: 12px;
    text-align: center;
}

.tags-copy-empty {
    margin-top: 10px;
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.65;
}

.tags-copy-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tags-copy-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: border-color 120ms ease-in-out, background 120ms ease-in-out;
}

.tags-copy-item:hover {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.tags-copy-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tags-copy-item-scope {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.tags-copy-item-project {
    font-size: 11px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
}

.tags-copy-item-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-bg);
    border-radius: 999px;
    padding: 3px 10px;
    flex-shrink: 0;
}

/* ============================================================
   Backlog list — uses the same TaskTableRow styles as the main
   task list. Just a thin vertical stack inside the section body.
   ============================================================ */

.backlog-task-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Backlog filter bar (reuses task-filter-bar classes) — trim padding so it
   sits cleanly inside .milestone-section-body. */

.backlog-filter-bar {
    padding: 4px 4px 10px;
    gap: 8px;
}

/* Backlog sort toolbar — pill buttons that cycle inactive → asc → desc → inactive. */

.backlog-sort-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}

.backlog-sort-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
    margin-right: 4px;
}

.backlog-sort-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 120ms ease-in-out, border-color 120ms ease-in-out, color 120ms ease-in-out;
}

.backlog-sort-btn:hover {
    background: var(--bg-secondary);
    border-color: var(--accent);
}

.backlog-sort-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.backlog-sort-btn-arrow {
    font-size: 11px;
    line-height: 1;
    min-width: 8px;
    text-align: center;
}

/* ============================================================
   Embedded TasksBoard variant — used when the board is rendered
   inside another card (e.g. MilestoneScreen). Strips the white
   card, border, shadow and margins so it doesn't stack visually.
   ============================================================ */

.tasks-board-embedded {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    overflow-y: auto;
    box-shadow: none;
}

.tasks-board-inner-embedded {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* ============================================================
   Project View — top-level project page
   Mirrors editor-kyst layout: bordered white card with shadow,
   inline editable title, and tabbed body.
   ============================================================ */

.project-view-kyst {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 10px 20px;
    width: 100%;
    background-color: transparent;
    height: 100vh;
    overflow: hidden;
}

.project-view-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-docs);
    border-radius: var(--card-radius);
    overflow: hidden;
    bottom: 0px;
    position: relative;
}

.project-view-card-header {
    padding: 14px var(--panel-pad-x) 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-primary);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-view-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.project-view-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--accent);
}

.project-view-title-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: 22px;
    font-weight: 600;
    padding: 4px 0;
    margin: 0;
    transition: background-color 120ms ease-in-out;
    border-radius: 4px;
}

.project-view-title-input:hover,
.project-view-title-input:focus {
    background-color: var(--bg-secondary);
    padding: 4px 8px;
}

.project-view-tabs {
    display: flex;
    gap: 4px;
    /* Pull the tabs over the card's bottom border so the active tab's
       underline visually merges with the header divider. */
    margin-bottom: -1px;
}

.project-view-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.65;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 120ms ease-in-out, border-color 120ms ease-in-out, opacity 120ms ease-in-out;
}

.project-view-tab:hover {
    opacity: 1;
}

.project-view-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    opacity: 1;
    font-weight: 600;
}

.project-view-tab-panel {
    flex: 1;
    overflow: auto;
    padding: var(--panel-pad-y) var(--panel-pad-x);
}

/* ---- Scopes tab ---- */

.scopes-tab-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.scopes-tab-count {
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.65;
    font-size: 13px;
}

.scope-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.scope-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    cursor: pointer;
    transition: border-color 120ms ease-in-out, background 120ms ease-in-out;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.scope-card:hover {
    border-color: var(--accent);
}

.scope-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0px 16px;
}

.scope-card-icon {
    font-size: 18px;
    line-height: 1;
}

.scope-card-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scope-card-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    border-top: 1px solid var(--border);
    padding: 12px 16px 0px 16px;
}

.scope-card-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.scope-card-stat-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.scope-card-stat-label {
    font-size: 11px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.65;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scope-card-stat.has-overdue .scope-card-stat-value {
    color: #c0392b;
}

.scope-active-milestone{
    display: flex;
    gap: 2px;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.milestone-header{
    font-size: smaller;
    opacity: 0.7;
    letter-spacing: 2px;
}

.milestone-name{
    display:flex;
    gap:5px;
    align-items:center;
}

.active-milestone-title{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}

.scope-active-milestone-btn{
    /* Footer button of a square card — keep every corner square. */
    border-radius: 0;
}

.scope-active-milestone-btn{
    cursor: pointer;
}

.scope-active-milestone-btn:disabled{
    cursor: not-allowed;
}

.scope-active-milestone-link-icon{
    display: none;
}

.scope-active-milestone-btn:not(:disabled):hover .scope-active-milestone-link-icon{
    display: inline-block;
    animation: showLink 0.2s ease-out;
}

@keyframes showLink{
    from{opacity: 0;transform: translateX(50%);}
    to{opacity: 1;transform: translateX(0);}
}

.scope-active-milestone-btn:not(:disabled):hover .active-milestone-title{
    animation: moveName 0.2s ease-out;
    transform: translateX(5%);
}

@keyframes moveName{
    from{transform: translateX(0%);}
}

.scopes-tab-empty {
    grid-column: 1 / -1;
    background: var(--bg-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--card-radius);
    padding: 32px 24px;
    text-align: center;
    color: var(--text-secondary, var(--text-primary));
}

.scopes-tab-empty-icon {
    font-size: 36px;
    margin-bottom: 12px;
    opacity: 0.4;
}

.scopes-tab-empty-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.scopes-tab-empty-hint {
    font-size: 13px;
    opacity: 0.7;
}

/* ---- Settings tab (project + scope) ---- */

.settings-tab {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.settings-section {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--card-radius);
    padding: var(--card-pad);
}

.settings-section-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.settings-section.settings-danger {
    border-color: #fecaca;
    background: #fff5f5;
}

.settings-section.settings-danger .settings-section-title {
    color: #b91c1c;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-row-text {
    flex: 1;
    min-width: 0;
}

.settings-row-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    margin-bottom: 4px;
}

.settings-row-hint {
    font-size: 13px;
    color: var(--text-secondary, var(--text-primary));
    opacity: 0.7;
}

/* Gantt tab wrapper — let the embedded chart take the full panel. */

.gantt-tab {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* ---- Audit placeholder ---- */

.project-tab-placeholder {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-secondary, var(--text-primary));
}

.project-tab-placeholder-icon {
    font-size: 44px;
    margin-bottom: 16px;
    opacity: 0.4;
}

.project-tab-placeholder-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.project-tab-placeholder-hint {
    font-size: 13px;
    opacity: 0.7;
    max-width: 420px;
    margin: 0 auto;
}

/* Milestone Screen (single-milestone deep dive) */

.milestone-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.milestone-screen-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border);
}

.milestone-screen-header h1 {
    margin: 0;
    font-size: 18px;
}

.milestone-screen-header .muted {
    opacity: 0.7;
    font-size: 13px;
}

.tabs {
    display: flex;
    gap: 4px;
    margin-left: 12px;
}

.tabs button {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 6px 10px;
    cursor: pointer;
    color: inherit;
}

.tabs button.active {
    font-weight: 600;
    border-bottom: 2px solid var(--accent);
}

.milestone-screen-content {
    padding: 12px;
    flex: 1;
    overflow: auto;
}

.milestone-audit-tab table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.milestone-audit-tab th,
.milestone-audit-tab td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.form-error {
    color: var(--error, #c0392b);
    font-size: 13px;
    margin-top: 8px;
}

.btn-danger {
    background: #c0392b;
    color: white;
}

.btn-danger:hover {
    background: #a83224;
}

/* ============================================================================
   Dependencies & blocked state
   ============================================================================ */

/* Wrappers used when the Deps tab is rendered inside TaskModal or
   MilestoneScreen. They mirror .task-modal-content .modal-body so the inner
   sections breathe instead of hugging the edges. */
.task-modal-deps-tab,
.milestone-deps-tab {
    padding: 18px 22px;
    overflow-y: auto;
}

.deps-section { margin-top: 0; }
.deps-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}
.deps-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.deps-subsection { margin-top: 14px; }
.deps-subsection-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.deps-subsection-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #9ca3af);
    margin: 0;
}
.deps-add-btn-small {
    background: transparent;
    border: 1px dashed var(--border-docs);
    color: var(--text-secondary);
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.4;
    transition: border-color 120ms, color 120ms, background 120ms;
    white-space: nowrap;
}
.deps-add-btn-small:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(99, 102, 241, 0.06);
}
.deps-list { list-style: none; padding: 0; margin: 0; }
.deps-list-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-docs);
    margin-bottom: 6px;
    background: var(--bg-secondary, #fff);
}
.deps-list-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
/* Give the name/path room: it takes the rest of row 1 (icon + text + actions),
   and the scheduling controls wrap to a full-width second line below. */
.deps-list-item .deps-list-text { flex: 1 1 140px; }
.deps-list-item .deps-list-sched {
    flex: 1 0 100%;
    order: 10;             /* push to the wrapped second line */
    padding-top: 6px;
    border-top: 1px dashed var(--border-docs);
}

/* Scheduling controls (dependency type + lag) inside a dep row. */
.deps-list-sched {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.deps-kind-select {
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 6px;
    border: 1px solid var(--border-docs);
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
    max-width: 130px;
}
.deps-lag-input {
    width: 48px;
    font-size: 12px;
    padding: 3px 4px;
    border-radius: 6px;
    border: 1px solid var(--border-docs);
    background: var(--bg-primary, #fff);
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.deps-lag-unit { font-size: 11px; color: var(--text-tertiary, #9ca3af); }
.deps-list-sched-readonly { gap: 6px; }
.deps-kind-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-hover, rgba(0,0,0,0.05));
    white-space: nowrap;
}
.deps-lag-label {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    font-variant-numeric: tabular-nums;
}
.deps-list-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.deps-list-name-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.deps-list-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #9ca3af);
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-hover, rgba(0,0,0,0.05));
}
.deps-list-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.deps-list-path {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deps-list-action,
.deps-list-remove {
    background: transparent;
    border: none;
    color: var(--text-tertiary, #9ca3af);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 1;
    border-radius: 4px;
    flex-shrink: 0;
}
.deps-list-action:hover { color: var(--accent); background: var(--bg-hover, rgba(0,0,0,0.05)); }
.deps-list-remove:hover { color: var(--danger, #ef4444); background: var(--bg-hover, rgba(0,0,0,0.05)); }
.deps-empty {
    color: var(--text-tertiary, #9ca3af);
    font-style: italic;
    font-size: 13px;
    padding: 6px 0;
}

/* ---- Add-dependency picker modal ----
   The component renders a `.modal-overlay` + `.modal-content.deps-picker-modal`
   so it inherits the same overlay positioning and panel chrome as every other
   modal in the app. The local rules below just tighten the panel width and
   space the inner sections. */
.deps-picker-modal {
    width: min(520px, 92vw);
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.deps-picker-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-docs);
}
.deps-picker-toggle {
    display: flex;
    gap: 6px;
    padding: 12px 20px 0;
}
.deps-picker-toggle .picker-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-docs);
    background: var(--bg-secondary, #fff);
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
}
.deps-picker-toggle .picker-tab:hover { background: var(--bg-hover, #f3f4f6); }
.deps-picker-toggle .picker-tab.active {
    background: var(--accent, #3b82f6);
    color: #fff;
    border-color: var(--accent, #3b82f6);
}
.deps-picker-search {
    width: calc(100% - 40px);
    margin: 12px 20px 8px;
    padding: 9px 12px;
    border: 1px solid var(--border-docs);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-secondary, #fff);
}
.deps-picker-search:focus {
    outline: none;
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.deps-picker-list {
    list-style: none;
    padding: 4px 12px 16px;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}
.deps-picker-item { padding: 0; margin: 0; }
.deps-picker-item button {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}
.deps-picker-item button:hover { background: var(--bg-hover, #f3f4f6); }
.deps-picker-item.disabled button { opacity: .45; cursor: not-allowed; }
.deps-picker-item.disabled button:hover { background: transparent; }
.deps-picker-item .picker-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.deps-picker-item .picker-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.deps-picker-item .picker-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.deps-picker-item .picker-secondary {
    font-size: 11px;
    color: var(--text-tertiary, #9ca3af);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Flat list (search results). */
.deps-picker-flat {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Empty state when there's nothing to browse/search. */
.deps-picker-empty {
    padding: 16px 4px;
    color: var(--text-tertiary, #9ca3af);
    font-style: italic;
    font-size: 13px;
    text-align: center;
}

/* Collapsible tree (browse mode). Uses native <details>/<summary>. */
.deps-picker-tree { display: flex; flex-direction: column; gap: 2px; }

.deps-picker-project,
.deps-picker-scope,
.deps-picker-bucket { margin: 0; }

.deps-picker-project-summary,
.deps-picker-scope-summary,
.deps-picker-bucket-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
    padding: 6px 8px;
}
.deps-picker-project-summary::-webkit-details-marker,
.deps-picker-scope-summary::-webkit-details-marker,
.deps-picker-bucket-summary::-webkit-details-marker { display: none; }

/* Triangle indicators built from the <details> open state. */
.deps-picker-project-summary::before,
.deps-picker-scope-summary::before,
.deps-picker-bucket-summary::before {
    content: "▸";
    font-size: 10px;
    color: var(--text-tertiary, #9ca3af);
    width: 12px;
    transition: transform 100ms;
    flex-shrink: 0;
}
.deps-picker-project[open] > .deps-picker-project-summary::before,
.deps-picker-scope[open]   > .deps-picker-scope-summary::before,
.deps-picker-bucket[open]  > .deps-picker-bucket-summary::before {
    transform: rotate(90deg);
}

.deps-picker-project-summary:hover,
.deps-picker-scope-summary:hover,
.deps-picker-bucket-summary:hover {
    background: var(--bg-hover, #f3f4f6);
}

.deps-picker-project-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.deps-picker-scope {
    /* indent under the project */
    margin-left: 12px;
}
.deps-picker-scope-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, var(--text-primary));
}
.deps-picker-bucket {
    /* indent under the scope */
    margin-left: 12px;
}
.deps-picker-bucket-summary {
    padding: 4px 8px;
}
.deps-picker-bucket-icon { font-size: 12px; line-height: 1; }
.deps-picker-bucket-name {
    font-size: 12px;
    color: var(--text-secondary, var(--text-primary));
}
.deps-picker-bucket-summary.backlog .deps-picker-bucket-name {
    color: var(--text-tertiary, #9ca3af);
    font-style: italic;
}

.deps-picker-bucket-list {
    list-style: none;
    /* indent leaves under the bucket header */
    padding: 0 0 0 22px;
    margin: 0 0 4px 0;
}
/* On the Milestones tab, the bucket is invisible — leaves come directly
   under the scope, so give them the same indent as if there were a bucket. */
.deps-picker-scope > .deps-picker-bucket-list {
    padding-left: 22px;
}

.block-status-section { margin-top: 1.5rem; }
.block-status-section .block-section-header {
    margin-bottom: 10px;
}
.block-status-section .block-section-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Badges: block-display so dependency-derived and manual stack vertically,
   consistent rectangular shape (small radius), colored left border. */
.block-badge {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    margin: 0 0 6px 0;
    border-left: 3px solid transparent;
}
.block-badge-manual {
    background: #fee2e2;
    color: #991b1b;
    border-left-color: #dc2626;
}
.block-badge-dep {
    background: #fef3c7;
    color: #92400e;
    border-left-color: #d97706;
}
.block-reason { font-size: 12px; margin-top: 4px; opacity: 0.85; }
.block-since  { font-size: 11px; margin-top: 2px; opacity: 0.6; }
.block-meta   {
    font-size: 11px;
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.block-by {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.block-by-label {
    opacity: 0.7;
}
.block-by-avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.4);
}
.block-by-avatar-placeholder {
    background: rgba(255, 255, 255, 0.4);
    color: inherit;
    font-size: 9px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}
.block-by-name {
    font-weight: 600;
}
.block-since-text {
    opacity: 0.6;
}

/* ============================================================================
   Open-deps modal — shown when user tries to mark a task/milestone as done
   but it still has unresolved upstream dependencies.
   ============================================================================ */
.open-deps-modal {
    width: min(520px, 92vw);
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}
.open-deps-modal .modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-docs);
}
.open-deps-modal .modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}
.open-deps-modal .modal-actions {
    padding: 12px 20px;
    border-top: 1px solid var(--border-docs);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.open-deps-intro {
    margin: 0 0 12px 0;
    color: var(--text-secondary);
    font-size: 13px;
}
.open-deps-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.open-deps-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-docs);
    border-left: 3px solid #d97706;
    border-radius: 6px;
    margin-bottom: 6px;
    background: var(--bg-secondary, #fff);
}
.open-deps-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.open-deps-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.open-deps-type {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-tertiary, #9ca3af);
}
.open-deps-name {
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.open-deps-go-btn {
    background: transparent;
    border: 1px solid var(--border-docs);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 120ms, color 120ms, background 120ms;
}
.open-deps-go-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(99, 102, 241, 0.06);
}

/* ============================================================================
   Generic right-click context menu
   ============================================================================ */
.context-menu-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    /* Transparent — only catches clicks for outside-close. */
}
.context-menu {
    position: absolute;
    min-width: 180px;
    background: var(--bg-secondary, #fff);
    border: 1px solid var(--border-docs);
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    padding: 4px;
    z-index: 9001;
    user-select: none;
}
.context-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
}
.context-menu-item:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.05));
}
.context-menu-item.disabled {
    color: var(--text-tertiary, #9ca3af);
    cursor: not-allowed;
}
.context-menu-item.disabled:hover {
    background: transparent;
}
.context-menu-item.danger {
    color: var(--danger, #dc2626);
}
.context-menu-item.danger:hover {
    background: rgba(220, 38, 38, 0.08);
}
.context-menu-icon {
    font-size: 13px;
    line-height: 1;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.context-menu-label {
    flex: 1;
    white-space: nowrap;
}

.block-badge-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.block-badge-actions {
    display: flex;
    gap: 6px;
}
.block-badge-action-btn {
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid currentColor;
    color: inherit;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.4;
    opacity: 0.85;
    transition: opacity 120ms, background 120ms;
}
.block-badge-action-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.7);
}
.block-edit-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 80px;
    padding: 9px 12px;
    border: 1px solid var(--border-docs);
    border-radius: 8px;
    font: inherit;
    font-size: 14px;
}
.block-edit-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.block-error { color: #b91c1c; font-size: 12px; margin-top: 4px; }

.task-row-block-badge,
.milestone-block-badge { margin-right: .35rem; font-size: .9rem; cursor: help; }
.task-row-block-badge.manual,
.milestone-block-badge.manual { color: #dc2626; }
.task-row-block-badge.dep,
.milestone-block-badge.dep { color: #d97706; }

/* "Bloqueia outros" indicator — appears next to the lock when an item has
   inbound dependencies (other items depend on it). */
.task-row-blocker-badge {
    margin-right: .35rem;
    font-size: .9rem;
    cursor: help;
    filter: saturate(0.85);
}

/* Gantt row icons sit absolutely positioned to the right of the bar/diamond,
   following the bar's right edge live during drag. */
.gantt-row-icons {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 2px;
    pointer-events: auto;
    z-index: 2;
    line-height: 1;
    font-size: 13px;
}
.gantt-row-icons .task-row-block-badge,
.gantt-row-icons .task-row-blocker-badge {
    margin: 0;
    padding: 0 2px;
}

.gantt-deps-overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
.gantt-dep-arrow { fill: none; stroke: #9ca3af; stroke-width: 1.5;transition: stroke 0.2s ease-out, stroke-width 0.2s ease-out; }
.gantt-dep-arrow-blocking { stroke: #dc2626; }
.gantt-dep-arrow-hover { stroke: var(--accent, #6366f1); stroke-width: 2.5; }
.gantt-dep-arrowhead-fill { fill: #9ca3af; stroke: none; }
.gantt-too-many-deps { fill: #6b7280; font-size: 12px; }
.gantt-item-blocked {
    background-image: repeating-linear-gradient(
        45deg, rgba(220, 38, 38, .12) 0px, rgba(220, 38, 38, .12) 4px,
        transparent 4px, transparent 8px
    );
}

.attention-panel { background: #fff; border: 1px solid #e5e7eb; border-radius: var(--card-radius); padding: 1rem; margin-bottom: 1rem; }
.attention-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.attention-header h3 { margin: 0; font-size: 1rem; }
.attention-count { background: #fef3c7; color: #92400e; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.attention-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.attention-card { padding: .75rem; border: 1px solid #f3f4f6; border-left: 4px solid #f59e0b; border-radius: var(--card-radius); background: #fffbeb; }
.attention-card-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .25rem; }
.attention-name { flex: 1; font-weight: 600; color: #111827; }
.attention-impact { font-size: .75rem; color: #6b7280; }
.attention-reason { font-size: .85rem; color: #374151; margin: .25rem 0; }
.attention-meta { font-size: .7rem; color: #9ca3af; }

/* ============================================================================
   Highlight animation for "Ir para" navigation
   Applied to a task row when reached from a "Ir para" click in the deps section.
   ============================================================================ */
@keyframes kyst-task-flash {
    0%   { background-color: rgba(99, 102, 241, 0.0); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0); }
    15%  { background-color: rgba(99, 102, 241, 0.30); box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25); }
    50%  { background-color: rgba(99, 102, 241, 0.15); box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18); }
    100% { background-color: rgba(99, 102, 241, 0.0); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.0); }
}
.highlight-task {
    animation: kyst-task-flash 1.8s ease-out;
    border-radius: 6px;
}
.attention-empty { color: #9ca3af; font-style: italic; }