@import "tailwindcss";

@layer base {
  /* ============ LIGHT THEME (Default) ============ */
  :root {
    --main-header-height: 56px;
    --sub-nav-height: 48px;
    --combined-top-height: 104px;
    
    /* Light Theme Variables - Soft Parchment & Yale Blue */
    --background: #f6f0ed;       /* Parchment */
    --background-alt: #f9fafb;   /* Light Gray Alt */
    --surface: #ffffff;          /* Pure White for crisp card layers */
    --surface-muted: #f3f4f6;    /* Muted Surface */
    --surface-hover: #f9fafb;    /* Surface Hover */
    
    --border: #e5e7eb;           /* Light Border */
    --border-light: #f3f4f6;     /* Light Border Alt */
    
    --text-primary: #28536b;     /* Yale Blue (High contrast text) */
    --text-secondary: #7ea8be;   /* Steel Blue */
    --text-accent: #c2948a;      /* Rosy Taupe */
    --text-muted: #9ca3af;       /* Muted Text */
    --text-disabled: #d1d5db;    /* Disabled Text */
    
    --primary: #28536b;          /* Yale Blue for main buttons */
    --primary-hover: #1f4154;    /* Darker Yale Blue */
    --primary-light: #eff6ff;    /* Light Blue Background */
    
    --secondary: #7ea8be;        /* Steel Blue */
    --secondary-light: #f0f9ff;  /* Light Secondary */
    
    --success: #10b981;          /* Green */
    --success-light: #ecfdf5;
    
    --danger: #ef4444;           /* Red */
    --danger-light: #fef2f2;
    
    --warning: #f59e0b;          /* Amber */
    --warning-light: #fffbeb;
    
    --info: #3b82f6;             /* Blue */
    --info-light: #eff6ff;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* Smooth theme transition */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  /* ============ DARK THEME ============ */
  :root.dark {
    /* Dark Theme Variables - Vintage Grape & Bondi Blue */
    --background: #513b56;       /* Vintage Grape */
    --background-alt: #434354;   /* Dark Alt */
    --surface: #525174;          /* Dusty Grape */
    --surface-muted: #626186;    /* Surface Muted */
    --surface-hover: #5f6b7e;    /* Surface Hover */
    
    --border: #626186;           /* Border */
    --border-light: #525174;     /* Border Light */
    
    --text-primary: #f8fafc;     /* Soft White */
    --text-secondary: #cbd5e1;   /* Secondary Text */
    --text-accent: #bce784;      /* Lime Cream */
    --text-muted: #94a3b8;       /* Muted Slate */
    --text-disabled: #64748b;    /* Disabled Text */
    
    --primary: #348aa7;          /* Bondi Blue */
    --primary-hover: #296f86;    /* Darker Bondi Blue */
    --primary-light: #0c2340;    /* Dark Blue Background */
    
    --secondary: #5dd39e;        /* Emerald */
    --secondary-light: #064e3b;  /* Dark Secondary */
    
    --success: #10b981;          /* Green */
    --success-light: #064e3b;
    
    --danger: #ef4444;           /* Red */
    --danger-light: #3f0f0f;
    
    --warning: #f59e0b;          /* Amber */
    --warning-light: #3f2009;
    
    --info: #3b82f6;             /* Blue */
    --info-light: #0c2340;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    
    /* Smooth theme transition */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }

  html, body, #root, .app-container {
    height: 100%;
    margin: 0;
    padding: 0;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* Fix viewport overflow on all container levels */
  body, html {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .itinerary-timeline-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .main-top-bar {
    position: sticky;
    top: 0;
    height: var(--main-header-height);
    z-index: 50;
    background-color: var(--surface);
    color: var(--text-primary);
  }

  .sub-nav-menu {
    position: sticky;
    top: var(--main-header-height);
    height: var(--sub-nav-height);
    z-index: 40;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--text-primary);
  }

  /* Master viewport wrapper - contains entire itinerary */
  .itinerary-viewport {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    width: 100vw !important;
    overflow: hidden !important;
  }

  .itinerary-viewport-wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    width: 100vw !important;
    overflow: hidden !important;
  }

  /* Global sticky header zone - locks main header + sub-nav at top */
  .global-sticky-header-zone {
    position: sticky !important;
    top: 0;
    z-index: 100 !important;
    background-color: var(--surface);
    color: var(--text-primary);
    flex-shrink: 0 !important;
  }

  /* Fixed header block (handled at parent TourDetailPage level) */
  .fixed-top-header-block {
    flex-shrink: 0 !important;
    width: 100% !important;
    background-color: var(--surface);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
  }

  /* Timeline scroll container - main scrollable region */
  .directory-scroll-viewport {
    flex: 1 !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: var(--background);
    color: var(--text-primary);
  }

  .timeline-scroll-container {
    flex: 1 !important;
    overflow-y: auto !important;
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
    padding: 0 !important;
  }

  /* Scrollable timeline area - removes all padding gaps */
  .timeline-scroll-area {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 0px !important;
    background-color: var(--background);
    color: var(--text-primary);
  }

  .timeline-scroll-viewport {
    flex: 1;
    overflow-y: auto;
    width: 100%;
  }

  /* Main timeline container with dynamic height support */
  .itinerary-timeline-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: auto !important;
    overflow-x: hidden !important;
    position: relative !important;
  }

  /* Individual folder node wrapper - base stage container */
  .folder-node-wrapper {
    width: 100% !important;
    background-color: var(--surface);
    color: var(--text-primary);
    margin-bottom: 0px !important;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--border);
  }

  /* Individual stage card block - backwards compatibility */
  .stage-card-block {
    width: 100% !important;
    background-color: var(--surface);
    color: var(--text-primary);
    margin-bottom: 1px !important;
    display: flex;
    flex-direction: column;
  }

  /* Stage section - semantic wrapper */
  .stage-section {
    position: relative;
    width: 100%;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Folder header row - sticky positioning for pinned effect */
  .folder-header-row {
    position: sticky !important;
    top: 0px !important;
    z-index: 30 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    background-color: var(--surface) !important;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
  }

  .folder-header-row:hover {
    background-color: var(--surface-muted) !important;
  }

  /* Stage header row - sticky positioning for pinned effect */
  .stage-header-row {
    position: sticky !important;
    top: 0px !important;
    z-index: 40 !important;
    width: 100% !important;
    padding: 12px 16px !important;
    display: flex;
    align-items: center;
    background-color: var(--surface) !important;
    color: var(--text-primary);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
  }

  .stage-header-row:hover {
    background-color: var(--surface-muted) !important;
  }

  /* Alternate sticky header styling (kept for backwards compatibility) */
  .stage-sticky-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background-color: #ffffff;
    width: 100%;
    padding: 8px 16px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    align-items: center;
    cursor: pointer;
  }

  /* Folder child content box - Grid accordion for exclusive expansion */
  .folder-child-content-box {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100%;
  }

  /* Expanded folder state - children visible */
  .folder-child-content-box.expanded {
    grid-template-rows: 1fr !important;
  }

  /* Wrapper for child nodes list - proper z-index layering */
  .child-nodes-list-wrapper {
    position: relative;
    z-index: 20 !important;
    width: 100%;
  }

  /* Child nodes list - content container within expanded folder */
  .child-nodes-list {
    overflow: hidden;
    min-height: 0px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* CSS Grid Accordion Engine - Smooth expand/collapse without layout shattering */
  .stage-accordion-content {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s ease-out !important;
    width: 100%;
  }

  /* Expanded state - opens to full content height */
  .stage-accordion-content.expanded {
    grid-template-rows: 1fr !important;
  }

  /* Scrollable content body - lower z-index so it scrolls behind header */
  .stage-scrollable-content-body {
    position: relative;
    z-index: 20 !important;
    width: 100%;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Inner content wrapper - structural compliance */
  .stage-points-list {
    overflow: hidden;
    min-height: 0px;
    padding: 0 16px 16px 16px;
  }

  /* Legacy accordion container classes (for backwards compatibility) */
  .stage-accordion-transition-container {
    display: grid !important;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    width: 100% !important;
  }

  .stage-accordion-transition-container.expanded {
    grid-template-rows: 1fr !important;
  }

  .stage-accordion-inner-content {
    overflow: hidden !important;
    min-height: 0px !important;
    width: 100% !important;
    display: flex;
    flex-direction: column;
  }

  .stage-content-body {
    width: 100%;
    padding: 16px;
  }
}

@layer components {
  .banner-location-text {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 80px;
    display: inline-block;
    vertical-align: bottom;
    cursor: help; /* Hiển thị biểu tượng giúp đỡ để gợi ý có tooltip */
  }

  @media (min-width: 640px) {
    .banner-location-text {
      max-width: 150px;
    }
  }
}

@keyframes bell-ring {
  0% { transform: rotate(0); }
  5% { transform: rotate(30deg); }
  10% { transform: rotate(-28deg); }
  15% { transform: rotate(34deg); }
  20% { transform: rotate(-32deg); }
  25% { transform: rotate(30deg); }
  30% { transform: rotate(-28deg); }
  35% { transform: rotate(26deg); }
  40% { transform: rotate(-24deg); }
  45% { transform: rotate(22deg); }
  50% { transform: rotate(-20deg); }
  55% { transform: rotate(18deg); }
  60% { transform: rotate(-16deg); }
  65% { transform: rotate(14deg); }
  70% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
  80% { transform: rotate(-8deg); }
  85% { transform: rotate(6deg); }
  90% { transform: rotate(-4deg); }
  95% { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

.animate-ring {
  display: inline-block !important;
  transform-origin: top center !important;
  transform-box: fill-box !important;
  animation: bell-ring 1.5s ease-in-out infinite !important;
}

/* Light theme overrides for Member Dashboard */
html.light body,
html.light .app-container {
  background-color: #f8fafc;
  color: #334155;
}

html.light .bg-slate-950 {
  background-color: #f8fafc !important;
  color: #1e293b !important;
}

html.light .bg-slate-900 {
  background-color: #f1f5f9 !important;
  color: #1e293b !important;
}

html.light .bg-slate-900\/60 {
  background-color: rgba(255, 255, 255, 0.7) !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-900\/30 {
  background-color: rgba(255, 255, 255, 0.4) !important;
  border-color: #e2e8f0 !important;
}

html.light .bg-slate-950\/40 {
  background-color: #f1f5f9 !important;
}

html.light .text-white,
html.light .text-white\/95,
html.light .text-slate-100 {
  color: #0f172a !important;
}

html.light .text-slate-400,
html.light .text-slate-350,
html.light .text-slate-300 {
  color: #475569 !important;
}

html.light .border-slate-800,
html.light .border-slate-800\/60,
html.light .border-slate-800\/80,
html.light .border-slate-900,
html.light .border-slate-700\/50 {
  border-color: #cbd5e1 !important;
}

html.light .hover\:bg-slate-800\/50:hover {
  background-color: rgba(226, 232, 240, 0.5) !important;
}

html.light .hover\:bg-slate-850:hover,
html.light .hover\:bg-slate-800:hover,
html.light .hover\:bg-white\/10:hover,
html.light .hover\:bg-white\/5:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

/* Chat bubble styling overrides */
html.light .bg-slate-850\/50 {
  background-color: rgba(241, 245, 249, 0.5) !important;
}

html.light .bg-slate-850 {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light .bg-slate-800\/60 {
  background-color: rgba(226, 232, 240, 0.6) !important;
}

html.light .bg-slate-800\/40 {
  background-color: rgba(226, 232, 240, 0.4) !important;
}

html.light .bg-slate-950\/60 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

html.light .bg-rose-950\/10 {
  background-color: #fef2f2 !important;
  border-color: #fee2e2 !important;
}

html.light .text-rose-400 {
  color: #dc2626 !important;
}

html.light .bg-rose-950\/40 {
  background-color: #fee2e2 !important;
}

html.light .border-rose-900\/50 {
  border-color: #fecaca !important;
}

/* Additional light mode overrides for MemberDashboard and complex classes */
html.light [class*="bg-slate-800"] {
  background-color: #f0f1f5 !important;
  color: #0f172a !important;
}

html.light [class*="bg-slate-900"] {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
}

html.light [class*="text-slate-400"],
html.light [class*="text-slate-350"],
html.light [class*="text-slate-300"] {
  color: #475569 !important;
}

html.light [class*="border-slate-900"],
html.light [class*="border-slate-800"] {
  border-color: #cbd5e1 !important;
}

html.light .hover\:bg-slate-900:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

html.light .hover\:bg-white:hover {
  background-color: #f8fafc !important;
}

/* Ensure text contrast in light mode */
html.light .text-white {
  color: #0f172a !important;
}

html.light .text-gray-50 {
  color: #0f172a !important;
}

html.light .text-gray-100 {
  color: #1e293b !important;
}

/* Tailwind Dark Mode - ensure dark classes work when in dark theme */
html.dark .dark\:bg-slate-800 {
  background-color: #1e293b !important;
}

html.dark .dark\:text-slate-200 {
  color: #e2e8f0 !important;
}

html.dark .dark\:border-slate-700 {
  border-color: #334155 !important;
}

html.dark .dark\:hover\:bg-slate-700:hover {
  background-color: #334155 !important;
}