/* ============================================
   LATTER-DAY PLANNER - Design System
   Version: 2.0
   ============================================ */

/* ============================================
   1. CSS VARIABLES & TOKENS
   ============================================ */

:root {
  /* Brand Colors */
  --brand-indigo: #4338CA;
  --brand-blurple: #6366F1;
  --brand-glow: #818CF8;
  
  /* Category Colors (Luke 2:52) */
  --cat-spiritual: #3B82F6;
  --cat-intellectual: #F59E0B;
  --cat-physical: #10B981;
  --cat-social: #F97316;
  --cat-service: #A855F7;
  
  /* Organization Colors */
  --org-ym: #2563EB;
  --org-yw: #DB2777;
  --org-combined: #0D9488;
  
  /* Light Mode (Default) */
  --bg-app: #FAFAFA;
  --bg-card: #FFFFFF;
  --text-primary: #171717;
  --text-secondary: #525252;
  --border-color: #E5E5E5;
  --border-light: #F5F5F5;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  
  /* Transitions */
  --transition-fast: 150ms ease-out;
  --transition-normal: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  
  /* Spacing */
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;
}

/* Dark Mode Variables */
.dark, [data-theme="dark"] {
  --bg-app: #0F172A;
  --bg-card: #1E293B;
  --bg-card-hover: #334155;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --border-color: #334155;
  --border-light: #1E293B;
}

/* ============================================
   2. BASE STYLES & TYPOGRAPHY
   ============================================ */

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-app);
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.5rem; font-weight: 700; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.125rem; font-weight: 600; }

p {
  color: var(--text-secondary);
}

/* Tabular figures for numbers */
.tabular-nums {
  font-variant-numeric: tabular-nums;
}

/* ============================================
   3. LAYOUT COMPONENTS
   ============================================ */

/* App Shell - Admin (Light Mode) */
.app-shell {
  display: flex;
  min-height: 100vh;
  background-color: var(--bg-app);
}

/* Sidebar Navigation */
.sidebar {
  width: 260px;
  background-color: var(--bg-card);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform var(--transition-normal);
}

.sidebar-header {
  padding: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--text-primary);
}

.sidebar-nav {
  flex: 1;
  padding: 1rem;
  overflow-y: auto;
}

.sidebar-section {
  margin-bottom: 1.5rem;
}

.sidebar-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  padding: 0.5rem 0.75rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-weight: 500;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.sidebar-link:hover {
  background-color: var(--bg-app);
  color: var(--text-primary);
}

.sidebar-link.active {
  background-color: #EEF2FF;
  color: var(--brand-indigo);
}

.sidebar-link.active .sidebar-icon {
  color: var(--brand-indigo);
}

.sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.sidebar-footer {
  padding: 1rem;
  border-top: 1px solid var(--border-color);
}

/* Main Content Area */
.main-content {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
}

/* Mobile: Hide sidebar, show full width */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  
  .sidebar.open {
    transform: translateX(0);
  }
  
  .main-content {
    margin-left: 0;
  }
}

/* Page Header */
.page-header {
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-color);
  background-color: var(--bg-card);
}

.page-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.page-subtitle {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

/* Page Body */
.page-body {
  padding: 1.5rem 2rem;
}

@media (max-width: 768px) {
  .page-header,
  .page-body {
    padding: 1rem;
  }
}

/* ============================================
   4. CARD COMPONENTS
   ============================================ */

.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  background-color: var(--bg-app);
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

/* Idea Card with Category Strip */
.idea-card {
  background-color: var(--bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  overflow: hidden;
  display: flex;
  transition: all var(--transition-normal);
}

.idea-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.idea-card-strip {
  width: 6px;
  flex-shrink: 0;
}

.idea-card-strip.spiritual { background-color: var(--cat-spiritual); }
.idea-card-strip.intellectual { background-color: var(--cat-intellectual); }
.idea-card-strip.physical { background-color: var(--cat-physical); }
.idea-card-strip.social { background-color: var(--cat-social); }
.idea-card-strip.service { background-color: var(--cat-service); }

.idea-card-content {
  flex: 1;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.idea-card-title {
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}

.idea-card-meta {
  font-size: 0.875rem;
  color: var(--text-secondary);
}

/* ============================================
   5. BUTTON COMPONENTS
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Primary Button */
.btn-primary {
  background-color: var(--brand-indigo);
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--brand-blurple);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Secondary Button */
.btn-secondary {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-app);
  border-color: var(--text-secondary);
}

/* Ghost Button */
.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--bg-app);
  color: var(--text-primary);
}

/* Danger Button */
.btn-danger {
  background-color: #DC2626;
  color: white;
}

.btn-danger:hover:not(:disabled) {
  background-color: #B91C1C;
}

/* Icon Button */
.btn-icon {
  padding: 0.625rem;
  border-radius: var(--radius-lg);
}

/* Button Sizes */
.btn-sm {
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
}

/* Pill Button */
.btn-pill {
  border-radius: var(--radius-full);
}

/* ============================================
   6. FORM COMPONENTS
   ============================================ */

.form-group {
  margin-bottom: 1.25rem;
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-primary);
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--brand-indigo);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-secondary);
}

/* ============================================
   7. CATEGORY PILLS & TAGS
   ============================================ */

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: var(--radius-full);
}

.category-pill.spiritual {
  background-color: rgba(59, 130, 246, 0.1);
  color: var(--cat-spiritual);
}

.category-pill.intellectual {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--cat-intellectual);
}

.category-pill.physical {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--cat-physical);
}

.category-pill.social {
  background-color: rgba(249, 115, 22, 0.1);
  color: var(--cat-social);
}

.category-pill.service {
  background-color: rgba(168, 85, 247, 0.1);
  color: var(--cat-service);
}

/* Organization Badges */
.org-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

.org-badge.ym {
  background-color: rgba(37, 99, 235, 0.1);
  color: var(--org-ym);
}

.org-badge.yw {
  background-color: rgba(219, 39, 119, 0.1);
  color: var(--org-yw);
}

.org-badge.combined {
  background-color: rgba(13, 148, 136, 0.1);
  color: var(--org-combined);
}

/* ============================================
   8. EMPTY STATES
   ============================================ */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
}

.empty-state-icon {
  width: 6rem;
  height: 6rem;
  color: var(--border-color);
  margin-bottom: 1.5rem;
  opacity: 0.4;
}

.empty-state-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.empty-state-description {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 300px;
}

/* ============================================
   9. LOADING STATES
   ============================================ */

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.spinner {
  animation: spin 1s linear infinite;
}

.fade-in {
  animation: fadeIn 0.2s ease-out;
}

.slide-up {
  animation: slideUp 0.3s ease-out;
}

.scale-in {
  animation: scaleIn 0.2s ease-out;
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Loading Skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--border-color) 25%,
    var(--bg-app) 50%,
    var(--border-color) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================
   10. DARK MODE - YOUTH VOTING
   ============================================ */

.dark {
  background-color: var(--bg-app);
  color: var(--text-primary);
}

/* Glassmorphism Card */
.dark .glass-card {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glowing Border Cards */
.dark .glow-card {
  border: 1px solid transparent;
  transition: all var(--transition-normal);
}

.dark .glow-card.spiritual {
  border-color: var(--cat-spiritual);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

.dark .glow-card.intellectual {
  border-color: var(--cat-intellectual);
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.dark .glow-card.physical {
  border-color: var(--cat-physical);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.dark .glow-card.social {
  border-color: var(--cat-social);
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.2);
}

.dark .glow-card.service {
  border-color: var(--cat-service);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
}

/* Vote Power Meter */
.vote-meter {
  display: flex;
  gap: 0.25rem;
  height: 0.5rem;
}

.vote-meter-segment {
  flex: 1;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, #22D3EE, #6366F1);
  transition: all var(--transition-normal);
}

.vote-meter-segment.depleted {
  background: #334155;
  opacity: 0.5;
}

/* Neon Vote Button */
.vote-btn {
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  border-radius: var(--radius-xl);
  border: 2px solid;
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-normal);
}

.vote-btn.spiritual { border-color: var(--cat-spiritual); color: var(--cat-spiritual); }
.vote-btn.intellectual { border-color: var(--cat-intellectual); color: var(--cat-intellectual); }
.vote-btn.physical { border-color: var(--cat-physical); color: var(--cat-physical); }
.vote-btn.social { border-color: var(--cat-social); color: var(--cat-social); }
.vote-btn.service { border-color: var(--cat-service); color: var(--cat-service); }

.vote-btn.voted {
  color: white;
}

.vote-btn.voted.spiritual { background-color: var(--cat-spiritual); box-shadow: 0 0 20px var(--cat-spiritual); }
.vote-btn.voted.intellectual { background-color: var(--cat-intellectual); box-shadow: 0 0 20px var(--cat-intellectual); }
.vote-btn.voted.physical { background-color: var(--cat-physical); box-shadow: 0 0 20px var(--cat-physical); }
.vote-btn.voted.social { background-color: var(--cat-social); box-shadow: 0 0 20px var(--cat-social); }
.vote-btn.voted.service { background-color: var(--cat-service); box-shadow: 0 0 20px var(--cat-service); }

/* Vote Animation */
@keyframes votePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.vote-btn.just-voted {
  animation: votePulse 0.3s ease-out;
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--brand-indigo);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(67, 56, 202, 0.5);
  transition: all var(--transition-normal);
  z-index: 50;
}

.fab:hover {
  background: var(--brand-blurple);
  transform: scale(1.05);
  box-shadow: 0 6px 30px rgba(67, 56, 202, 0.6);
}

.fab svg {
  width: 1.75rem;
  height: 1.75rem;
}

/* Sticky HUD Header (Youth Mode) */
.hud-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0.75rem 1rem;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.hud-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================
   11. MODALS & OVERLAYS
   ============================================ */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.modal {
  background-color: var(--bg-card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  max-width: 500px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: scaleIn 0.2s ease-out;
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.modal-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.modal-close:hover {
  background-color: var(--bg-app);
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
}

.modal-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* Bottom Sheet (Mobile) */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.2);
  max-height: 90vh;
  overflow-y: auto;
  z-index: 100;
  animation: slideUp 0.3s ease-out;
}

.dark .bottom-sheet {
  background-color: #1E293B;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-sheet-handle {
  width: 2.5rem;
  height: 0.25rem;
  background-color: var(--border-color);
  border-radius: var(--radius-full);
  margin: 0.75rem auto;
}

/* ============================================
   12. SCROLLBAR STYLING
   ============================================ */

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

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

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* ============================================
   13. UTILITY CLASSES
   ============================================ */

.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Focus visible for accessibility */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.4);
}

/* Transition utilities */
.transition-all {
  transition: all var(--transition-normal);
}

.transition-colors {
  transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}

/* ============================================
   14. MOBILE BOTTOM TAB BAR
   ============================================ */

.bottom-tabs {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-card);
  border-top: 1px solid var(--border-color);
  display: none;
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 768px) {
  .bottom-tabs {
    display: flex;
  }
  
  .main-content {
    padding-bottom: 5rem;
  }
}

.bottom-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.5rem;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  gap: 0.25rem;
  transition: all var(--transition-fast);
  background: transparent;
  border: none;
  cursor: pointer;
}

.bottom-tab:hover,
.bottom-tab.active {
  color: var(--brand-indigo);
}

.bottom-tab svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ============================================
   15. LEGACY SUPPORT (Tailwind overrides)
   ============================================ */

/* Keep combined styling working */
.combined-accent {
  border-color: var(--org-combined) !important;
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(13, 148, 136, 0.05) 100%);
}

.combined-badge {
  background-color: var(--org-combined);
  color: white;
}

/* ============================================
   16. LIVE SESSION BANNER
   ============================================ */

.live-session-banner {
  background: linear-gradient(90deg, #059669, #10b981);
  color: white;
  padding: 0.5rem 1rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.live-dot {
  width: 0.625rem;
  height: 0.625rem;
  background: white;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.live-banner-btn {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: background-color 0.15s ease;
  border: none;
  color: white;
  cursor: pointer;
}

.live-banner-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

.live-banner-btn-danger {
  background: rgba(239, 68, 68, 0.8);
}

.live-banner-btn-danger:hover {
  background: rgba(239, 68, 68, 1);
}

/* Adjust fixed elements when banner is present - desktop */
body.has-live-banner #sidebar {
  top: 44px;
  height: calc(100vh - 44px);
}

/* Desktop: push content down */
body.has-live-banner .app-shell {
  padding-top: 44px;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .live-session-banner {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
  }
  
  .live-session-banner .flex-wrap {
    flex-wrap: nowrap;
  }
  
  .live-banner-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
  }
  
  /* Single-line banner on mobile - 44px */
  body.has-live-banner .app-shell {
    padding-top: 44px;
  }
  
  /* Mobile header - fixed position needs to shift down */
  body.has-live-banner .app-shell > header {
    top: 44px !important;
  }
  
  body.has-live-banner #sidebar {
    top: 44px;
    height: calc(100vh - 44px);
  }
  
  /* Adjust the sidebar overlay to start below the banner */
  body.has-live-banner #sidebarOverlay {
    top: 44px;
  }
  
  /* Main content area needs padding for banner AND mobile header */
  body.has-live-banner .main-content .pt-16 {
    padding-top: calc(4rem + 44px) !important;
  }
}

/* Adjust ALL sticky headers when banner is present */
body.has-live-banner header.sticky {
  top: 44px !important;
}

/* Also catch fixed headers */
body.has-live-banner header.fixed {
  top: 44px !important;
}

/* Make sure the main content area has padding for the fixed banner */
body.has-live-banner .min-h-screen {
  padding-top: 44px;
}

/* Also ensure main-content class gets pushed down */
body.has-live-banner .main-content {
  padding-top: 44px;
}

/* LIVE Badge for Sidebar */
.live-badge-small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background-color: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  flex-shrink: 0;
}

.live-badge-dot {
  width: 0.375rem;
  height: 0.375rem;
  background-color: #22c55e;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

/* Review Pending Pulse Icon */
.review-pulse-icon {
  display: inline-flex;
  animation: review-pulse 2s ease-in-out infinite;
}

@keyframes review-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* ============================================
   LIVE SESSION MODE - "Deep Space" Theme
   ============================================ */

/* Smooth transition between light and dark */
.mode-live,
.mode-live * {
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.3s ease;
}

/* Live column - smooth card reordering */
.live-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.live-column .idea-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease,
              box-shadow 0.3s ease;
}

/* Neon Glass Cards */
.neon-card {
  position: relative;
  overflow: hidden;
}

.neon-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
}

.neon-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 30px var(--neon-glow, rgba(255,255,255,0.15));
}

/* Vote Pulse Animation */
@keyframes vote-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes vote-glow {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes border-flash {
  0% {
    border-color: var(--neon-border, rgba(255,255,255,0.5));
    box-shadow: 0 0 20px var(--neon-glow, rgba(255,255,255,0.1));
  }
  50% {
    border-color: var(--neon-bright, rgba(255,255,255,1));
    box-shadow: 0 0 40px var(--neon-bright, rgba(255,255,255,0.4));
  }
  100% {
    border-color: var(--neon-border, rgba(255,255,255,0.5));
    box-shadow: 0 0 20px var(--neon-glow, rgba(255,255,255,0.1));
  }
}

/* Number Pop Animation - The "Hero" number pops when vote changes */
@keyframes number-pop {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes number-glow-pulse {
  0% {
    text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  }
  50% {
    text-shadow: 0 0 30px currentColor, 0 0 60px currentColor, 0 0 80px currentColor;
  }
  100% {
    text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  }
}

/* Applied when vote changes */
.neon-card.vote-animating {
  animation: vote-pulse 0.35s ease-out, border-flash 0.35s ease-out;
}

.neon-card.vote-animating .vote-number {
  animation: number-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), number-glow-pulse 0.35s ease-out;
}

/* Keep controls hidden during animation (unless hovering) */
.neon-card.vote-animating .vote-controls {
  transition: none;
}

/* Rank change animation */
@keyframes rank-up {
  0% {
    transform: translateY(0);
    background: rgba(34, 197, 94, 0);
  }
  50% {
    transform: translateY(-8px);
    background: rgba(34, 197, 94, 0.2);
  }
  100% {
    transform: translateY(0);
    background: rgba(34, 197, 94, 0);
  }
}

@keyframes rank-down {
  0% {
    transform: translateY(0);
    background: rgba(239, 68, 68, 0);
  }
  50% {
    transform: translateY(8px);
    background: rgba(239, 68, 68, 0.2);
  }
  100% {
    transform: translateY(0);
    background: rgba(239, 68, 68, 0);
  }
}

.neon-card.rank-up {
  animation: rank-up 0.5s ease-out;
}

.neon-card.rank-down {
  animation: rank-down 0.5s ease-out;
}

/* Vote button hover effects in dark mode */
.mode-live .vote-up:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.4);
}

.mode-live .vote-down:hover {
  transform: scale(1.15);
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* Leaderboard number animation */
.vote-display-live span:first-child {
  transition: transform 0.2s ease, color 0.2s ease;
}

.neon-card.vote-animating .vote-display-live span:first-child {
  transform: scale(1.2);
}

/* Category-specific neon border colors (CSS custom properties) */
.neon-card[data-category="spiritual"] {
  --neon-border: rgba(59, 130, 246, 0.5);
  --neon-bright: rgba(59, 130, 246, 1);
}

.neon-card[data-category="intellectual"] {
  --neon-border: rgba(245, 158, 11, 0.5);
  --neon-bright: rgba(245, 158, 11, 1);
}

.neon-card[data-category="physical"] {
  --neon-border: rgba(16, 185, 129, 0.5);
  --neon-bright: rgba(16, 185, 129, 1);
}

.neon-card[data-category="social"] {
  --neon-border: rgba(249, 115, 22, 0.5);
  --neon-bright: rgba(249, 115, 22, 1);
}

.neon-card[data-category="service"] {
  --neon-border: rgba(168, 85, 247, 0.5);
  --neon-bright: rgba(168, 85, 247, 1);
}

/* Mobile optimizations for live mode */
@media (max-width: 640px) {
  .mode-live .neon-card {
    padding: 1rem;
  }
  
  .mode-live .vote-display-live span:first-child {
    font-size: 1.5rem;
  }
  
  .mode-live .vote-up,
  .mode-live .vote-down {
    width: 2.5rem;
    height: 2.5rem;
  }
}

/* Dark mode select dropdown styling */
.mode-live select.submission-category {
  color-scheme: dark;
}

.mode-live select.submission-category option {
  background-color: #1E293B;
  color: #F1F5F9;
  padding: 8px 12px;
}

/* Modal animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { 
    opacity: 0; 
    transform: scale(0.95);
  }
  to { 
    opacity: 1; 
    transform: scale(1);
  }
}

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

.animate-scale-in {
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Share modal content transitions */
#shareTabContent {
  transition: opacity 0.1s ease-out;
}

/* ============================================
   DRAG AND DROP STYLES
   ============================================ */

/* Draggable items */
.unscheduled-idea[draggable="true"] {
  cursor: grab;
}

.unscheduled-idea[draggable="true"]:active {
  cursor: grabbing;
}

/* Drop zone highlight */
.drop-zone.drop-highlight {
  background-color: rgba(255, 255, 255, 1) !important;
  box-shadow: 0 0 0 2px #6366F1, 0 4px 12px rgba(99, 102, 241, 0.2);
}

/* Calendar drop animation */
@keyframes calendarDropFlash {
  0% {
    background-color: rgba(255, 255, 255, 1);
  }
  50% {
    background-color: var(--drop-color, rgba(16, 185, 129, 0.25));
  }
  100% {
    background-color: transparent;
  }
}

.drop-success {
  animation: calendarDropFlash 0.5s ease-out;
}

/* ============================================
   MOBILE CALENDAR STYLES
   ============================================ */

/* Slide up animation for bottom sheets */
@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

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

/* Slide down animation for expandable content */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-down {
  animation: slideDown 0.2s ease-out;
}

/* Mobile bottom sheet styling */
#mobileUnscheduledSheet {
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}

/* Mobile activity card touch feedback */
.mobile-activity-card {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

.mobile-activity-card:active {
  transform: scale(0.98);
}

/* Mobile day button touch feedback */
.mobile-day-btn:active {
  transform: scale(0.95);
}

/* Mobile mini day button touch feedback */
.mobile-mini-day:active {
  transform: scale(0.9);
}

/* FAB shadow and hover */
#mobileFabBtn {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
}

/* Hide desktop view on mobile */
@media (max-width: 767px) {
  /* Ensure modals work on mobile */
  .fixed.inset-0 {
    padding: 1rem;
  }
}

/* Swipe hint animation */
@keyframes swipeHint {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-5px);
  }
}

/* Mobile balance modal circular progress */
.mobile-balance-ring {
  transition: stroke-dasharray 0.5s ease-out;
}

/* Smooth horizontal scrolling for idea banks */
#combinedIdeaBank {
  -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
  overscroll-behavior-x: contain; /* Prevent scroll chaining */
  touch-action: pan-x; /* Allow horizontal touch scroll, prevent conflicts with drag */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: rgba(0,0,0,0.2) transparent;
  /* Optimize scroll performance */
  -webkit-transform: translateZ(0); /* Create compositing layer */
  transform: translateZ(0);
}

#combinedIdeaBank::-webkit-scrollbar {
  height: 6px;
}

#combinedIdeaBank::-webkit-scrollbar-track {
  background: transparent;
}

#combinedIdeaBank::-webkit-scrollbar-thumb {
  background-color: rgba(0,0,0,0.2);
  border-radius: 3px;
}

/* Ensure cards don't cause repaints during scroll */
.combined-calendar-idea {
  contain: layout style;
  touch-action: pan-x; /* Allow cards to be swiped horizontally */
  user-select: none; /* Prevent text selection during scroll */
  -webkit-user-select: none;
}

/* ============================================
   TOAST NOTIFICATIONS - v145
   ============================================ */

#toastContainer {
  max-width: calc(100vw - 2rem);
}

@media (max-width: 640px) {
  #toastContainer {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }
}

/* ============================================
   OFFLINE BANNER
   ============================================ */

.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #F59E0B;
  color: white;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10000;
}

/* ============================================
   LOADING BUTTON STATE
   ============================================ */

button:disabled {
  cursor: not-allowed !important;
}

button .animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   FLATPICKR - Base CSS (Self-Hosted)
   ============================================ */

.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  touch-action: manipulation;
  box-sizing: border-box;
  position: absolute;
  z-index: 999999 !important;  /* Must be way higher than modal z-50 */
  margin-top: 4px;
}

.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible !important;
  display: block !important;
  z-index: 999999 !important;
}

.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.flatpickr-calendar.static {
  position: relative;
}

.flatpickr-calendar.static.open {
  display: block;
}

.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}

.flatpickr-months {
  display: flex;
}

.flatpickr-months .flatpickr-month {
  flex: 1;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}

.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  fill: inherit;
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  width: 100%;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  background: transparent;
  border: none;
  cursor: pointer;
}

.flatpickr-current-month input.cur-year {
  width: 4ch;
  text-align: center;
}

.numInputWrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  cursor: pointer;
  opacity: 0;
  border: none;
}

.numInputWrapper:hover span {
  opacity: 1;
}

.numInputWrapper span.arrowUp {
  top: 0;
}

.numInputWrapper span.arrowDown {
  bottom: 0;
}

.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid currentColor;
  content: "";
  display: block;
}

.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  content: "";
  display: block;
}

.flatpickr-weekdays {
  display: flex;
  width: 100%;
  overflow: hidden;
  text-align: center;
}

.flatpickr-weekday {
  flex: 1;
  cursor: default;
}

.flatpickr-days {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
}

.dayContainer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  width: 100%;
  outline: 0;
  box-sizing: border-box;
}

.flatpickr-day {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-basis: 14.2857143%;
  max-width: 40px;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  pointer-events: none;
}

.flatpickr-day.hidden {
  visibility: hidden;
}

/* Time picker */
.flatpickr-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  outline: 0;
  height: auto;
  overflow: hidden;
}

.flatpickr-time input {
  background: transparent;
  border: none;
  text-align: center;
  cursor: pointer;
  margin: 0;
  padding: 0;
}

.flatpickr-time input:focus {
  outline: none;
}

.flatpickr-time .flatpickr-time-separator {
  display: flex;
  align-items: center;
}

.flatpickr-time .flatpickr-am-pm {
  cursor: pointer;
  outline: 0;
  border: none;
}

/* Alt input (visible styled input) - CRITICAL */
input.flatpickr-input {
  cursor: pointer;
}

input.flatpickr-input[readonly] {
  cursor: pointer;
}

/* The alt input inherits from the original but needs to be visible */
input.flatpickr-input.flatpickr-mobile,
.flatpickr-input ~ input.form-control[readonly] {
  cursor: pointer;
}

/* Hide the original input when altInput is used */
.flatpickr-input[readonly] + .form-control {
  cursor: pointer;
}

@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================
   FLATPICKR - Design System v1.1 Theme
   ============================================ */

/* Container */
.flatpickr-calendar {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  font-family: 'Inter', system-ui, sans-serif;
  padding: 0;
  width: 280px;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  display: none;
}

/* Month navigation */
.flatpickr-months {
  padding: 0.75rem 0.5rem 0.5rem;
  border-bottom: 1px solid #F1F5F9;
}

.flatpickr-months .flatpickr-month {
  height: auto;
}

.flatpickr-current-month {
  padding: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #1E293B;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: none;
  font-weight: 600;
  font-size: 0.9375rem;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  font-size: 0.9375rem;
  width: 5ch;  /* Wider to fit full year */
}

/* Hide year increment arrows in month header for cleaner look */
.flatpickr-current-month .numInputWrapper span {
  display: none;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  padding: 0.5rem;
  fill: #64748B;
  border-radius: 0.5rem;
  transition: all 150ms ease;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: #F1F5F9;
  fill: #4338CA;
}

/* Weekday header */
.flatpickr-weekdays {
  padding: 0.5rem 0.75rem 0.25rem;
}

.flatpickr-weekday {
  color: #94A3B8;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Days grid */
.flatpickr-days {
  padding: 0 0.5rem 0.75rem;
}

.dayContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.flatpickr-day {
  border-radius: 0.5rem;
  color: #334155;
  font-size: 0.8125rem;
  font-weight: 500;
  height: 34px;
  line-height: 34px;
  max-width: 34px;
  margin: 1px;
  transition: all 150ms ease;
}

.flatpickr-day:hover {
  background: #F1F5F9;
  border-color: transparent;
}

.flatpickr-day.today {
  border-color: #4338CA;
  background: transparent;
  color: #4338CA;
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background: #EEF2FF;
  border-color: #4338CA;
  color: #4338CA;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #4338CA;
  border-color: #4338CA;
  color: white;
}

.flatpickr-day.inRange {
  background: #EEF2FF;
  border-color: transparent;
  box-shadow: -5px 0 0 #EEF2FF, 5px 0 0 #EEF2FF;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #CBD5E1;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: #E2E8F0;
  background: transparent;
}

/* Time picker */
.flatpickr-time {
  border-top: 1px solid #F1F5F9;
  padding: 0.75rem;
  max-height: none;
  line-height: 1;
}

.flatpickr-time input {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1E293B;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background: #F8FAFC;
  border: 1px solid transparent;
  transition: all 150ms ease;
  width: 3.5rem;  /* Fixed width for hour/minute inputs */
}

.flatpickr-time input:hover {
  background: #F1F5F9;
}

.flatpickr-time input:focus {
  background: white;
  border-color: #4338CA;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.1);
  outline: none;
}

.flatpickr-time .flatpickr-time-separator {
  font-weight: 600;
  color: #64748B;
}

.flatpickr-time .flatpickr-am-pm {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  background: #F8FAFC;
  color: #64748B;
  transition: all 150ms ease;
}

.flatpickr-time .flatpickr-am-pm:hover {
  background: #EEF2FF;
  color: #4338CA;
}

/* Hide increment arrows in time picker for cleaner look */
.flatpickr-time .numInputWrapper {
  position: relative;
}

.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
  display: none;  /* Hide arrows for cleaner appearance */
}

/* Input styling when Flatpickr is attached */
input.flatpickr-input {
  cursor: pointer;
}

input.flatpickr-input:read-only {
  cursor: pointer;
  background-color: #F8FAFC;
}

/* Alt input styling - the visible pretty-formatted input */
input.flatpickr-input.flatpickr-mobile,
input[readonly].flatpickr-input {
  cursor: pointer !important;
}

/* Ensure hidden original inputs stay hidden */
input.flatpickr-input[type="hidden"] {
  display: none !important;
}

/* Style the altInput to match our form inputs */
.flatpickr-input + input,
input.flatpickr-alt-input {
  cursor: pointer;
  background-color: #F8FAFC;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  color: #334155;
  transition: all 150ms ease;
  width: 100%;
}

.flatpickr-input + input:hover,
input.flatpickr-alt-input:hover {
  background-color: #F1F5F9;
}

.flatpickr-input + input:focus,
input.flatpickr-alt-input:focus {
  outline: none;
  background-color: white;
  border-color: #4338CA;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.1);
}

/* Animation */
.flatpickr-calendar.animate.open {
  animation: fpFadeIn 200ms ease-out;
}

@keyframes fpFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* v217: Widen year input */
.flatpickr-calendar .flatpickr-current-month input.cur-year {
  width: 4.5rem !important;
}