/* Furled Color Palette - Custom Design System */

:root {
  /* Neutrals - Dark mode base */
  --bg: #0b0d12;
  --panel: #0f121a;
  --panel-2: #0c0f16;
  --border: rgba(255, 255, 255, 0.08);
  --text: rgba(255, 255, 255, 0.92);
  --muted: rgba(255, 255, 255, 0.62);

  /* Brand accent (singura culoare "vie") */
  --accent: #ff2d55;
  --accent-weak: rgba(255, 45, 85, 0.14);
  --accent-mid: rgba(255, 45, 85, 0.28);
  --accent-strong: rgba(255, 45, 85, 0.90);

  /* Status */
  --ok: #20c997;

  /* Backward compatibility - map old variables to new ones */
  --furled-accent: var(--accent);
  --furled-accent-rgb: 255, 45, 85;
  --furled-accent-soft: rgba(255, 45, 85, 0.6);
  
  /* Light mode colors - adapted for white background */
  --furled-light-bg: #efe7eb;
  --furled-light-card: #FFFFFF;
  --furled-light-border: #E5E7EB;
  
  /* Dark mode colors - using new palette */
  --furled-dark-bg: var(--bg);
  --furled-dark-card: var(--panel);
  --furled-dark-border: var(--border);
  
  /* Map brand colors to accent */
  --color-brands: var(--accent);
  --color-brands-rgb: 255, 45, 85;
}

/* Light mode - use light adapted colors */
:root:not(.dark) {
  --neutral-bg: var(--furled-light-card);
  --neutral-border: var(--furled-light-border);
  --dark-neutral-bg: var(--furled-light-card);
  --dark-neutral-border: var(--furled-light-border);
}

/* Dark mode root overrides */
html.dark {
  --furled-bg: var(--furled-dark-bg);
  --furled-card: var(--furled-dark-card);
  --furled-border: var(--furled-dark-border);
  
  /* Dark mode colors - using furled palette */
  --dark-neutral-bg: var(--furled-dark-card);
  --dark-neutral-border: var(--furled-dark-border);
}

/* Body backgrounds */
html:not(.dark),
body:not(.dark),
.wrapper:not(.dark),
#layout:not(.dark),
main:not(.dark),
body.ecommerce-dashboard-page:not(.dark),
.ecommerce-dashboard-page:not(.dark) {
  background: var(--furled-light-bg) !important;
}

html.dark body,
body.dark,
html.dark body.ecommerce-dashboard-page {
  background-color: var(--furled-dark-bg) !important;
}

/* Card backgrounds - both modes */
.bg-neutral-bg,
.dark\:bg-neutral-bg {
  background-color: var(--furled-light-card) !important;
}

.dark\:bg-dark-neutral-bg {
  background-color: var(--furled-light-card) !important;
}

html.dark .bg-neutral-bg,
html.dark .dark\:bg-dark-neutral-bg,
html.dark .dark\:bg-neutral-bg {
  background-color: var(--furled-dark-card) !important;
}

/* Border colors - both modes */
.border-neutral,
.dark\:border-dark-neutral-border {
  border-color: var(--furled-light-border) !important;
}

html.dark .border-neutral,
html.dark .dark\:border-dark-neutral-border {
  border-color: var(--furled-dark-border) !important;
}

/* Brand color (accent) - pinkish red - both modes */
.bg-color-brands {
  background-color: var(--furled-accent) !important;
}

.text-color-brands {
  color: var(--furled-accent) !important;
}

.border-color-brands {
  border-color: var(--furled-accent) !important;
}

/* Brand color hover effects - both modes */
.hover\:bg-color-brands:hover {
  background-color: var(--furled-accent) !important;
}

.hover\:text-color-brands:hover {
  color: var(--furled-accent) !important;
}

.hover\:border-color-brands:hover {
  border-color: var(--furled-accent) !important;
}

/* Text colors adjusted for better readability */
:root:not(.dark) {
  --text-primary: rgb(17, 24, 39); /* gray-900 - dark text for light bg */
  --text-secondary: rgb(75, 85, 99); /* gray-600 - medium gray */
  --text-tertiary: rgb(107, 114, 128); /* gray-500 - lighter gray */
}

html.dark {
  --text-primary: rgb(244, 244, 245); /* zinc-100 - softer white */
  --text-secondary: rgb(161, 161, 170); /* zinc-400 - muted gray */
  --text-tertiary: rgb(113, 113, 122); /* zinc-500 - lighter gray */
}

/* Scrollbar styling to match furled theme - both modes */
::-webkit-scrollbar {
  width: 10px;
}

/* Light mode scrollbar */
::-webkit-scrollbar-track {
  background: var(--furled-light-bg);
}

::-webkit-scrollbar-thumb {
  background: #D1D5DB;
  border-radius: 5px;
  border: 2px solid var(--furled-light-bg);
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Dark mode scrollbar */
html.dark ::-webkit-scrollbar-track {
  background: var(--furled-dark-bg);
}

html.dark ::-webkit-scrollbar-thumb {
  background: #27272a;
  border-radius: 5px;
  border: 2px solid var(--furled-dark-bg);
}

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #3f3f46;
}

/* Additional adjustments for card styling - both modes */
.rounded-2xl.border {
  border-color: var(--furled-light-border) !important;
}

html.dark .rounded-2xl.border {
  border-color: var(--furled-dark-border) !important;
}

/* Ensure sidebar uses furled colors - both modes */
aside {
  background-color: var(--furled-light-card) !important;
  border-color: var(--furled-light-border) !important;
}

html.dark aside {
  background-color: var(--furled-dark-card) !important;
  border-color: var(--furled-dark-border) !important;
}

/* Header/header backgrounds - both modes */
header,
[class*="bg-neutral-bg"] {
  background-color: var(--furled-light-card) !important;
}

html.dark header,
html.dark [class*="bg-neutral-bg"] {
  background-color: var(--furled-dark-card) !important;
}

/* Text color adjustments - both modes */
/* Light mode text colors */
.text-gray-1100,
.dark\:text-gray-dark-1100 {
  color: rgb(17, 24, 39) !important; /* gray-900 - dark for light bg */
}

.text-gray-500,
.dark\:text-gray-dark-500 {
  color: rgb(107, 114, 128) !important; /* gray-500 - medium gray */
}

.text-gray-400,
.dark\:text-gray-dark-400 {
  color: rgb(156, 163, 175) !important; /* gray-400 - lighter gray */
}

.text-gray-300,
.dark\:text-gray-dark-300 {
  color: rgb(209, 213, 219) !important; /* gray-300 */
}

/* Dark mode text colors - softer whites */
html.dark .text-gray-1100,
html.dark .dark\:text-gray-dark-1100 {
  color: rgb(244, 244, 245) !important; /* zinc-100 - softer white */
}

html.dark .text-gray-500,
html.dark .dark\:text-gray-dark-500 {
  color: rgb(200, 200, 210) !important; /* Increased contrast - lighter gray for better readability */
}

html.dark .text-gray-400,
html.dark .dark\:text-gray-dark-400 {
  color: rgb(180, 180, 190) !important; /* Increased contrast - lighter gray for better readability */
}

html.dark .text-gray-300,
html.dark .dark\:text-gray-dark-300 {
  color: rgb(160, 160, 170) !important; /* Increased contrast - lighter gray for better readability */
}

/* Input and search backgrounds - both modes */
.bg-gray-100,
.dark\:bg-gray-dark-100 {
  background-color: var(--furled-light-border) !important;
}

html.dark .bg-gray-100,
html.dark .dark\:bg-gray-dark-100 {
  background-color: var(--furled-dark-border) !important;
}

/* Search bar specific styling */
.bg-gray-100.rounded-xl,
.rounded-xl.bg-gray-100 {
  background-color: var(--furled-light-border) !important;
}

html.dark .bg-gray-100.rounded-xl,
html.dark .rounded-xl.dark\:bg-gray-dark-100 {
  background-color: var(--furled-dark-border) !important;
}

/* Search input text colors */
.text-gray-300,
input.text-gray-300 {
  color: #A1A1AA !important;
}

html.dark .text-gray-300,
html.dark input.text-gray-300,
html.dark .dark\:placeholder\:text-gray-dark-300::placeholder {
  color: #A1A1AA !important;
}

.bg-neutral,
.dark\:bg-dark-neutral-border {
  background-color: var(--furled-light-border) !important;
}

html.dark .bg-neutral,
html.dark .dark\:bg-dark-neutral-border {
  background-color: var(--furled-dark-border) !important;
}

/* Placeholder text - both modes */
::placeholder,
.placeholder\:text-gray-300::placeholder,
.dark\:placeholder\:text-gray-dark-300::placeholder,
input::placeholder,
input.placeholder\:text-gray-300::placeholder {
  color: #A1A1AA !important;
}

html.dark ::placeholder,
html.dark .placeholder\:text-gray-300::placeholder,
html.dark .dark\:placeholder\:text-gray-dark-300::placeholder,
html.dark input::placeholder,
html.dark input.placeholder\:text-gray-300::placeholder {
  color: #A1A1AA !important;
}

/* Table hover effects - inner-glow red effect similar to feature items */
tbody tr:hover,
table tbody tr:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
  background: rgba(255, 31, 74, 0.05) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.15);
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

html.dark tbody tr:hover,
html.dark table tbody tr:hover {
  background: rgba(255, 31, 74, 0.1) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.2);
}

/* Fallback for Tailwind hover classes */
.hover\:bg-gray-100:hover,
.dark\:hover\:bg-gray-dark-100:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
  background-color: rgba(255, 31, 74, 0.05) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.15) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
}

html.dark .hover\:bg-gray-100:hover,
html.dark .dark\:hover\:bg-gray-dark-100:hover {
  background-color: rgba(255, 31, 74, 0.1) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.2) !important;
}

/* Sidebar active item background - both modes */
.sidemenu-item.active {
  background-color: var(--furled-accent) !important;
}

/* Sidebar active item text color - white like icon */
.sidemenu-item.active .sidemenu-title,
.sidemenu-item.active span.text-gray-500,
.sidemenu-item.active span.dark\:text-gray-dark-500,
.sidemenu-item.active a span {
  color: #FFFFFF !important;
}

html.dark .sidemenu-item.active .sidemenu-title,
html.dark .sidemenu-item.active span.text-gray-500,
html.dark .sidemenu-item.active span.dark\:text-gray-dark-500,
html.dark .sidemenu-item.active a span {
  color: #FFFFFF !important;
}

/* Toggle switch dot color - both modes */
.dotS.peer-checked\:bg-color-brands,
.peer-checked\:bg-\[\#B2A7FF\] {
  background-color: var(--furled-accent) !important;
}

/* Code block background - both modes */
code {
  background-color: var(--furled-light-border) !important;
  color: rgb(17, 24, 39) !important; /* dark text for light bg */
}

html.dark code {
  background-color: var(--furled-dark-border) !important;
  color: rgb(244, 244, 245) !important; /* light text for dark bg */
}

/* Footer text - both modes */
footer p span {
  color: rgb(107, 114, 128) !important; /* gray-500 for light mode */
}

footer p a {
  color: var(--furled-accent) !important;
}

html.dark footer p span {
  color: rgb(113, 113, 122) !important; /* zinc-500 for dark mode */
}

html.dark footer p a {
  color: var(--furled-accent) !important;
}

/* Form elements styling - override hardcoded colors */
/* Input borders - replace #E8EDF2 and #313442 with furled colors */
/* Using attribute selector to match Tailwind's arbitrary values */
[class*="border-[#E8EDF2]"],
.input-group[class*="border-[#E8EDF2]"] {
  border-color: var(--furled-light-border) !important;
}

html.dark [class*="border-[#313442]"],
html.dark .input-group[class*="border-[#313442]"] {
  border-color: var(--furled-dark-border) !important;
}

/* Also target elements with inline border colors or data attributes */
.input-group.border,
div[class*="input-group"].border,
div.border[class*="rounded-lg"] {
  border-color: var(--furled-light-border) !important;
}

html.dark .input-group.border,
html.dark div[class*="input-group"].border,
html.dark div.border[class*="rounded-lg"] {
  border-color: var(--furled-dark-border) !important;
}

/* Override any hardcoded border colors on input containers */
div.border.rounded-lg {
  border-color: var(--furled-light-border) !important;
}

html.dark div.border.rounded-lg {
  border-color: var(--furled-dark-border) !important;
}

/* Input backgrounds */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
  background-color: transparent !important;
}

/* Input group backgrounds */
.input-group {
  background-color: transparent !important;
}

/* Form card backgrounds */
html.dark .input-group.border {
  background-color: transparent !important;
}

/* Tag/chip backgrounds - replace #E8EDF2 and #313442 */
[class*="bg-[#E8EDF2]"] {
  background-color: var(--furled-light-border) !important;
}

html.dark [class*="bg-[#313442]"] {
  background-color: var(--furled-dark-border) !important;
}

/* Button styling - ensure buttons use furled colors */
.btn {
  transition: all 0.3s ease !important;
}

/* Focus states for inputs */
input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--furled-accent) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: var(--furled-accent) !important;
}

/* Remove any diagonal lines or patterns from body */
body,
html,
.wrapper,
#layout,
main,
.ecommerce-dashboard-page {
  background-image: none !important;
  background: var(--furled-light-bg) !important;
}

html.dark body,
html.dark html,
html.dark .wrapper,
html.dark #layout,
html.dark main,
html.dark .ecommerce-dashboard-page {
  background: var(--furled-dark-bg) !important;
}

/* Ensure no decorative lines on background */
body::before,
body::after,
html::before,
html::after,
.wrapper::before,
.wrapper::after,
#layout::before,
#layout::after,
main::before,
main::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Remove any decorative borders or lines */
[class*="border-dashed"],
[class*="border-dotted"] {
  border-color: var(--furled-light-border) !important;
}

html.dark [class*="border-dashed"],
html.dark [class*="border-dotted"] {
  border-color: var(--furled-dark-border) !important;
}

/* Form backgrounds - override old colors */
form.rounded-2xl,
form[class*="rounded-2xl"],
form.bg-white,
form[class*="max-w-"] {
  background-color: var(--furled-light-card) !important;
}

html.dark form.rounded-2xl,
html.dark form[class*="rounded-2xl"],
html.dark form[class*="dark:bg-\[#1F2128\]"],
html.dark form[class*="dark:bg-[#1F2128]"],
html.dark form.dark\:bg-\[#1F2128\] {
  background-color: var(--furled-dark-card) !important;
}

/* Override any hardcoded background colors in dark mode */
html.dark [class*="bg-[#1F2128]"],
html.dark [class*="bg-\\[\\#1F2128\\]"] {
  background-color: var(--furled-dark-card) !important;
}

/* Override old text color #8083A3 to new #A1A1AA everywhere */
[style*="#8083A3"],
[style*="color: #8083A3"],
[style*="color:#8083A3"],
.text-\[#8083A3\],
[class*="text-[#8083A3]"] {
  color: #A1A1AA !important;
}

/* Override placeholder colors */
::placeholder,
input::placeholder,
textarea::placeholder {
  color: #A1A1AA !important;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #A1A1AA !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #A1A1AA !important;
  opacity: 1;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #A1A1AA !important;
}

/* Button hover glow effect - replace border hover with blur glow effect */
.btn[class*="hover:border-[#B2A7FF]"],
.btn[class*="hover:bg-color-brands"],
button[class*="hover:border-[#B2A7FF]"],
button[class*="hover:bg-color-brands"] {
  transition: all 0.3s ease !important;
  border: none !important;
  border-color: transparent !important;
}

/* Remove border from buttons with bg-color-brands in normal state */
.bg-color-brands.btn,
.bg-color-brands button,
button.bg-color-brands,
.btn.bg-color-brands {
  border: none !important;
  border-color: transparent !important;
}

/* Button hover state with glow effect */
.btn:hover[class*="hover:border-[#B2A7FF]"],
.btn:hover[class*="hover:bg-color-brands"],
button:hover[class*="hover:border-[#B2A7FF]"],
button:hover[class*="hover:bg-color-brands"],
.btn[class*="hover:border-[#B2A7FF]"]:hover,
.btn[class*="hover:bg-color-brands"]:hover,
button[class*="hover:border-[#B2A7FF]"]:hover,
button[class*="hover:bg-color-brands"]:hover {
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px 0 rgba(255, 31, 74, 0.4) !important;
  transform: translateY(-1px);
}

/* Alternative selector for buttons with bg-color-brands on hover */
.bg-color-brands.btn:hover,
.bg-color-brands button:hover,
button.bg-color-brands:hover {
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px 0 rgba(255, 31, 74, 0.4) !important;
  transform: translateY(-1px);
}

/* Remove old border hover effects */
html.dark .btn:hover[class*="dark:hover:border-[#B2A7FF]"],
html.dark .btn[class*="dark:hover:border-[#B2A7FF]"]:hover,
button:hover[class*="dark:hover:border-[#B2A7FF]"],
button[class*="dark:hover:border-[#B2A7FF]"]:hover {
  border: none !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px 0 rgba(255, 31, 74, 0.4) !important;
}

/* Override border-4 class for buttons with bg-color-brands */
.bg-color-brands.border-4,
button.bg-color-brands.border-4,
.btn.bg-color-brands.border-4 {
  border: none !important;
}

/* Most played maps items inner-glow effect on hover */
.map-item:hover,
.favorite-maps-container .map-item:hover,
.map-item.border:hover,
.map-item.border-transparent:hover,
[class*="map-item"]:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
  background: rgba(255, 31, 74, 0.05) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.15);
  transform: translateX(3px);
  transition: all 0.3s ease;
}

html.dark .map-item:hover,
html.dark .favorite-maps-container .map-item:hover,
html.dark .map-item.border:hover,
html.dark .map-item.border-transparent:hover,
html.dark [class*="map-item"]:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
  background: rgba(255, 31, 74, 0.1) !important;
  box-shadow: inset 0 0 10px rgba(255, 31, 74, 0.2);
}

/* Force border color override for stat-card and map-item with Tailwind border classes */
.stat-card.border-neutral:hover,
.stat-card[class*="border-neutral"]:hover,
.map-item[class*="border"]:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
}

html.dark .stat-card[class*="border-dark-neutral-border"]:hover,
html.dark .stat-card[class*="dark:border"]:hover,
html.dark .map-item[class*="border"]:hover {
  border-color: rgba(255, 31, 74, 0.3) !important;
}

/* Uniformize card spacing - consistent gaps between cards */
/* Standardize gap values for better visual consistency */
.grid.gap-4,
.grid[class*="gap-4"]:not([class*="gap-40"]):not([class*="gap-44"]):not([class*="gap-48"]) {
  gap: 1.5rem !important; /* 24px - consistent spacing for card grids */
}

/* Ensure consistent vertical spacing between card sections */
.grid.items-center.mb-6,
.grid.mb-6 {
  margin-bottom: 1.5rem !important; /* 24px - consistent bottom margin */
}

/* Uniformize padding inside cards for better consistency */
.rounded-2xl.border[class*="p-["],
.rounded-xl.border[class*="p-["] {
  padding: 1.5rem !important; /* 24px - consistent padding for small arbitrary values */
}

/* Chip group styling - premium segmented control */
.chip-group {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  width: fit-content;
}

html:not(.dark) .chip-group {
  border-color: rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.02);
}

.chip {
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  font-weight: 500;
  outline: none;
}

html:not(.dark) .chip {
  color: rgba(0, 0, 0, 0.6);
}

.chip:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}

html:not(.dark) .chip:hover {
  color: rgba(0, 0, 0, 0.9);
  background: rgba(0, 0, 0, 0.04);
}

.chip:active {
  transform: scale(0.98);
}

.chip.is-active {
  background: rgba(255, 45, 85, 0.12);
  border-color: rgba(255, 45, 85, 0.35);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.10);
}

html:not(.dark) .chip.is-active {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.2);
}

.chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.18);
}

html:not(.dark) .chip:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 45, 85, 0.25);
}

/* Countries container - fixed height to prevent layout shift */
.countries-container {
  min-height: 520px;
  height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.countries-container > div {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}