/* Modern Employee Document Viewer - Matching Homepage Theme */

.container {
    @apply flex min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50;
}

/* Sidebar Styles - Modern Glassmorphism */
.sidebar {
    @apply w-80 bg-white/80 backdrop-blur-md border-r border-gray-200/50 
    flex flex-col h-screen sticky top-0 shadow-lg transition-all duration-300;
}

/* Collapsed Sidebar Styles */
.sidebar.collapsed {
    @apply w-20;
}

/* Toggle Button Styles */
.toggleButton {
    @apply absolute -right-3 top-6 z-10
    bg-white/90 backdrop-blur-sm border border-gray-200 
    rounded-full p-2 shadow-lg
    hover:bg-purple-50 hover:border-purple-300
    transition-all duration-300 transform hover:scale-110
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

.toggleIcon {
    @apply w-4 h-4 text-gray-600 transition-transform duration-300;
}

.toggleButton:hover .toggleIcon {
    @apply text-purple-600;
}

.sidebarHeader {
    @apply p-6 border-b border-gray-200/50;
}

/* Collapsed Header Styles */
.sidebar.collapsed .sidebarHeader {
    @apply p-4;
}

.logoContainer {
    @apply flex items-center space-x-3 mb-6 cursor-pointer transition-all duration-300;
}

/* Collapsed Logo Styles */
.sidebar.collapsed .logoContainer {
    @apply justify-center space-x-0 mb-4;
}

.logoIcon {
    @apply w-8 h-8 text-purple-600 transition-colors duration-300;
}

.logoContainer:hover .logoIcon {
    @apply text-purple-700 scale-110;
}

.logoText {
    @apply text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 
    bg-clip-text text-transparent transition-all duration-300;
}

/* Hide logo text when collapsed */
.sidebar.collapsed .logoText {
    @apply opacity-0 w-0 overflow-hidden;
}

.searchContainer {
    @apply relative transition-all duration-300 mb-4;
}

/* Hide search when collapsed */
.sidebar.collapsed .searchContainer {
    @apply opacity-0 h-0 overflow-hidden mb-0;
}

.searchIcon {
    @apply w-5 h-5 absolute left-4 top-1/2 transform -translate-y-1/2 
    text-gray-500 transition-all duration-300 z-10;
}

.searchInput {
    @apply w-full pl-12 pr-4 py-3.5 
    border border-gray-200/60 rounded-2xl
    focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-400
    placeholder-gray-500 transition-all duration-300 
    bg-gradient-to-r from-white/90 to-gray-50/90 backdrop-blur-md
    shadow-sm hover:shadow-md focus:shadow-lg
    text-gray-700 font-medium;
}

.searchInput:hover {
    @apply border-purple-300/80 shadow-md bg-gradient-to-r from-white to-purple-50/30;
}

/* Search icon styling is now handled in the component */

.searchInput:focus {
    @apply bg-gradient-to-r from-white to-purple-50/40 
    ring-purple-500/30 border-purple-400/70;
}

/* Document List Styles - Enhanced */
.docList {
    @apply flex-1 overflow-y-auto p-4;
    scrollbar-width: thin;
    scrollbar-color: theme('colors.purple.300') theme('colors.gray.100');
}

/* Collapsed Document List */
.sidebar.collapsed .docList {
    @apply p-2;
}

.docList::-webkit-scrollbar {
    @apply w-2;
}

.docList::-webkit-scrollbar-track {
    @apply bg-gray-100 rounded-full;
}

.docList::-webkit-scrollbar-thumb {
    @apply bg-purple-300 rounded-full;
}

.docList::-webkit-scrollbar-thumb:hover {
    @apply bg-purple-400;
}

.categoryGroup {
    @apply mb-4;
}

.categoryHeader {
    @apply flex items-center px-4 py-3 text-sm font-semibold text-gray-700 
    hover:bg-gradient-to-r hover:from-purple-50 hover:to-indigo-50 
    rounded-xl cursor-pointer transition-all duration-300;
}

/* Collapsed Category Header */
.sidebar.collapsed .categoryHeader {
    @apply px-2 justify-center;
}

.chevronIcon {
    @apply w-5 h-5 mr-3 text-gray-400 transition-transform duration-300;
}

/* Hide chevron text when collapsed */
.sidebar.collapsed .chevronIcon {
    @apply mr-0;
}

.categoryHeader:hover .chevronIcon {
    @apply text-purple-600;
}

.categoryName {
    @apply font-semibold transition-all duration-300;
}

/* Hide category name when collapsed */
.sidebar.collapsed .categoryName {
    @apply opacity-0 w-0 overflow-hidden;
}

.categoryDocs {
    @apply ml-8 space-y-2 mt-3 transition-all duration-300;
}

/* Hide category docs when collapsed */
.sidebar.collapsed .categoryDocs {
    @apply opacity-0 h-0 overflow-hidden ml-0 mt-0;
}

.docItem {
    @apply flex items-center w-full px-4 py-3 text-sm text-gray-700 
    hover:bg-gradient-to-r hover:from-purple-50 hover:to-indigo-50 
    rounded-xl transition-all duration-300 
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

/* Collapsed Doc Item */
.sidebar.collapsed .docItem {
    @apply px-2 justify-center;
}

.docItem.selected {
    @apply bg-gradient-to-r from-purple-100 to-indigo-100 text-purple-700 
    shadow-md border border-purple-200;
}

.docIcon {
    @apply w-5 h-5 mr-3 flex-shrink-0 transition-colors duration-300;
}

/* Collapsed Doc Icon */
.sidebar.collapsed .docIcon {
    @apply mr-0;
}

.docItem:hover .docIcon {
    @apply text-purple-600 scale-110;
}

.docItem.selected .docIcon {
    @apply text-purple-600;
}

.docName {
    @apply truncate text-left font-medium transition-all duration-300;
}

/* Hide doc name when collapsed */
.sidebar.collapsed .docName {
    @apply opacity-0 w-0 overflow-hidden;
}

/* VIEW-MODE BUTTONS - Enhanced */
.viewModeContainer {
    @apply p-6 border-b border-gray-200/50 
    bg-gradient-to-r from-purple-50/80 to-indigo-50/80 backdrop-blur-sm transition-all duration-300;
}

/* Collapsed View Mode Container */
.sidebar.collapsed .viewModeContainer {
    @apply p-2;
}

.viewModeHeader {
    @apply mb-4 transition-all duration-300;
}

/* Hide view mode header when collapsed */
.sidebar.collapsed .viewModeHeader {
    @apply opacity-0 h-0 overflow-hidden mb-2;
}

.viewModeTitle {
    @apply text-sm font-bold text-gray-700 tracking-wide uppercase 
    text-center pb-2 border-b border-gray-200;
}

.viewModeButtons {
    @apply flex flex-row justify-between space-x-3 transition-all duration-300;
}

/* Collapsed View Mode Buttons */
.sidebar.collapsed .viewModeButtons {
    @apply flex-col space-x-0 space-y-2;
}

.viewModeButton {
    @apply flex items-center justify-center w-14 h-14 
    bg-white/80 backdrop-blur-sm
    border-2 border-gray-200 
    rounded-2xl shadow-lg
    transition-all duration-300 ease-in-out
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2
    relative transform;
}

/* Collapsed View Mode Button */
.sidebar.collapsed .viewModeButton {
    @apply w-12 h-12;
}

.viewModeButton:hover {
    @apply scale-110 border-purple-300 shadow-xl
    bg-gradient-to-br from-purple-50 to-indigo-50;
}

.viewModeButton:hover .viewModeIcon {
    @apply text-purple-600;
}

.viewModeIcon {
    @apply w-6 h-6 text-gray-600 
    transition-all duration-300;
}

/* Collapsed View Mode Icon */
.sidebar.collapsed .viewModeIcon {
    @apply w-5 h-5;
}

/* Active view mode styling */
.activeViewMode {
    @apply bg-gradient-to-br from-purple-600 to-indigo-600 
    border-purple-600 shadow-xl scale-105;
}

.activeViewMode .viewModeIcon {
    @apply text-white;
}

.activeViewMode:hover {
    @apply from-purple-700 to-indigo-700 border-purple-700;
}

/* Tooltip Styles - Enhanced */
.tooltipContainer {
    @apply relative;
}

.tooltip {
    @apply absolute left-1/2 transform -translate-x-1/2 
    bottom-full mb-3 z-50
    pointer-events-none;
}

/* Adjust tooltip position for collapsed state */
.sidebar.collapsed .tooltip {
    @apply left-full ml-3 bottom-1/2 transform translate-y-1/2 translate-x-0;
}

.tooltipText {
    @apply bg-gray-900/90 backdrop-blur-sm text-white text-xs font-semibold
    px-3 py-2 rounded-lg shadow-xl
    whitespace-nowrap;
}

.tooltipArrow {
    @apply absolute top-full left-1/2 transform -translate-x-1/2
    w-0 h-0 border-l-4 border-r-4 border-t-4
    border-l-transparent border-r-transparent border-t-gray-900;
}

/* Adjust tooltip arrow for collapsed state */
.sidebar.collapsed .tooltipArrow {
    @apply top-1/2 left-0 transform -translate-y-1/2 -translate-x-full
    border-l-0 border-r-4 border-t-4 border-b-4
    border-r-gray-900 border-t-transparent border-b-transparent;
}

/* Main Content Styles - Enhanced */
.mainContent {
    @apply flex-1 p-8;
}

.docHeader {
    @apply mb-8;
}

.docTitle {
    @apply text-4xl md:text-5xl font-extrabold;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.summaryContainer {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 mb-8 
    border border-gray-100 hover:shadow-2xl transition-all duration-500;
}

.summaryHeader {
    @apply flex items-center mb-6;
}

.summaryIcon {
    @apply w-8 h-8 text-purple-600 mr-4 p-1 bg-gradient-to-br from-purple-100 to-indigo-100 
    rounded-xl;
}

.summaryTitle {
    @apply text-2xl font-bold text-gray-900;
}

.summaryText {
    @apply text-gray-700 leading-relaxed text-lg;
}

.pdfContainer {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-6 
    h-[calc(100vh-20rem)] border border-gray-100;
}

.pdfViewer {
    @apply w-full h-full border-0 rounded-xl;
}

/* Loading States - Enhanced */
.loadingContainer {
    @apply flex min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50;
}

.mainLoadingContent {
    @apply flex-1 flex items-center justify-center p-8;
}

.loadingContent {
    @apply flex flex-col items-center justify-center;
}

.loadingIcon {
    @apply w-16 h-16 text-purple-600 mb-6 animate-spin;
}

.loadingText {
    @apply text-xl text-gray-700 font-semibold;
}

/* Profile Section - Enhanced */
.profileSection {
    @apply p-6 border-t border-gray-200/50 mt-auto transition-all duration-300;
}

/* Collapsed Profile Section */
.sidebar.collapsed .profileSection {
    @apply p-4;
}

.userDetails {
    @apply flex items-center space-x-4 mb-4 p-4 bg-white/50 rounded-xl;
}

.userIcon {
    @apply w-10 h-10 text-purple-600 p-1 bg-gradient-to-br from-purple-100 to-indigo-100 
    rounded-xl;
}

.username {
    @apply font-bold text-gray-800;
}

.userEmail {
    @apply text-sm text-gray-600;
}

/* Logout Button - Enhanced */
.logoutButton {
    @apply flex items-center justify-center w-full 
    bg-gradient-to-r from-red-500 to-red-600 text-white 
    py-3 px-6 rounded-xl font-semibold
    hover:from-red-600 hover:to-red-700 
    shadow-lg hover:shadow-xl transition-all duration-300
    transform hover:-translate-y-0.5
    focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2;
}

/* Collapsed Logout Button */
.sidebar.collapsed .logoutButton {
    @apply px-3 w-auto;
}

.logoutIcon {
    @apply w-5 h-5 mr-3 transition-all duration-300;
}

/* Hide logout text when collapsed */
.sidebar.collapsed .logoutIcon {
    @apply mr-0;
}

.sidebar.collapsed .logoutButton span {
    @apply opacity-0 w-0 overflow-hidden;
}

/* Home Button - Enhanced */
.homeButton {
    @apply flex items-center justify-center w-full
    bg-gradient-to-r from-purple-600 to-indigo-600 text-white 
    py-3 px-6 rounded-xl font-semibold
    hover:from-purple-700 hover:to-indigo-700 
    shadow-lg hover:shadow-xl transition-all duration-300
    transform hover:-translate-y-0.5
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

/* AI Search / Q&A - Enhanced */
.aiSearchForm {
    @apply flex flex-col space-y-4 p-4 bg-white/50 rounded-xl;
}

.aiSearchInput {
    @apply border-2 border-gray-200 rounded-xl p-3 w-full
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500
    transition-all duration-300 bg-white/50;
}

.aiSearchButton {
    @apply bg-gradient-to-r from-purple-600 to-indigo-600 text-white 
    px-6 py-3 rounded-xl font-semibold
    hover:from-purple-700 hover:to-indigo-700 
    shadow-lg hover:shadow-xl transition-all duration-300
    transform hover:-translate-y-0.5;
}

.aiAnswerContainer {
    @apply bg-gradient-to-r from-gray-50 to-purple-50 rounded-xl p-6 mt-4 
    border border-gray-200;
}

/* No document selected - Enhanced */
.noDocSelected {
    @apply flex flex-col items-center justify-center h-full text-center;
}

.noDocTitle {
    @apply text-2xl font-semibold text-gray-500 mb-4;
}

.noDocDescription {
    @apply text-lg text-gray-400;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        @apply w-72;
    }

    .mainContent {
        @apply p-6;
    }

    .docTitle {
        @apply text-3xl;
    }

    .summaryContainer {
        @apply p-6;
    }

    .pdfContainer {
        @apply h-[calc(100vh-24rem)] p-4;
    }
}

@media (max-width: 640px) {
    .container {
        @apply flex-col;
    }

    .sidebar {
        @apply w-full h-auto relative;
    }

    .mainContent {
        @apply p-4;
    }

    .docTitle {
        @apply text-2xl;
    }

    .summaryContainer {
        @apply p-4;
    }

    .pdfContainer {
        @apply h-[calc(100vh-28rem)] p-3;
    }

    .viewModeButtons {
        @apply space-x-2;
    }

    .viewModeButton {
        @apply w-12 h-12;
    }

    .viewModeIcon {
        @apply w-5 h-5;
    }
}

.docButton {
    @apply flex items-center w-full text-left
    px-2 py-1 text-sm text-gray-700 font-medium
    hover:bg-gradient-to-r hover:from-purple-50 hover:to-indigo-50 
    rounded-xl transition-all duration-300
    focus-within:outline-none focus-within:ring-2 focus-within:ring-purple-500 focus-within:ring-offset-2;
}

.docButton .docItem {
    @apply flex-1 flex items-center px-2 py-2 rounded-lg
    hover:bg-transparent border-0 focus:outline-none focus:ring-0;
}

/* Document Management Buttons */
.deleteButton {
    @apply inline-flex items-center justify-center
    p-2 text-gray-400 rounded-lg
    hover:text-red-600 hover:bg-red-50
    transition-all duration-300 transform hover:scale-110
    opacity-0
    focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2;
}

.trashIcon {
    @apply w-5 h-5;
}

