/* Fleck Theme - Current Blue/Slate Colors */

[data-theme="fleck"] {
  /* Custom Shadow (standard Tailwind shadow-lg equivalent) */
  --theme-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* Primary Colors (Current Blues) */
  --theme-primary: #2563eb;        /* blue-600 - darker normal state */
  --theme-primary-hover: #3b82f6;  /* blue-500 - lighter hover state */
  --theme-primary-soft: #dbeafe;   /* blue-100 */

  /* Accent Colors */
  --theme-accent: #fbbf24;         /* yellow-400 */
  --theme-accent-hover: #f59e0b;   /* yellow-500 */

  /* Surface Colors (Original Dark Theme) */
  --theme-surface: #0f172a;        /* slate-900 - original dark bg */
  --theme-surface-elevated: #1e293b; /* slate-800 - original cards */
  --theme-surface-sunken: #334155; /* slate-700 - original inputs */

  /* Sidebar Colors */
  --theme-sidebar: #0f172a;        /* slate-900 - same as main surface */
  --theme-sidebar-elevated: #1e293b; /* slate-800 - same as elevated surface */

  /* Editor Colors */
  --theme-editor-bg: #1f2937;      /* gray-800 - lighter for editor modal */

  /* Text Colors (Original) */
  --theme-text-primary: #f1f5f9;   /* slate-100 - original light text */
  --theme-text-secondary: #94a3b8; /* slate-400 - original secondary */
  --theme-text-tertiary: #64748b;  /* slate-500 - original tertiary */
  --theme-text-on-dark: #f1f5f9;   /* slate-100 */
  --theme-text-on-dark-secondary: #94a3b8; /* slate-400 */

  /* Border Colors (Dark Theme) */
  --theme-border: #334155;         /* slate-700 - original dark borders */
  --theme-border-subtle: #334155;  /* slate-700 - subtle dark borders */

  /* Button Background Colors */
  --theme-button-secondary: #475569; /* slate-600 - medium gray for secondary buttons */

  /* Status Colors */
  --theme-danger: #ef4444;         /* red-500 */
  --theme-danger-hover: #dc2626;   /* red-600 - darker red */
  --theme-success: #10b981;        /* green-500 */

  /* Action Button Colors */
  --theme-action-edit: #60a5fa;    /* blue-400 - more vibrant blue */
  --theme-action-delete: #f87171;  /* red-400 - more vibrant red */
  --theme-action-assign: #4ade80;  /* green-400 - more vibrant green */

  /* Navigation Button Colors */
  --theme-nav-text: #60a5fa;      /* blue-400 - original blue for fleck */
}


/* Content item hover for fleck theme - match Tailwind slate-700 */
[data-theme="fleck"] .group:hover {
  background-color: #334155 !important;
}

/* Tweet item hover for fleck theme */
[data-theme="fleck"] .tweet-item:hover {
  background-color: #334155 !important;
}

/* Thinner borders for content containers in fleck theme */
[data-theme="fleck"] .divide-y.rounded-lg.overflow-hidden.border {
  border: 1px solid #334155 !important; /* Make container border thinner - slate-700 */
}

[data-theme="fleck"] div[style*="border-color: var(--color-border)"] {
  border-width: 1px !important; /* Override thick border from CSS variable */
  border-style: solid !important;
}

/* Remove thick border from content containers in fleck theme */
[data-theme="fleck"] .divide-y.rounded-lg.overflow-hidden.border {
  border: none !important;
}

/* Ensure divider lines are visible in fleck theme */
[data-theme="fleck"] .divide-y > * + * {
  border-top: 1px solid #334155 !important; /* slate-700 dividers */
}

/* Navigation button borders for fleck theme - match original, but not for selected buttons or tabs */
[data-theme="fleck"] button[style*="color: var(--color-nav-text)"]:not(.ring-2):not(.rounded-t-lg) {
  border: 1px solid #334155 !important; /* slate-700 like original */
}

[data-theme="fleck"] button[style*="color: var(--color-nav-text)"]:not(.ring-2):not(.rounded-t-lg):hover {
  border-color: #475569 !important; /* slate-600 on hover like original */
  color: #93c5fd !important; /* blue-300 - matches dark:hover:text-blue-300 */
}

/* Content item button styles (like Restricted button) */
[data-theme="fleck"] button.rounded-full.px-2.py-1 {
  border-color: #475569 !important; /* slate-600 - normal border */
}

[data-theme="fleck"] button.rounded-full.px-2.py-1:hover {
  background-color: #475569 !important; /* slate-600 background on hover */
  color: #e2e8f0 !important; /* slate-200 - lighter text on hover */
  border-color: #64748b !important; /* slate-500 border on hover */
}

/* ToastUI Editor styling - middle gray content area background */
[data-theme="fleck"] .toastui-editor-dark .toastui-editor-main {
  background-color: #2d3748 !important; /* gray-750 - middle between gray-700 and gray-800 */
}

[data-theme="fleck"] .toastui-editor-dark .ProseMirror {
  background-color: #2d3748 !important; /* gray-750 - where user types */
}

[data-theme="fleck"] .toastui-editor-dark .toastui-editor-md-preview {
  background-color: #2d3748 !important; /* gray-750 - preview area */
}

[data-theme="fleck"] .editor-modal [style*="border-bottom"] {
  border-color: #374151 !important; /* gray-700 borders */
}

[data-theme="fleck"] .editor-modal [style*="border-top"] {
  border-color: #374151 !important; /* gray-700 borders */
}

/* Remove left border from dropdown button to avoid double border */
[data-theme="fleck"] button.rounded-e-lg.px-2.py-2 {
  border-left: none !important;
  border-left-color: transparent !important;
  border-left-width: 0 !important;
}

/* Bold ring effect for selected buttons in fleck theme */
[data-theme="fleck"] .ring-2 {
  --tw-ring-opacity: 0.8 !important;
  --tw-ring-offset-width: 0px !important;
  box-shadow: 0 0 0 2px var(--tw-ring-color) !important;
  /* Let the border-color be set by the component for selected state */
}

/* Primary button hover effects for fleck theme */
[data-theme="fleck"] button[style*="background-color: var(--color-primary)"]:hover {
  background-color: var(--color-primary-hover) !important;
  transition: background-color 0.2s ease !important;
}

/* More specific selector for new content button */
[data-theme="fleck"] .px-4.py-2.text-white.rounded-lg[style*="background-color: var(--color-primary)"]:hover {
  background-color: var(--color-primary-hover) !important;
}

/* Active/pressed state for buttons - even lighter */
[data-theme="fleck"] button[style*="background-color: var(--color-primary)"]:active {
  background-color: #60a5fa !important; /* blue-400 - even lighter when pressed */
}

/* Hover effects for secondary gray buttons (like Publish) */
[data-theme="fleck"] button[style*="background-color: var(--color-button-secondary)"]:hover {
  background-color: #64748b !important; /* slate-500 - bg-slate-500 */
}

[data-theme="fleck"] button[style*="background-color: var(--color-button-secondary)"]:active {
  background-color: #94a3b8 !important; /* slate-400 - even lighter when pressed */
}

/* Remove tab borders in fleck theme */
[data-theme="fleck"] button.rounded-t-lg,
[data-theme="fleck"] .rounded-t-lg {
  border: none !important;
  border-bottom: none !important;
}