styles.css

@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 flex items-center justify-between;
  }

  .sidebar-title {
    @apply text-white font-semibold text-lg;
  }

  .settings-btn {
    @apply text-gray-400 hover:text-white hover:bg-gray-700 text-lg w-8 h-8 flex items-center justify-center rounded transition-all;
  }

  .sidebar-content {
    @apply flex-1 overflow-y-auto;
  }

  .sidebar-section {
    @apply p-2;
  }

  .sidebar-section-header {
    @apply flex items-center justify-between px-2 py-1 mb-1;
  }

  .sidebar-section-title {
    @apply text-xs text-gray-400;
  }

  .section-add-btn {
    @apply text-gray-400 hover:text-white hover:bg-gray-700 text-sm w-5 h-5 flex items-center justify-center rounded transition-all;
  }

  .loading-spinner {
    @apply inline-block w-3 h-3 border-2 border-gray-400 border-t-transparent rounded-full;
    animation: spin 0.6s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  /* Session List Item */
  .session-list-item {
    @apply mb-3 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-indicator.disconnected {
    @apply bg-red-500;
  }

  .session-menu-btn {
    @apply text-gray-500 hover:text-gray-300 hover:bg-gray-600 ml-2 transition-all;
    font-size: 14px;
    line-height: 0.8;
    writing-mode: vertical-lr;
    letter-spacing: -2px;
    padding: 6px 3px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .session-menu {
    @apply absolute right-0 mt-1 bg-gray-700 border border-gray-600 rounded shadow-lg z-10 py-1 min-w-[120px];
  }

  .session-menu-item {
    @apply w-full text-left px-3 py-2 text-sm text-gray-300 hover:bg-gray-600 hover:text-white transition-colors;
  }

  .session-menu-item.delete-session-btn {
    @apply hover:bg-red-600 hover:text-white;
  }

  .session-name-container {
    min-width: 0;
  }

  .session-name-text {
    @apply text-gray-300;
  }

  .session-name-input {
    @apply bg-gray-700 border border-gray-600 rounded px-1 py-0 text-gray-100 text-sm focus:outline-none focus:border-blue-500;
    min-width: 80px;
  }

  /* 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;
  }

  .unread-indicator {
    display: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }

  .tab.unread .unread-indicator {
    display: inline-block;
    background-color: #3b82f6;
  }

  .tab.activity .unread-indicator {
    display: inline-block;
    border: 2px solid #eab308;
    border-top-color: transparent;
    background-color: transparent;
    animation: spin 1s linear infinite;
  }

  .tab-name {
    @apply text-sm text-gray-300;
  }

  .tab-close-btn {
    @apply text-gray-500 hover:text-red-500;
  }

  /* Button */
  .btn-primary {
    @apply 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 max-h-[90vh] overflow-y-auto;
  }

  .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;
    font-family: inherit;
    resize: vertical;
  }

  .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;
  }

  .form-checkbox {
    @apply w-4 h-4 rounded border-gray-600 bg-gray-700 text-blue-600 focus:ring-blue-500 focus:ring-2 cursor-pointer;
  }

  .color-input {
    @apply bg-gray-700 border border-gray-600 rounded px-2 py-1 h-10 w-20 cursor-pointer;
  }

  .btn-secondary {
    @apply bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm font-medium transition;
  }

  .btn-danger {
    @apply bg-red-600 hover:bg-red-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;
  }

  .btn-primary.loading {
    @apply opacity-75 cursor-not-allowed;
  }

  .btn-primary.loading .loading-spinner {
    @apply border-white border-t-transparent;
  }
}