/* ============================================
 * PROJECTS.CSS - Visual Consistency Layer
 * ============================================
 * ONLY override specific styles for consistency
 * Do NOT redefine buttons/actions - those work in combined.css
 */

/* ============================================
 * CSS VARIABLES
 * ============================================ */
:root {
    --sidebar-item-radius: 10px;
    --project-icon-size: 28px;
    --item-bg-hover: rgba(255, 255, 255, 0.06);
    --item-bg-active: rgba(255, 255, 255, 0.10);
    --item-border-active: rgba(255, 255, 255, 0.15);
}

/* ============================================
 * PROJECT ITEMS - Consistent roundness & spacing
 * ============================================ */
.sidebar-item.project-item {
    margin: 2px 12px;
    border-radius: var(--sidebar-item-radius);
    min-height: 44px;
}

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

.sidebar-item.project-item.active {
    background: var(--item-bg-active);
    box-shadow: inset 0 0 0 1px var(--item-border-active);
}

/* ============================================
 * PROJECT BUCKETS - Compact headers
 * ============================================ */
.project-bucket-section {
    margin-bottom: 2px;
}

.project-bucket-header {
    padding: 6px 20px;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.45);
}

.project-bucket-header:hover {
    color: rgba(255, 255, 255, 0.7);
}

.bucket-chevron {
    font-size: 8px;
    opacity: 0.6;
}

/* ============================================
 * FOLDERS - Compact, consistent roundness
 * ============================================ */
.project-folder {
    margin: 2px 12px;
    border-radius: var(--sidebar-item-radius);
}

.folder-header {
    border-radius: var(--sidebar-item-radius);
    min-height: 40px;
    padding: 8px 12px;
}

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

/* Reduce folder content gap */
.folder-content {
    padding-left: 8px;
    margin-top: 0;
}

/* Projects inside folders - slightly smaller */
.folder-content .sidebar-item.project-item {
    margin: 1px 4px 1px 8px;
    min-height: 38px;
}

.folder-content .sidebar-item-icon.project-thumb {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 9px;
}

/* ============================================
 * LOADING SKELETON - Consistent with items
 * ============================================ */
.project-skeleton {
    margin: 2px 12px;
    border-radius: var(--sidebar-item-radius);
}

.project-skeleton-icon {
    border-radius: 50%;
}