/* ===========================================
   Custom CSS - Tailwind sonrası yüklenir
   intl-tel-input overrides ve ek özelleştirmeler
   =========================================== */

/* ===========================================
   intl-tel-input Overrides
   =========================================== */

/* Wrapper tam genişlik olsun */
.iti {
  display: block !important;
  width: 100% !important;
}

.iti__tel-input {
  width: 100% !important;
}

/* Dark mode için intl-tel-input dropdown stilleri */
[data-theme="dark"] .iti__dropdown-content {
  background-color: #2a2a2a;
  border-color: var(--border);
}

[data-theme="dark"] .iti__search-input {
  background-color: #1f1f1f;
  color: var(--foreground);
  border-color: var(--border);
}

[data-theme="dark"] .iti__country-list {
  background-color: #2a2a2a;
}

[data-theme="dark"] .iti__country:hover,
[data-theme="dark"] .iti__country--highlight {
  background-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .iti__country-name,
[data-theme="dark"] .iti__dial-code {
  color: var(--foreground);
}

/* Light mode için intl-tel-input dropdown stilleri */
[data-theme="light"] .iti__dropdown-content {
  background-color: #ffffff;
  border-color: var(--border);
}

[data-theme="light"] .iti__search-input {
  background-color: #f2f0e3;
  color: var(--foreground);
  border-color: var(--border);
}

[data-theme="light"] .iti__country-list {
  background-color: #ffffff;
}

[data-theme="light"] .iti__country:hover,
[data-theme="light"] .iti__country--highlight {
  background-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .iti__country-name,
[data-theme="light"] .iti__dial-code {
  color: var(--foreground);
}

/* Selected country area dark mode */
[data-theme="dark"] .iti__selected-country-primary {
  background-color: transparent;
}

[data-theme="dark"] .iti__arrow {
  border-top-color: var(--foreground);
}

[data-theme="dark"] .iti__arrow--up {
  border-bottom-color: var(--foreground);
}

/* ===========================================
   Shoelace Component Overrides
   =========================================== */

/* Dark theme variables for Shoelace */
[data-theme="dark"] {
  --sl-color-primary-50: rgba(247, 111, 83, 0.1);
  --sl-color-primary-100: rgba(247, 111, 83, 0.2);
  --sl-color-primary-200: rgba(247, 111, 83, 0.3);
  --sl-color-primary-300: rgba(247, 111, 83, 0.4);
  --sl-color-primary-400: rgba(247, 111, 83, 0.6);
  --sl-color-primary-500: #f76f53;
  --sl-color-primary-600: #ff8a6b;
  --sl-color-primary-700: #ff9d82;
  --sl-panel-background-color: #2a2a2a;
  --sl-panel-border-color: var(--border);
}

[data-theme="light"] {
  --sl-color-primary-500: #f76f53;
  --sl-color-primary-600: #ff8a6b;
  --sl-panel-background-color: #ffffff;
  --sl-panel-border-color: var(--border);
}

/* ===========================================
   Modal Stilleri - Light/Dark Tema Uyumlu
   =========================================== */

/* Modal backdrop - dış alan */
.modal-backdrop-custom,
[id$="-backdrop"],
[id$="-modal"] > div:first-child {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="light"] .modal-backdrop-custom,
[data-theme="light"] [id$="-backdrop"],
[data-theme="light"] [id$="-modal"] > div:first-child {
  background-color: rgba(100, 100, 100, 0.4) !important;
}

/* Modal içerik alanı - solid arka plan */
.modal-content-custom,
[id$="-modal"] .bg-background,
[id$="-modal"] .bg-card {
  background-color: var(--background) !important;
  border-color: var(--border) !important;
}

[data-theme="dark"] .modal-content-custom,
[data-theme="dark"] [id$="-modal"] .bg-background {
  background-color: #1f1f1f !important;
}

[data-theme="light"] .modal-content-custom,
[data-theme="light"] [id$="-modal"] .bg-background {
  background-color: #f2f0e3 !important;
}

/* ===========================================
   PWA Animations & Styles
   =========================================== */

/* Slide Up Animation */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Slide Down Animation */
@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slide-down 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade In Animation */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out;
}

/* PWA Install Banner (optional, can be used anywhere) */
.pwa-install-banner {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
  color: white;
}

/* PWA Offline indicator */
.offline-indicator {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.75rem 1rem;
  background-color: #ef4444;
  color: white;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

.offline-indicator.show {
  transform: translateY(0);
}

/* PWA Status Bar - iOS Safari için */
@supports (-webkit-touch-callout: none) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  nav.fixed {
    padding-top: env(safe-area-inset-top);
  }
}