/* wbs-panel.css */
/* WBS Panel: collapsible sidebar, tree, drag&drop */

/* ==========================================
   WBS PANEL - Collapsible Sidebar
   ========================================== */

/* WBS Toggle button in action bar */
.wbs-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wbs-toggle-btn:hover {
    background-color: var(--bg-hover);
    color: var(--brand-primary);
}

.wbs-toggle-btn.active {
    color: var(--brand-primary);
}

.wbs-toggle-btn .wbs-toggle-icon {
    font-size: 20px;
    transition: transform 0.2s ease;
}

.wbs-toggle-btn.active .wbs-toggle-icon {
    transform: rotate(180deg);
}

.wbs-toggle-text {
    font-weight: var(--font-weight-semibold);
}

/* Page content wrapper - flex container for WBS panel + right content */
.page-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* Right content - controls + table area */
.right-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    overflow: visible;
}

/* Module controls row inside right-content - override sticky from header.css */
.right-content .module-controls-row {
    flex-shrink: 0;
    position: relative;
    top: 0;
}

/* Main inside right-content */
.right-content main {
    flex: 1;
    overflow: hidden;
    padding: 0 1.5rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* DEPRECATED: Old main-content-wrapper for backwards compatibility */
.main-content-wrapper {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 0;
}

/* WBS Panel */
.wbs-panel {
    width: 360px;
    min-width: 360px;
    max-width: 360px;
    height: 100%;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    transition:
        width 0.3s ease,
        min-width 0.3s ease,
        margin-left 0.3s ease,
        opacity 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

/* Reduce panel height when task bottom bar is visible */
body.has-task-bottom-bar .wbs-panel {
    height: calc(100% - 240px);
}

.wbs-panel.collapsed {
    width: 0;
    min-width: 0;
    margin-left: -1px; /* Hide border */
    opacity: 0;
    pointer-events: none;
}

.wbs-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 0.75rem;
    box-sizing: border-box;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.wbs-open-frame-btn {
    display: flex;
    align-items: center;
    padding: 0.25rem;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    transition: all var(--transition-base);
}

.wbs-open-frame-btn:hover {
    background: var(--bg-hover);
    color: var(--brand-primary);
}

.wbs-open-frame-btn .wbs-frame-icon {
    font-size: 24px;
}

.wbs-header-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* WBS header buttons - match module-controls-row button styles */
.wbs-panel-header .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    white-space: nowrap;
}

.wbs-panel-header .btn-primary {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
    border-color: var(--brand-primary);
}

.wbs-panel-header .btn-primary:hover {
    background-color: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
}

.wbs-panel-header .btn .material-icons {
    font-size: 18px;
}

.wbs-panel-header .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wbs-panel-header .btn-icon:hover {
    background: var(--bg-hover);
    color: var(--brand-primary);
}

.wbs-panel-header .btn-icon.has-folder,
.wbs-panel-header .btn-icon.has-folder:hover,
.wbs-panel-header .btn-icon.has-folder .material-icons {
    color: #22c55e !important;
}

.wbs-panel-header .btn-icon .material-icons {
    font-size: 20px;
}

.wbs-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.wbs-header-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.wbs-header-btn .material-icons {
    font-size: 20px;
}

/* Open Frame button row in WBS panel content */
.wbs-open-frame-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 4px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: color var(--transition-base);
    margin-bottom: 8px;
}

.wbs-open-frame-row:hover {
    color: var(--brand-primary);
}

/* Frame icon - outline style matching folder icons */
.wbs-frame-icon {
    font-family: 'Material Icons Outlined', 'Material Icons';
    font-size: 18px;
    color: var(--warning-color);
    flex-shrink: 0;
}

.wbs-open-frame-text {
    display: none;
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* WBS Tree container */
.wbs-tree-container {
    flex: 1;
    overflow: visible; /* Скролл только на .wbs-panel-content, иначе SVG линии отрываются */
    padding: 4px 0;
    position: relative;
}

/* SVG connector lines */
.wbs-connector-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
    opacity: 1;
    transition: opacity 0.12s ease-out;
}

.wbs-connector-lines.hidden {
    opacity: 0;
}

.wbs-connector-path {
    fill: none;
    stroke: var(--border-color);
    stroke-width: 1.5;
}

/* Badge connector lines - slightly thinner */
.wbs-connector-path.wbs-badge-connector {
    stroke-width: 1;
    opacity: 0.7;
}

/* Tag connector lines */
.wbs-connector-path.wbs-tag-connector {
    stroke-width: 1;
    opacity: 0.8;
}

/* Ensure tree content is above lines */
.wbs-tree {
    position: relative;
    z-index: 1;
}

/* Action buttons row: Add Folder + Tag Manager */
.wbs-action-buttons-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
}

/* Add Folder button */
.wbs-add-folder-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    padding: 6px 4px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition:
        color var(--transition-base),
        background var(--transition-base);
}

.wbs-add-folder-row:hover {
    color: var(--brand-primary);
    background: var(--bg-hover);
}

.wbs-add-folder-row .material-icons {
    font-size: 18px;
}

.wbs-add-folder-text {
    flex: 1;
    text-align: left;
}

.wbs-panel-title {
    flex: 1;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    white-space: nowrap;
}

.wbs-panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-base);
}

.wbs-panel-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.wbs-panel-close .material-icons {
    font-size: 20px;
}

.wbs-panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.75rem;
    position: relative; /* For SVG connector lines positioning */
}

/* Placeholder for empty panel */
.wbs-tree-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--text-tertiary);
    text-align: center;
}

.wbs-tree-placeholder .material-icons {
    font-size: 48px;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.wbs-tree-placeholder p {
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Table wrapper adjusts when panel is open */
.main-content-wrapper .table-wrapper,
.right-content .table-wrapper {
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

/* ==========================================
   WBS Tree Styles
   ========================================== */

.wbs-tree {
    padding: 0;
    margin: 0;
}

/* Node container */
.wbs-node {
    margin: 0;
    user-select: none;
}

.wbs-node-folder {
    margin-bottom: 12px;
}

/* Node content row */
.wbs-node-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: background-color var(--transition-fast);
    position: relative;
}

/* Folder node - badge-like styling */
.wbs-node-folder > .wbs-node-content {
    width: fit-content;
    padding: 4px 8px 4px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 9999px;
    line-height: 1;
}

.wbs-node-folder > .wbs-node-content:hover {
    background: var(--bg-hover);
}

/* Active filter state for folder badge */
.wbs-node-folder.active > .wbs-node-content {
    background: var(--primary-light, rgba(59, 130, 246, 0.15));
    box-shadow: 0 0 0 1px var(--primary-color);
    border-color: var(--primary-color);
}

.wbs-node-folder.active .wbs-node-icon.material-icons {
    color: var(--primary-color) !important;
}

.wbs-node-folder.active .wbs-node-name {
    color: var(--primary-color);
    font-weight: 500;
}

.wbs-node-content:hover .wbs-node-actions {
    opacity: 1;
}

/* Folder arrow (expand/collapse) */
.wbs-folder-arrow {
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-tertiary);
    transition: transform 0.2s ease;
}

.wbs-folder-arrow.expanded {
    transform: rotate(90deg);
}

.wbs-folder-arrow:hover {
    color: var(--text-primary);
}

/* Root node - special styling */
.wbs-node-root > .wbs-node-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    cursor: default;
}

.wbs-node-root > .wbs-node-content:hover {
    background: var(--bg-secondary);
}

/* Toggle button (expand/collapse) - HIDDEN, using folder icon instead */
.wbs-node-toggle {
    display: none;
}

.wbs-node-toggle.invisible {
    visibility: hidden;
}

/* Toggle placeholder for leaf nodes */
.wbs-node-toggle-placeholder {
    display: none;
}

/* Node icon (folder) - filled style to match collection badge icons */
.wbs-node-folder .wbs-node-icon.material-icons {
    font-size: 14px;
    color: #6b7280;
    flex-shrink: 0;
}

.wbs-node-root .wbs-node-icon.material-icons {
    font-size: 12px;
    color: var(--brand-primary);
    flex-shrink: 0;
}

/* Node name */
.wbs-node-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Name input for editing */
.wbs-node-name-input {
    flex: 1;
    font-size: var(--font-size-sm);
    padding: 2px 6px;
    border: 1px solid var(--brand-primary);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    outline: none;
    min-width: 0;
}

/* Node actions (rename, delete) */
.wbs-node-actions {
    display: flex;
    gap: 6px;
    margin-left: 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.wbs-node-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.wbs-node-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.wbs-node-action-btn.delete:hover {
    background: var(--error-light);
    color: var(--error-color);
}

.wbs-node-action-btn .material-icons {
    font-size: 16px;
}

/* Children container with animation */
.wbs-children {
    margin-left: 20px;
    padding-left: 8px;
    border-left: none;
    transition: height 0.2s ease-out;
}

.wbs-children.collapsed {
    display: none;
}

/* Root children - no border */
.wbs-node-root > .wbs-children {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 8px;
}

/* ==========================================
   WBS Drag & Drop Indicators
   ========================================== */

/* Dragging state */
.wbs-node.dragging {
    opacity: 0.5;
}

.wbs-node.dragging > .wbs-node-content {
    background: var(--bg-secondary);
}

/* Drop indicators */
.wbs-drop-before,
.wbs-drop-after {
    height: 2px;
    background: var(--brand-primary);
    border-radius: 1px;
    margin: 2px 8px;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.wbs-drop-before.active,
.wbs-drop-after.active {
    opacity: 1;
}

/* Drop inside indicator */
.wbs-node-content.drop-inside {
    background: var(--brand-primary-light, rgba(99, 102, 241, 0.1));
    outline: 2px dashed var(--brand-primary);
    outline-offset: -2px;
}

/* ==========================================
   WBS Add Folder Button
   ========================================== */

.wbs-add-folder-container {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.wbs-add-folder-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.wbs-add-folder-btn:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.wbs-add-folder-btn .material-icons {
    font-size: 18px;
}

/* ==========================================
   WBS Collection Picker Dropdown
   ========================================== */

.wbs-collection-picker {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    max-width: 250px;
    overflow: hidden;
}

.wbs-collection-picker-header {
    padding: 8px 12px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.wbs-collection-picker-list {
    max-height: 200px;
    overflow-y: auto;
}

.wbs-collection-picker-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.wbs-collection-picker-item:hover {
    background: var(--bg-hover);
}

.wbs-collection-picker-item.attached {
    background: var(--brand-primary-alpha, rgba(99, 102, 241, 0.1));
}

.wbs-collection-picker-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wbs-collection-picker-name {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbs-collection-picker-check {
    font-size: 16px;
    color: var(--brand-primary);
}

/* ==========================================
   WBS Collection Badges (under folders)
   ========================================== */

.wbs-collection-badges {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-left: 46px; /* Same indent as children folders (26px + 20px) */
    margin-top: 12px;
    margin-bottom: 8px;
    transition: height 0.2s ease-out;
}

/* Collapsed state - hide badges when folder is collapsed */
.wbs-collection-badges.collapsed {
    display: none;
}

/* Root-level badges (activities without folders) */
.wbs-root-badges {
    margin-left: 26px;
    margin-top: 4px;
    margin-bottom: 8px;
}

.wbs-root-badges:empty {
    display: none;
}

.wbs-collection-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 8px 4px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

.wbs-collection-badge:hover {
    background: var(--bg-hover);
}

.wbs-collection-badge-arrow.material-icons {
    font-size: 14px;
    flex-shrink: 0;
    margin-right: -2px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.wbs-collection-badge-arrow.expanded {
    transform: rotate(90deg);
}

.wbs-collection-badge-icon.material-icons {
    font-size: 12px;
    flex-shrink: 0;
}

.wbs-collection-badge-name {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wbs-collection-badge-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 2px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: all var(--transition-fast);
}

.wbs-collection-badge:hover .wbs-collection-badge-remove {
    opacity: 1;
}

.wbs-collection-badge-remove:hover {
    background: var(--error-light, rgba(239, 68, 68, 0.1));
    color: var(--error-color);
}

.wbs-collection-badge-remove .material-icons {
    font-size: 12px;
}

/* Collection Badge Group - wraps collection badge and its tag badges */
.wbs-collection-badge-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Tag Badges Container - under collection badge */
.wbs-tag-badges {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 26px; /* Indent relative to collection badge - matches folder indent */
    padding: 4px 0;
    transition: height 0.2s ease-out;
}

.wbs-tag-badges.collapsed {
    display: none;
}

/* Individual Tag Badge */
.wbs-tag-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    padding: 4px 8px 4px 6px;
    background: var(--bg-tertiary, rgba(0, 0, 0, 0.02));
    border-radius: 10px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    line-height: 1;
}

.wbs-tag-badge:hover {
    background: var(--bg-hover);
}

/* Active filter state for badges */
.wbs-collection-badge.active {
    background: var(--primary-light, rgba(59, 130, 246, 0.15));
    box-shadow: 0 0 0 2px var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}

.wbs-collection-badge.active .wbs-collection-badge-icon {
    color: var(--primary-color) !important;
}

.wbs-tag-badge.active {
    background: var(--primary-light, rgba(59, 130, 246, 0.15));
    box-shadow: 0 0 0 2px var(--primary-color);
    color: var(--primary-color);
    font-weight: 500;
}

.wbs-node-folder.drop-target > .wbs-node-content {
    background: var(--success-light, rgba(34, 197, 94, 0.2));
    box-shadow: 0 0 0 2px var(--success-color, #22c55e);
}

.wbs-tag-badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wbs-tag-badge-name {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Remove button for badges inside folders */
.wbs-badge-remove {
    display: none;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    margin-left: 2px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.wbs-badge-remove .material-icons {
    font-size: 12px;
}

.wbs-collection-badge:hover .wbs-badge-remove,
.wbs-tag-badge:hover .wbs-badge-remove {
    display: inline-flex;
}

.wbs-badge-remove:hover {
    background: var(--danger-light, rgba(239, 68, 68, 0.15));
    color: var(--danger-color, #ef4444);
}

/* ==========================================
   WBS Empty State
   ========================================== */

.wbs-empty-children {
    padding: 8px 12px;
    color: var(--text-tertiary);
    font-size: var(--font-size-xs);
    font-style: italic;
}