src/renderer/styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Custom scrollbar styles - Dark */
  .dark ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  .dark ::-webkit-scrollbar-track {
    @apply bg-gray-800;
  }

  .dark ::-webkit-scrollbar-thumb {
    @apply bg-gray-600 rounded;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

  /* Custom scrollbar styles - Light */
  .light ::-webkit-scrollbar {
    @apply w-2 h-2;
  }

  .light ::-webkit-scrollbar-track {
    @apply bg-gray-200;
  }

  .light ::-webkit-scrollbar-thumb {
    @apply bg-gray-400 rounded;
  }

  .light ::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500;
  }

  /* Monaco editor overrides */
  .monaco-editor {
    @apply rounded;
  }

  .monaco-editor .margin {
    @apply bg-gray-800;
  }

  /* Diff highlighting for unified view */
  .diff-addition {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-left: 3px solid #22c55e;
  }

  .diff-deletion {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-left: 3px solid #ef4444;
  }

  .monaco-editor .comment-thread-decoration,
  .monaco-editor .comment-hover-decoration {
    width: 16px !important;
    height: 16px !important;
    margin-left: 5px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
  }

  .monaco-editor .comment-thread-decoration {
    background-color: rgba(59, 130, 246, 0.16);
    border: 1px solid rgba(59, 130, 246, 0.45);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.4);
  }

  .monaco-editor .comment-thread-decoration-start::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(37, 99, 235, 0.9);
  }

  .monaco-editor .comment-thread-decoration-middle::after,
  .monaco-editor .comment-thread-decoration-end::after {
    content: "";
    width: 2px;
    height: 100%;
    border-radius: 1px;
    background-color: rgba(37, 99, 235, 0.6);
  }

  .monaco-editor .comment-hover-decoration {
    border: 1px dashed rgba(148, 163, 184, 0.9);
    color: rgba(148, 163, 184, 0.9);
    font-size: 11px;
    font-weight: 600;
    background-color: rgba(15, 23, 42, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .monaco-editor .comment-hover-decoration::before {
    content: "+";
    line-height: 12px;
  }

  .monaco-editor.vs-dark .comment-hover-decoration {
    background-color: rgba(30, 64, 175, 0.3);
    border-color: rgba(191, 219, 254, 0.4);
    color: rgba(191, 219, 254, 0.85);
  }

  .monaco-editor .comment-line-highlight {
    background-color: rgba(59, 130, 246, 0.18) !important;
  }

  .monaco-editor .comment-line-highlight-margin {
    border-left: 2px solid rgba(59, 130, 246, 0.8);
  }

  /* Keyboard focus styles */
  *:focus {
    @apply outline-none;
  }

  .dark *:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-gray-900;
  }

  .light *:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-white;
  }

  /* Sidebar resize handle */
  .resize-handle {
    position: relative;
  }

  .resize-handle::after {
    content: "";
    position: absolute;
    top: 0;
    left: -2px;
    right: -2px;
    bottom: 0;
    cursor: col-resize;
  }

  /* Prevent text selection while resizing */
  .resizing {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }

  /* Global button and input borders and sizing */
  .dark button:not(.btn) {
    @apply border border-gray-500/70 px-4 py-1.5 rounded-lg;
  }

  .dark input:not(.input) {
    @apply border border-gray-500/80 px-4 py-1.5 rounded-lg;
  }

  .light button:not(.btn) {
    @apply border border-gray-200 px-4 py-1.5 rounded-lg;
  }

  .light input:not(.input) {
    @apply border border-gray-200 px-4 py-1.5 rounded-lg;
  }

  .light select {
    @apply border border-gray-200 px-4 py-1.5 rounded-lg;
  }

  .dark select {
    @apply border border-gray-500/70 px-4 py-1.5 rounded-lg;
  }
}

@layer components {
  .btn {
    @apply px-4 py-1.5 rounded-lg font-medium transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 flex items-center justify-center whitespace-nowrap border;
  }

  .dark .btn {
    @apply focus-visible:ring-offset-gray-900 border-gray-500/70;
  }

  .light .btn {
    @apply focus-visible:ring-offset-white border-gray-200;
  }

  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-500;
  }

  .dark .btn-secondary {
    @apply bg-gray-700 text-gray-100 hover:bg-gray-600 focus-visible:ring-gray-500;
  }

  .light .btn-secondary {
    @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus-visible:ring-gray-500;
  }

  .btn-success {
    @apply bg-green-600 text-white hover:bg-green-700 focus-visible:ring-green-500;
  }

  .btn-danger {
    @apply bg-red-600 text-white hover:bg-red-700 focus-visible:ring-red-500;
  }

  .dark .btn-ghost {
    @apply bg-transparent text-gray-300 hover:bg-gray-800 focus-visible:ring-gray-500;
  }

  .light .btn-ghost {
    @apply bg-transparent text-gray-700 hover:bg-gray-100 focus-visible:ring-gray-500;
  }

  .dark .input {
    @apply px-4 py-1.5 bg-gray-800 border border-gray-500/80 rounded-lg text-gray-100 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors duration-150;
  }

  .light .input {
    @apply px-4 py-1.5 bg-white border border-gray-200 rounded-lg text-gray-900 placeholder-gray-400 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-colors duration-150;
  }

  .dark .label {
    @apply block text-sm font-medium text-gray-300 mb-1;
  }

  .light .label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  .dark .card {
    @apply bg-gray-800 rounded-lg border border-gray-700 shadow-lg;
  }

  .light .card {
    @apply bg-white rounded-lg border border-gray-200 shadow-lg;
  }

  .sidebar-item {
    @apply flex items-center px-3 py-2 text-sm rounded transition-colors duration-150 cursor-pointer;
  }

  .dark .sidebar-item:hover {
    @apply bg-gray-800;
  }

  .light .sidebar-item:hover {
    @apply bg-gray-100;
  }

  .dark .sidebar-item.active {
    @apply bg-gray-700 text-white;
  }

  .light .sidebar-item.active {
    @apply bg-gray-200 text-gray-900;
  }

  /* React Complex Tree dark mode overrides */
  .dark .rct-tree-root,
  .dark .rct-tree {
    --rct-color-focustree-item-selected-bg: rgba(30, 64, 175, 0.3);
    --rct-color-focustree-item-selected-text: #e2e8f0;
    --rct-color-focustree-item-hover-bg: rgba(148, 163, 184, 0.16);
    --rct-color-focustree-item-hover-text: #f8fafc;
    --rct-color-focustree-item-active-bg: rgba(30, 64, 175, 0.45);
    --rct-color-focustree-item-active-text: #dbeafe;
    --rct-color-focustree-item-draggingover-bg: rgba(30, 64, 175, 0.45);
    --rct-color-focustree-item-draggingover-color: #e2e8f0;
    --rct-bar-color: #3b82f6;
    --rct-color-arrow: #94a3b8;
  }

  .dark .rct-tree-item-button {
    color: #e2e8f0;
  }

  .dark .rct-tree-item-button:hover {
    color: #f8fafc;
  }

  .tab {
    @apply px-4 py-2 text-sm font-medium border-b-2 border-transparent transition-colors duration-150 cursor-pointer;
  }

  .dark .tab {
    @apply text-gray-400;
  }

  .light .tab {
    @apply text-gray-600;
  }

  .dark .tab:hover {
    @apply text-gray-200;
  }

  .light .tab:hover {
    @apply text-gray-800;
  }

  .dark .tab.active {
    @apply text-white border-blue-500;
  }

  .light .tab.active {
    @apply text-gray-900 border-blue-600;
  }

  .pr-state-badge {
    @apply px-2 py-1 text-xs font-semibold rounded;
  }

  .pr-state-open {
    @apply bg-green-900 text-green-200;
  }

  .pr-state-closed {
    @apply bg-red-900 text-red-200;
  }

  .pr-state-merged {
    @apply bg-purple-900 text-purple-200;
  }

  .pr-state-draft {
    @apply bg-gray-700 text-gray-300;
  }

  .diff-addition {
    @apply bg-green-900 bg-opacity-30;
  }

  .diff-deletion {
    @apply bg-red-900 bg-opacity-30;
  }

  .diff-line-number {
    @apply text-gray-500 select-none;
  }

  .dark .comment-thread {
    @apply bg-gray-800 border-l-4 border-blue-500 rounded p-3 my-2;
  }

  .light .comment-thread {
    @apply bg-gray-50 border-l-4 border-blue-500 rounded p-3 my-2;
  }

  .comment-resolved {
    @apply opacity-60 border-gray-600;
  }

  /* Markdown code block styles for better contrast */
  .markdown-content pre {
    @apply font-mono text-sm;
  }

  /* Light mode code block styles with improved contrast */
  .light .markdown-content pre {
    @apply bg-gray-50 text-gray-900 border border-gray-200;
  }

  .light .markdown-content pre code {
    @apply text-gray-900 bg-transparent p-0;
  }

  /* Dark mode code block styles */
  .dark .markdown-content pre {
    @apply bg-gray-800 text-gray-100 border border-gray-700;
  }

  .dark .markdown-content pre code {
    @apply text-gray-100 bg-transparent p-0;
  }

  /* Inline code styles */
  .light .markdown-content :not(pre)>code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-medium border border-gray-200;
  }

  .dark .markdown-content :not(pre)>code {
    @apply bg-gray-800 text-gray-200 px-1.5 py-0.5 rounded text-sm font-medium border border-gray-700;
  }

  /* Code block cursor styles */
  .markdown-content pre *,
  .markdown-content pre code,
  .markdown-content pre code * {
    cursor: text !important;
  }

  /* Prevent button flickering */
  .group:hover .group-hover\:opacity-100 {
    transition-delay: 0ms;
  }

  /* Syntax highlighting token colors for light mode */
  .light .markdown-content .token.comment,
  .light .markdown-content .token.prolog,
  .light .markdown-content .token.doctype,
  .light .markdown-content .token.cdata {
    @apply text-gray-600;
  }

  .light .markdown-content .token.punctuation {
    @apply text-gray-700;
  }

  .light .markdown-content .token.property,
  .light .markdown-content .token.tag,
  .light .markdown-content .token.boolean,
  .light .markdown-content .token.number,
  .light .markdown-content .token.constant,
  .light .markdown-content .token.symbol,
  .light .markdown-content .token.deleted {
    @apply text-blue-700;
  }

  .light .markdown-content .token.selector,
  .light .markdown-content .token.attr-name,
  .light .markdown-content .token.string,
  .light .markdown-content .token.char,
  .light .markdown-content .token.builtin,
  .light .markdown-content .token.inserted {
    @apply text-green-700;
  }

  .light .markdown-content .token.operator,
  .light .markdown-content .token.entity,
  .light .markdown-content .token.url,
  .light .markdown-content .language-css .token.string,
  .light .markdown-content .style .token.string {
    @apply text-orange-700;
  }

  .light .markdown-content .token.atrule,
  .light .markdown-content .token.attr-value,
  .light .markdown-content .token.keyword {
    @apply text-purple-700;
  }

  .light .markdown-content .token.function,
  .light .markdown-content .token.class-name {
    @apply text-pink-700;
  }

  .light .markdown-content .token.regex,
  .light .markdown-content .token.important,
  .light .markdown-content .token.variable {
    @apply text-orange-700;
  }
}

@layer utilities {
  .animate-slide-in {
    animation: slideIn 0.2s ease-out;
  }

  .animate-fade-in {
    animation: fadeIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .no-drag {
    -webkit-app-region: no-drag;
  }

  .drag {
    -webkit-app-region: drag;
  }
}
