/* Discraft — Designer Styles */

/* Designer Layout */
.designer-page {
    display: flex;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}

/* Sidebar / Tree */
.designer-sidebar {
    width: var(--sidebar-width);
    background: var(--bg-secondary);
    border-inline-end: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.sidebar-header {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header h3 {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sidebar-actions {
    display: flex;
    gap: var(--space-1);
}

.tree-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) 0;
}

/* Tree Items */
.tree-item {
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-4);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    font-size: var(--text-sm);
    gap: var(--space-2);
    min-height: 32px;
}

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

.tree-item.selected {
    background: var(--accent-subtle);
    color: var(--text-accent);
}

.tree-item.selected::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent);
}

.tree-item {
    position: relative;
}

.tree-icon {
    font-size: var(--text-base);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.tree-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-expand {
    font-size: 10px;
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}
.tree-expand.open {
    transform: rotate(90deg);
}

.tree-children {
    padding-inline-start: var(--space-4);
}

.tree-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    padding-top: var(--space-3);
}

.tree-group-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tree-add-btn {
    font-size: var(--text-xs);
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.tree-add-btn:hover {
    color: var(--text-accent);
    background: var(--accent-subtle);
}

/* Role color dot */
.role-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Channel type icons */
.channel-icon {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
}

/* Main Panel / Editor */
.designer-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.designer-toolbar {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--bg-secondary);
    flex-shrink: 0;
}

.toolbar-start, .toolbar-end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.designer-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
}

/* Editor Panel */
.editor-panel {
    max-width: 640px;
}

.editor-section {
    margin-bottom: var(--space-6);
}

.editor-section-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.editor-field {
    margin-bottom: var(--space-4);
}

.editor-field label {
    margin-bottom: var(--space-2);
}

.editor-field .field-hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* Permission Grid */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
}

.permission-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.permission-name {
    color: var(--text-secondary);
}

/* JSON Editor */
.json-editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.json-toolbar {
    padding: var(--space-2) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
}

.json-editor-wrapper {
    flex: 1;
    overflow: hidden;
}

.json-editor-wrapper .cm-editor {
    height: 100%;
}

.json-editor-wrapper .cm-editor .cm-scroller {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

/* CodeMirror dark theme overrides */
.cm-editor {
    background: var(--bg-primary) !important;
}

.cm-editor .cm-gutters {
    background: var(--bg-secondary) !important;
    border-right: 1px solid var(--border-subtle) !important;
    color: var(--text-muted) !important;
}

.cm-editor .cm-activeLineGutter {
    background: var(--bg-hover) !important;
}

.cm-editor .cm-activeLine {
    background: rgba(88, 101, 242, 0.04) !important;
}

.cm-editor .cm-cursor {
    border-left-color: var(--accent) !important;
}

.cm-editor .cm-selectionBackground {
    background: rgba(88, 101, 242, 0.2) !important;
}

.cm-editor .cm-tooltip {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Empty State */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--text-muted);
    padding: var(--space-8);
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.3;
}

.empty-state p {
    font-size: var(--text-sm);
    max-width: 300px;
    line-height: var(--leading-relaxed);
}

/* Delete button */
.btn-delete {
    background: var(--error-bg);
    color: var(--error);
    border: 1px solid transparent;
}
.btn-delete:hover {
    background: var(--error);
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .designer-page {
        flex-direction: column;
    }
    .designer-sidebar {
        width: 100%;
        height: 200px;
        border-inline-end: none;
        border-bottom: 1px solid var(--border-subtle);
    }
}