/* Vertical Navigation Sidebar - Clean Implementation */

/* Ensure full height layout */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}


.sidebar-panel {
    width: 56px !important;
    height: 100%;
    position: relative;
    border: none;
    border-right: 1px solid #E5E5E5;
    background: #FFFFFF;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    overflow: visible;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    text-align: left;
    z-index: 100;
    border-radius: 12px 12px 12px 12px !important;
}

/* Expanded state */
.sidebar-panel:not(.collapsed) {
    width: 280px !important;
}

/* Navigation Container */
.sidebar-nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 100%;
    overflow: visible;
    position: relative;
}

/* Toggle/Collapse Button */
.sidebar-toggle-container {
    padding: clamp(12px, 2vw, 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #E5E5E5;
    margin-bottom: clamp(12px, 2vw, 16px);
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* Menu Label */
.sidebar-menu-label {
    font-size: clamp(12px, 2vw, 16px);
    font-weight: 600;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
}

.sidebar-toggle {
    width: clamp(32px, 4vw, 40px);
    height: clamp(32px, 4vw, 40px);
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: clamp(16px, 2vw, 20px);
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sidebar-toggle:hover,
.sidebar-toggle:focus,
.sidebar-toggle:active {
    background: transparent;
    color: #666;
    outline: none;
    box-shadow: none;
}

.sidebar-toggle:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Navigation Items Container */
.sidebar-items-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    max-height: calc(100% - 120px); /* Account for toggle and avatar */
    align-items: center;
    position: relative;
    /* Enable smooth scrolling */
    scroll-behavior: smooth;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ffb0b0 transparent;
}

/* Mobile - enable scroll for content overflow */
@media (max-width: 768px) {
    .sidebar-items-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Ensure proper scrolling */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ffb0b0 #f1f1f1;
        /* Fixed height to force scrolling */
        max-height: calc(100vh - 140px) !important;
        min-height: 200px !important;
        position: absolute;
        top: 50px; /* Account for toggle button */
        bottom: 70px; /* Account for avatar */
        left: 0;
        right: 0;
        padding: 0 4px;
    }

    /* Custom scrollbar for webkit browsers */
    .sidebar-items-container::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-items-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 2px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb:hover {
        background: #B91C1C;
    }
}

@media (max-width: 480px) {
    .sidebar-items-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Ensure proper scrolling */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ffb0b0 #f1f1f1;
        /* Fixed height to force scrolling */
        max-height: calc(100vh - 120px) !important;
        min-height: 180px !important;
        position: absolute;
        top: 45px; /* Account for toggle button */
        bottom: 65px; /* Account for avatar */
        left: 0;
        right: 0;
        padding: 0 3px;
    }

    /* Custom scrollbar for webkit browsers */
    .sidebar-items-container::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-items-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 2px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb:hover {
        background: #B91C1C;
    }
}

@media (max-width: 600px) {
    .sidebar-items-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Ensure proper scrolling */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ffb0b0 #f1f1f1;
        /* Fixed height to force scrolling */
        max-height: calc(100vh - 130px) !important;
        min-height: 190px !important;
        position: absolute;
        top: 48px; /* Account for toggle button */
        bottom: 68px; /* Account for avatar */
        left: 0;
        right: 0;
        padding: 0 3px;
    }

    /* Custom scrollbar for webkit browsers */
    .sidebar-items-container::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-items-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 2px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb:hover {
        background: #B91C1C;
    }
}

/* Also enable scroll for very small screens */
@media (max-width: 360px) {
    .sidebar-items-container {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        /* Ensure proper scrolling */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #ffb0b0 #f1f1f1;
        /* Fixed height to force scrolling */
        max-height: calc(100vh - 110px) !important;
        min-height: 160px !important;
        position: absolute;
        top: 40px; /* Account for toggle button */
        bottom: 60px; /* Account for avatar */
        left: 0;
        right: 0;
        padding: 0 2px;
    }

    /* Custom scrollbar for webkit browsers */
    .sidebar-items-container::-webkit-scrollbar {
        width: 3px;
    }

    .sidebar-items-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 2px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb:hover {
        background: #B91C1C;
    }
}

/* Navigation Items */
.sidebar-nav-item {
    width: 100%;
    height: 48px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: background-color 0.2s ease;
    position: relative;
    padding: 0 16px;
    gap: 12px;
    margin: 4px 8px;
    color: #6B7280;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sidebar-nav-item:hover,
.sidebar-nav-item:focus,
.sidebar-nav-item:active {
    background: transparent;
    color: #6B7280;
    outline: none;
    box-shadow: none;
}

.sidebar-nav-item:focus-visible {
    outline: none;
    box-shadow: none;
}

/* Active state with accent line */
.sidebar-nav-item.active {
    background: #EFF6FF;
    color: #DC2626;
}

.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 24px;
    background: #ffb0b0;
    border-radius: 0 2px 2px 0;
}

/* Navigation Icons */
.nav-icon {
    width: 18px;
    height: 18px;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    object-fit: contain;
}

.nav-icon[src$=".svg"] {
    filter: brightness(0) saturate(100%) invert(59%) sepia(8%) saturate(311%) hue-rotate(181deg) brightness(94%) contrast(86%);
}

.sidebar-nav-item:hover .nav-icon[src$=".svg"],
.sidebar-nav-item.active .nav-icon[src$=".svg"] {
    filter: brightness(0) saturate(100%) invert(16%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(97%) contrast(100%);
}

/* Navigation Labels */
.nav-label {
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: inherit;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Accordion Open State */
.sidebar-nav-item.accordion-open {
    background: #EFF6FF;
    color: #DC2626;
}

/* User Avatar Container */
.sidebar-avatar-container {
    padding: clamp(8px, 1.5vw, 12px) clamp(12px, 2vw, 16px);
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.5vw, 12px);
    border-top: 1px solid #E5E5E5;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    justify-content: flex-start;
}

/* User Info Container */
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* User Name */
.sidebar-user-name {
    font-size: clamp(12px, 1.8vw, 14px);
    font-weight: 600;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* User Role */
.sidebar-user-role {
    font-size: clamp(10px, 1.5vw, 12px);
    color: #6B7280;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.sidebar-avatar {
    width: clamp(32px, 4vw, 40px);
    height: clamp(32px, 4vw, 40px);
    background: #4A90E2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-weight: 600;
    font-size: clamp(12px, 1.8vw, 16px);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1;
    text-align: center;
}

.sidebar-avatar:hover {
    background: #357ABD;
    transform: scale(1.05);
}

/* Expanded state - Show labels when expanded */
.sidebar-panel:not(.collapsed) .sidebar-nav-item {
    justify-content: flex-start;
}

.sidebar-panel:not(.collapsed) .nav-label {
    opacity: 1;
}

.sidebar-panel:not(.collapsed) .sidebar-nav-item {
    padding: 0 16px;
}

/* Expanded state - Show menu label and move toggle to right */
.sidebar-panel:not(.collapsed) .sidebar-menu-label {
    opacity: 1;
}

.sidebar-panel:not(.collapsed) .sidebar-toggle-container {
    justify-content: space-between;
}

.sidebar-panel:not(.collapsed) .sidebar-toggle {
    position: absolute;
    right: 16px;
    z-index: 2;
}

.sidebar-panel:not(.collapsed) .sidebar-menu-label {
    position: relative;
    left: auto;
    transform: none;
    width: auto;
    flex: 1;
    text-align: center;
}

/* Expanded state - Show user info and justify avatar to left */
.sidebar-panel:not(.collapsed) .sidebar-user-info {
    opacity: 1;
}

.sidebar-panel:not(.collapsed) .sidebar-avatar-container {
    justify-content: flex-start;
}

/* Accordion Container */
.sidebar-accordion-container {
    margin: 0 8px;
    border-radius: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    transition: all 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.sidebar-accordion-container[style*="block"] {
    max-height: 400px;
    opacity: 1;
}

/* Accordion Header */
.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #FFFFFF;
    border-bottom: 1px solid #E5E7EB;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.accordion-header:hover {
    background: #EFF6FF;
}

.accordion-title {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.accordion-arrow {
    font-size: 12px;
    color: #6B7280;
    transition: transform 0.3s ease;
}

.accordion-header.open .accordion-arrow {
    transform: rotate(180deg);
}

/* Accordion Content */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 8px;
}

.accordion-content.open {
    max-height: 300px;
    padding: 8px;
}

/* Project Items - 4 Quadrant Layout */
.project-item {
    padding: 12px;
    margin-bottom: 8px;
    background: #FFFFFF;
    border-radius: 8px; /* Updated for better visual appearance */
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: all 0.3s ease-out; /* Figma design transition */
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

.project-item:hover {
    background: #EFF6FF; /* Light blue background for hover */
    border-color: #D1D5DB;
    transform: translateY(-2px) scale(1.01); /* Enhanced hover effect */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* More prominent shadow */
}

.project-item.active {
    background: #EFF6FF; /* Same as hover for consistency */
    border-color: #3B82F6; /* Blue border for active state */
    transform: translateY(-1px); /* Slight elevation */
    box-shadow: 0 3px 6px rgba(59, 130, 246, 0.2); /* Blue-tinted shadow */
}

.project-item:focus {
    outline: 2px solid #3B82F6; /* Focus ring for accessibility */
    outline-offset: 2px;
}

/* Top Row: ID and Title */
.project-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.project-id {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    flex: 1;
    text-align: left;
}

.project-title {
    font-size: 12px;
    font-weight: 500; /* Correct weight from Figma spec */
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    flex: 1;
    text-align: right;
    line-height: 1.4; /* Better readability */
    word-wrap: break-word; /* Prevent long text overflow */
}

/* Bottom Row: Type and Phase */
.project-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.project-type {
    flex: 1;
    text-align: left;
}

.project-phase {
    flex: 1;
    text-align: right;
}

.project-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 3px 8px; /* Slightly more padding */
    border-radius: 12px;
    font-size: 10px;
    font-weight: 500; /* Correct weight from Figma spec */
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
    letter-spacing: 0.5px; /* Better readability */
    text-transform: uppercase; /* More consistent design */
}

.badge-type {
    background: #DBEAFE;
    color: #1E40AF;
}

.badge-phase {
    background: #F3E8FF;
    color: #7C3AED;
}

/* No results message */
.no-results {
    padding: 20px;
    text-align: center;
    color: #6B7280;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Folders List */
.folders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #ffb0b0 transparent;
}

/* Webkit scrollbar for folders */
.folders-list::-webkit-scrollbar {
    width: 6px;
}

.folders-list::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.folders-list::-webkit-scrollbar-thumb {
    background: #ffb0b0;
    border-radius: 3px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.folders-list::-webkit-scrollbar-thumb:hover {
    background: #ff9999;
    opacity: 1;
}

/* Folder Items */
.folder-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
}

.folder-item:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.folder-icon {
    font-size: 18px;
    color: #6B7280;
    min-width: 20px;
}

.folder-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.folder-count {
    font-size: 12px;
    color: #9CA3AF;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* File Details Panel - Third panel */
.file-details-panel {
    position: absolute;
    width: 320px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    border: none;
    border-left: 1px solid #E5E5E5;
    z-index: 9998;
    display: none;
    transform: translateX(100%);
    opacity: 0;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 70vh;
    flex-direction: column;
    /* Ensure proper flex behavior */
    min-height: 0;
    /* Allow JavaScript to control height */
    height: auto;
}

/* Inherit structure from projects-panel */
.file-details-panel {
    /* Inherit all styles from projects-panel */
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* File details header should inherit from projects panel header */
.file-details-header {
    display: flex;
    align-items: center;
    padding: 21px;
    border-bottom: 1px solid #E5E5E5;
    gap: 12px;
    background: #FFFFFF;
    flex-shrink: 0;
    /* Prevent header from growing too large */
    max-height: 80px;
}

/* File details search should inherit from projects search */
.file-details-search-container {
    display: flex;
    align-items: center;
    margin: 16px 16px 16px;
    position: relative;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 0 12px;
    flex-shrink: 0;
    /* Prevent search container from growing too large */
    max-height: 60px;
}

.file-details-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #374151;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    outline: none;
    padding: 12px 0;
    font-weight: 400;
}

.file-details-search-input::placeholder {
    color: #9CA3AF;
    opacity: 1;
}

.file-details-search-input:focus {
    outline: none;
}

.file-details-panel.open {
    transform: translateX(0);
    opacity: 1;
    display: flex !important;
}

/* File Details Back Button - inherit from projects back button */
.file-details-back-button {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.file-details-back-button:hover,
.file-details-back-button:focus {
    background: #F3F4F6;
    color: #333;
    outline: none;
    box-shadow: none;
}

/* File Details Title - inherit from projects panel title */
.file-details-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Files Content - inherit structure from projects content */
.files-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 16px 12px;
    /* Remove flex layout to prevent shrinking of children */
    display: block;
    min-height: 0;
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: #ffb0b0 transparent;
    /* Enable smooth scrolling */
    scroll-behavior: smooth;
    /* Allow file-items to maintain their natural size */
}

/* Add spacing between file-items since we're not using flex gap */
.files-content .file-item + .file-item {
    margin-top: 12px;
}

/* Webkit scrollbar for files-content */
.files-content::-webkit-scrollbar {
    width: 6px;
}

.files-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.files-content::-webkit-scrollbar-thumb {
    background: #ffb0b0;
    border-radius: 3px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.files-content::-webkit-scrollbar-thumb:hover {
    background: #ff9999;
    opacity: 1;
}

/* Always show scrollbar when content overflows */
.files-content.has-scroll::-webkit-scrollbar-thumb {
    opacity: 0.8;
    background: #ffb0b0;
}

/* File items should inherit styling from project items */
.file-item {
    background: #FFFFFF;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: all 0.2s ease;
    overflow: hidden;
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* Fixed minimum height to prevent shrinking */
    min-height: auto;
    /* Ensure proper flex behavior */
    flex-shrink: 0;
}

.file-item:hover {
    background: #F9FAFB;
    border-color: #D1D5DB;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    border-bottom: 1px solid #F3F4F6;
    /* Ensure consistent header height */
    min-height: 48px;
    flex-shrink: 0;
}

.file-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.file-icon {
    font-size: 16px;
    color: #6B7280;
    min-width: 16px;
}

.file-name {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.file-status {
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    white-space: nowrap;
}

.file-status.aprovat {
    background: #D1FAE5;
    color: #065F46;
}

.file-status.pendent {
    background: #FEF3C7;
    color: #92400E;
}

.file-status.revisió {
    background: #DBEAFE;
    color: #1E40AF;
}

.file-details {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #F9FAFB;
    border-top: 1px solid #E5E7EB;
    /* Ensure consistent details height */
    min-height: 60px;
    flex-shrink: 0;
}

.file-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.detail-label {
    font-size: 12px;
    color: #6B7280;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.detail-value {
    font-size: 12px;
    color: #374151;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Dropdown Search Results */
.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10000;
    display: none;
    margin-top: 4px;
}



.search-dropdown.active {
    display: block;
}

.search-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 14px;
    color: #374151;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    border-bottom: 1px solid #F3F4F6;
}

.search-dropdown-item:last-child {
    border-bottom: none;
}

.search-dropdown-item:hover,
.search-dropdown-item.selected {
    background: #F3F4F6;
}

.search-dropdown-item .highlight {
    font-weight: 600;
    color: #111827;
}

/* Responsive adjustments for file details panel */
@media (max-width: 1024px) {
    .file-details-panel {
        width: 300px;
    }
}

@media (max-width: 768px) {
    .file-details-panel {
        width: 280px;
        max-height: 60vh;
    }
}

@media (max-width: 480px) {
    .file-details-panel {
        width: 260px;
        max-height: 55vh;
    }
}

@media (max-width: 360px) {
    .file-details-panel {
        width: 240px;
        max-height: 50vh;
    }
}

/* Collapsed state - Hide labels and center items */
.sidebar-panel.collapsed .sidebar-nav-item {
    justify-content: center;
    padding: 0;
    margin: 4px 8px;
    width: 40px;
}

.sidebar-panel.collapsed .nav-label {
    display: none;
}

.sidebar-panel.collapsed .nav-icon {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-panel.collapsed .sidebar-accordion-container {
    display: none !important;
}

/* Collapsed state - Center toggle and hide menu label */
.sidebar-panel.collapsed .sidebar-toggle-container {
    justify-content: center !important;
    padding: 16px 0;
}

.sidebar-panel.collapsed .sidebar-menu-label {
    display: none !important;
}

.sidebar-panel.collapsed .sidebar-toggle {
    position: static;
    right: auto;
    z-index: auto;
}

.sidebar-panel.collapsed .sidebar-avatar-container {
    display: flex !important;
    justify-content: center !important;
    padding: 12px 6px;
}

.sidebar-panel.collapsed .sidebar-user-info {
    display: none !important;
}

.sidebar-panel.collapsed .sidebar-avatar {
    width: 40px !important;
    height: 40px !important;
}

/* Update toggle button states - no rotation needed, we change the icon directly */
.sidebar-panel.collapsed .sidebar-toggle {
    /* No rotation - icon shows › when collapsed */
    transform: none;
}

.sidebar-panel:not(.collapsed) .sidebar-toggle {
    /* No rotation - icon shows ‹ when expanded */
    transform: none;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    /* Tablet landscape */
    .sidebar-panel {
        width: 52px !important;
    }

    .sidebar-panel:not(.collapsed) {
        width: 260px !important;
    }

    .sidebar-nav-item {
        height: 46px;
        margin: 3px 6px;
    }

    .nav-icon {
        font-size: 17px;
    }
}

@media (max-width: 768px) {
    /* Tablet portrait and very small screens */
    .sidebar-panel {
        width: 52px !important;
        min-width: 52px;
    }

    .sidebar-panel:not(.collapsed) {
        width: 260px !important;
        min-width: 260px;
    }

    .sidebar-nav-item {
        width: 42px;
        height: 42px;
        margin: 2px 6px;
        padding: 0 12px;
    }

    .sidebar-panel.collapsed .sidebar-nav-item {
        width: 36px;
        height: 36px;
        margin: 2px 6px;
    }

    .nav-icon {
        font-size: 16px;
        min-width: 16px;
    }

    .sidebar-toggle {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .sidebar-avatar {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .sidebar-toggle-container {
        padding: 12px 0;
    }

    .sidebar-avatar-container {
        padding: 12px 6px 20px 6px;
    }

    /* Accordion adjustments */
    .accordion-title {
        font-size: 12px;
    }

    .project-title {
        font-size: 13px;
    }

    .project-name {
        font-size: 11px;
    }

    .badge {
        font-size: 9px;
        padding: 1px 6px;
    }
}

@media (max-width: 600px) {
    /* Large mobile */
    .sidebar-panel {
        width: 48px !important;
        min-width: 48px;
    }

    .sidebar-panel:not(.collapsed) {
        width: 240px !important;
        min-width: 240px;
    }

    .sidebar-nav-item {
        width: 40px;
        height: 40px;
        margin: 2px 4px;
        padding: 0 10px;
    }

    .sidebar-panel.collapsed .sidebar-nav-item {
        width: 32px;
        height: 32px;
        margin: 2px 6px;
    }

    .nav-icon {
        font-size: 15px;
    }

    .sidebar-toggle {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    .sidebar-avatar {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .sidebar-toggle-container {
        padding: 10px 0;
    }

    .sidebar-avatar-container {
        padding: 10px 4px 16px 4px;
    }
}

@media (max-width: 480px) {
    /* Mobile portrait */
    .sidebar-panel {
        width: 44px !important;
        min-width: 44px;
    }

    .sidebar-panel:not(.collapsed) {
        width: 220px !important;
        min-width: 220px;
    }

    .sidebar-nav-item {
        width: 36px;
        height: 36px;
        margin: 1px 4px;
        padding: 0 8px;
    }

    .sidebar-panel.collapsed .sidebar-nav-item {
        width: 28px;
        height: 28px;
        margin: 1px 6px;
    }

    .nav-icon {
        font-size: 14px;
        min-width: 14px;
    }

    .sidebar-toggle {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .sidebar-avatar {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }

    .sidebar-toggle-container {
        padding: 8px 0;
    }

    .sidebar-avatar-container {
        padding: 8px 4px 12px 4px;
    }

    /* Labels adjustments for mobile */
    .nav-label {
        font-size: 13px;
    }

    /* Accordion adjustments for mobile */
    .accordion-title {
        font-size: 11px;
    }

    .project-title {
        font-size: 12px;
    }

    .project-name {
        font-size: 10px;
    }

    .badge {
        font-size: 8px;
        padding: 1px 4px;
    }

    .project-item {
        padding: 8px;
        margin-bottom: 6px;
    }
}

@media (max-width: 360px) {
    /* Small mobile */
    .sidebar-panel {
        width: 40px !important;
        min-width: 40px;
    }

    .sidebar-panel:not(.collapsed) {
        width: 200px !important;
        min-width: 200px;
    }

    .sidebar-nav-item {
        width: 32px;
        height: 32px;
        margin: 1px 2px;
        padding: 0 6px;
    }

    .sidebar-panel.collapsed .sidebar-nav-item {
        width: 24px;
        height: 24px;
        margin: 1px 6px;
    }

    .nav-icon {
        font-size: 12px;
        min-width: 12px;
    }

    .sidebar-toggle {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .sidebar-avatar {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }

    .sidebar-toggle-container {
        padding: 6px 0;
    }

    .sidebar-avatar-container {
        padding: 6px 2px 10px 2px;
    }

    .nav-label {
        font-size: 12px;
    }
}

/* Touch-friendly adjustments for mobile */
@media (hover: none) and (pointer: coarse) {
    .sidebar-nav-item {
        min-height: 44px; /* iOS touch target minimum */
    }

    .sidebar-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    .sidebar-avatar {
        min-height: 44px;
        min-width: 44px;
    }

    .project-item {
        min-height: 44px;
        padding: 10px;
    }

    .accordion-header {
        min-height: 44px;
        padding: 12px;
    }
}

/* Focus states */
.sidebar-toggle:focus,
.sidebar-nav-item:focus,
.sidebar-avatar:focus {
    outline: 2px solid #4A90E2;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .sidebar-panel {
        display: none;
    }
}

/* Enhanced responsive breakpoints based on target resolutions */

/* Desktop - 1920x1080, 1536x864, 1366x768 */
@media (min-width: 1366px) {
    .sidebar-panel[data-breakpoint="desktop"] {
        /* Standard desktop sizing maintained */
    }
}

/* Small Desktop - 1200-1365px */
@media (min-width: 1200px) and (max-width: 1365px) {
    .sidebar-panel[data-breakpoint="smallDesktop"] {
        /* Optimized for smaller desktop screens */
    }
}

/* Tablet Landscape - 1024px and similar */
@media (min-width: 1024px) and (max-width: 1199px) {
    .sidebar-panel[data-breakpoint="tabletLandscape"] {
        /* Landscape tablet optimizations */
    }

    .sidebar-panel.tablet-landscape {
        /* Additional landscape-specific styles */
    }
}

/* Tablet Portrait - 768px and similar */
@media (min-width: 768px) and (max-width: 1023px) {
    .sidebar-panel[data-breakpoint="tabletPortrait"] {
        /* Portrait tablet optimizations */
    }

    .sidebar-panel.tablet-portrait {
        /* Portrait-specific adjustments */
    }
}

/* Mobile optimizations for common resolutions */

/* Large Mobile - 600px and similar (Samsung Galaxy S8+, etc.) */
@media (min-width: 600px) and (max-width: 767px) {
    .sidebar-panel[data-breakpoint="largeMobile"] {
        /* Large mobile device optimizations */
    }
}

/* Mobile - 480px and similar */
@media (min-width: 480px) and (max-width: 599px) {
    .sidebar-panel[data-breakpoint="mobile"] {
        /* Standard mobile optimizations */
    }
}

/* Small Mobile - 360px (Galaxy S9, iPhone 12 mini, etc.) */
@media (min-width: 360px) and (max-width: 479px) {
    .sidebar-panel[data-breakpoint="smallMobile"] {
        /* Small mobile device optimizations */
    }

    .sidebar-panel.ultra-compact {
        /* Ultra-compact styling for very small screens */
    }
}

/* Very Small Mobile - below 360px */
@media (max-width: 359px) {
    .sidebar-panel[data-breakpoint="verySmallMobile"] {
        /* Extra compact sizing for very small screens */
    }

    .sidebar-panel[data-breakpoint="verySmallMobile"] .sidebar-nav-item {
        width: 28px;
        height: 28px;
        margin: 1px 2px;
        padding: 0 4px;
    }

    .sidebar-panel[data-breakpoint="verySmallMobile"] .nav-icon {
        font-size: 11px;
        min-width: 11px;
    }

    .sidebar-panel[data-breakpoint="verySmallMobile"] .sidebar-toggle {
        width: 22px;
        height: 22px;
        font-size: 11px;
    }

    .sidebar-panel[data-breakpoint="verySmallMobile"] .sidebar-avatar {
        width: 22px;
        height: 22px;
        font-size: 9px;
    }
}

/* Touch-friendly optimizations */
.sidebar-panel.touch-friendly .sidebar-nav-item {
    min-height: 48px; /* iOS touch target minimum */
    padding: 0 12px;
    gap: 16px;
}

.sidebar-panel.touch-friendly .sidebar-toggle {
    min-height: 48px;
    min-width: 48px;
}

.sidebar-panel.touch-friendly .sidebar-avatar {
    min-height: 48px;
    min-width: 48px;
}

.sidebar-panel.touch-friendly .project-item {
    min-height: 48px;
    padding: 12px;
}

.sidebar-panel.touch-friendly .accordion-header {
    min-height: 48px;
    padding: 12px;
}

/* Compact text for smaller screens */
.sidebar-panel.compact-text .nav-label {
    font-size: 12px;
}

.sidebar-panel.compact-text .project-title {
    font-size: 13px;
}

.sidebar-panel.compact-text .project-name {
    font-size: 11px;
}

.sidebar-panel.compact-text .badge {
    font-size: 9px;
    padding: 1px 6px;
}

/* Notch device optimizations (iPhone X, etc.) */
.sidebar-panel.has-notch {
    padding-top: env(safe-area-inset-top);
}

.sidebar-panel.has-notch .sidebar-toggle-container {
    padding-top: calc(12px + env(safe-area-inset-top));
}

/* Ultra-compact mode for very small screens */
.sidebar-panel.ultra-compact {
    /* Extremely compact layout */
}

.sidebar-panel.ultra-compact .sidebar-nav-item {
    margin: 1px 3px;
    padding: 0 6px;
}

.sidebar-panel.ultra-compact .sidebar-toggle-container {
    padding: 6px 0;
}

.sidebar-panel.ultra-compact .sidebar-avatar-container {
    padding: 6px 2px 8px 2px;
}

/* Device-specific optimizations */

/* iPhone 12/13 mini and similar small phones (390x844) */
@media (width: 390px) and (height: 844px) {
    .sidebar-panel[data-screen-width="390"] {
        /* Specific optimizations for this resolution */
    }
}

/* iPhone 12/13 Pro and similar (390x844) */
@media (width: 390px) and (height: 844px) and (-webkit-device-pixel-ratio: 3) {
    .sidebar-panel[data-screen-width="390"] {
        /* High DPI optimizations */
    }
}

/* iPhone 12/13 Pro Max and similar (428x926) */
@media (width: 428px) and (height: 926px) {
    .sidebar-panel[data-screen-width="428"] {
        /* Optimizations for larger phones */
    }
}

/* Samsung Galaxy S20/21/22 (360x800) */
@media (width: 360px) and (height: 800px) {
    .sidebar-panel[data-screen-width="360"] {
        /* Galaxy series optimizations */
    }
}

/* Common Android resolutions */
@media (width: 393px) and (height: 873px) {
    .sidebar-panel[data-screen-width="393"] {
        /* Android optimization */
    }
}

/* Tablet-specific enhancements */

/* iPad Mini (768x1024) */
@media (width: 768px) and (height: 1024px) {
    .sidebar-panel.tablet-portrait[data-screen-width="768"] {
        /* iPad Mini portrait optimizations */
    }
}

/* iPad (810x1080) */
@media (width: 810px) and (height: 1080px) {
    .sidebar-panel.tablet-portrait[data-screen-width="810"] {
        /* iPad portrait optimizations */
    }
}

/* iPad Air/Pro landscape (1024x768) */
@media (width: 1024px) and (height: 768px) {
    .sidebar-panel.tablet-landscape[data-screen-width="1024"] {
        /* iPad landscape optimizations */
    }
}

/* Large tablets and small laptops */
@media (width: 820px) and (height: 1180px) {
    .sidebar-panel.tablet-portrait[data-screen-width="820"] {
        /* Large tablet portrait optimizations */
    }
}

/* Enhanced scroll behavior for all devices */

/* Custom scrollbar styling for webkit browsers */
.sidebar-items-container::-webkit-scrollbar,
.projects-content::-webkit-scrollbar,
.files-content::-webkit-scrollbar {
    width: 6px;
}

.sidebar-items-container::-webkit-scrollbar-track,
.projects-content::-webkit-scrollbar-track,
.files-content::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 3px;
}

.sidebar-items-container::-webkit-scrollbar-thumb,
.projects-content::-webkit-scrollbar-thumb,
.files-content::-webkit-scrollbar-thumb,
.folders-list::-webkit-scrollbar-thumb {
    background: #ffb0b0;
    border-radius: 3px;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

/* Enhanced scrollbar for navigation items - always visible when scrolling */
.sidebar-items-container::-webkit-scrollbar-thumb {
    opacity: 0.7;
}

.sidebar-items-container.has-scroll::-webkit-scrollbar-thumb {
    opacity: 0.7;
}

.sidebar-items-container::-webkit-scrollbar-thumb:hover,
.projects-content::-webkit-scrollbar-thumb:hover,
.files-content::-webkit-scrollbar-thumb:hover,
.folders-list::-webkit-scrollbar-thumb:hover {
    background: #ff9999;
    opacity: 1;
}

/* Firefox scrollbar styling */
.sidebar-items-container,
.projects-content,
.files-content,
.folders-list {
    scrollbar-width: thin;
    scrollbar-color: #ffb0b0 transparent;
}

/* Mobile-specific scroll improvements */
.mobile-scroll {
    /* Enhanced touch scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    /* Prevent scroll bounce on iOS */
    overscroll-behavior-y: contain;
}

/* Hide scrollbar indicators on very small screens */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* Scroll state for visual feedback */
.scrolling {
    /* Optional visual feedback during scrolling */
    opacity: 0.95;
}

/* Performance optimizations for mobile devices */
@media (max-width: 768px) {
    /* Reduce animation complexity for better performance */
    .sidebar-panel,
    .projects-panel,
    .file-details-panel {
        will-change: transform;
        transform: translateZ(0); /* Hardware acceleration */
    }

    /* Simplified transitions for mobile */
    .sidebar-panel {
        transition: width 0.25s ease-out;
    }

    .projects-panel,
    .file-details-panel {
        transition: transform 0.25s ease-out, opacity 0.25s ease-out;
    }

    /* Optimized scrollbars for mobile */
    .sidebar-items-container::-webkit-scrollbar,
    .projects-content::-webkit-scrollbar,
    .files-content::-webkit-scrollbar {
        width: 4px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb,
    .projects-content::-webkit-scrollbar-thumb,
    .files-content::-webkit-scrollbar-thumb,
    .folders-list::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 2px;
        opacity: 0.6;
    }

    /* Enhanced touch scrolling */
    .mobile-scroll {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
    }

    /* Prevent horizontal scrolling */
    .sidebar-items-container,
    .projects-content,
    .files-content {
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
}

/* Ultra-small mobile scroll optimizations */
@media (max-width: 360px) {
    /* Very thin scrollbars */
    .sidebar-items-container::-webkit-scrollbar,
    .projects-content::-webkit-scrollbar,
    .files-content::-webkit-scrollbar,
    .folders-list::-webkit-scrollbar {
        width: 2px;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb,
    .projects-content::-webkit-scrollbar-thumb,
    .files-content::-webkit-scrollbar-thumb,
    .folders-list::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        border-radius: 1px;
        opacity: 0.5;
    }

    /* Ensure maximum scroll efficiency */
    .mobile-scroll {
        scroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Desktop scroll enhancements */
@media (min-width: 769px) {
    /* Smooth scrolling with momentum */
    .sidebar-items-container,
    .projects-content,
    .files-content {
        scroll-behavior: smooth;
    }

    /* Show scrollbars on hover */
    .sidebar-items-container:hover::-webkit-scrollbar-thumb,
    .projects-content:hover::-webkit-scrollbar-thumb,
    .files-content:hover::-webkit-scrollbar-thumb {
        background: #ff9999;
        opacity: 1;
    }

    /* Navigation scrollbar always visible but subtle on desktop */
    .sidebar-items-container::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        opacity: 0.4;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }

    /* Projects, files and folders scrollbars more subtle */
    .projects-content::-webkit-scrollbar-thumb,
    .files-content::-webkit-scrollbar-thumb,
    .folders-list::-webkit-scrollbar-thumb {
        background: #ffb0b0;
        opacity: 0.3;
        transition: opacity 0.2s ease, background-color 0.2s ease;
    }

    /* Enhanced visibility when scrolling */
    .sidebar-items-container.has-scroll::-webkit-scrollbar-thumb {
        opacity: 0.6;
    }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .sidebar-items-container::-webkit-scrollbar,
    .projects-content::-webkit-scrollbar,
    .files-content::-webkit-scrollbar,
    .folders-list::-webkit-scrollbar {
        width: 8px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .sidebar-items-container,
    .projects-content,
    .files-content {
        scroll-behavior: auto;
    }

    .mobile-scroll {
        scroll-behavior: auto;
    }
}

/* Dark mode scrollbar support */
@media (prefers-color-scheme: dark) {
    .sidebar-items-container::-webkit-scrollbar-thumb,
    .projects-content::-webkit-scrollbar-thumb,
    .files-content::-webkit-scrollbar-thumb,
    .folders-list::-webkit-scrollbar-thumb {
        background: #ffb0b0;
    }

    .sidebar-items-container::-webkit-scrollbar-thumb:hover,
    .projects-content::-webkit-scrollbar-thumb:hover,
    .files-content::-webkit-scrollbar-thumb:hover,
    .folders-list::-webkit-scrollbar-thumb:hover {
        background: #ff9999;
    }
}

/* Panel minimized state - sidebar should adapt */
.panel.left.show.minimized .sidebar-panel {
    width: 52px !important;
    min-width: 52px;
    /* Maintain relative positioning like desktop */
}

/* Override panel minimized state for mobile devices */
@media (max-width: 768px) {
    .panel.left.show.minimized .sidebar-panel {
        width: 52px !important;
        min-width: 52px;
        height: auto !important;
    }

    .panel.left.show.minimized .sidebar-panel .sidebar-nav-item {
        width: 42px !important;
        height: 42px !important;
        margin: 2px 6px !important;
        padding: 0 12px !important;
        display: flex !important;
        visibility: visible !important;
    }

    .panel.left.show.minimized .sidebar-panel .nav-icon {
        font-size: 16px !important;
        display: flex !important;
        visibility: visible !important;
    }

    .panel.left.show.minimized .sidebar-panel .sidebar-toggle {
        width: 36px !important;
        height: 36px !important;
        font-size: 18px !important;
        display: flex !important;
        visibility: visible !important;
    }

    .panel.left.show.minimized .sidebar-panel .sidebar-avatar {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        display: flex !important;
        visibility: visible !important;
    }
}

.panel.left.show.minimized .sidebar-panel .sidebar-toggle {
    width: 32px;
    height: 32px;
    font-size: 16px;
}

.panel.left.show.minimized .sidebar-panel .sidebar-nav-item {
    width: 32px;
    height: 32px;
    margin: 2px 4px;
}

.panel.left.show.minimized .sidebar-panel .nav-icon {
    font-size: 14px;
}

.panel.left.show.minimized .sidebar-panel .sidebar-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 12px;
}

.panel.left.show.minimized .sidebar-panel .sidebar-accordion-container {
    display: none !important;
}

/* Mobile specific adjustments - maintain relative positioning */
@media (max-width: 768px) {
    .panel.left .sidebar-panel {
        /* Keep relative positioning like desktop */
        height: 100%;
        position: relative;
        /* Responsive sizing handled by existing media queries */
        /* Force minimum size for visibility */
        min-height: 400px !important;
        overflow: visible !important;
    }

    .panel.left .sidebar-panel .sidebar-nav {
        display: flex !important;
        visibility: visible !important;
        overflow: visible !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 400px !important;
    }

    .panel.left .sidebar-panel .sidebar-items-container {
        position: relative !important;
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-height: calc(100vh - 140px) !important;
        min-height: 200px !important;
        flex: 1 !important;
        gap: 8px !important;
        padding: 0 4px !important;
        align-items: center !important;
    }

    .panel.left .sidebar-panel .sidebar-toggle-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    .panel.left .sidebar-panel .sidebar-avatar-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }
}

@media (max-width: 480px) {
    .panel.left .sidebar-panel {
        /* Keep relative positioning like desktop */
        height: 100%;
        position: relative;
        /* Responsive sizing handled by existing media queries */
        /* Force minimum size for visibility */
        min-height: 350px !important;
        overflow: visible !important;
    }

    .panel.left .sidebar-panel .sidebar-nav {
        display: flex !important;
        visibility: visible !important;
        overflow: visible !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 350px !important;
    }

    .panel.left .sidebar-panel .sidebar-items-container {
        position: relative !important;
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-height: calc(100vh - 120px) !important;
        min-height: 180px !important;
        flex: 1 !important;
        gap: 8px !important;
        padding: 0 3px !important;
        align-items: center !important;
    }

    .panel.left .sidebar-panel .sidebar-toggle-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    .panel.left .sidebar-panel .sidebar-avatar-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }
}

/* Ensure sidebar maintains desktop-like behavior on mobile devices */
@media (max-width: 600px) {
    .panel.left .sidebar-panel {
        /* Keep relative positioning like desktop */
        height: 100%;
        position: relative;
        /* Responsive sizing handled by existing media queries */
        /* Force minimum size for visibility */
        min-height: 380px !important;
        overflow: visible !important;
        flex: 1 !important;
        display: block !important;
    }

    .panel.left .sidebar-panel .sidebar-nav {
        display: flex !important;
        visibility: visible !important;
        overflow: visible !important;
        flex-direction: column !important;
        height: 100% !important;
        min-height: 380px !important;
        position: relative !important;
        width: 100% !important;
        flex: 1 !important;
    }

    .panel.left .sidebar-panel .sidebar-items-container {
        position: relative !important;
        display: flex !important;
        visibility: visible !important;
        flex-direction: column !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        max-height: calc(100vh - 130px) !important;
        min-height: 190px !important;
        flex: 1 !important;
        gap: 8px !important;
        padding: 0 3px !important;
        align-items: center !important;
    }

    .panel.left .sidebar-panel .sidebar-toggle-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    .panel.left .sidebar-panel .sidebar-avatar-container {
        display: flex !important;
        visibility: visible !important;
        flex-shrink: 0 !important;
    }

    /* Additional force rules to ensure sidebar visibility */
    .panel.left .sidebar-panel * {
        visibility: visible !important;
    }

    .panel.left .sidebar-panel .sidebar-nav-item {
        display: flex !important;
        position: relative !important;
        width: auto !important;
        height: auto !important;
    }

    /* Ensure the sidebar container takes up proper space */
    .panel.left {
        display: flex !important;
        flex-direction: column !important;
        min-height: 400px !important;
    }

    .panel.left .sidebar-panel {
        flex: 1 !important;
        display: block !important;
        width: 100% !important;
    }
}

/* Projects Panel - Second sidebar */
.projects-panel {
    position: absolute;
    top: 72px;
    bottom: 135px;
    width: 367px; /* Figma design specification */
    background: #FFFFFF;
    border-radius: 12px 12px 12px 12px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
    border: none;
    border-left: 1px solid #E5E5E5;
    z-index: 9999;
    display: none;
    transform: translateX(-100%);
    opacity: 0;
    overflow: hidden;
    height: auto !important; /* Let top and bottom determine height */
}


/* Projects Panel positioning - JavaScript controlled */
.projects-panel {
    /* Enhanced transition for smooth movement - Figma design spec */
    transition: left 0.3s ease-out, transform 0.3s ease-out, opacity 0.3s ease-out !important;
    /* Initial positioning - will be overridden by JavaScript */
    left: 65px;
    width: 367px;
}

/* Responsive adjustments to match sidebar panel states */
@media (max-width: 768px) {
    /* Tablet portrait - match sidebar panel responsive sizing */
    .projects-panel {
        width: 260px; /* Match sidebar-panel expanded width at 768px */
        left: 52px; /* Match sidebar-panel collapsed width at 768px */
        bottom: 132px; /* Match main bottom positioning */
        height: auto !important; /* Let top and bottom determine height */
    }

    /* When panel is minimized at tablet size */
    .panel.left.show.minimized ~ .projects-panel,
    .panel.left.show.minimized + * .projects-panel {
        left: 52px;
        width: 260px;
    }

    /* When projects-panel is open at tablet size and sidebar is expanded */
    .panel.left.show:not(.minimized) ~ .projects-panel.open,
    .panel.left.show:not(.minimized) + * .projects-panel.open {
        left: 265px; /* Position after expanded sidebar at tablet size (260px + 5px gap) */
    }

    /* When projects-panel is open at tablet size and sidebar is collapsed */
    .panel.left.show.minimized ~ .projects-panel.open,
    .panel.left.show.minimized + * .projects-panel.open,
    body > .projects-panel.open {
        left: 52px; /* Match collapsed sidebar width position at tablet size */
    }
}

@media (max-width: 480px) {
    /* Mobile portrait - match sidebar panel responsive sizing */
    .projects-panel {
        width: 220px; /* Match sidebar-panel expanded width at 480px */
        left: 44px; /* Match sidebar-panel collapsed width at 480px */
        bottom: 132px; /* Match main bottom positioning */
        height: auto !important; /* Let top and bottom determine height */
    }

    /* When panel is minimized at mobile size */
    .panel.left.show.minimized ~ .projects-panel,
    .panel.left.show.minimized + * .projects-panel {
        left: 44px;
        width: 220px;
    }

    /* When projects-panel is open at mobile size and sidebar is expanded */
    .panel.left.show:not(.minimized) ~ .projects-panel.open,
    .panel.left.show:not(.minimized) + * .projects-panel.open {
        left: 225px; /* Position after expanded sidebar at mobile size (220px + 5px gap) */
    }

    /* When projects-panel is open at mobile size and sidebar is collapsed */
    .panel.left.show.minimized ~ .projects-panel.open,
    .panel.left.show.minimized + * .projects-panel.open,
    body > .projects-panel.open {
        left: 44px; /* Match collapsed sidebar width position at mobile size */
    }
}

@media (max-width: 360px) {
    /* Small mobile - match sidebar panel responsive sizing */
    .projects-panel {
        width: 200px; /* Match sidebar-panel expanded width at 360px */
        left: 40px; /* Match sidebar-panel collapsed width at 360px */
        bottom: 132px; /* Match main bottom positioning */
        height: auto !important; /* Let top and bottom determine height */
    }

    /* When panel is minimized at small mobile size */
    .panel.left.show.minimized ~ .projects-panel,
    .panel.left.show.minimized + * .projects-panel {
        left: 40px;
        width: 200px;
    }

    /* When projects-panel is open at small mobile size and sidebar is expanded */
    .panel.left.show:not(.minimized) ~ .projects-panel.open,
    .panel.left.show:not(.minimized) + * .projects-panel.open {
        left: 205px; /* Position after expanded sidebar at small mobile size (200px + 5px gap) */
    }

    /* When projects-panel is open at small mobile size and sidebar is collapsed */
    .panel.left.show.minimized ~ .projects-panel.open,
    .panel.left.show.minimized + * .projects-panel.open,
    body > .projects-panel.open {
        left: 40px; /* Match collapsed sidebar width position at small mobile size */
    }
}

.projects-panel.open {
    transform: translateX(0);
    opacity: 1;
    display: block !important;
}

/* Projects Panel Header */
.projects-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 21px;
    border-bottom: 1px solid #E5E5E5;
    gap: 12px;
}

.projects-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.projects-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Action Buttons in Header */
.projects-expand-button,
.projects-add-button {
    width: 25px;
    height: 25px;
    background: #C00000; /* Figma red color */
    border: none;
    border-radius: 6px;
    font-size: 14px;
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-out;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.projects-expand-button:hover,
.projects-add-button:hover,
.projects-expand-button:focus,
.projects-add-button:focus {
    background: #A00000; /* Darker red for hover */
    transform: scale(1.05);
    outline: none;
}

.projects-expand-button {
    font-size: 12px;
    font-weight: bold;
}

.projects-expand-button svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.projects-add-button {
    font-size: 16px;
    font-weight: bold;
}

.projects-back-button {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.projects-back-button:hover,
.projects-back-button:focus {
    background: #F3F4F6;
    color: #333;
    outline: none;
    box-shadow: none;
}

.projects-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Dropdown Container */
.projects-dropdown-container {
    margin: 16px;
}

.projects-dropdown-select {
    width: 100%;
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    color: #374151;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.projects-dropdown-select:hover {
    border-color: #C00000;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.1);
}

.projects-dropdown-select:focus {
    border-color: #C00000;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.2);
    outline: none;
}

.projects-dropdown-select:disabled {
    background-color: #F9FAFB;
    color: #9CA3AF;
    cursor: not-allowed;
}

.projects-dropdown-select option {
    color: #374151;
    background: #FFFFFF;
    padding: 12px 16px;
}

/* Projects List */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Add Project Button */
.add-project-button {
    width: calc(100% - 24px);
    height: 40px;
    margin: 16px 12px;
    background: #C00000; /* Figma design red color */
    border: none;
    border-radius: 8px;
    color: #FFFFFF; /* Updated to pure white for better contrast */
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    cursor: pointer;
    transition: all 0.3s ease-out; /* Figma design transition */
    outline: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-project-button:hover,
.add-project-button:focus {
    background: #A00000; /* Darker red for hover state */
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(192, 0, 0, 0.3); /* Updated shadow to match new color */
    outline: none;
}

/* Projects Content */
.projects-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 12px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100% - 140px); /* Account for header and add button */
}

/* Custom scrollbar for projects content */
.projects-content::-webkit-scrollbar {
    width: 4px;
}

.projects-content::-webkit-scrollbar-track {
    background: transparent;
}

.projects-content::-webkit-scrollbar-thumb {
    background: #C00000; /* Matching new red color scheme */
    border-radius: 2px;
}

.projects-content::-webkit-scrollbar-thumb:hover {
    background: #A00000; /* Darker red for hover state */
}

/* Responsive adjustments for projects panel */
@media (max-width: 768px) {
    .projects-panel {
        width: 260px;
    }

    .projects-panel-header {
        padding: 12px 12px 8px 12px;
    }

    .projects-back-button {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }

    .projects-panel-title {
        font-size: 14px;
    }

    .add-project-button {
        width: calc(100% - 20px);
        margin: 12px 10px;
        height: 36px;
        font-size: 13px;
    }

    .projects-content {
        padding: 0 10px 12px 10px;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .projects-panel {
        width: 240px;
    }

    .projects-panel-header {
        padding: 10px 10px 6px 10px;
    }

    .projects-back-button {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .projects-panel-title {
        font-size: 13px;
    }

    .projects-expand-button,
    .projects-add-button {
        width: 22px;
        height: 22px;
        font-size: 12px;
    }

    .projects-expand-button {
        font-size: 10px;
    }

    .projects-add-button {
        font-size: 14px;
    }

    .add-project-button {
        width: calc(100% - 16px);
        margin: 10px 8px;
        height: 32px;
        font-size: 12px;
    }

    .projects-dropdown-container {
        margin: 12px;
    }

    .projects-dropdown-select {
        padding: 10px 12px;
        font-size: 13px;
        padding-right: 36px;
    }

    .projects-content {
        padding: 0 8px 10px 8px;
        gap: 8px;
    }
}

@media (max-width: 360px) {
    .projects-panel {
        width: 200px;
    }

    .add-project-button {
        height: 28px;
        font-size: 11px;
    }

    .projects-expand-button,
    .projects-add-button {
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .projects-expand-button {
        font-size: 9px;
    }

    .projects-add-button {
        font-size: 12px;
    }

    .projects-dropdown-select {
        padding: 8px 10px;
        font-size: 12px;
        padding-right: 32px;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .sidebar-nav-item:hover,
    .sidebar-toggle:hover {
        outline: 2px solid #000;
    }

    .projects-back-button:hover,
    .add-project-button:hover {
        outline: 2px solid #000;
    }
}

/* Expanded Projects Panel Styles */
.projects-panel.expanded {
    width: 1500px !important;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Expanded Projects Container */
.expanded-projects-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    min-height: 0;
}

/* Simple Header */
.simple-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #E5E7EB;
    background: #FFFFFF;
    gap: 20px;
}

.header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #C00000;
    border-radius: 8px;
    flex-shrink: 0;
}

.logo-a {
    font-size: 24px;
    font-weight: 700;
    color: #FFFFFF;
}

/* Collapse button for expanded panel */
.header-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #6B7280;
}

.header-collapse-btn:hover {
    background: #E5E7EB;
    border-color: #D1D5DB;
    color: #374151;
}

.header-collapse-btn svg {
    width: 16px;
    height: 16px;
}

.header-search {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 45px 10px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    font-size: 14px;
    color: #333333;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.2s ease;
}

.search-input:focus {
    border-color: #C00000;
}

.search-input::placeholder {
    color: #999999;
}

.search-button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #C00000;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background: #F5F5F5;
}

.header-add-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: #C00000;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.header-add-btn:hover {
    background: #A00000;
}

.header-add-btn svg {
    flex-shrink: 0;
}

/* Table Container */
.table-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: #FFFFFF;
    font-size: 14px;
    color: #333333;
}

.data-table thead th {
    background: #FAFAFA;
    border-bottom: 1px solid #E5E7EB;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #333333;
    font-size: 13px;
    white-space: nowrap;
}

.data-table thead th:first-child {
    border-top-left-radius: 8px;
}

.data-table thead th:last-child {
    border-top-right-radius: 8px;
}

.data-table tbody tr {
    border-bottom: 1px solid #F0F0F0;
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover {
    background-color: #FAFAFA;
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table td {
    padding: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    color: #999999;
    transition: all 0.2s ease;
}

.info-btn:hover {
    background: #F0F0F0;
    color: #666666;
}

.sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    color: #C00000;
    transition: all 0.2s ease;
}

.sort-btn:hover {
    background: rgba(192, 0, 0, 0.1);
}

.checkbox-column {
    width: 50px;
    padding-left: 24px !important;
}

.checkbox-column input[type="checkbox"] {
    width: 16px;
    height: 16px;
    border: 1px solid #D1D5DB;
    border-radius: 4px;
    cursor: pointer;
    accent-color: #C00000;
}

.id-column {
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: #666666;
    min-width: 60px;
}

.name-column {
    min-width: 150px;
    font-weight: 500;
}

.description-column {
    color: #666666;
    min-width: 200px;
}

.type-column {
    color: #666666;
    min-width: 100px;
}

.status-column {
    min-width: 100px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
}

.status-badge.status-blue {
    background: #E0F2FE;
    color: #0369A1;
}

.status-badge.status-green {
    background: #D1FAE5;
    color: #065F46;
}

.status-badge.status-yellow {
    background: #FEF3C7;
    color: #92400E;
}

.actions-column {
    width: 60px;
    padding-right: 24px !important;
}

.actions-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #666666;
    transition: all 0.2s ease;
}

.actions-btn:hover {
    background: #F0F0F0;
    color: #333333;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: #FFFFFF;
    border-top: 1px solid #E5E7EB;
    font-size: 13px;
    color: #666666;
}

.pagination-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagination-nav {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 6px;
    cursor: pointer;
    color: #666666;
    transition: all 0.2s ease;
}

.pagination-nav:hover:not(:disabled) {
    background: #F5F5F5;
    border-color: #D1D5DB;
}

.pagination-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 13px;
}

.pagination-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.pagination-progress {
    width: 200px;
    height: 4px;
    background: #F0F0F0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar {
    width: 2%;
    height: 100%;
    background: #C00000;
    border-radius: 2px;
}

.pagination-numbers {
    display: flex;
    align-items: center;
    gap: 8px;
}

.page-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #666666;
    font-size: 13px;
    transition: all 0.2s ease;
}

.page-number:hover {
    background: #F0F0F0;
}

.page-number.active {
    background: #C00000;
    color: #FFFFFF;
}

.page-dots {
    color: #999999;
    padding: 0 8px;
}

.pagination-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pagination-btn {
    padding: 8px 16px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 6px;
    color: #666666;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover {
    background: #F5F5F5;
    border-color: #D1D5DB;
}

.results-per-page select {
    padding: 8px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    background: #FFFFFF;
    color: #666666;
    font-size: 13px;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s ease;
}

.results-per-page select:focus {
    border-color: #C00000;
}

.results-per-page select option {
    color: #333333;
}

/* Tab Navigation */
.tab-navigation {
    display: flex;
    gap: 2px;
    padding: 0 20px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-navigation::-webkit-scrollbar {
    display: none;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    min-width: 80px;
}

.tab-item:hover {
    background: rgba(220, 38, 38, 0.05);
}

.tab-item.active {
    border-bottom-color: #DC2626;
    background: rgba(220, 38, 38, 0.05);
}

.tab-label {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    transition: color 0.2s ease;
}

.tab-item.active .tab-label {
    color: #DC2626;
}

.tab-count {
    font-size: 12px;
    color: #9CA3AF;
    background: #E5E7EB;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 20px;
    text-align: center;
}

.tab-item.active .tab-count {
    background: #DC2626;
    color: #FFFFFF;
}

/* Tab Content */
.tab-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Grid View */
.grid-view {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: none;
}

.grid-view.active {
    display: block;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

/* Project Card - Grid Style */
.project-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.project-card:hover {
    border-color: #DC2626;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
    transform: translateY(-2px);
}

.card-image {
    position: relative;
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #F3F4F6;
}

.card-status {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
}

.card-content {
    padding: 16px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.project-id {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.project-type {
    font-size: 12px;
    color: #6B7280;
}

.project-title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-badge {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
}

.status-fase1 {
    background: #DBEAFE;
    color: #1E40AF;
}

.status-fase2 {
    background: #D1FAE5;
    color: #065F46;
}

.status-revisió {
    background: #FEF3C7;
    color: #92400E;
}

/* List View */
.list-view {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: none;
}

.list-view.active {
    display: block;
}

.projects-list {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    overflow: hidden;
}

.list-header {
    display: flex;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
    font-weight: 600;
    font-size: 14px;
    color: #374151;
}

.header-cell {
    flex: 1;
    padding: 12px 16px;
    text-align: left;
}

.header-cell:first-child {
    flex: 0 0 80px;
}

.header-cell:last-child {
    flex: 0 0 120px;
    text-align: center;
}

/* Project Row - List Style */
.project-row {
    display: flex;
    border-bottom: 1px solid #F3F4F6;
    transition: background-color 0.2s ease;
}

.project-row:hover {
    background: #F9FAFB;
}

.project-row:last-child {
    border-bottom: none;
}

.row-cell {
    flex: 1;
    padding: 16px;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #374151;
}

.id-cell {
    flex: 0 0 80px;
    font-weight: 600;
    color: #111827;
}

.name-cell {
    font-weight: 500;
}

.status-cell {
    gap: 8px;
}

.status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.status-fase1 {
    background: #3B82F6;
}

.status-indicator.status-fase2 {
    background: #10B981;
}

.status-indicator.status-revisió {
    background: #F59E0B;
}

.type-cell {
    color: #6B7280;
}

.actions-cell {
    flex: 0 0 120px;
    justify-content: center;
    gap: 8px;
}

.row-action-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.row-action-btn:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.row-action-btn img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

/* Project Card */
.project-card {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-card:hover {
    border-color: #DC2626;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.1);
    transform: translateY(-1px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-id {
    font-size: 12px;
    font-weight: 600;
    color: #6B7280;
    background: #F3F4F6;
    padding: 2px 6px;
    border-radius: 4px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.card-body {
    flex: 1;
}

.card-description {
    font-size: 13px;
    color: #6B7280;
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-footer {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.badge {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.badge-type {
    background: #E0E7FF;
    color: #3730A3;
}

.badge-phase {
    background: #DCFCE7;
    color: #166534;
}

/* List View Card Adjustments */
.projects-grid.list-view .project-card {
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    gap: 12px;
}

.projects-grid.list-view .card-header {
    flex: 0 0 auto;
    width: 100px;
}

.projects-grid.list-view .card-body {
    flex: 1;
    min-width: 0;
}

.projects-grid.list-view .card-footer {
    flex: 0 0 auto;
}

/* Details Section */
.project-details-section {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.details-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid #E5E7EB;
    background: #F8F9FA;
}

.details-back-button {
    width: 32px;
    height: 32px;
    border: none;
    background: #FFFFFF;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.details-back-button:hover {
    background: #F3F4F6;
}

.details-back-button img {
    width: 16px;
    height: 16px;
    opacity: 0.6;
}

.details-project-name {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.details-content {
    padding: 16px;
}

.project-info {
    margin-bottom: 24px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #F3F4F6;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
}

.info-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

.project-actions {
    display: flex;
    gap: 12px;
}

.action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

.action-button.primary {
    background: #DC2626;
    color: #FFFFFF;
}

.action-button.primary:hover {
    background: #B91C1C;
}

.action-button.secondary {
    background: #F3F4F6;
    color: #374151;
    border: 1px solid #E5E7EB;
}

.action-button.secondary:hover {
    background: #E5E7EB;
}

.action-button img {
    width: 16px;
    height: 16px;
    opacity: 0.8;
}

.action-button span {
    white-space: nowrap;
}

/* Responsive adjustments for expanded panel */
@media (max-width: 1200px) {
    .projects-panel.expanded {
        width: 700px !important;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 992px) {
    .projects-panel.expanded {
        width: 600px !important;
    }

    .expanded-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

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

@media (max-width: 768px) {
    .projects-panel.expanded {
        width: 100% !important;
        max-width: 500px;
    }

    .expanded-header {
        padding: 16px;
    }

    .location-text {
        font-size: 14px;
    }

    .filter-controls {
        padding: 12px 16px;
    }

    .tab-navigation {
        padding: 0 16px;
    }

    .tab-item {
        padding: 10px 16px;
        min-width: 70px;
    }

    .tab-label {
        font-size: 13px;
    }

    .tab-count {
        font-size: 11px;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 16px;
    }

    .grid-view,
    .list-view {
        padding: 16px;
    }

    .card-image {
        height: 140px;
    }

    .project-title {
        font-size: 15px;
    }

    .view-toggle-container {
        padding: 10px 16px;
    }

    .view-toggle-btn span {
        display: none;
    }
}

@media (max-width: 600px) {
    .projects-panel.expanded {
        max-width: 100%;
    }

    .projects-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 12px;
    }

    .card-image {
        height: 120px;
    }

    .card-content {
        padding: 12px;
    }

    .project-title {
        font-size: 14px;
    }

    .projects-list {
        font-size: 13px;
    }

    .header-cell,
    .row-cell {
        padding: 12px;
    }

    .actions-cell {
        flex: 0 0 100px;
    }

    .row-action-btn {
        width: 28px;
        height: 28px;
    }
}

@media (max-width: 480px) {
    .expanded-header {
        padding: 12px;
    }

    .header-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .action-btn {
        padding: 6px 12px;
        font-size: 13px;
    }

    .filter-tags {
        gap: 6px;
    }

    .tag {
        padding: 5px 10px;
        font-size: 12px;
    }

    .tab-item {
        padding: 8px 12px;
        min-width: 60px;
    }

    .tab-count {
        display: none;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .grid-view,
    .list-view {
        padding: 12px;
    }

    .card-image {
        height: 160px;
    }

    .row-cell {
        padding: 10px;
        font-size: 13px;
    }

    .id-cell {
        flex: 0 0 60px;
    }

    .actions-cell {
        flex: 0 0 80px;
    }

    .row-action-btn img {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 360px) {
    .location-text {
        font-size: 13px;
    }

    .project-count {
        font-size: 12px;
        padding: 3px 8px;
    }

    .search-input {
        padding: 8px 12px 8px 36px;
        font-size: 13px;
    }

    .tab-label {
        font-size: 12px;
    }

    .card-content {
        padding: 10px;
    }

    .project-title {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .row-cell {
        padding: 8px;
        font-size: 12px;
    }

    .actions-cell {
        flex: 0 0 70px;
        gap: 4px;
    }
}

/* Dropdown Menu Styles */
.add-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 200px;
    margin-top: 4px;
}

.add-menu-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid #f0f0f0;
    color: #333;
    font-size: 14px;
}

.add-menu-item:last-child {
    border-bottom: none;
}

.add-menu-item:hover {
    background-color: #fafafa;
}

.add-menu-item:first-child,
.menu-item {
    color: #C00000;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    text-transform: none;
    font-size: 14px;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}

.menu-item svg {
    width: 16px;
    height: 16px;
}

/* Modal Overlay - positioned relative to sidebar */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 2000;
    padding-right: 40px;
}

/* Modal Styles */
.create-project-modal {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    width: 600px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
}

.modal-header {
    padding: 24px 24px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: #f5f5f5;
    color: #333;
}

.modal-body {
    padding: 0 24px;
}

.modal-footer {
    padding: 24px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    border-top: 1px solid #f0f0f0;
}

/* Form Field Styles */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.form-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #555;
}

.info-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    width: 14px;
    height: 14px;
    color: #999;
    transition: color 0.2s ease;
}

.info-btn:hover {
    color: #C00000;
}

.form-input,
.form-select,
.form-textarea {
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: white;
    font-family: inherit;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #C00000;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-select {
    cursor: pointer;
}

.modal-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.cancel-btn {
    background: white;
    color: #666;
    border: 1px solid #ddd;
}

.cancel-btn:hover {
    background: #f8f9fa;
    border-color: #999;
}

.create-btn {
    background: #C00000;
    color: white;
}

.create-btn:hover {
    background: #a00000;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(192, 0, 0, 0.3);
}

.create-btn:active {
    transform: translateY(0);
}

/* Sort button styles */
.sort-btn {
    transition: transform 0.2s ease;
}

.sort-btn.sort-asc {
    transform: rotate(180deg);
}

.sort-btn.sort-desc {
    transform: rotate(0deg);
}

.sort-btn:hover {
    color: #C00000;
}

/* Ensure sort button maintains color when active */
.sort-btn.sort-asc,
.sort-btn.sort-desc {
    color: #C00000;
}