/* Override themes.css body padding for fish module */
body {
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family);
}

/* Canvas container */
#canvasContainer {
    background-color: var(--bg-primary);
    box-shadow: var(--shadow-sm);
}

/* Light shadow for canvas in dark theme */
[data-theme="dark"] #canvasContainer {
    box-shadow: 0 0px 12px rgba(255, 255, 255, 0.4);
}

/* SVG canvas */
#diagramCanvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: default;
}

/*
 * Скрываем SVG-скругления,
 * если вкладка НЕ активна И НЕ находится под курсором
 */
.module-tabs-row .module-tab:not(.active):not(:hover) .tab-curve-left,
.module-tabs-row .module-tab:not(.active):not(:hover) .tab-curve-right {
    display: none;
}

/* Modal container large variant for diagrams modal */
.modal-container-lg {
    max-width: 900px;
}

/* Diagrams list styles */
.diagram-item {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color var(--transition-base);
}

.diagram-item:hover {
    background-color: var(--bg-hover);
}

.diagram-item-info {
    flex: 1;
}

.diagram-item-title {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-1);
}

.diagram-item-meta {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.diagram-item-actions {
    display: flex;
    gap: var(--space-2);
}

.empty-state {
    text-align: center;
    padding: var(--space-8) 0;
}

.empty-state-icon {
    font-size: 3rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}

.empty-state-text {
    color: var(--text-secondary);
}

.error-state {
    text-align: center;
    padding: var(--space-8) 0;
}

.error-state-icon {
    font-size: 3rem;
    color: var(--danger);
    margin-bottom: var(--space-2);
}

.error-state-text {
    color: var(--danger);
}

.error-state-detail {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

/* Добавляем стиль для "выбранной" кости.
    Она будет становиться красной.
*/
.bone-path.selected {
    fill: var(--color-error);
}

/* --- Стили для "Костей" (Перья с заливкой) --- */
.bone-path {
    fill: var(--color-info);
    stroke: none; /* Без обводки */
    transition: all 0.1s ease-in-out; /* Добавляем плавный переход */
    /* console.log("DEBUG: Bone path style applied"); */
}

/* --- Стили для прямоугольника выделения --- */
.selection-box-strict {
    pointer-events: none;
    fill: var(--color-info);
    fill-opacity: 0.1;
    stroke: var(--color-info);
    stroke-opacity: 0.8;
}

.selection-box-flexible {
    pointer-events: none;
    fill: var(--color-info);
    fill-opacity: 0.1;
    stroke: var(--color-warning);
    stroke-opacity: 0.8;
}

/* --- Стили для Точек (Root, Process, Outcome) --- */
.bone-point {
    stroke-width: 2px;
    cursor: move; /* Курсор "перемещение" */
    transition: all 0.1s ease-in-out;
    /* console.log("DEBUG: Bone point style applied"); */
}

.bone-point:hover {
    fill: var(--text-inverse);
    r: 8px; /* Немного увеличиваем радиус */
}

/* 1. Стиль для Root (Синий) */
.bone-point.root-point {
    fill: var(--color-info);
    stroke: var(--color-info);
}

/* 2. Стиль для Process (Оранжевый) */
.bone-point.process-point {
    fill: var(--color-warning);
    stroke: var(--color-warning);
}

/* 3. Стиль для Outcome (Зеленый) */
.bone-point.outcome-point {
    fill: var(--color-success);
    stroke: var(--color-success);
}

/* Стиль для активной (перетаскиваемой) точки */
.bone-point.active {
    fill: var(--color-error);
    stroke: var(--color-error);
    r: 9px; /* Увеличиваем */
    cursor: move;
}

/* Новый стиль для 'root' точки,
 * когда 'outcome' наводится на нее для соединения.
*/
.bone-point.snap-target.root-point {
    fill: var(--color-success);
    stroke: var(--text-inverse);
    stroke-width: 3px;
    r: 10px; /* Увеличивается */
}

/* Новый стиль для 'outcome' точки,
 * когда 'root' наводится на нее для соединения.
*/
.bone-point.snap-target.outcome-point {
    fill: var(--color-info);
    stroke: var(--text-inverse);
    stroke-width: 3px;
    r: 10px; /* Увеличивается */
}


/*
 * Стиль для SVG-холста, когда включен режим рисования.
 * (Правило 11: Улучшение UI)
 */
#diagramCanvas.drawing-mode {
    cursor: crosshair;
}


/* ======================= ПЛАВАЮЩАЯ ПАНЕЛЬ ======================= */

#floatingToolbar {
    position: fixed;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-2);
    z-index: 50;
}

.floating-toolbar-drag {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.floating-toolbar-drag:active {
    cursor: grabbing;
}

.floating-toolbar-drag:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.floating-toolbar-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.floating-toolbar-close-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.floating-toolbar-close-btn .material-icons {
    font-size: 18px;
}

.floating-toolbar-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: nowrap;
}

.floating-toolbar-content .btn {
    margin: 0;
}

/* Все кнопки с иконками - делаем квадратными */
.floating-toolbar-content .btn {
    min-width: 32px;
    width: 32px;
    height: 32px;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Размер иконок в кнопках */
.floating-toolbar-content .btn .material-icons {
    font-size: 20px;
}

.floating-toolbar-divider {
    width: 2px;
    height: 28px;
    background-color: var(--border-secondary);
    margin: 0 var(--space-2);
    flex-shrink: 0;
    border-radius: 1px;
}

.floating-toolbar-label {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    white-space: nowrap;
    margin: 0;
}

.rotation-input {
    width: 4rem;
    padding: var(--space-1) var(--space-2);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
}

.rotation-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ======================= WIDTH EDITOR PANEL ======================= */

#widthEditorPanel {
    position: fixed;
    width: 340px;
    max-height: 80vh;
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: 50;
    display: flex;
    flex-direction: column;
}

#widthEditorPanel.hidden {
    display: none;
}

.width-editor-header {
    background-color: transparent;
    padding: var(--space-2);
    margin: var(--space-2);
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
}

.width-editor-header:active {
    cursor: grabbing;
}

.width-editor-drag {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: var(--font-size-base);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.width-editor-drag:active {
    cursor: grabbing;
}

.width-editor-drag:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.width-editor-title {
    flex: 1;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    margin: 0;
}

.width-editor-save-btn,
.width-editor-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.width-editor-save-btn:hover {
    background-color: var(--brand-primary);
    color: white;
}

.width-editor-close-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.width-editor-save-btn .material-icons,
.width-editor-close-btn .material-icons {
    font-size: 18px;
}

.width-editor-content {
    /* No padding - parent .sidebar-section-body already has padding */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

.width-editor-controls-row {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.width-editor-controls-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.width-profile-container {
    display: flex;
    flex-direction: row;
    gap: var(--space-3);
    align-items: flex-start;
}

.width-editor-chart-container {
    background-color: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary);
    padding: var(--space-2);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.width-input-field {
    width: 4rem;
    padding: 0 var(--space-1);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: center;
    height: 2rem;
}

.width-input-field::-webkit-outer-spin-button,
.width-input-field::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.width-input-field[type=number] {
    -moz-appearance: textfield;
}

/* ======================= BONE INFO POPOVER ======================= */

.bone-popover {
    position: fixed;
    z-index: 1000;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: var(--space-3);
    min-width: 150px;
    pointer-events: auto;
}

.bone-popover.hidden {
    display: none;
}

.bone-popover-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bone-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.bone-popover-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.bone-popover-close,
.bone-popover-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-base), color var(--transition-base);
}

.bone-popover-close:hover,
.bone-popover-edit:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.bone-popover-close .material-icons,
.bone-popover-edit .material-icons {
    font-size: 18px;
}

.bone-popover-edit.active {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
}

.bone-popover-edit.active:hover {
    background-color: var(--brand-primary-hover);
}

/* ======================= CENTER VIEW BUTTON (CIRCULAR IN FOOTER) ======================= */

/* Canvas Navigation Controls Container */
.canvas-navigation-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Canvas Control Button (Grid, Center View, etc.) */
.canvas-control-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.canvas-control-btn:hover {
    background-color: var(--bg-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.canvas-control-btn:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm);
}

.canvas-control-btn.active {
    background-color: var(--brand-primary);
    color: var(--text-inverse);
}

.canvas-control-btn.active:hover {
    background-color: var(--brand-primary-hover);
}

.canvas-control-btn .material-icons {
    font-size: 24px;
}

/* Legacy class support */
.center-view-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-base);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
}

.center-view-btn:hover {
    background-color: var(--bg-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

.center-view-btn:active {
    transform: scale(0.98);
    box-shadow: var(--shadow-sm);
}

/* Context Menu Styles */
.context-menu {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    padding: var(--space-1) 0;
    min-width: 150px;
}

.context-menu-item {
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color var(--transition-fast);
    color: var(--text-primary);
}

.context-menu-item:hover {
    background-color: var(--bg-hover);
}

.context-menu-item .material-icons {
    margin-right: var(--space-2);
    color: var(--text-secondary);
}

/* Drawing hints on canvas - use CSS variables for SVG elements */
.drawing-hint-text {
    fill: var(--text-primary);
    user-select: none;
    pointer-events: none;
}

.rubber-band-line {
    stroke: var(--text-tertiary);
    pointer-events: none;
}

.first-click-marker {
    fill: var(--color-error);
    stroke: var(--bg-primary);
    stroke-width: 2px;
    opacity: 0.7;
    pointer-events: none;
}

/* Asymmetry editor graph elements */
.asymmetry-grid-line {
    stroke: var(--border-primary);
}

.asymmetry-grid-text {
    fill: var(--text-tertiary);
}

.asymmetry-curve-path {
    stroke: var(--color-warning);
    fill: none;
}

.asymmetry-circle {
    fill: var(--color-warning);
    stroke: var(--bg-secondary);
}

.asymmetry-center-line {
    stroke: var(--border-secondary);
}

/* Mixed value fields (for multiselect with different values) */
.mixed-value {
    border-color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.05) !important;
}

.mixed-value::placeholder {
    color: #ef4444;
    opacity: 0.7;
}

/* ======================= SIDEBAR TOGGLE BUTTON - Universal Styles ======================= */

/* Outer button wrapper - transparent, positioned absolutely */
.btn-sidebar-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Inner button container - semi-circular with background */
.btn-sidebar-toggle-inner {
    padding: var(--space-2);
    background-color: var(--bg-tertiary);
    transition: background-color 150ms ease-in-out,
                box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 150ms ease-in-out;
}

/* Hover state */
.btn-sidebar-toggle:hover .btn-sidebar-toggle-inner {
    background-color: var(--bg-hover);
    transform: scale(1.05);
    box-shadow: var(--shadow-md);
}

/* Dark theme - lighter on hover */
[data-theme="dark"] .btn-sidebar-toggle:hover .btn-sidebar-toggle-inner {
    background-color: var(--border-secondary);
}

/* Icon rotation animation */
.btn-sidebar-toggle-icon {
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon size */
.icon-md {
    width: 1.5rem; /* 24px */
    height: 1.5rem;
    pointer-events: none;
}

/* ======================= RIGHT SIDEBAR PANEL ======================= */

/* Main container for sidebar management */
.fish-main-container {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Right sidebar toggle button - positioned on the right */
.right-sidebar-toggle-position {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 60;
    transition: right 300ms cubic-bezier(0.4, 0, 0.2, 1),
                transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mirror the button inner for right side - rounded on left */
.right-sidebar-toggle-position .btn-sidebar-toggle-inner {
    border-top-left-radius: 9999px;
    border-bottom-left-radius: 9999px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* When sidebar is collapsed, move button to edge */
.fish-main-container.right-sidebar-collapsed .right-sidebar-toggle-position {
    right: -1px;
    transform: translateY(-50%) scale(1.1);
}

/* Icon rotation for collapsed state */
.fish-main-container.right-sidebar-collapsed .right-sidebar-toggle-position .btn-sidebar-toggle-icon {
    transform: rotate(180deg);
}

/* Right sidebar panel */
.right-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    width: 340px;
    background-color: var(--bg-secondary);
    border-left: 1px solid var(--border-primary);
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* No scroll on sidebar itself - sections handle their own scrolling */
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
    /* Height set dynamically by JS to match canvas height */
}

/* Collapsed state */
.fish-main-container.right-sidebar-collapsed .right-sidebar {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

/* Sidebar section */
.sidebar-section {
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0;
}

.sidebar-section:last-child {
    border-bottom: none;
}

/* Sidebar section header (button) */
.sidebar-section-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-tertiary);
    border: none;
    cursor: pointer;
    transition: background-color var(--transition-base);
}

.sidebar-section-header:hover {
    background-color: var(--bg-hover);
}

.sidebar-section-title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.sidebar-section-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform var(--transition-base);
}

/* Rotate icon when section is open */
.sidebar-section.active .sidebar-section-icon {
    transform: rotate(180deg);
}

/* Sidebar section content */
.sidebar-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-section.active .sidebar-section-content {
    max-height: var(--sidebar-content-max-height, 2000px);
    height: var(--sidebar-content-max-height, 2000px);
    display: flex;
    flex-direction: column;
}

.sidebar-section-body {
    padding: var(--space-4);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
}

/* Custom scrollbar for section bodies */
.sidebar-section-body.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--border-secondary) transparent;
}

.sidebar-section-body.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.sidebar-section-body.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-section-body.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--border-secondary);
    border-radius: 3px;
}

.sidebar-section-body.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--border-primary);
}

/* ======================= MOBILE RESPONSIVE STYLES ======================= */

/* Media query for mobile devices (screens < 768px) */
@media (max-width: 767px) {
    /* Width Editor Panel - make responsive on mobile */
    #widthEditorPanel {
        width: calc(100vw - 32px);
        max-width: 340px;
        left: 16px !important;
        right: 16px !important;
        max-height: 70vh;
    }

    /* Floating Toolbar - make responsive on mobile */
    #floatingToolbar {
        max-width: calc(100vw - 32px);
        left: 16px !important;
        right: auto;
    }

    /* Floating toolbar content - allow wrapping on very small screens */
    .floating-toolbar-content {
        flex-wrap: wrap;
        max-width: calc(100vw - 64px);
    }

    /* Modal container - reduce max-width on mobile */
    .modal-container-lg {
        max-width: calc(100vw - 32px);
        margin: 16px;
    }

    /* Diagram item actions - stack vertically on very small screens */
    .diagram-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }

    .diagram-item-actions {
        width: 100%;
        justify-content: flex-end;
    }

    /* Width profile container - stack vertically on mobile */
    .width-profile-container {
        flex-direction: column;
    }

    /* Canvas control buttons - slightly smaller on mobile */
    .canvas-control-btn,
    .center-view-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }

    .canvas-control-btn .material-icons {
        font-size: 22px;
    }
}

/* Media query for very small screens (< 480px, like iPhone SE) */
@media (max-width: 479px) {
    #widthEditorPanel {
        width: calc(100vw - 16px);
        left: 8px !important;
        max-height: 65vh;
    }

    #floatingToolbar {
        max-width: calc(100vw - 16px);
        left: 8px !important;
    }

    .modal-container-lg {
        max-width: calc(100vw - 16px);
        margin: 8px;
    }

    /* Further reduce button sizes for very small screens */
    .canvas-control-btn,
    .center-view-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }

    .canvas-control-btn .material-icons {
        font-size: 20px;
    }
}

/* ============================================
   LAYERS UI STYLES
   ============================================ */

/* Layers list container */
.layers-list {
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Individual layer item */
.layer-item {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    overflow: hidden; /* Prevent content from overflowing */
}

.layer-item:hover {
    background-color: var(--bg-secondary);
    border-color: var(--border-secondary);
}

/* Active layer styling */
.layer-item.active {
    border-color: #10b981; /* Green border for active layer */
    background-color: rgba(16, 185, 129, 0.05); /* Very light green background */
    border-width: 2px; /* Thicker border for emphasis */
}

/* Layer name (editable) */
.layer-name {
    flex: 1;
    min-width: 0; /* Allow shrinking */
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.layer-name:focus {
    background-color: var(--bg-primary);
    border: 1px solid var(--accent-primary);
}

/* System layer (Default Layer) - non-editable */
.layer-name.system {
    cursor: default;
    font-weight: 600;
    color: var(--text-secondary);
}

.layer-name.system:focus {
    background-color: transparent;
    border: none;
}

/* Layer control buttons */
.layer-controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0; /* Prevent shrinking */
}

.layer-control-btn {
    background: transparent;
    border: none;
    padding: 4px; /* Smaller padding for compact layout */
    cursor: pointer;
    color: var(--text-tertiary);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0; /* Prevent shrinking */
}

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

.layer-control-btn .material-icons {
    font-size: 16px; /* Smaller icons to fit better */
}

/* Active button state */
.layer-control-btn.active {
    color: #10b981; /* Green color for active state */
    background-color: rgba(16, 185, 129, 0.1); /* Light green background */
}

.layer-control-btn.active .material-icons {
    font-size: 18px; /* Slightly larger for active state */
    font-weight: 700; /* Make it bolder */
}

.layer-control-btn.active:hover {
    background-color: rgba(16, 185, 129, 0.2); /* Darker green on hover */
}

/* Hidden state button */
.layer-control-btn.hidden {
    color: var(--text-disabled);
}

/* Locked state button */
.layer-control-btn.locked {
    color: var(--warning-primary);
}

/* Delete button */
.layer-control-btn.delete {
    color: var(--danger-primary);
}

.layer-control-btn.delete:hover {
    background-color: var(--danger-bg);
}

/* System layer - hide delete button */
.layer-item.system .layer-control-btn.delete {
    display: none;
}

/* Layer bone count badge */
.layer-bone-count {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary);
    background-color: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: var(--radius-full);
    min-width: 20px;
    text-align: center;
    flex-shrink: 0; /* Prevent shrinking */
}