/* Coachino Design System - Site Styles */

:root {
  /* Coachino Design System */
  --background: #F5F7FA;
  --foreground: #0D2B3A;
  --card: #FFFFFF;
  --card-foreground: #0D2B3A;
  --popover: #FFFFFF;
  --popover-foreground: #0D2B3A;
  --primary: #0F6FB2;
  --primary-foreground: #FFFFFF;
  --primary-light: #2A8ED6;
  --secondary: #E8F4FC;
  --secondary-foreground: #0F6FB2;
  --muted: #EEF2F6;
  --muted-foreground: #5A7A8A;
  --accent: #1CC1D4;
  --accent-foreground: #FFFFFF;
  --green: #5AC42A;
  --green-light: #7BE14C;
  --green-foreground: #FFFFFF;
  --teal: #1CC1D4;
  --destructive: #D93025;
  --destructive-foreground: #FFFFFF;
  --border: #D6E4EE;
  --input: #D6E4EE;
  --ring: #0F6FB2;
  --radius: 0.5rem;
  --surface: #FFFFFF;
  /* Sidebar tokens */
  --sidebar: #0D2B3A;
  --sidebar-foreground: #FFFFFF;
  --sidebar-primary: #0F6FB2;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #1a3f52;
  --sidebar-accent-foreground: #FFFFFF;
  --sidebar-border: #1a3f52;
  --sidebar-ring: #0F6FB2;
}

/* Base Styles */
* {
  outline-color: rgba(15, 111, 178, 0.5);
}

body {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Heading font utility - replaces inline font-family declarations */
.font-heading {
  font-family: var(--font-heading), 'Nunito', system-ui, sans-serif;
}

/* Tailwind-like Utility Classes */

/* Section background colors */
.bg-light-blue {
  background-color: #E8F4FC;
}

.bg-off-white {
  background-color: #F5F7FA;
}

.bg-dark-navy {
  background-color: #0D2B3A;
}

.bg-primary-blue {
  background-color: #0F6FB2;
}

/* Opacity-modified utility classes */
.bg-primary\/10 { background-color: rgba(15, 111, 178, 0.1); }
.bg-primary\/15 { background-color: rgba(15, 111, 178, 0.15); }
.bg-primary\/20 { background-color: rgba(15, 111, 178, 0.2); }
.bg-primary\/5 { background-color: rgba(15, 111, 178, 0.05); }
.bg-primary\/90 { background-color: rgba(15, 111, 178, 0.9); }
.border-primary\/25 { border-color: rgba(15, 111, 178, 0.25); }
.hover\:bg-secondary:hover { background-color: #E8F4FC; }
.hover\:bg-primary\/10:hover { background-color: rgba(15, 111, 178, 0.1); }
.hover\:bg-destructive\/10:hover { background-color: rgba(220, 38, 38, 0.1); }
.border-primary\/15 { border-color: rgba(15, 111, 178, 0.15); }
.border-primary\/20 { border-color: rgba(15, 111, 178, 0.2); }
.border-primary\/30 { border-color: rgba(15, 111, 178, 0.3); }
.bg-muted\/50 { background-color: rgba(238, 242, 246, 0.5); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }
.bg-white\/60 { background-color: rgba(255, 255, 255, 0.6); }

/* Gradient stop utilities for insights suggestion card */
.from-surface {
  --tw-gradient-from: #FFFFFF;
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.to-primary\/5 {
  --tw-gradient-to: rgba(15, 111, 178, 0.05);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
.text-white\/40 { color: rgba(255, 255, 255, 0.4); }
.text-white\/50 { color: rgba(255, 255, 255, 0.5); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/70 { color: rgba(255, 255, 255, 0.7); }
.text-white\/80 { color: rgba(255, 255, 255, 0.8); }
.border-white\/10 { border-color: rgba(255, 255, 255, 0.1); }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3); }
.text-primary-foreground\/60 { color: rgba(255, 255, 255, 0.6); }
.text-primary-foreground\/80 { color: rgba(255, 255, 255, 0.8); }
.border-primary-foreground\/20 { border-color: rgba(255, 255, 255, 0.2); }
.bg-primary-foreground\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-primary-foreground\/90 { background-color: rgba(255, 255, 255, 0.9); }
.hover\:bg-primary-foreground\/90:hover { background-color: rgba(255, 255, 255, 0.9); }
.border-border\/40 { border-color: rgba(214, 228, 238, 0.4); }
.bg-green\/20 { background-color: rgba(90, 196, 42, 0.2); }
.bg-teal\/20 { background-color: rgba(28, 193, 212, 0.2); }
.hover\:bg-primary\/20:hover { background-color: rgba(15, 111, 178, 0.2); }
.hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }

/* Sidebar utility classes */
.bg-sidebar { background-color: var(--sidebar); }
.bg-sidebar-primary { background-color: var(--sidebar-primary); }
.bg-sidebar-accent { background-color: var(--sidebar-accent); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.border-sidebar-border { border-color: var(--sidebar-border); }
.bg-sidebar-primary\/30 { background-color: rgba(15, 111, 178, 0.3); }
.border-sidebar-primary\/50 { border-color: rgba(15, 111, 178, 0.5); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.focus-visible\:ring-sidebar-ring:focus-visible { --tw-ring-color: var(--sidebar-ring); }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', system-ui, sans-serif;
}

p, span, div {
  font-family: 'Inter', system-ui, sans-serif;
}

.font-nunito {
  font-family: 'Nunito', system-ui, sans-serif;
}


/* Subtle floating animation for hero elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Gentle pulse for buttons */
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15, 111, 178, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(15, 111, 178, 0); }
}

.animate-gentle-pulse {
  animation: gentle-pulse 2.5s ease-in-out infinite;
}

/* Card hover lift effect */
.card-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(13, 43, 58, 0.15);
}

/* Sparkle animation for decorative elements */
@keyframes sparkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.1); }
}

.animate-sparkle {
  animation: sparkle 3s ease-in-out infinite;
}

/* Form validation error styling (used by jQuery Validation) */
.form-error,
.field-validation-error {
    color: var(--destructive);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    display: block;
}

input.input-validation-error,
select.input-validation-error,
textarea.input-validation-error {
    border-color: var(--destructive);
}

.validation-summary-errors ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.validation-summary-errors ul li {
    color: var(--destructive);
    font-size: 0.875rem;
}

/* Accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

*:focus:not(:focus-visible) {
    outline: none;
}

.bg-danger-dot-pattern {
  background-image: radial-gradient(#ef4444 1px, transparent 1px);
  background-size: 16px 16px;
}

.toast-icon {
  font-size: 1.125rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ─── Support Badge Variants (matches Coachino Badge component) ─── */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}
.badge-default   { background-color: rgba(15, 111, 178, 0.1); color: var(--primary);  border: 1px solid rgba(15, 111, 178, 0.2); }
.badge-green     { background-color: rgba(90, 196, 42, 0.15); color: var(--green);    border: 1px solid rgba(90, 196, 42, 0.3); }
.badge-teal      { background-color: rgba(28, 193, 212, 0.15); color: var(--teal);    border: 1px solid rgba(28, 193, 212, 0.3); }
.badge-muted     { background-color: var(--muted); color: var(--muted-foreground);      border: 1px solid var(--border); }
.badge-destructive { background-color: rgba(217, 48, 37, 0.1); color: var(--destructive); border: 1px solid rgba(217, 48, 37, 0.3); }

/* ─── Priority color utilities ─── */
.priority-low    { color: var(--muted-foreground); }
.priority-medium { color: var(--foreground); }
.priority-high   { color: #d97706; }
.priority-urgent { color: var(--destructive); }

/* ─── Muted background opacity variants ─── */
.bg-muted\/5   { background-color: rgba(238, 242, 246, 0.05); }
.bg-muted\/10  { background-color: rgba(238, 242, 246, 0.1); }
.bg-muted\/20  { background-color: rgba(238, 242, 246, 0.2); }
.bg-muted\/30  { background-color: rgba(238, 242, 246, 0.3); }

/* ─── Green opacity variants ─── */
.bg-green\/10  { background-color: rgba(90, 196, 42, 0.1); }
.bg-green\/15  { background-color: rgba(90, 196, 42, 0.15); }

/* ─── Teal opacity variants ─── */
.bg-teal\/10   { background-color: rgba(28, 193, 212, 0.1); }
.bg-teal\/15   { background-color: rgba(28, 193, 212, 0.15); }

/* ─── Destructive opacity variants ─── */
.bg-destructive\/10 { background-color: rgba(217, 48, 37, 0.1); }
.bg-destructive\/30 { background-color: rgba(217, 48, 37, 0.3); }

/* ─── Hover variants for action buttons ─── */
.hover\:bg-teal-500\/20:hover { background-color: rgba(28, 193, 212, 0.2); }
.hover\:bg-green-500\/20:hover { background-color: rgba(90, 196, 42, 0.2); }
.hover\:bg-green\/20:hover { background-color: rgba(90, 196, 42, 0.2); }
.hover\:bg-teal\/20:hover { background-color: rgba(28, 193, 212, 0.2); }
.hover\:bg-muted:hover { background-color: var(--muted); }
.hover\:bg-muted\/50:hover { background-color: rgba(238, 242, 246, 0.5); }

/* Custom scrollbar for dialogs */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: var(--border); border-radius: 9999px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--muted-foreground); }