/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* === Color Tokens === */
:root {
  /* Main page background: dark on desktop, lighter in mobile/PWA */
  --page-main-bg: #0f1419;
}

/* === PWA Safe Area & Dynamic Viewport === */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --avail-height: 100dvh;
  /* Bottom nav height: 0 on desktop, 64px on mobile (overridden below) */
  --navbar-width: 64px;
  --bottom-nav-height: 0px;
}

@supports not (height: 100dvh) {
  :root {
    --avail-height: calc(100vh - env(safe-area-inset-top, 0px));
  }
}

/* Mobile overrides */
@media (max-width: 1023px) {
  :root {
    --navbar-width: 0px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
    /* PWA/Mobile: lighter main background */
    --page-main-bg: #161b21;
  }
}

/* PWA standalone mode: lighter background */
@media (display-mode: standalone) {
  :root {
    --page-main-bg: #161b21;
  }

  /* In standalone, make all dark bg elements use the lighter page bg */
  .dark body,
  .dark .bg-page-main { background-color: var(--page-main-bg) !important; }
}

/* Safe-area utility classes */
.safe-top { padding-top: var(--safe-top); }
.safe-bottom { padding-bottom: var(--safe-bottom); }
.safe-left { padding-left: var(--safe-left); }
.safe-right { padding-right: var(--safe-right); }
.safe-x { padding-left: var(--safe-left); padding-right: var(--safe-right); }
.safe-y { padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.safe-all { padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); }
.h-screen-safe { height: var(--avail-height); }
.min-h-screen-safe { min-height: var(--avail-height); }

/* Margin-based safe-area variants (for fixed elements) */
.mt-safe { margin-top: var(--safe-top); }
.mb-safe { margin-bottom: var(--safe-bottom); }

/* Fluid typography for mobile: scale down on small screens */
@media (max-width: 639px) {
  html {
    font-size: clamp(14px, 3.8vw, 16px);
  }

  /* Touch target helper — opt-in only (add class="touch-target" to critical buttons) */
  /* Global 44px enforcement removed: it breaks badges, inline links, and small UI components */

  /* Horizontal lists → vertical or horizontal scroll on small screens */
  .mobile-scroll-x {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 8px;
  }
  .mobile-scroll-x > * {
    scroll-snap-align: start;
    flex-shrink: 0;
  }
  .mobile-scroll-x::-webkit-scrollbar {
    display: none;
  }

  .mobile-stack {
    flex-direction: column !important;
  }
}

/* Theme CSS Variables */
:root {
  --color-background: white;
  --color-surface: rgb(249, 250, 251);
  --color-border: rgb(229, 231, 235);
  --color-text-primary: rgb(17, 24, 39);
  --color-text-secondary: rgb(107, 114, 128);
  --color-accent: rgb(215, 255, 0);
  --color-accent-hover: rgb(196, 235, 0);
  --more-sheet-bg: #f3f4f6;

  /* Emoji Picker React overrides */
  --epr-dark-category-icon-active-color: #d7ff00;
}

.dark {
  --color-background: #161b21;
  --color-surface: #1a1f26;
  --more-sheet-bg: #161b21;
  --color-border: rgb(31, 41, 55);
  --color-text-primary: white;
  --color-text-secondary: rgb(209, 213, 219);
  --color-accent: rgb(215, 255, 0);
  --color-accent-hover: rgb(196, 235, 0);
  
  /* Emoji Picker React overrides */
  --epr-dark-category-icon-active-color: #d7ff00;
}

/* Emoji Picker: Force override category icon active color */
aside.epr-main,
.epr-main {
  --epr-category-icon-active-color: #d7ff00 !important;
  --epr-dark-category-icon-active-color: #d7ff00 !important;
}

/* Emoji Picker: Hide the circular border around active icons */
.epr-main button[aria-selected="true"]::before,
.epr-main .epr-cat-btn[aria-selected="true"]::before,
.epr-main .epr-cat-btn:focus::before {
  display: none !important;
  border: none !important;
}

/* Emoji Picker: Force recolor blue (#3371B7) SVG icons to lime (#d7ff00) */
/* The icons are background-image with hardcoded blue color in SVG */
.epr-main .epr-cat-btn.epr-active,
.epr-main button[aria-selected="true"].epr-cat-btn,
.epr-main .epr-cat-btn:hover {
  filter: brightness(0) saturate(100%) invert(88%) sepia(85%) saturate(2196%) hue-rotate(8deg) brightness(107%) contrast(106%) !important;
}

/* Disable autofill background and text color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-background-clip: text;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
  box-shadow: inset 0 0 20px 20px #161b21 !important;
}

/* Smooth theme transitions */
body,
nav,
main,
.theme-transition {
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out;
}

/* Scrollbar styles are defined in the "Custom Scrollbar" section below */

/* Disable transitions on page load */
.no-transition,
.no-transition * {
  transition: none !important;
}

/* Radix UI Dropdown Menu Animations */
@keyframes slideDownAndFade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUpAndFade {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

[data-state="open"][data-side="bottom"] {
  animation: slideDownAndFade 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-state="closed"][data-side="bottom"] {
  animation: slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fullscreen video player styles */
.video-player-container:fullscreen,
.video-player-container:-webkit-full-screen,
.video-player-container:-moz-full-screen {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100vw !important;
  background: black !important;
}

.video-player-container:fullscreen > div,
.video-player-container:-webkit-full-screen > div,
.video-player-container:-moz-full-screen > div {
  border-radius: 0 !important;
}

.video-player-container:fullscreen > div:first-child,
.video-player-container:-webkit-full-screen > div:first-child,
.video-player-container:-moz-full-screen > div:first-child {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: visible !important;
  position: relative !important;
}

.video-player-container:fullscreen video,
.video-player-container:-webkit-full-screen video,
.video-player-container:-moz-full-screen video {
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

/* Pikaday Dark Theme */
.pika-single {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
  color: white !important;
}

.pika-title {
  background: #1a1f26 !important;
  color: white !important;
}

.pika-label {
  color: white !important;
  background: transparent !important;
}

.pika-select {
  background: #161b21 !important;
  color: white !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.25rem !important;
  padding: 0.25rem !important;
}

.pika-select:hover {
  background: rgba(215, 255, 0, 0.1) !important;
}

.pika-select option {
  background: #161b21 !important;
  color: white !important;
}

.pika-prev,
.pika-next {
  background: transparent !important;
}

.pika-prev:hover,
.pika-next:hover {
  background: rgba(215, 255, 0, 0.1) !important;
}

.pika-table th {
  color: rgb(156, 163, 175) !important;
}

.pika-button {
  background: transparent !important;
  color: white !important;
}

.pika-button:hover {
  background: rgba(215, 255, 0, 0.2) !important;
  border-radius: 0.25rem !important;
}

.is-selected .pika-button {
  background: rgb(215, 255, 0) !important;
  color: #161b21 !important;
  box-shadow: none !important;
  border-radius: 0.25rem !important;
  font-weight: 600 !important;
}

.is-today .pika-button {
  color: rgb(215, 255, 0) !important;
  font-weight: 600 !important;
}

.is-disabled .pika-button {
  color: rgb(75, 85, 99) !important;
}

.is-disabled .pika-button:hover {
  background: transparent !important;
  cursor: not-allowed !important;
}

/* Lime Theme Components */
.lime-block {
  background-color: rgb(215, 255, 0);
}

.lime-text {
  color: #161b21;
}

.lime-text-muted {
  color: rgba(15, 20, 25, 0.7);
}

.lime-button {
  background-color: rgb(215, 255, 0);
  color: #161b21;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 200ms ease-in-out;
}

.lime-button:hover {
  background-color: rgb(196, 235, 0);
  transform: translateY(-1px);
}

.lime-icon-bg {
  background-color: rgba(15, 20, 25, 0.1);
}

.lime-card {
  background-color: rgb(215, 255, 0);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Custom Color Utilities */
.text-lime-custom {
  color: rgb(215, 255, 0);
}

.bg-lime-custom {
  background-color: rgb(215, 255, 0);
}

.border-lime-custom {
  border-color: rgb(215, 255, 0);
}

.hover\:border-lime-custom:hover {
  border-color: rgb(215, 255, 0);
}

.ring-lime-custom {
  --tw-ring-color: rgb(215, 255, 0);
}

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

.focus\:ring-lime-custom:focus {
  --tw-ring-color: rgb(215, 255, 0);
}

.focus\:border-lime-custom:focus {
  border-color: rgb(215, 255, 0);
}

.bg-dark-bg {
  background-color: #161b21;
}

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

.text-dark-bg {
  color: #161b21;
}

.dark .dark\:bg-dark-bg {
  background-color: #161b21;
}

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

/* Lime color utility */
.text-lime {
  color: rgb(215, 255, 0);
}

.hover\:text-lime:hover {
  color: rgb(215, 255, 0);
}

.bg-lime {
  background-color: rgb(215, 255, 0);
}

.hover\:bg-lime:hover {
  background-color: rgb(215, 255, 0);
}

.hover\:bg-lime-darker:hover {
  background-color: rgb(196, 235, 0);
}

/* Advanced Select Dropdown Animation */
.hs-select .hs-select-dropdown {
  opacity: 0;
  transition: opacity 600ms ease-in-out, margin 600ms ease-in-out;
}

.hs-select.active .hs-select-dropdown {
  opacity: 1;
}

/* Custom Scrollbar - Cross-browser */
/* CSS Variables for dynamic theme-aware colors */
:root {
  --scrollbar-thumb-color: rgba(156, 163, 175, 0.4);
  --scrollbar-track-color: transparent;
  --scrollbar-border-color: transparent;
}

.dark {
  --scrollbar-thumb-color: rgba(107, 114, 128, 0.4);
  --scrollbar-track-color: transparent;
  --scrollbar-border-color: transparent;
}

/* For Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track-color);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 200ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(156, 163, 175, 0.7);
  background-clip: padding-box;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(107, 114, 128, 0.7);
  background-clip: padding-box;
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.4) transparent;
}

.dark * {
  scrollbar-color: rgba(107, 114, 128, 0.4) transparent;
}

/* Button hover state with maximum specificity */
button.btn-lime,
a.btn-lime,
.btn-lime {
  color: rgb(215, 255, 0) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

button.btn-lime:hover,
a.btn-lime:hover,
.btn-lime:hover {
  background-color: #1a1f26 !important;
}

button.btn-lime:active,
a.btn-lime:active,
.btn-lime:active {
  background-color: #252b33 !important;
}

button.btn-lime-disabled,
a.btn-lime-disabled,
.btn-lime-disabled {
  color: rgb(156, 163, 175) !important;
  background-color: transparent !important;
  transition: all 0.2s ease !important;
}

button.btn-lime-disabled:hover,
a.btn-lime-disabled:hover,
.btn-lime-disabled:hover {
  background-color: #1a1f26 !important;
}

/* Flatpickr Custom Styling */
.flatpickr-calendar {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
}

.flatpickr-months {
  background: #1a1f26 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #252b33 !important;
  color: white !important;
}

.flatpickr-day {
  color: rgb(209, 213, 219) !important;
  border-radius: 0.375rem !important;
}

.flatpickr-day:hover {
  background: #252b33 !important;
  border-color: #252b33 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #d7ff00 !important;
  border-color: #d7ff00 !important;
  color: #161b21 !important;
}

.flatpickr-day.today {
  border-color: #d7ff00 !important;
}

.flatpickr-day.disabled {
  color: rgb(75, 85, 99) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #d7ff00 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #c4eb00 !important;
}

.flatpickr-weekday {
  color: rgb(156, 163, 175) !important;
}

/* Global autofill styling override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #161b21 inset !important;
  box-shadow: 0 0 0px 1000px #161b21 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Flatpickr Custom Styling */
.flatpickr-calendar {
  background: #1a1f26 !important;
  border: 1px solid rgb(55, 65, 81) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3) !important;
}

.flatpickr-months {
  background: #1a1f26 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background: #252b33 !important;
  color: white !important;
}

.flatpickr-day {
  color: rgb(209, 213, 219) !important;
  border-radius: 0.375rem !important;
}

.flatpickr-day:hover {
  background: #252b33 !important;
  border-color: #252b33 !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #d7ff00 !important;
  border-color: #d7ff00 !important;
  color: #161b21 !important;
}

.flatpickr-day.today {
  border-color: #d7ff00 !important;
}

.flatpickr-day.disabled {
  color: rgb(75, 85, 99) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: #d7ff00 !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #c4eb00 !important;
}

.flatpickr-weekday {
  color: rgb(156, 163, 175) !important;
}

/* Global autofill styling override */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: white !important;
  -webkit-box-shadow: 0 0 0px 1000px #161b21 inset !important;
  box-shadow: 0 0 0px 1000px #161b21 inset !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Tiptap CollaborationCursor Styles */
.collaboration-cursor__caret {
  border-left: 2px solid;
  border-right: 2px solid;
  margin-left: -1px;
  margin-right: -1px;
  pointer-events: none;
  position: relative;
  word-break: normal;
}

.collaboration-cursor__label {
  border-radius: 3px 3px 3px 0;
  color: #161b21;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  left: -1px;
  line-height: normal;
  padding: 0.1rem 0.3rem;
  position: absolute;
  top: -1.4em;
  user-select: none;
  white-space: nowrap;
}

/* Tiptap Comments Decorations */
.comment-highlight {
  /* Remove cursor pointer - keep default text cursor */
  transition: background-color 0.2s;
  background-color: transparent;
  border-bottom: none;
}

/* Don't highlight on hover for inactive comments */
/* .comment-highlight:hover {
  background-color: rgba(215, 255, 0, 0.1);
} */

.comment-highlight-active {
  background-color: rgba(215, 255, 0, 0.3) !important;
  border-bottom: 2px solid #d7ff00;
  padding-bottom: 1px;
}

/* Slightly stronger highlight on hover for active comments */
.comment-highlight-active:hover {
  background-color: rgba(215, 255, 0, 0.4) !important;
}

/* Tiptap Editor Text Selection */
.ProseMirror ::selection {
  background: rgba(215, 255, 0, 0.3);
}

.ProseMirror::-moz-selection {
  background: rgba(215, 255, 0, 0.3);
}

/* Button with lime background sliding animation from left */
.btn-lime-slide {
  position: relative;
  overflow: hidden;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-lime-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d7ff00;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.btn-lime-slide:hover::before {
  transform: translateX(0);
}

.btn-lime-slide:hover {
  color: #161b21;
}

.btn-lime-slide > span {
  position: relative;
  z-index: 1;
}

/* Button with lime background sliding animation from left - 24px height */
.btn-lime-slide-24 {
  position: relative;
  overflow: hidden;
  font-weight: 500;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  line-height: 1rem;
  cursor: pointer;
  border: 1px solid #374151;
  background: transparent;
  color: #9ca3af;
  transition: color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55), border-color 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-lime-slide-24::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #d7ff00;
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 0;
}

.btn-lime-slide-24:hover::before {
  transform: translateX(0);
}

.btn-lime-slide-24:hover {
  color: #161b21;
  border-color: #374151;
}

.btn-lime-slide-24 > span {
  position: relative;
  z-index: 1;
}

/* Disable pointer events on lightbox backdrop only */
body.lightbox-active > *:not([class*="lightbox"]):not(#navbar-root):not(#navbar-mount):not(header):not(aside):not(.left-sidebar):not(.right-sidebar):not(#right-panel-root):not(#projects-sidebar):not(#projects-sidebar-root) {
  pointer-events: none !important;
}

/* CSS variable for navbar width (must be late in file to override any earlier `:root` blocks) */
:root {
  --navbar-width: 64px;
  --bottom-nav-height: 0px;
}

@media (max-width: 1023px) {
  :root {
    --navbar-width: 0px;
    --bottom-nav-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* Ensure left sidebar navbar doesn't interfere with modals */
#navbar-mount {
  z-index: 40;
}

/* Radix UI Portal z-index hierarchy */
[data-radix-portal] {
  z-index: 9999;
}

/* Radix Tooltip Dark Theme Override - CSS Variables */
:root,
.radix-themes {
  --tooltip-bg: #1a1f26;
  --tooltip-color: #9ca3af;
  --color-overlay: #1a1f26;
  --gray-1: #9ca3af;
  --gray-2: #1a1f26;
  --gray-a1: #1a1f26;
  --gray-a2: #1a1f26;
}

/* Force override Radix Tooltip styles - Maximum Specificity */
.radix-themes .rt-TooltipContent,
.rt-TooltipContent,
[role="tooltip"],
[data-radix-popper-content-wrapper] [role="tooltip"],
[data-radix-tooltip-content] {
  background-color: #1a1f26 !important;
  background: #1a1f26 !important;
  color: #9ca3af !important;
  border: 1px solid #9ca3af !important;
  box-shadow: none !important;
}

/* Target tooltip text specifically */
.rt-TooltipText,
.rt-TooltipContent .rt-TooltipText {
  color: #9ca3af !important;
}

.radix-themes .rt-TooltipContent *,
.rt-TooltipContent * {
  color: #9ca3af !important;
}

.radix-themes .rt-TooltipArrow,
.rt-TooltipArrow {
  fill: #1a1f26 !important;
  color: #1a1f26 !important;
  filter: brightness(0) saturate(0) invert(9%) !important;
}

.radix-themes .rt-TooltipArrow svg,
.rt-TooltipArrow svg,
.rt-TooltipArrow path,
.radix-themes .rt-TooltipArrow path {
  fill: #1a1f26 !important;
  color: #1a1f26 !important;
  stroke: #1a1f26 !important;
}

/* Light theme Radix Dropdown override */
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuContent,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubContent,
html:not(.dark) .rt-DropdownMenuContent,
html:not(.dark) .rt-DropdownMenuSubContent {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  --color-panel-solid: #ffffff !important;
  --color-surface: #ffffff !important;
  --color-panel: #ffffff !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem,
html:not(.dark) .rt-DropdownMenuItem,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger,
html:not(.dark) .rt-DropdownMenuSubTrigger {
  color: #374151 !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem:hover,
html:not(.dark) .rt-DropdownMenuItem:hover,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger:hover,
html:not(.dark) .rt-DropdownMenuSubTrigger:hover,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted],
html:not(.dark) .rt-DropdownMenuItem[data-highlighted],
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted],
html:not(.dark) .rt-DropdownMenuSubTrigger[data-highlighted] {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted] svg,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuItem[data-highlighted] i,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted] svg,
html:not(.dark) [data-radix-popper-content-wrapper] .rt-DropdownMenuSubTrigger[data-highlighted] i {
  color: #111827 !important;
}

/* Gradient Background */
.gradient-bg {
  background: linear-gradient(180deg, 
    transparent 0%,
    transparent 15%,
    rgba(168, 230, 207, 0.4) 30%,
    rgba(127, 209, 174, 0.7) 45%,
    #7fd1ae 55%,
    #dcedc1 65%,
    #ffd3a5 75%,
    #ffa07a 85%,
    #ff8c69 100%
  );
  background-color: #161b21;
  background-attachment: fixed;
}

/* Responsive utilities */
@media (max-width: 639px) {
  .container-responsive {
    padding-left: 12px;
    padding-right: 12px;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .container-responsive {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Scrollbar hide utility for horizontal scroll */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .touch-target {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Safe area for bottom navigation */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Stage description HTML rendering */
.stage-description-html p { margin: 0 0 0.4em; }
.stage-description-html p:last-child { margin-bottom: 0; }
.stage-description-html ul,
.stage-description-html ol { margin: 0.3em 0; padding-left: 1.4em; }
.stage-description-html li { margin: 0.15em 0; }
.stage-description-html li[data-type="taskItem"] {
  list-style: none;
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  margin-left: -1.4em;
  cursor: default;
}
/* CSS-only checkbox via ::before */
.stage-description-html li[data-type="taskItem"]::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 0.2em;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  background: rgba(37,43,51,0.6);
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
}
.stage-description-html li[data-type="taskItem"][data-checked="true"]::before {
  background: #d7ff00;
  border-color: #d7ff00;
  /* checkmark via SVG data-uri */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8l3 3 5-6' stroke='%230f1419' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.stage-description-html li[data-type="taskItem"][data-checked="true"] > p,
.stage-description-html li[data-type="taskItem"][data-checked="true"] > div { text-decoration: line-through; opacity: 0.5; }
.stage-description-html strong { font-weight: 600; }
.stage-description-html em { font-style: italic; }
.stage-description-html s { text-decoration: line-through; opacity: 0.6; }
.stage-description-html a { color: #d7ff00; text-decoration: underline; }
html:not(.dark) .stage-description-html a { color: #3b82f6; }
html:not(.dark) .stage-description-html code { background: #f3f4f6; }
html:not(.dark) .stage-description-html pre { background: #f9fafb; }
.stage-description-html h1,
.stage-description-html h2,
.stage-description-html h3 { font-weight: 600; margin: 0.4em 0 0.2em; }
.stage-description-html blockquote { border-left: 2px solid #6b7280; padding-left: 0.6em; margin: 0.3em 0; opacity: 0.8; }
.stage-description-html code { background: rgba(255,255,255,0.06); padding: 0.1em 0.3em; border-radius: 3px; font-size: 0.9em; }
.stage-description-html pre { background: rgba(255,255,255,0.04); padding: 0.5em; border-radius: 6px; overflow-x: auto; margin: 0.3em 0; }
.stage-description-html pre code { background: none; padding: 0; }