/**
 * Pregnancy AI Tracker - Unified Styles v5.0
 * Built on Bootstrap 5.3.3
 */

/* ========================================
   1. CSS VARIABLES & THEME
   ======================================== */
:root {
  /* Primary Brand Colors (Maternal Pink) */
  --primary-50: #fdf2f8;
  --primary-100: #fce7f3;
  --primary-200: #fbcfe8;
  --primary-300: #f9a8d4;
  --primary-400: #f472b6;
  --primary-500: #ec4899;
  --primary-600: #db2777;
  --primary-700: #be185d;
  --primary-800: #9d174d;
  --primary-900: #831843;

  /* Bootstrap Variable Overrides */
  --bs-primary: var(--primary-600);
  --bs-primary-rgb: 219, 39, 119;
  --bs-body-font-family: 'Heebo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --bs-body-bg: #f9fafb;
  --bs-body-color: #1f2937;
  
  /* Custom Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  /* Border Radius */
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

/* ========================================
   2. GLOBAL RESETS & TYPOGRAPHY
   ======================================== */
body {
  background-color: var(--bs-body-bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: 80px; /* Space for bottom nav */
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  color: #111827;
}

a {
  text-decoration: none;
  color: var(--primary-600);
  transition: color 0.2s ease;
}

a:hover {
  color: var(--primary-700);
  text-decoration: underline;
}

/* ========================================
   3. COMPONENT OVERRIDES
   ======================================== */

/* Cards */
.card {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background-color: #fff;
}

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

.card-header {
  background-color: rgba(249, 250, 251, 0.8);
  border-bottom: 1px solid #e5e7eb;
  font-weight: 600;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Buttons */
.btn {
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
}

.btn-primary {
  background-color: var(--primary-600);
  border-color: var(--primary-600);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-700);
  border-color: var(--primary-700);
  transform: translateY(-1px);
}

.btn-outline-primary {
  color: var(--primary-600);
  border-color: var(--primary-600);
}

.btn-outline-primary:hover {
  background-color: var(--primary-600);
  color: white;
}

/* Navbar */
.navbar {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: var(--shadow-sm);
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

@media (min-width: 992px) {
  .navbar-nav {
    flex-direction: row;
  }
}

.navbar-brand {
  font-weight: 700;
  color: var(--primary-600) !important;
}

/* Forms */
.form-control:focus, .form-select:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 0.25rem rgba(219, 39, 119, 0.25);
}

/* ========================================
   4. CUSTOM COMPONENTS
   ======================================== */

/* Page Hero */
.page-hero {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-800));
  color: white;
  padding: 3rem 0 4rem;
  margin-bottom: 2rem;
  border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
}

.page-hero h1 { color: white; }
.page-hero p { color: rgba(255, 255, 255, 0.9); }

/* Pregnancy Week Circle */
.pregnancy-week-circle,
.week-circle-large {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
  border: 4px solid white;
}

.pregnancy-week-circle .week-number {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

.pregnancy-week-circle .week-text {
  font-size: 0.875rem;
  opacity: 0.9;
}

/* Bottom Navigation */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
  display: flex;
  justify-content: space-around;
  padding: 0.5rem 0;
  z-index: 1030;
}

/* Hide on larger screens if desired, but keeping it for consistency as per current design */
@media (min-width: 992px) {
  .bottom-nav { display: none; }
  body { padding-bottom: 0; }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #6b7280;
  font-size: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: color 0.2s;
}

.bottom-nav-item i {
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}

.bottom-nav-item.active, .bottom-nav-item:hover {
  color: var(--primary-600);
}

/* Floating Action Button (FAB) */
.fab {
  position: fixed;
  bottom: 90px;
  left: 1.5rem; /* RTL Support: Left side for Hebrew usually implies secondary action, but FAB often on right. Check RTL context. */
  /* Since dir=rtl, 'left' puts it on the left side. If we want it on the right (common for FAB), we should use 'right'. 
     However, in RTL, start is right, end is left. Let's stick to 'left' as per original or maybe 'right' for standard Android feel?
     The original code had 'left: 1rem'. I'll keep it but maybe move to right if it feels wrong.
     Let's actually put it on the START side (Right in RTL) which is standard.
  */
  right: 1.5rem; 
  left: auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--primary-600);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: var(--shadow-lg);
  border: none;
  z-index: 1020;
  transition: transform 0.2s;
}

.fab:hover {
  transform: scale(1.1);
  background-color: var(--primary-700);
}

/* Timeline */
.timeline {
  position: relative;
  padding-right: 2rem; /* RTL */
  border-right: 2px solid #e5e7eb; /* RTL */
}

.timeline-item {
  position: relative;
  margin-bottom: 2rem;
}

.timeline-marker {
  position: absolute;
  right: -2.6rem; /* Align with border */
  top: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--primary-600);
}

.timeline-content {
  background: white;
  padding: 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
}

/* Checkup Board Grid */
.checkup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Utility Classes */
.text-primary { color: var(--primary-600) !important; }
.bg-primary { background-color: var(--primary-600) !important; }
.bg-soft-primary { background-color: var(--primary-50) !important; color: var(--primary-700); }

.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }

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

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

/* Mobile Adjustments */
@media (max-width: 768px) {
  .page-hero {
    padding: 2rem 0 3rem;
    border-radius: 0 0 1.5rem 1.5rem;
  }
  
  .page-hero h1 { font-size: 1.75rem; }
  
  .container { padding-left: 1rem; padding-right: 1rem; }
}

/* ========================================
   5. ENHANCED HEADER STYLES (Extracted)
   ======================================== */
.navbar {
  padding: 0.75rem 1rem;
  transition: box-shadow 0.3s ease;
}

.navbar-brand {
  font-size: 1.25rem;
  transition: transform 0.2s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  position: relative;
}

.nav-link:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  transform: translateY(-2px);
}

.nav-link.active {
  background-color: rgba(var(--bs-primary-rgb), 0.15);
  font-weight: 600;
}

.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background-color: var(--bs-primary);
}

.dropdown-item {
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  transform: translateX(-5px);
}

.dropdown-item small {
  font-size: 0.75rem;
}

.dropdown-menu {
  border: none;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  border-radius: 0.5rem;
  padding: 0.5rem;
}

#headerWeekBadge {
  border-radius: 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

#headerWeekBadge:hover {
  transform: scale(1.05);
}

/* Mobile Offcanvas */
.offcanvas {
  width: 300px !important;
}

.hover-bg:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Responsive */
@media (max-width: 991px) {
  .navbar-nav {
    gap: 0.5rem;
  }
}

@media (max-width: 768px) {
  .navbar-brand span {
    font-size: 1rem;
  }
}
/**
 * Food Safety Chatbot Styles
 * Modern, accessible design for the AI food safety assistant
 */

.food-chatbot-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    max-height: 500px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(233, 30, 99, 0.1);
    z-index: 1050;
    display: flex;
    flex-direction: column;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    transition: all 0.3s ease;
}

.food-chatbot-container.minimized {
    height: 60px;
    overflow: hidden;
}

.food-chatbot-container.minimized .chatbot-messages,
.food-chatbot-container.minimized .chatbot-input {
    display: none;
}

.chatbot-header {
    background: linear-gradient(135deg, #e91e63, #f06292);
    color: white;
    padding: 12px 16px;
    border-radius: 16px 16px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.chatbot-header h6 {
    font-weight: 600;
    font-size: 14px;
}

.chatbot-header button {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.chatbot-header button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chatbot-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    max-height: 350px;
    scroll-behavior: smooth;
}

.chatbot-messages::-webkit-scrollbar {
    width: 4px;
}

.chatbot-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 2px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: #e91e63;
    border-radius: 2px;
}

.message {
    margin-bottom: 12px;
    display: flex;
    animation: messageSlideIn 0.3s ease-out;
}

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

.user-message {
    justify-content: flex-end;
}

.bot-message {
    justify-content: flex-start;
}

.message-content {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 18px;
    font-size: 14px;
    line-height: 1.4;
    position: relative;
}

.user-message .message-content {
    background: #e91e63;
    color: white;
    border-bottom-right-radius: 4px;
}

.bot-message .message-content {
    background: #ffffff;
    color: #212529;
    border: 1px solid #e9ecef;
    border-bottom-left-radius: 4px;
}

.message-text {
    word-wrap: break-word;
}

.message-text strong {
    font-weight: 600;
}

.message-text em {
    font-style: italic;
    color: #e91e63;
}

.message-text hr {
    border: none;
    border-top: 1px solid #dee2e6;
    margin: 8px 0;
}

.message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
    text-align: right;
}

.user-message .message-time {
    color: rgba(255, 255, 255, 0.8);
}

.bot-message .message-time {
    color: #6c757d;
}

.message-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.message-suggestions .btn {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 12px;
    transition: all 0.2s;
}

.message-suggestions .btn:hover {
    background-color: #e91e63;
    border-color: #e91e63;
    color: white;
    transform: translateY(-1px);
}

.typing-indicator {
    animation: pulse 1.5s infinite;
}

.typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}

.typing-dots span {
    width: 6px;
    height: 6px;
    background-color: #e91e63;
    border-radius: 50%;
    animation: typingDots 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dots span:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typingDots {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.chatbot-input {
    padding: 12px 16px;
    border-top: 1px solid #e9ecef;
    border-radius: 0 0 16px 16px;
    background: white;
}

.chatbot-input .input-group {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chatbot-input .form-control {
    border: none;
    padding: 10px 16px;
    font-size: 14px;
    resize: none;
    min-height: 40px;
    max-height: 100px;
    background: #f8f9fa;
}

.chatbot-input .form-control:focus {
    box-shadow: none;
    background: white;
    border-color: #e91e63;
}

.chatbot-input .btn {
    border: none;
    background: #e91e63;
    color: white;
    padding: 10px 16px;
    transition: background-color 0.2s;
}

.chatbot-input .btn:hover {
    background: #d81b60;
}

.chatbot-input .btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
}

/* Responsive design */
@media (max-width: 768px) {
    .food-chatbot-container {
        width: calc(100vw - 40px);
        max-width: 350px;
        bottom: 10px;
        right: 10px;
    }
}

@media (max-width: 480px) {
    .food-chatbot-container {
        width: calc(100vw - 20px);
        right: 10px;
        left: 10px;
        max-height: 400px;
    }
    
    .chatbot-messages {
        max-height: 250px;
    }
}

/* RTL Support for Hebrew */
[dir="rtl"] .food-chatbot-container {
    left: 20px;
    right: auto;
}

[dir="rtl"] .user-message {
    justify-content: flex-start;
}

[dir="rtl"] .bot-message {
    justify-content: flex-end;
}

[dir="rtl"] .user-message .message-content {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 18px;
}

[dir="rtl"] .bot-message .message-content {
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 18px;
}

[dir="rtl"] .message-time {
    text-align: left;
}

/* Accessibility improvements */
.food-chatbot-container:focus-within {
    box-shadow: 0 8px 32px rgba(233, 30, 99, 0.2);
}

.chatbot-input .form-control:focus {
    outline: 2px solid #e91e63;
    outline-offset: -2px;
}

.message-suggestions .btn:focus {
    outline: 2px solid #e91e63;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .food-chatbot-container {
        border: 2px solid #000;
    }
    
    .bot-message .message-content {
        border: 2px solid #000;
    }
    
    .chatbot-input .form-control {
        border: 1px solid #000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .message,
    .typing-indicator,
    .typing-dots span,
    .food-chatbot-container {
        animation: none;
        transition: none;
    }
}

/* Print styles */
@media print {
    .food-chatbot-container {
        display: none;
    }
}