@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    /* Görseldeki Tam HEX Kodları ile Rodosto Renk Paleti */
    --rodosto-primary: 203 100% 57%;    /* #1FA6FF */
    --rodosto-light-blue: 201 100% 71%; /* #6CC9FF */
    --rodosto-light-wave: 202 76% 60%;  /* #4FAFE6 */
    --rodosto-dark-wave: 201 60% 45%;   /* #2E86B7 */
    --rodosto-dark-navy: 222 36% 11%;   /* #121826 */
    --rodosto-active-bg: #2e3c43;       /* Requested Dark Navy for Active State */

    /* UI Değişkenlerine Atama */
    --background: 210 20% 98%;
    --foreground: 222 36% 11%; /* dark-navy */

    --primary: 203 100% 57%;   /* primary-blue */
    --primary-foreground: 0 0% 100%;

    --accent: 202 76% 60%;     /* light-wave */
    --accent-foreground: 0 0% 100%;

    --border: 211 20% 88%;
    --input: 211 20% 88%;
    --ring: 203 100% 57%;
  }

  .dark {
    --background: 222 36% 11%; /* dark-navy */
    --foreground: 210 20% 98%;
    --card: 222 36% 15%;
    --primary: 201 100% 71%;   /* light-blue */
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
  }
}

/* Leaflet map fixes */
.leaflet-container {
  z-index: 1;
  background-color: #e5e7eb;
}

.leaflet-popup-content-wrapper {
  border-radius: 8px;
}

.leaflet-popup-content {
  margin: 8px 12px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--muted));
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* =========================================
   RODOSTO CUSTOM MAP CONTROL (NEW GUARANTEED STYLE)
   ========================================= */

/* Alt Menü Konteyneri */
.rodosto-bottom-bar {
    background: #ffffff;
    padding: 6px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: sans-serif;
    margin-bottom: 20px !important;
    margin-left: 20px !important;
    pointer-events: auto !important; /* Tıklanabilir olması için şart */
}

/* Ayırıcı Çizgi */
.bar-divider { 
    width: 1px; 
    height: 20px; 
    background: #ddd; 
    margin: 0 5px; 
}

/* Butonlar */
.bar-btn {
    border: none; 
    background: transparent; 
    padding: 6px 12px;
    font-size: 12px; 
    font-weight: 600; 
    color: #555; 
    cursor: pointer;
    border-radius: 3px; 
    transition: all 0.2s;
    white-space: nowrap; /* Prevent text wrapping */
}

.bar-btn:hover { 
    background: #f0f0f0; 
    color: #000; 
}

.bar-btn.active { 
    background: #2e3c43; 
    color: white; 
}

/* 🛠️ DROPDOWN OKUNABİLİRLİK DÜZELTMESİ */

/* Varsayılan (Light Mode) */
select option {
  background-color: #ffffff;
  color: #1e293b; /* Koyu Gri */
}

/* Dark Mode Aktifken */
.dark select option {
  background-color: #1f2937; /* Koyu Arka Plan (Gray-800) */
  color: #ffffff; /* Beyaz Yazı */
}

/* Optgroup başlıkları için (Kategoriler) */
.dark optgroup {
  background-color: #111827; /* Daha koyu (Gray-900) */
  color: #9ca3af; /* Gri Başlık */
}