/* Project Card animations */
@keyframes project-card-in {
  from { opacity: 0; translate: 0 20px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes project-item-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Custom Color Utilities */
:root {
  --lime-text: #d7ff00;
  --lime-text-secondary: #d7ff00;
  --lime-badge-bg: rgba(215,255,0,0.12);
  --lime-badge-text: #d7ff00;
  --lime-border: rgba(215,255,0,0.3);

  /* Skeleton shimmer — dark theme */
  --sk-bg:       rgba(255,255,255,0.06);
  --sk-hi:       rgba(255,255,255,0.13);
  --sk-title-bg: rgba(255,255,255,0.10);
  --sk-title-hi: rgba(255,255,255,0.20);

  /* Team Management surfaces — dark theme defaults */
  --tm-bg-page:  #0f1419;
  --tm-bg-panel: #161b21;
  --tm-bg-card:  #1a1f26;
  --tm-bg-badge: #252b33;
  --tm-border:   rgba(255,255,255,0.08);
  --tm-text-primary:   #ffffff;
  --tm-text-secondary: #9ca3af;
  --tm-text-muted:     #6b7280;
}
html:not(.dark) {
  --lime-text: #4d7a00;
  --lime-text-secondary: #5c7300;
  --lime-badge-bg: rgba(215,255,0,0.18);
  --lime-badge-text: #4d7a00;
  --lime-border: #b8d900;

  /* Skeleton shimmer — light theme */
  --sk-bg:       rgba(0,0,0,0.055);
  --sk-hi:       rgba(0,0,0,0.11);
  --sk-title-bg: rgba(0,0,0,0.075);
  --sk-title-hi: rgba(0,0,0,0.14);

  /* Team Management surfaces — light theme */
  --tm-bg-page:  #f4f5f7;
  --tm-bg-panel: #eaecf0;
  --tm-bg-card:  #f8f9fb;
  --tm-bg-badge: #edf0f5;
  --tm-border:   #e2e4ea;
  --tm-text-primary:   #1a1d23;
  --tm-text-secondary: #6b7280;
  --tm-text-muted:     #8a94a6;
}

.text-lime-custom {
  color: #d7ff00;
}
html:not(.dark) .text-lime-custom {
  color: var(--lime-text);
}

.bg-lime-custom {
  background-color: #d7ff00;
}

.border-lime-custom {
  border-color: #d7ff00;
}

.ring-lime-custom {
  --tw-ring-color: #d7ff00;
}

.hover\:bg-lime-custom\/90:hover {
  background-color: rgba(215, 255, 0, 0.9);
}

.focus\:ring-lime-custom:focus {
  --tw-ring-color: #d7ff00;
}

.focus\:border-lime-custom:focus {
  border-color: #d7ff00;
}

/* ── Light theme: Tailwind text-[#d7ff00] override ── */
html:not(.dark) .text-\[\#d7ff00\] {
  color: var(--lime-text) !important;
}
html:not(.dark) .hover\:text-\[\#d7ff00\]:hover {
  color: var(--lime-text) !important;
}
html:not(.dark) .group-hover\:text-\[\#d7ff00\] {
  color: var(--lime-text) !important;
}

.bg-dark-bg {
  background-color: #0f1419;
}

.bg-dark-surface {
  background-color: #1a1f26;
}

.text-dark-bg {
  color: #0f1419;
}

.dark .dark\:bg-dark-bg {
  background-color: #0f1419;
}

.dark .dark\:bg-dark-surface {
  background-color: #1a1f26;
}

.dark .dark\:text-white {
  color: white;
}

.dark .dark\:border-gray-700 {
  border-color: rgb(55, 65, 81);
}

.dark .dark\:border-gray-800 {
  border-color: rgb(31, 41, 55);
}

/* Remove blue browser outline globally */
* {
  outline: none !important;
}

*:focus {
  outline: none !important;
}

/* Custom focus styles using ring */
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
}

/* ── Global select reset: remove native OS arrow ── */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* ── Unified select style (app-select) ──
   Use this class on every <select> across the project.
   Handles dark mode automatically via html.dark selector. */
.app-select {
  display: block;
  width: auto;
  padding: 8px 32px 8px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  color: #fff;
  background-color: #1a1f26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s ease;
}
.app-select:hover {
  border-color: rgba(255, 255, 255, 0.2);
}
.app-select:focus {
  border-color: rgba(215, 255, 0, 0.4);
  box-shadow: 0 0 0 3px rgba(215, 255, 0, 0.08);
}
.app-select option {
  background: #1a1f26;
  color: #fff;
}

/* Light mode overrides */
html:not(.dark) .app-select {
  color: #111827;
  background-color: #f9fafb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  border-color: #e5e7eb;
}
html:not(.dark) .app-select:hover {
  border-color: #d1d5db;
}
html:not(.dark) .app-select:focus {
  border-color: rgba(215, 255, 0, 0.6);
}
html:not(.dark) .app-select option {
  background: #fff;
  color: #111827;
}

/* Size modifier: compact (for tight toolbars/sidebars) */
.app-select-sm {
  padding: 5px 28px 5px 8px;
  font-size: 12px;
  border-radius: 4px;
}

/* Radix Tabs active state styles */
[data-state="active"] {
  background-color: white !important;
  border-left-color: #d7ff00 !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
}

.dark [data-state="active"] {
  background-color: #161b21 !important;
}

/* Active tab icon color - only for tab triggers, not accordion content */
[role="tab"][data-state="active"] > i,
[role="tab"][data-state="active"] i {
  color: #d7ff00 !important;
}
html:not(.dark) [role="tab"][data-state="active"] > i,
html:not(.dark) [role="tab"][data-state="active"] i {
  color: var(--lime-text) !important;
}

/* Override icon colors in Settings Integrations */
#settings-root .ri-dropbox-fill {
  color: #0061FF !important;
}

#settings-root .ri-telegram-fill {
  color: #0088cc !important;
}

#settings-root .ri-link-unlink-m {
  color: #9ca3af !important;
}

/* Global button cursor */
button {
  cursor: pointer;
}
button[role="switch"] {
  all: unset;
  width: 36px;
  height: 20px;
  background-color: #9ca3af !important;
  border-radius: 9999px;
  position: relative;
  transition: background-color 200ms;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  cursor: pointer;
}

.dark button[role="switch"] {
  background-color: #4b5563 !important;
}

button[role="switch"]:focus {
  outline: none;
}

button[role="switch"][data-state="checked"] {
  background-color: #d7ff00 !important;
}

.dark button[role="switch"][data-state="checked"] {
  background-color: #d7ff00 !important;
}

button[role="switch"] > span {
  display: block;
  width: 16px;
  height: 16px;
  background-color: white;
  border-radius: 9999px;
  transition: transform 200ms;
  transform: translateX(2px);
  will-change: transform;
}

button[role="switch"][data-state="checked"] > span {
  transform: translateX(18px);
  background-color: #0f1419;
}

/* ══════════════════════════════════════════════
   Light theme: global lime-as-text fixes
   ══════════════════════════════════════════════ */

/*
  Utility class: use .lime-text instead of inline color: '#d7ff00'
  Automatically adapts to light/dark themes.
*/
.lime-text { color: #d7ff00 }
html:not(.dark) .lime-text { color: var(--lime-text) }

/* Lime accent badge — label/tag with semi-transparent lime bg */
.lime-badge {
  background: rgba(215,255,0,0.12);
  color: #d7ff00;
}
html:not(.dark) .lime-badge {
  background: rgba(215,255,0,0.15);
  color: var(--lime-text);
}

/* Left sidebar border for active item */
html:not(.dark) [data-state="active"] {
  border-left-color: var(--lime-border) !important;
}

/* ══════════════════════════════════════════════
   Credit package card — review-card style
   ══════════════════════════════════════════════ */
@property --ga {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@keyframes borderSpin {
  to { --ga: 360deg; }
}

.credit-card {
  background: #1a1f26;
  border-radius: 12px;
  padding: 24px;
  position: relative;
  transition: transform 0.25s, box-shadow 0.25s;
  border: 1.5px solid rgba(255,255,255,0.07);
  background-clip: padding-box;
}

.credit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3), 0 0 20px rgba(215,255,0,0.08);
  border-color: transparent;
  background-image:
    linear-gradient(#1a1f26, #1a1f26),
    conic-gradient(from var(--ga), transparent 0%, transparent 70%, rgba(215,255,0,0.9) 83%, rgba(215,255,0,0.3) 88%, rgba(215,255,0,0.9) 93%, transparent 100%);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  animation: borderSpin 3s linear infinite;
}

.credit-card.credit-card--locked {
  opacity: 0.55;
  background: #151a20;
  border-color: rgba(255,255,255,0.04);
}

.credit-card.credit-card--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: rgba(255,255,255,0.04);
  background-image: none;
  animation: none;
}

/* ══════════════════════════════════════════════
   Team Management — Light Theme
   All overrides scoped to .tm-root so they
   don't bleed into the rest of the app.
   ══════════════════════════════════════════════ */

/* ── Surfaces ── */
html:not(.dark) .tm-root .bg-\[\#0f1419\]              { background-color: #f4f5f7 !important; }
html:not(.dark) .tm-root .bg-\[\#161b21\]              { background-color: #eaecf0 !important; }
html:not(.dark) .tm-root .bg-\[\#1a1f26\]              { background-color: #f8f9fb !important; }
html:not(.dark) .tm-root .bg-\[\#1f2630\]              { background-color: #ffffff !important; }
html:not(.dark) .tm-root .bg-\[\#252b33\]              { background-color: #edf0f5 !important; }
html:not(.dark) .tm-root .hover\:bg-\[\#1f252c\]:hover { background-color: #f0f2f6 !important; }
html:not(.dark) .tm-root .hover\:bg-\[\#252b33\]:hover { background-color: #e8eaef !important; }

/* Cards in GroupDetailPage need a border to lift off the background */
html:not(.dark) .tm-root .bg-\[\#1a1f26\].rounded-lg {
  border: 1px solid #e2e4ea !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
}

/* ── Text ── */
html:not(.dark) .tm-root .text-white               { color: #1a1d23 !important; }
html:not(.dark) .tm-root .text-gray-200            { color: #374151 !important; }
html:not(.dark) .tm-root .text-gray-300            { color: #4b5563 !important; }
html:not(.dark) .tm-root .text-gray-400            { color: #6b7280 !important; }
html:not(.dark) .tm-root .text-gray-500            { color: #9ca3af !important; }
html:not(.dark) .tm-root .text-gray-600            { color: #9ca3af !important; }
html:not(.dark) .tm-root .text-\[\#9ca3af\]        { color: #6b7280 !important; }
html:not(.dark) .tm-root .text-\[\#6b7280\]        { color: #8a94a6 !important; }
html:not(.dark) .tm-root .text-\[\#d7ff00\]        { color: #4d7a00 !important; }
html:not(.dark) .tm-root .hover\:text-\[\#d7ff00\]:hover { color: #4d7a00 !important; }
html:not(.dark) .tm-root .hover\:text-white:hover  { color: #111827 !important; }

/* ── Borders ── */
html:not(.dark) .tm-root .border-gray-700\/50 { border-color: #dde0e7 !important; }
html:not(.dark) .tm-root .border-gray-700     { border-color: #dde0e7 !important; }

/* ── Hover states (role list, sidebar buttons) ── */
html:not(.dark) .tm-root .hover\:bg-gray-700\/50:hover { background-color: rgba(0,0,0,0.04) !important; }
html:not(.dark) .tm-root .hover\:bg-gray-800\/30:hover { background-color: rgba(0,0,0,0.035) !important; }

/* ── Member cards ── */
html:not(.dark) .tm-root .participant-card {
  border: 1px solid #e2e4ea !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
}
html:not(.dark) .tm-root .participant-card:hover {
  border-color: #c8cad4 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* ── SVG strokes ── */
html:not(.dark) .tm-root .text-gray-600 svg,
html:not(.dark) .tm-root svg.text-gray-600 { color: #c0c4ce !important; }

/* ── "No roles" empty state ── */
html:not(.dark) .tm-root .text-gray-500 { color: #9ca3af !important; }

/* ── Loading spinner ── */
html:not(.dark) .tm-root .text-gray-400 { color: #9ca3af !important; }

/* Light mode: softer card treatment */
html:not(.dark) .credit-card {
  background: #f9fafb;
  border-color: #e5e7eb;
}
html:not(.dark) .credit-card:hover {
  background-image:
    linear-gradient(#f9fafb, #f9fafb),
    conic-gradient(from var(--ga), transparent 0%, transparent 70%, rgba(77,122,0,0.7) 83%, rgba(77,122,0,0.2) 88%, rgba(77,122,0,0.7) 93%, transparent 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08), 0 0 20px rgba(77,122,0,0.06);
}
html:not(.dark) .credit-card.credit-card--locked {
  background: #f3f4f6;
  border-color: #e5e7eb;
}
html:not(.dark) .credit-card.credit-card--locked:hover {
  background-image: none;
  box-shadow: none;
}

/* VideoPlayer — force dark styles regardless of app theme
   Used in always-dark contexts (e.g. Version Comparison modal). */
.vp-force-dark .bg-gray-50   { background-color: #161b21 !important; }
.vp-force-dark .bg-gray-100  { background-color: rgba(255,255,255,0.05) !important; }
.vp-force-dark .bg-gray-200  { background-color: rgba(255,255,255,0.10) !important; }
.vp-force-dark .bg-gray-300  { background-color: rgba(107,114,128,0.60) !important; }
.vp-force-dark .border-gray-200 { border-color: rgba(255,255,255,0.05) !important; }
.vp-force-dark .text-gray-900 { color: #ffffff !important; }
.vp-force-dark .text-gray-600 { color: rgb(209,213,219) !important; }
.vp-force-dark .text-gray-500 { color: rgb(107,114,128) !important; }
.vp-force-dark .text-gray-400 { color: rgb(107,114,128) !important; }
.vp-force-dark .hover\:bg-gray-100:hover  { background-color: rgba(255,255,255,0.10) !important; }
.vp-force-dark .hover\:bg-gray-300:hover  { background-color: rgba(255,255,255,0.15) !important; }
.vp-force-dark .hover\:text-gray-900:hover { color: #ffffff !important; }

/* =====================================================
   VideoPlayer controls — theme-aware (light default, dark override)
   ===================================================== */

/* Background + border (timeline bar and controls bar) */
.vp-controls-bg        { background-color: #f9fafb; }  /* gray-50 */
html.dark .vp-controls-bg { background-color: #161b21; }

.vp-border             { border-top-color: #e5e7eb; }   /* gray-200 */
html.dark .vp-border   { border-top-color: rgba(255,255,255,0.05); }

/* Default text color inside controls */
.vp-text               { color: #111827; }              /* gray-900 */
html.dark .vp-text     { color: #ffffff; }

/* Play/Pause button */
.vp-play-btn           { background-color: #e5e7eb; }   /* gray-200 */
.vp-play-btn:hover     { background-color: #d1d5db; }   /* gray-300 */
html.dark .vp-play-btn          { background-color: rgba(255,255,255,0.10); }
html.dark .vp-play-btn:hover    { background-color: rgba(255,255,255,0.15); }

/* Icon buttons (volume, fullscreen) */
.vp-icon-btn           { color: #4b5563; }              /* gray-600 */
.vp-icon-btn:hover     { background-color: #f3f4f6; color: #111827; }
html.dark .vp-icon-btn          { color: #d1d5db; }
html.dark .vp-icon-btn:hover    { background-color: rgba(255,255,255,0.10); color: #ffffff; }

/* Volume slider track */
.vp-volume-track       { background-color: #d1d5db; }   /* gray-300 */
html.dark .vp-volume-track { background-color: rgba(107,114,128,0.60); }

/* Progress bar track */
.vp-progress-track     { background-color: #9ca3af; }   /* gray-400 */
html.dark .vp-progress-track { background-color: #4b5563; }

/* Time display */
.vp-time               { background-color: #f3f4f6; }   /* gray-100 */
html.dark .vp-time     { background-color: rgba(255,255,255,0.05); }
.vp-time-current       { color: #111827; }
html.dark .vp-time-current { color: #ffffff; }
.vp-time-sep           { color: #9ca3af; }
.vp-time-total         { color: #6b7280; }
html.dark .vp-time-total { color: #9ca3af; }

/* Speed / Quality menu buttons */
.vp-menu-btn           { color: #4b5563; }
.vp-menu-btn:hover     { background-color: #f3f4f6; color: #111827; }
html.dark .vp-menu-btn          { color: #d1d5db; }
html.dark .vp-menu-btn:hover    { background-color: rgba(255,255,255,0.10); color: #ffffff; }
.vp-menu-btn-active    { background-color: #e5e7eb; color: #111827; }
html.dark .vp-menu-btn-active   { background-color: rgba(255,255,255,0.10); color: #ffffff; }

/* Speed / Quality dropdowns */
.vp-dropdown           { background-color: #ffffff; border: 1px solid #e5e7eb; }
html.dark .vp-dropdown { background-color: #1a1f26; border: 1px solid rgba(255,255,255,0.10); }
.vp-dropdown-item      { color: #374151; }
.vp-dropdown-item:hover { background-color: #f3f4f6; color: #111827; }
html.dark .vp-dropdown-item         { color: #d1d5db; }
html.dark .vp-dropdown-item:hover   { background-color: rgba(255,255,255,0.05); color: #ffffff; }
.vp-dropdown-item-active { background-color: rgba(215,255,0,0.15); color: #d7ff00; font-weight: 600; }
html.dark .vp-dropdown-item-active  { background-color: rgba(215,255,0,0.15); color: #d7ff00; font-weight: 600; }

/* Playhead ring matches the controls background */
.vp-playhead           { ring-color: #f9fafb; --tw-ring-color: #f9fafb; }
html.dark .vp-playhead { --tw-ring-color: #161b21; }

/* ===================================================== */

/* Stage action buttons (Comments, Info, Download, Analyze) — theme-aware */
.stage-action-btn {
  background-color: #e5e7eb;
  color: #374151;
  transition: background-color 150ms;
}
.stage-action-btn:hover  { background-color: #d1d5db; }
.stage-action-btn:active { background-color: #c8cdd6; }

html.dark .stage-action-btn {
  background-color: #1e2228;
  color: #9ca3af;
}
html.dark .stage-action-btn:hover  { background-color: #2a2f38; }
html.dark .stage-action-btn:active { background-color: #0d1117; }

/* Dropdowns from stage action buttons */
.stage-action-dropdown {
  background-color: #ffffff;
  border-color: #e5e7eb;
}
html.dark .stage-action-dropdown {
  background-color: #1a1f26;
  border-color: #374151;
}

.stage-action-dropdown-item {
  color: #374151;
}
.stage-action-dropdown-item:hover { background-color: #f3f4f6; }

html.dark .stage-action-dropdown-item {
  color: #d1d5db;
}
html.dark .stage-action-dropdown-item:hover { background-color: #2a2f38; }

/* Text and border colors inside stage-action-dropdown (light/dark) */
.stage-action-dropdown h5                   { color: #111827; }
html.dark .stage-action-dropdown h5         { color: #ffffff; }

.stage-action-dropdown .text-white          { color: #111827; }
html.dark .stage-action-dropdown .text-white { color: #ffffff; }

.stage-action-dropdown .text-gray-300       { color: #374151 !important; }
html.dark .stage-action-dropdown .text-gray-300 { color: #d1d5db !important; }

.stage-action-dropdown .text-gray-400       { color: #4b5563 !important; }
html.dark .stage-action-dropdown .text-gray-400 { color: #9ca3af !important; }

.stage-action-dropdown .text-gray-500       { color: #6b7280 !important; }
html.dark .stage-action-dropdown .text-gray-500 { color: #6b7280 !important; }

.stage-action-dropdown .border-gray-700     { border-color: #e5e7eb; }
html.dark .stage-action-dropdown .border-gray-700 { border-color: #374151; }

.stage-action-dropdown .border-gray-200     { border-color: #e5e7eb; }
html.dark .stage-action-dropdown .border-gray-200 { border-color: #374151; }