/* Common reusable styles for Breakaway Fund Connector UI */
@import "./tokens.css";

/* Sofia Pro webfonts */
@font-face {
  font-family: 'Sofia Pro ExtraBold';
  src: url('../fonts/SofiaPro-ExtraBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro SemiBold';
  src: url('../fonts/SofiaPro-SemiBold.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Sofia Pro Light';
  src: url('../fonts/SofiaPro-Light.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Global typography */
html, body {
  font-family: var(--font-family-base);
  color: var(--samueli-black);
}

/* Scoped normalization for auth controls to ensure equal widths */
.auth-container .form-group input,
.auth-container .btn {
  box-sizing: border-box;
  display: block;
}

/* Headings and text helpers */
h1, h2, h3, .heading {
  font-family: var(--font-family-heading);
}
h4, h5, h6, .subheading {
  font-family: var(--font-family-subheading);
}
.body-text {
  font-family: var(--font-family-base);
}

/* Brand utility classes */
.bg-samueli-light-blue {
  background-color: var(--samueli-light-blue);
}

.text-samueli-orange { color: var(--samueli-orange); }
.text-samueli-orange-light { color: var(--samueli-orange-light); }
.text-samueli-blue { color: var(--samueli-blue); }
.text-samueli-light-green { color: var(--samueli-light-green); }
.text-samueli-light-blue { color: var(--samueli-light-blue); }
.text-samueli-teal { color: var(--samueli-teal); }

/* Generic text utilities */
.text-primary { color: var(--text-primary); }
.text-muted { color: var(--text-muted); }
.text-strong { color: var(--text-strong); }
.text-subtle { color: var(--text-subtle); }
.text-error-strong { color: var(--error-strong); }

:root {
  /* Unified background surfaces (non-token opacities) */
  /* Centralized font families */
  --font-family-fallback: "Noto Sans", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", "sans-serif";
  --font-family-light: 'Sofia Pro Light', var(--font-family-fallback);
  --font-family-semibold: 'Sofia Pro SemiBold', var(--font-family-fallback);
  --font-family-extrabold: 'Sofia Pro ExtraBold', var(--font-family-fallback);
  --font-family-base: var(--font-family-light);
  --font-family-heading: var(--font-family-extrabold);
  --font-family-subheading: var(--font-family-semibold);

  --bg-surface-95: rgba(255, 255, 255, 0.95);
  --bg-surface-90: rgba(255, 255, 255, 0.9);
  /* Legacy alias retained for compatibility */
  --glass-bg: var(--bg-surface-95);
  --glass-border: rgba(255, 255, 255, 0.2);
  --shadow-soft: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 20px 40px rgba(0, 0, 0, 0.1);
  --shadow-hard: 0 8px 20px var(--shadow-light-blue-25);
  --shadow-subtle: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sidebar: 2px 0 10px rgba(0, 0, 0, 0.1);
  /* Controls and borders */
  --neutral-track: #e5e7eb; /* slider track neutral */
  --scrollbar-track: #f1f1f1;
  --scrollbar-thumb: #888888;
  --scrollbar-thumb-hover: #555555;
  --border-subtle: #f0f0f0;
  --spinner-track: #f3f3f3;
  /* Accent translucents (teal) */
  --accent-teal-01: rgba(0, 115, 119, 0.1);
  --accent-teal-02: rgba(0, 115, 119, 0.2);
  --accent-teal-03: rgba(0, 115, 119, 0.3);
  --accent-teal-04: rgba(0, 115, 119, 0.4);
  /* Overlay & shimmer */
  --overlay-scrim: rgba(0, 0, 0, 0.5);
  --overlay-shimmer: rgba(255, 255, 255, 0.1);
  /* Shadow tints for light-blue */
  --shadow-light-blue-35: rgba(91, 127, 149, 0.35);
  --shadow-light-blue-25: rgba(91, 127, 149, 0.25);
  /* Alerts */
  --alert-error-bg: #ffeeee; /* #fee */
  --alert-error-border: #ffcccc; /* #fcc */
  --alert-error-text: #cc3333; /* #c33 */
  --alert-success-bg: #eeffee; /* #efe */
  --alert-success-border: #ccffcc; /* #cfc */
  --alert-success-text: #33cc33; /* #3c3 */
  --error-strong: #d32f2f;
}

/* Font utilities */
/* Family utilities to apply brand fonts consistently */
.font-custom-base { font-family: var(--font-family-base); }
.font-custom-light { font-family: var(--font-family-light); }
.font-custom-semibold { font-family: var(--font-family-semibold); }
.font-custom-extrabold { font-family: var(--font-family-extrabold); }

/* Branded gradient header/background used across pages */
.gradient-bg {
  background: var(--gradient-header);
  position: relative;
  /* Allow dropdowns to escape header bounds */
  overflow: visible;
  /* Make sure header stacks above main so dropdown isn't hidden */
  z-index: 1000;
}

.gradient-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, var(--overlay-shimmer) 50%, transparent 70%);
  animation: none;
  /* Do not block clicks on header buttons/links */
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

  /* Glass morphism cards */
  .card-modern {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-modern:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
    border-color: var(--accent-teal-03);
}

/* Modern inputs */
.input-modern {
    background: var(--bg-surface-90);
    border: 1px solid var(--accent-teal-02);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.input-modern:focus {
    outline: none;
    border-color: var(--samueli-teal);
    box-shadow: 0 0 0 3px var(--accent-teal-01);
    background: var(--bg-surface);
}

.btn-secondary {
    font-family: var(--font-family-semibold);
    background: var(--bg-surface-95);
    border: 1px solid var(--samueli-light-blue);
    color: var(--samueli-light-blue);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 12px 24px;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-subtle);
}

.btn-secondary:hover {
    background: var(--bg-surface);
    border-color: var(--samueli-light-blue);
    color: var(--samueli-light-blue);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hard);
}

/* Modern scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Chat message animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

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

/* Typing indicator */
.typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
  animation: typingFade 1.4s infinite;
}

.typing-dot:nth-child(1) { animation-delay: 0s; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% {
      opacity: 0.3;
      transform: none;
  }
  30% {
      opacity: 1;
      transform: none;
  }
}

/* Subtle opacity-only typing indicator to avoid bounce */
@keyframes typingFade {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .sidebar-left {
      position: fixed;
      left: -100%;
      transition: left 0.3s ease;
      z-index: 40;
      width: 80%;
      max-width: 320px;
      height: 100%;
      top: 0;
      box-shadow: var(--shadow-sidebar);
  }
  .sidebar-left.active {
      left: 0;
  }

  /* Overlay for mobile sidebar */
  .sidebar-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--overlay-scrim);
      z-index: 39;
  }
  .sidebar-overlay.active {
      display: block;
  }

  /* Mobile message styling */
  .message-mobile {
      font-size: 0.875rem;
  }

  /* Smaller avatars on mobile */
  .avatar-mobile {
      width: 2rem !important;
      height: 2rem !important;
  }
}

/* Small screen adjustments */
@media (max-width: 640px) {
  /* Stack interface buttons */
  .mobile-stack {
      flex-direction: column;
      gap: 0.5rem;
  }

  /* Full width suggestions on mobile */
  .suggestion-mobile {
      font-size: 0.875rem;
      padding: 0.75rem;
  }
}

/* Search results spacing */
#searchResults .bg-white:hover {
  transform: translateY(-2px);
}

/* Modern range sliders */
.range-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right, var(--neutral-track) 0%, var(--neutral-track) 100%);
    outline: none;
}

.range-slider::-webkit-slider-track {
    background: linear-gradient(to right, var(--samueli-teal) 0%, var(--samueli-orange) 100%);
    height: 8px;
    border-radius: 4px;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(135deg, var(--samueli-teal) 0%, var(--samueli-orange) 100%);
    height: 20px;
    width: 20px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--accent-teal-03);
    transition: all 0.3s ease;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px var(--accent-teal-04);
}

/* Modern checkboxes */
.checkbox-modern {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--samueli-teal);
    border-radius: 4px;
    background: var(--bg-surface-90);
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.checkbox-modern:checked {
    background: linear-gradient(135deg, var(--samueli-teal) 0%, var(--samueli-orange) 100%);
    border-color: var(--samueli-teal);
}

.checkbox-modern:checked::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Floating effect */
.floating-card {
    animation: none;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* Modern select */
.select-modern {
    background: var(--bg-surface-90);
    border: 1px solid var(--accent-teal-02);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 16px;
    padding-right: 40px;
}

.select-modern:focus {
    outline: none;
    border-color: var(--samueli-teal);
    box-shadow: 0 0 0 3px var(--accent-teal-01);
    background: var(--bg-surface);
}

/* Modern background */
.bg-modern {
    background: linear-gradient(135deg, var(--bg-muted-1) 0%, var(--bg-muted-2) 100%);
    min-height: 100vh;
}

/* Section headers */
.section-header {
    background: linear-gradient(135deg, var(--samueli-teal) 0%, var(--samueli-orange) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Loading modal */
.modal-modern {
    backdrop-filter: blur(8px);
    background: var(--overlay-scrim);
}

.modal-content {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: var(--shadow-medium);
}

/* Utilities */
.progress-bar { transition: width 0.3s ease; }
.gn-text-center { text-align: center; }
.gn-mb-2 { margin-bottom: 8px; }
.gn-mb-3 { margin-bottom: 20px; }
.gn-mt-2 { margin-top: 10px; }
.gn-heading-primary { color: var(--text-primary); }
.gn-text-muted { color: var(--text-muted); }
.gn-panel { background: var(--bg-panel); padding: 20px; border-radius: 10px; }
.line-clamp-3 {
  line-clamp: 3;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.transition-transform { transition: transform 0.2s ease; }
.rotate-180 { transform: rotate(180deg); }

/* Auth layout (migrated from base.html) */
.auth-layout {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  line-height: 1.6;
  color: var(--text-primary);
  background: linear-gradient(135deg, var(--samueli-blue) 0%, var(--samueli-blue) 35%, var(--samueli-orange) 65%, var(--samueli-orange-light) 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-container {
  background: var(--bg-surface);
  border-radius: 20px;
  box-shadow: var(--shadow-medium);
  overflow: hidden;
  width: 100%;
  max-width: 400px;
  margin: 20px;
}

.auth-header {
  background: var(--samueli-light-blue);
  padding: 40px 30px;
  text-align: center;
  color: white;
}

.auth-header h1 {
  font-size: 28px;
  margin-bottom: 8px;
  font-family: var(--font-family-heading);
}

.auth-header p {
  opacity: 0.9;
  font-size: 14px;
}

.auth-body { padding: 40px 30px; }

.form-group { margin-bottom: 20px; }
.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-secondary);
}
.form-group input {
  width: 100%;
  padding: 15px;
  border: 2px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 16px;
  transition: border-color 0.3s ease;
}
.form-group input:focus {
  outline: none;
  border-color: var(--samueli-orange);
}

.btn {
  width: 100%;
  padding: 15px;
  background: var(--samueli-light-blue);
  color: white;
  border: 2px solid transparent; /* match input's 2px border to equalize total width */
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hard);
}
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Call-to-action buttons (Samueli orange gradient) */
.btn-primary {
  background: var(--gradient-cta);
  color: white;
  font-family: var(--font-family-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 24px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-subtle);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border: 1px solid var(--shadow-light-blue-35);
}
.btn-primary:hover {
  border-color: var(--samueli-light-blue);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hard);
}

/* Donate button - unpressed state (white background, orange border and text) */
.btn-donate {
  background: white;
  color: var(--samueli-orange);
  font-family: var(--font-family-semibold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 12px 24px;
  transition: all 0.2s ease;
  box-shadow: var(--shadow-subtle);
  border-radius: 12px;
  border: 2px solid var(--samueli-orange);
  cursor: pointer;
}
.btn-donate:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: var(--samueli-orange-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hard);
}

/* Donate button - pressed state (orange background, white text) */
.btn-donate.pressed {
  background: var(--samueli-orange);
  color: white;
  border: 2px solid var(--samueli-orange);
}
.btn-donate.pressed:hover {
  background: var(--samueli-orange-light);
  border-color: var(--samueli-orange-light);
  transform: translateY(-1px);
  box-shadow: var(--shadow-hard);
}

.alert {
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}
.alert-error { background-color: var(--alert-error-bg); border: 1px solid var(--alert-error-border); color: var(--alert-error-text); }
.alert-success { background-color: var(--alert-success-bg); border: 1px solid var(--alert-success-border); color: var(--alert-success-text); }

.auth-footer { text-align: center; padding: 0 30px 30px; }
.auth-footer a { color: var(--samueli-orange); text-decoration: none; font-weight: 500; }
.auth-footer a:hover { text-decoration: underline; }

.loading { display: none; text-align: center; margin-top: 20px; }
.spinner {
  border: 3px solid var(--spinner-track);
  border-top: 3px solid var(--samueli-orange);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 480px) {
  .auth-container { margin: 10px; border-radius: 15px; }
  .auth-header { padding: 30px 20px; }
  .auth-header h1 { font-size: 24px; }
  .auth-body { padding: 30px 20px; }
}