/* Horse Trainer Application Styles (Extracted from index.html) */
/* =================================================== */
/* CLEAN, AIRY EQUESTRIAN DESIGN SYSTEM                */
/* Inspired by successfulhorseman.com                  */
/* =================================================== */
:root {
  --app-bg: #f8fafc;
  --app-text: #0f172a;
  --app-subtext: #475569;
  --surface-bg: #ffffff;
  --surface-secondary: #f1f5f9;
  --surface-hover: #f8fafc;
  --border-color: #e2e8f0;
  --border-light: #f1f5f9;
  --header-bg: rgba(255, 255, 255, 0.95);
  --footer-bg: #ffffff;
  --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
  --card-hover-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03);
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --input-text: #0f172a;
  --modal-bg: #ffffff;
  --modal-header-bg: #f8fafc;
}

html.dark {
  --app-bg: #0f172a;
  --app-text: #f8fafc;
  --app-subtext: #94a3b8;
  --surface-bg: #1e293b;
  --surface-secondary: #0f172a;
  --surface-hover: #334155;
  --border-color: #334155;
  --border-light: #475569;
  --header-bg: rgba(15, 23, 42, 0.95);
  --footer-bg: #0f172a;
  --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --card-hover-shadow: 0 12px 20px -3px rgba(0, 0, 0, 0.4);
  --input-bg: #0f172a;
  --input-border: #334155;
  --input-text: #f8fafc;
  --modal-bg: #1e293b;
  --modal-header-bg: #0f172a;
}

body {
  background-color: var(--app-bg);
  color: var(--app-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, .font-heading {
  font-family: 'Outfit', 'Inter', sans-serif;
}

/* Core Surface & Border Overrides */
.bg-yt-black { background-color: var(--app-bg) !important; }
.bg-yt-surface { background-color: var(--surface-bg) !important; }
.bg-yt-surfaceLight { background-color: var(--surface-secondary) !important; }
.border-yt-border { border-color: var(--border-color) !important; }
.border-yt-borderLight { border-color: var(--border-light) !important; }

header {
  background-color: var(--header-bg) !important;
  border-color: var(--border-color) !important;
}

footer {
  background-color: var(--footer-bg) !important;
  border-color: var(--border-color) !important;
}

.clean-card {
  background-color: var(--surface-bg);
  border: 1px solid #cbd5e1;
  box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.07), 0 1px 3px 0 rgba(15, 23, 42, 0.05);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.clean-card:hover {
  box-shadow: var(--card-hover-shadow);
  border-color: #94a3b8;
}
html.dark .clean-card {
  border-color: var(--border-color);
  box-shadow: var(--card-shadow);
}
html.dark .clean-card:hover {
  border-color: var(--border-light);
  box-shadow: var(--card-hover-shadow);
}

/* Clean custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* Floating Demo Switcher Popover */
#demoPersonaPopover {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Rich Text Coach Takeaway & Training Tips Editor */
#trainerTakeawayRichEditor:empty:before {
  content: attr(data-placeholder);
  color: #94a3b8;
  pointer-events: none;
}
#trainerTakeawayRichEditor ul,
#scModalQuote ul {
  list-style-type: disc;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
#trainerTakeawayRichEditor ol,
#scModalQuote ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
  margin: 0.25rem 0;
}
#trainerTakeawayRichEditor li,
#scModalQuote li {
  margin: 0.15rem 0;
}