/*
 * 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.
 */

/* 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);
  
  /* Emoji Picker React overrides */
  --epr-dark-category-icon-active-color: #d7ff00;
}

.dark {
  --color-background: #0f1419;
  --color-surface: #1a1f26;
  --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 #0f1419 !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;
}

/* macOS-style auto-hiding scrollbars */
* {
  scrollbar-width: thin; /* Firefox - thin scrollbar */
  scrollbar-color: rgba(107, 114, 128, 0.3) transparent; /* Firefox - thumb and track colors */
}

.dark * {
  scrollbar-color: rgba(156, 163, 175, 0.3) transparent; /* Dark mode */
}

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

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background-color: rgba(107, 114, 128, 0.3);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.dark *::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.3);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(107, 114, 128, 0.5);
}

.dark *::-webkit-scrollbar-thumb:hover {
  background-color: rgba(156, 163, 175, 0.5);
}

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

/* 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: #0f1419 !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: #0f1419 !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: #0f1419 !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: #0f1419;
}

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

.lime-button {
  background-color: rgb(215, 255, 0);
  color: #0f1419;
  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: #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);
}

/* 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 Variable for dynamic color */
:root {
  --scrollbar-thumb-color: rgb(107, 114, 128);
}

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

::-webkit-scrollbar-track {
  background: #1a1f26;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-color);
  border-radius: 10px;
  border: 2px solid #1a1f26;
  transition: background 200ms ease-in-out;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(130, 138, 154);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgb(107, 114, 128) #1a1f26;
}

/* 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: #0f1419 !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 #0f1419 inset !important;
  box-shadow: 0 0 0px 1000px #0f1419 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: #0f1419 !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 #0f1419 inset !important;
  box-shadow: 0 0 0px 1000px #0f1419 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: #0f1419;
  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);
}