@tailwind base; @tailwind components; @tailwind utilities; @layer components { /* Sidebar Styles */ .sidebar { @apply w-64 bg-gray-800 border-r border-gray-700 flex flex-col; } .sidebar-header { @apply p-4 border-b border-gray-700; } .sidebar-title { @apply text-white font-semibold text-lg; } .sidebar-content { @apply flex-1 overflow-y-auto; } .sidebar-section { @apply p-2; } .sidebar-section-title { @apply text-xs text-gray-400 px-2 py-1 mb-1; } .sidebar-footer { @apply p-3 border-t border-gray-700; } /* Session List Item */ .session-list-item { @apply px-3 py-2 rounded cursor-pointer hover:bg-gray-700 text-gray-300 text-sm flex items-center justify-between; } .session-list-item.active { @apply bg-gray-700; } .session-indicator { @apply w-2 h-2 rounded-full bg-gray-600; transition: background-color 0.2s; } .session-indicator.active { @apply bg-green-500; } .session-delete-btn { @apply text-gray-500 hover:text-red-500; opacity: 0; transition: opacity 0.2s; } .session-list-item:hover .session-delete-btn { opacity: 1; } /* Tabs */ .tabs-container { @apply flex bg-gray-900 border-b border-gray-700 overflow-x-auto; } .tab { @apply px-4 py-2 border-r border-gray-700 cursor-pointer hover:bg-gray-800 flex items-center space-x-2 min-w-max; } .tab.active { @apply bg-gray-800 border-b-2 border-blue-500; } .tab-name { @apply text-sm text-gray-300; } .tab-close-btn { @apply text-gray-500 hover:text-red-500; } /* Button */ .btn-primary { @apply w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm font-medium transition; } /* Session Container */ .session-wrapper { @apply absolute inset-0 hidden; } .session-wrapper.active { @apply block; } /* Modal */ .modal-overlay { @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50; } .modal-overlay.hidden { display: none; } .modal { @apply bg-gray-800 rounded-lg shadow-xl w-full max-w-md p-6; } .modal-title { @apply text-xl font-semibold text-white mb-4; } .form-group { @apply mb-4; } .form-label { @apply block text-sm font-medium text-gray-300 mb-2; } .form-input { @apply w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500; } .form-select { @apply w-full bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white focus:outline-none focus:border-blue-500; } .btn-secondary { @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm font-medium transition; } .btn-group { @apply flex justify-end space-x-3 mt-6; } .directory-input-group { @apply flex space-x-2; } .directory-input-group .form-input { @apply flex-1; } .btn-icon { @apply bg-gray-600 hover:bg-gray-700 text-white px-3 py-2 rounded text-sm font-medium transition; } }