:root {
  --color-primary: #10b981;
  --color-primary-dark: #059669;
  --color-primary-light: #34d399;
  --color-secondary: #ef4444;
  --color-secondary-dark: #dc2626;
  --color-secondary-light: #f87171;
  --color-accent-yellow: #facc15;
  --color-accent-blue: #3b82f6;
  --color-accent-purple: #8b5cf6;
}

/* Chart Skeleton Animations */
@keyframes skeleton-wave {
  0% {
    opacity: 0.4;
    transform: scaleY(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scaleY(1);
  }
  100% {
    opacity: 0.4;
    transform: scaleY(0.8);
  }
}

@keyframes skeleton-rotate {
  0% {
    transform: rotate(0deg) scale(0.8);
    opacity: 0.4;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(0.8);
    opacity: 0.4;
  }
}

.chart-skeleton-bar {
  animation: skeleton-wave 2s ease-in-out infinite;
}

.chart-skeleton-circle {
  animation: skeleton-rotate 3s linear infinite;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Custom Scrollbar Styles */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #fecaca #f5f5f5;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #fecaca; /* red-200 color */
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #fca5a5; /* red-300 color for hover */
}

.subtle-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.subtle-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.subtle-scrollbar::-webkit-scrollbar-thumb {
  background: #d1d5db; /* gray-300 */
  border-radius: 4px;
}

.subtle-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #9ca3af; /* gray-400 */
}

.hidden-scrollbar::-webkit-scrollbar {
  display: none;
}

.hidden-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* Safe Area Support for Mobile Devices (iPhone notch, home indicator, gesture bar) */
/* Only applies extra padding on mobile devices with safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Mobile only - add safe area padding */
  @media (max-width: 1023px) {
    .safe-area-content {
      padding-bottom: calc(5rem + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Fallback for devices without safe-area-inset support */
/* Provides extra bottom padding on mobile to prevent content from being hidden under phone navigation bar */
@media (max-width: 1023px) {
  .safe-area-content {
    padding-bottom: 5rem;
  }
}

/* Notification Alert Animation - Pulsing Red Border Glow */
@keyframes notification-pulse {
  0%, 100% {
    border-color: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    border-color: #dc2626;
    box-shadow: 0 0 8px 2px rgba(239, 68, 68, 0.6);
  }
}

@keyframes notification-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-2px);
  }
  75% {
    transform: translateY(2px);
  }
}

.notification-alert-active {
  border: 2px solid #ef4444 !important;
  animation: notification-pulse 2s ease-in-out infinite, notification-bounce 3s ease-in-out infinite;
}

/* Ticker Bar Styles - Light Theme, CSS Hardware Accelerated */
.ticker-bar {
  background: linear-gradient(to right, #0f172a, #1e293b);
  border: 1px solid #334155;
  white-space: nowrap;
  height: 44px;
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin-bottom: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ticker-track-wrapper {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.ticker-track {
  display: inline-flex;
  will-change: transform;
  animation: ticker-scroll 50s linear infinite;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.ticker-track-wrapper:hover .ticker-track {
  animation-play-state: paused;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0) translateZ(0);
  }
  100% {
    transform: translateX(-25%) translateZ(0);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1.25rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.ticker-item::after {
  content: '•';
  color: #475569;
  margin-left: 1.25rem;
}

.ticker-name {
  font-weight: 600;
  color: #fbbf24;
}

.ticker-price {
  color: #f8fafc;
  font-weight: 500;
}

.ticker-change {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.75rem;
  font-weight: 600;
}

.ticker-up {
  color: #4ade80;
}

.ticker-down {
  color: #f87171;
}

.ticker-neutral {
  color: #94a3b8;
}

/* Ticker hint indicators */
.ticker-hint-left,
.ticker-hint-right {
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  color: #94a3b8;
  flex-shrink: 0;
  z-index: 10;
}

.ticker-hint-left {
  background: linear-gradient(to right, #0f172a 70%, transparent);
  padding-right: 1.5rem;
}

.ticker-hint-right {
  background: linear-gradient(to left, #0f172a 70%, transparent);
  padding-left: 1.5rem;
}

.ticker-bar:hover .ticker-hint-left,
.ticker-bar:hover .ticker-hint-right {
  color: #fbbf24;
}

/* Mobilde gizle */
@media (max-width: 768px) {
  .ticker-bar {
    display: none;
  }
}

/* Onboarding Checklist Animations */
@keyframes onboarding-progress {
  from { width: 0%; }
}

.onboarding-progress-bar {
  animation: onboarding-progress 0.8s ease-out;
}

@keyframes onboarding-celebrate {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.onboarding-celebrate {
  animation: onboarding-celebrate 0.6s ease-in-out;
}

@keyframes onboarding-fadeout {
  from { opacity: 1; max-height: 500px; margin-bottom: 1.5rem; }
  to { opacity: 0; max-height: 0; margin-bottom: 0; overflow: hidden; }
}

.onboarding-fadeout {
  animation: onboarding-fadeout 0.5s ease-in-out forwards;
}

@keyframes onboarding-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.3); }
  50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

.onboarding-date-pulse {
  animation: onboarding-pulse 2s ease-in-out infinite;
  border-color: #6366f1;
}