/**
 * YouVersion Platform Status Page Custom CSS
 * 
 * This CSS file applies the visual styles from src/pages/Status.tsx
 * to the statuspage.io HTML structure.
 * 
 * Instructions: Copy and paste this entire file into the Custom CSS field
 * in your statuspage.io Design settings.
 * 
 * IMPORTANT: Update the banner image URL below before applying!
 */

/* Import Google Fonts - Must be first */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ============================================
   COLOR VARIABLES - Converted from oklch to hex
   ============================================ */
:root {
  /* Primary Colors */
  --yv-primary: #F23B22; /* rgb(242, 59, 34) - YouVersion orange/brand */
  --yv-primary-foreground: #F7F7F7;
  
  /* Background Colors */
  --yv-background: #F7F7F7;
  --yv-foreground: #3F3F3F;
  
  /* Card Colors */
  --yv-card: #FFFFFF;
  --yv-card-foreground: #3F3F3F;
  
  /* Muted Colors */
  --yv-muted: #F0F0F0;
  --yv-muted-foreground: #6B7280;
  
  /* Border Colors */
  --yv-border: #E5E5E5;
  
  /* Destructive/Error Colors */
  --yv-destructive: #DC2626;
  --yv-destructive-foreground: #FFFFFF;
  
  /* Success Colors */
  --yv-success: #16A34A;
  --yv-success-light: #22C55E;
  
  /* Spacing */
  --yv-radius: 0.5rem;
  
  /* Typography */
  --yv-font-sans: 'Inter', ui-sans-serif, sans-serif, system-ui;
  --yv-font-space-grotesk: 'Space Grotesk', sans-serif;
}

/* ============================================
   DARK MODE COLOR VARIABLES
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
  /* Primary Colors - Same in dark mode */
  --yv-primary: #F23B22; /* rgb(242, 59, 34) - YouVersion orange/brand */
  --yv-primary-foreground: #2E2E2E;
    
    /* Background Colors - Dark */
    --yv-background: #2E2E2E; /* oklch(0.1822 0 0) - hex: #2E2E2E */
    --yv-foreground: #CECECE; /* oklch(0.8074 0.0142 93.0137) */
    
    /* Card Colors - Dark */
    --yv-card: #3F3F3F; /* oklch(0.2499 0.0030 17.3590) */
    --yv-card-foreground: #FAFAFA; /* oklch(0.9818 0.0054 95.0986) */
    
    /* Muted Colors - Dark */
    --yv-muted: #383838; /* oklch(0.2213 0.0038 106.7070) */
    --yv-muted-foreground: #C4C4C4; /* oklch(0.7713 0.0169 99.0657) */
    
    /* Border Colors - Dark */
    --yv-border: #525252; /* oklch(0.3243 0.0035 106.5916) */
    
    /* Destructive/Error Colors - Dark */
    --yv-destructive: #F97316; /* oklch(0.6368 0.2078 25.3313) - lighter in dark */
    --yv-destructive-foreground: #FFFFFF;
    
    /* Success Colors - Slightly adjusted for dark mode */
    --yv-success: #22C55E; /* Slightly lighter green for dark mode */
    --yv-success-light: #4ADE80;
  }
}

/* ============================================
   BASE STYLES - Force font application
   ============================================ */
body.status {
  font-family: var(--yv-font-sans) !important;
}

/* Apply font to text elements, but exclude FontAwesome icons and group indicators */
body.status p,
body.status span:not(.fa):not([class*="fa-"]):not(.group-parent-indicator),
body.status div:not(.fa):not([class*="fa-"]):not(.group-parent-indicator),
body.status h1,
body.status h2,
body.status h3,
body.status a:not(.fa):not([class*="fa-"]):not(.group-parent-indicator) {
  font-family: var(--yv-font-sans) !important;
}

/* Explicitly exclude FontAwesome icons from font overrides */
body.status .fa,
body.status [class*="fa-"],
body.status .group-parent-indicator,
body.status .fa.group-parent-indicator {
  font-family: "FontAwesome" !important;
}

body.status {
  background-color: var(--yv-background) !important;
  color: var(--yv-foreground) !important;
  line-height: 1.5;
}

/* Ensure status page background uses correct color */
@media (prefers-color-scheme: dark) {
  body.status {
    background-color: #2E2E2E !important; /* oklch(0.1822 0 0) */
  }
}

/* ============================================
   HEADER - Restore statuspage.io default header
   ============================================ */
/* Removed custom banner header - using statuspage.io default */

/* Logo styling - CSS filter for dark mode compatibility */
.logo-container img {
  transition: filter 0.3s ease;
  display: block;
}

@media (prefers-color-scheme: dark) {
  .logo-container img {
    filter: brightness(0) invert(1); /* Makes logo white/light in dark mode */
  }
}

.show-updates-dropdown,
#show-updates-dropdown {
  background-color: var(--yv-primary) !important; /* Orange color */
  color: white !important;
  border-radius: 9999px !important;
  padding: 0.5rem 1.5rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--yv-font-sans) !important;
  text-decoration: none !important;
  display: inline-block !important;
  transition: all 0.2s !important;
}

.show-updates-dropdown:hover,
#show-updates-dropdown:hover {
  background-color: var(--yv-primary) !important;
  opacity: 0.9 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   PAGE STATUS SECTION - "All Systems Operational"
   Matching Status.tsx design with checkmark and card styling
   ============================================ */
.page-status {
  margin-top: 0 !important;
  margin-bottom: 2rem !important;
  padding: 0 !important;
}

.page-status.status-none {
  background-color: var(--yv-card) !important;
  border: 1px solid var(--yv-border) !important;
  border-radius: var(--yv-radius) !important;
  padding: 1.5rem !important;
  margin: 0 auto 2rem !important;
  max-width: 72rem;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  position: relative !important;
}

/* Add green checkmark circle icon - matching Status.tsx */
.page-status.status-none::before {
  content: '✓';
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 3rem !important;
  height: 3rem !important;
  border-radius: 50% !important;
  background-color: #34C759 !important; /* Green circle background */
  color: white !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  font-family: system-ui, sans-serif !important;
  flex-shrink: 0 !important;
}

.page-status h2.status {
  font-size: 1.125rem !important; /* text-lg equivalent */
  font-weight: 600 !important;
  color: var(--yv-card-foreground) !important;
  margin: 0 !important;
  font-family: var(--yv-font-sans) !important;
}

.page-status .last-updated-stamp {
  display: none !important;
}

/* Dark mode adjustments for status bar */
@media (prefers-color-scheme: dark) {
  .page-status.status-none {
    background-color: var(--yv-card) !important; /* Dark card background */
    border-color: var(--yv-border) !important;
  }
  
  .page-status h2.status {
    color: var(--yv-card-foreground) !important; /* White text in dark mode */
  }
  
  .page-status.status-none::before {
    background-color: #34C759 !important; /* Keep green checkmark */
    color: white !important;
  }
}

/* ============================================
   COMPONENTS SECTION - Restore statuspage.io defaults
   ============================================ */
.components-section {
  margin-bottom: 3rem !important;
  padding: 0 0 !important;
}

.components-uptime-link {
  margin-bottom: 1.5rem !important;
  color: var(--yv-muted-foreground) !important;
  font-size: 0.875rem !important;
  font-family: var(--yv-font-sans) !important;
}

/* Restore default statuspage.io component styling - remove custom overrides */
.components-container {
  /* Let statuspage.io handle the layout */
}

/* Remove all custom component styling to restore defaults */
.component-container {
  /* Restore default statuspage.io styling */
}

/* Set background color for component containers with is-group class in light mode */
.component-container.border-color {
  background-color: #ffffff !important;
}

.component-inner-container {
  /* Restore default statuspage.io styling */
  /* Remove custom borders, padding, shadows - let defaults show */
}

/* Remove custom checkmark icon */
.component-inner-container.status-green::before {
  display: none !important;
  content: none !important;
}

/* Restore default component name styling */
.component-inner-container .name {
  font-family: var(--yv-font-sans) !important;
  /* Remove custom padding and sizing - use defaults */
}

/* Restore default status text styling */
.component-status {
  font-family: var(--yv-font-sans) !important;
  /* Remove custom sizing - use defaults */
}

/* Restore default status icons */
.component-inner-container .status-icon-button,
.component-inner-container .icon-indicator {
  /* Restore default visibility */
}

/* Remove custom padding adjustments */
.component-inner-container.status-green {
  /* Remove custom padding - use defaults */
}

/* Restore default uptime chart styling */
.uptime-90-days-wrapper {
  /* Restore default statuspage.io styling */
}

.availability-time-line-graphic {
  /* Restore default statuspage.io styling */
}

/* ============================================
   UPTIME CALENDAR DAYS - Styling
   ============================================ */
/* Light mode - ensure good visibility */
svg.day,
svg.day.active {
  transition: opacity 0.2s ease !important;
}

svg.day:hover,
svg.day.active:hover {
  opacity: 0.9 !important;
}

/* Dark mode styling - override fill colors for better visibility */
@media (prefers-color-scheme: dark) {
  /* Target all uptime day SVGs and their rects */
  svg.day rect,
  svg.day.active rect,
  .uptime-day[fill="#b3bac5"],
  .availability-time-line-graphic rect[fill="#b3bac5"],
  .availability-time-line-graphic .uptime-day,
  .availability-time-line-graphic svg.day rect,
  .availability-time-line-graphic svg.day.active rect {
    fill: #525252 !important; /* Darker gray for dark mode - better contrast */
  }
  
  /* Operational/healthy days - keep green but make it brighter for dark mode */
  .uptime-day[fill="#00875a"],
  .availability-time-line-graphic rect[fill="#00875a"],
  svg.day.active rect[fill="#00875a"],
  .availability-time-line-graphic svg.day.active rect[fill="#00875a"] {
    fill: #22C55E !important; /* Lighter green for dark mode visibility */
  }
  
  /* Additional status colors for dark mode */
  /* Partial outages or degraded performance */
  .uptime-day[fill="#ffa500"],
  .availability-time-line-graphic rect[fill="#ffa500"],
  svg.day rect[fill="#ffa500"] {
    fill: #F59E0B !important; /* Amber/orange for warnings */
  }
  
  /* Major outages */
  .uptime-day[fill="#dc3545"],
  .availability-time-line-graphic rect[fill="#dc3545"],
  svg.day rect[fill="#dc3545"] {
    fill: #EF4444 !important; /* Red for outages */
  }
  
  /* Ensure SVG containers have proper contrast */
  svg.day {
    opacity: 1 !important;
  }
  
  svg.day.active {
    opacity: 1 !important;
  }
  
  /* Hover states for better interactivity */
  svg.day:hover rect,
  svg.day.active:hover rect {
    opacity: 0.9 !important;
  }
}

.legend {
  font-family: var(--yv-font-sans) !important;
  /* Restore default styling */
}

.legend-item-uptime-value {
  font-family: var(--yv-font-sans) !important;
  /* Restore default styling */
}

/* Restore default tooltip styling */
.component-inner-container .tooltip-base.tool {
  /* Restore default visibility */
}

/* ============================================
   PAST INCIDENTS SECTION - Card-wrapped tables
   ============================================ */
.layout-content.status-index .incidents-list,
.layout-content.status-full-history {
  margin-top: 3rem !important;
  padding: 0 1rem !important;
}

.layout-content.status-index .incidents-list h2,
.layout-content.status-full-history h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--yv-foreground) !important;
  margin-bottom: 1rem !important;
  font-family: var(--yv-font-sans) !important;
}

/* Style incident containers as cards */
.layout-content.status-index .status-day,
.layout-content.status-full-history .month .incident-container {
  background-color: var(--yv-card) !important;
  border: 1px solid var(--yv-border) !important;
  border-radius: var(--yv-radius) !important;
  margin-bottom: 1rem !important;
  padding: 1.5rem !important;
  box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

.layout-content.status-index .status-day .update-title,
.layout-content.status-full-history .month .incident-container .incident-title {
  font-family: var(--yv-font-sans) !important;
  color: var(--yv-foreground) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
}

.layout-content.status-index .status-day .update-title a,
.layout-content.status-full-history .month .incident-container .incident-title a {
  color: var(--yv-primary) !important; /* Orange color in light mode */
  text-decoration: none !important;
  font-family: var(--yv-font-sans) !important;
}

.layout-content.status-index .status-day .update-title a:hover,
.layout-content.status-full-history .month .incident-container .incident-title a:hover {
  color: var(--yv-primary) !important;
  opacity: 0.8 !important;
}

.layout-content.status-index .status-day .update-title a:hover {
  color: var(--yv-primary) !important;
}

/* Incident status badges */
.layout-content.status-index .status-day .update-title.impact-none,
.layout-content.status-full-history .month .incident-container .impact-none {
  color: var(--yv-foreground) !important;
}

.layout-content.status-index .status-day .update-title.impact-critical,
.layout-content.status-full-history .month .incident-container .impact-critical {
  color: var(--yv-destructive) !important;
}

.layout-content.status-index .status-day .update-title.impact-major,
.layout-content.status-full-history .month .incident-container .impact-major {
  color: #F59E0B !important;
}

/* Incident updates/timeline */
.layout-content.status-index .status-day .updates,
.layout-content.status-full-history .month .incident-container .updates {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px solid var(--yv-border) !important;
}

.layout-content.status-index .status-day .updates .update,
.layout-content.status-full-history .month .incident-container .updates .update {
  margin-bottom: 0.75rem !important;
  font-family: var(--yv-font-sans) !important;
  color: var(--yv-foreground) !important;
}

.layout-content.status-index .status-day .updates .update .update-title,
.layout-content.status-full-history .month .incident-container .updates .update .update-title {
  font-weight: 600 !important;
  color: var(--yv-foreground) !important;
  font-family: var(--yv-font-sans) !important;
}

/* ============================================
   PAGINATION
   ============================================ */
.history-footer,
.layout-content.status-full-history .history-footer {
  margin-top: 2rem !important;
  text-align: center !important;
}

.history-footer .pagination {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.history-footer .pagination a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  padding: 0 0.75rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: var(--yv-foreground) !important;
  text-decoration: none !important;
  border-radius: var(--yv-radius) !important;
  border: 1px solid var(--yv-border) !important;
  background-color: var(--yv-background) !important;
  transition: all 0.2s !important;
  font-family: var(--yv-font-sans) !important;
}

.history-footer .pagination a:hover {
  background-color: var(--yv-muted) !important;
  color: var(--yv-foreground) !important;
}

.history-footer .pagination a.current {
  background-color: var(--yv-primary) !important;
  color: var(--yv-primary-foreground) !important;
  border-color: var(--yv-primary) !important;
}

/* ============================================
   TAB NAVIGATION - History Nav (Incidents/Uptime tabs)
   ============================================ */
/* Restore proper tab styling for history-nav */
.history-nav {
  border-bottom: 1px solid var(--yv-border) !important;
  margin-bottom: 1rem !important;
}

.history-nav ul {
  display: flex !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

.history-nav li {
  margin: 0 !important;
  padding: 0 !important;
}

/* Tab button styling - restore statuspage.io default tab appearance */
.history-nav .button {
  display: inline-block !important;
  padding: 0.75rem 1.5rem !important;
  text-decoration: none !important;
  font-family: var(--yv-font-sans) !important;
  font-size: 0.875rem !important;
  border-radius: 0 !important;
  border: 1px solid var(--yv-border) !important;
  border-bottom: none !important;
  background-color: var(--yv-muted) !important; /* Light grey for inactive */
  color: var(--yv-muted-foreground) !important; /* Lighter text for inactive */
  margin-bottom: -1px !important; /* Overlap with border-bottom */
  position: relative !important;
  z-index: 1 !important;
}

/* Active tab styling */
.history-nav .button.current,
.history-nav .button[aria-current="page"] {
  background-color: var(--yv-card) !important; /* White/light background */
  color: var(--yv-foreground) !important; /* Dark text */
  border-left: 1px solid var(--yv-border) !important;
  border-top: 1px solid var(--yv-border) !important;
  border-right: 1px solid var(--yv-border) !important;
  border-bottom: 1px solid var(--yv-card) !important; /* Match background to hide bottom border */
  z-index: 2 !important;
}

/* Inactive tab styling */
.history-nav .button:not(.current):not([aria-current="page"]) {
  background-color: var(--yv-muted) !important; /* Very light grey */
  color: var(--yv-muted-foreground) !important; /* Lighter text */
  border-top: 1px solid var(--yv-border) !important;
  border-right: 1px solid var(--yv-border) !important;
  border-left: none !important; /* No left border when not first */
  border-bottom: 1px solid var(--yv-border) !important;
}

.history-nav .button:hover:not(.current):not([aria-current="page"]) {
  background-color: var(--yv-muted) !important;
  color: var(--yv-foreground) !important;
}

.history-footer .pagination a.disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ============================================
   BUTTONS
   ============================================ */
.flat-button {
  border-radius: 9999px !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  font-family: var(--yv-font-sans) !important;
  transition: all 0.2s !important;
  padding: 0.5rem 1rem !important;
}

.flat-button.background-red {
  background-color: var(--yv-destructive) !important;
  color: var(--yv-destructive-foreground) !important;
}

/* ============================================
   TYPOGRAPHY OVERRIDES - Force font application
   ============================================ */
body.status,
body.status .color-primary,
body.status .color-primary:hover,
body.status h1,
body.status h2,
body.status h3,
body.status p,
body.status span,
body.status div {
  font-family: var(--yv-font-sans) !important;
}

body.status .color-primary,
body.status .color-primary:hover {
  color: var(--yv-foreground) !important;
}

/* ============================================
   LINK COLORS - Orange brand color (#F23B22)
   ============================================ */
/* Default link color - orange for all links */
body.status a:not(.fa):not([class*="fa-"]):not(.group-parent-indicator):not(.show-updates-dropdown):not(.flat-button):not(.status-icon-button):not(.history-nav .button) {
  color: var(--yv-primary) !important; /* #F23B22 - YouVersion orange */
  text-decoration: none !important;
}

body.status a:not(.fa):not([class*="fa-"]):not(.group-parent-indicator):not(.show-updates-dropdown):not(.flat-button):not(.status-icon-button):not(.history-nav .button):hover {
  color: var(--yv-primary) !important;
  opacity: 0.8 !important;
  text-decoration: underline !important;
}

body.status .color-secondary:not(.group-parent-indicator):not(.fa),
body.status small:not(.group-parent-indicator):not(.fa) {
  color: var(--yv-muted-foreground) !important;
  font-family: var(--yv-font-sans) !important;
}

/* Restore default styling for group parent indicator - don't override */
.group-parent-indicator,
.fa.group-parent-indicator,
.fa.group-parent-indicator.color-secondary,
.fa.group-parent-indicator.font-small,
.fa.fa-plus-square-o.group-parent-indicator,
.fa.fa-minus-square-o.group-parent-indicator {
  /* Restore all default statuspage.io styling - remove any overrides */
  font-family: inherit !important;
  color: inherit !important;
  font-size: inherit !important;
  display: inherit !important;
  visibility: inherit !important;
  opacity: inherit !important;
  margin: inherit !important;
  padding: inherit !important;
  border: inherit !important;
  background: inherit !important;
  cursor: inherit !important;
}

/* ============================================
   BORDER OVERRIDES
   ============================================ */
body.status .layout-content.status .border-color,
body.status hr {
  border-color: var(--yv-border) !important;
}

/* Restore default component borders - let statuspage.io handle it */
body.status .component-container,
body.status .component-inner-container {
  /* Restore default statuspage.io border styling */
}

/* ============================================
   CONTAINER SPACING
   ============================================ */
.container {
  max-width: 72rem !important;
  margin: 0 auto !important;
  padding: 0 1.125rem !important;
}

@media (min-width: 640px) {
  .container {
    padding: 0 2rem !important;
  }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 640px) {
  /* Restore default responsive component styling */
}

/* ============================================
   UTILITY OVERRIDES
   ============================================ */
/* Restore default statuspage.io header/logo */

/* Ensure proper spacing */
.layout-content.status {
  padding-top: 0 !important;
}

/* Restore default group indicators - remove all our overrides */
.group-parent-indicator,
.fa.group-parent-indicator,
.name .group-parent-indicator,
.name .fa.group-parent-indicator,
.component-inner-container .name .group-parent-indicator,
.component-inner-container .name .fa.group-parent-indicator,
.fa.fa-plus-square-o.group-parent-indicator,
.fa.fa-minus-square-o.group-parent-indicator,
.fa.group-parent-indicator.color-secondary.font-small {
  /* Remove font-family override - FontAwesome handles this */
  font-family: "FontAwesome" !important;
  /* Remove color override - let statuspage.io default color-secondary handle it */
  color: inherit !important;
  /* Remove any display/visibility overrides */
  display: inherit !important;
  visibility: inherit !important;
  opacity: inherit !important;
  /* Remove margin/padding overrides */
  margin: inherit !important;
  padding: inherit !important;
  /* Remove border/background overrides */
  border: inherit !important;
  background: inherit !important;
  /* Restore default cursor */
  cursor: inherit !important;
  /* Restore default font-size - let font-small class handle it */
  font-size: inherit !important;
}

/* Child components styling */
.child-components-container {
  margin-top: 1rem !important;
  padding-left: 1rem !important;
  border-left: 2px solid var(--yv-border) !important;
}

.child-components-container .component-inner-container {
  margin-bottom: 1rem !important;
}

/* Tooltip styling */
.tooltip-base {
  color: var(--yv-muted-foreground) !important;
}

/* Subscribe dropdown */
.updates-dropdown-container {
  z-index: 100 !important;
}

/* Updates dropdown modal - light mode */
.updates-dropdown,
.updates-dropdown-sections-container,
.updates-dropdown-section {
  background-color: var(--yv-card) !important;
  color: var(--yv-card-foreground) !important;
  border-color: var(--yv-border) !important;
}

.updates-dropdown-section {
  font-family: var(--yv-font-sans) !important;
}

/* Updates dropdown navigation tabs - light mode */
.updates-dropdown-nav a,
.updates-dropdown-nav a[role="tab"] {
  color: var(--yv-foreground) !important;
  background-color: transparent !important;
  border-color: var(--yv-border) !important;
  font-family: var(--yv-font-sans) !important;
}

.updates-dropdown-nav a:hover,
.updates-dropdown-nav a[role="tab"]:hover {
  background-color: var(--yv-muted) !important;
  color: var(--yv-foreground) !important;
}

.updates-dropdown-nav a.active,
.updates-dropdown-nav a[role="tab"][aria-selected="true"],
.updates-dropdown-nav a[role="tab"].active {
  background-color: var(--yv-primary) !important;
  color: white !important;
  border-color: var(--yv-primary) !important;
}

.updates-dropdown-section input,
.updates-dropdown-section select,
.updates-dropdown-section textarea {
  background-color: var(--yv-background) !important;
  color: var(--yv-foreground) !important;
  border-color: var(--yv-border) !important;
  font-family: var(--yv-font-sans) !important;
}

.updates-dropdown-section label {
  color: var(--yv-foreground) !important;
  font-family: var(--yv-font-sans) !important;
}

.updates-dropdown-section .flat-button {
  background-color: var(--yv-primary) !important;
  color: var(--yv-primary-foreground) !important;
  font-family: var(--yv-font-sans) !important;
}

.updates-dropdown-section .flat-button:hover {
  opacity: 0.9 !important;
}

/* Override any inline styles that might conflict */
.component-inner-container[style] {
  background-color: var(--yv-card) !important;
}

/* ============================================
   DARK MODE SPECIFIC ADJUSTMENTS
   ============================================ */
@media (prefers-color-scheme: dark) {
  /* Set background color for component containers with is-group class */
  .component-container.border-color {
    background-color: #121212 !important;
  }
  
  /* Adjust card shadows for dark mode - but not components (restore defaults) */
  .layout-content.status-index .status-day,
  .layout-content.status-full-history .month .incident-container {
    box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
  }
  
  /* Adjust link colors for dark mode - keep orange */
  .components-uptime-link a {
    color: var(--yv-primary) !important; /* #F23B22 - Orange color */
  }
  
  .components-uptime-link a:hover {
    color: var(--yv-primary) !important;
    opacity: 0.8 !important;
  }
  
  /* Default links in dark mode - keep orange (exclude tab navigation) */
  body.status a:not(.fa):not([class*="fa-"]):not(.group-parent-indicator):not(.show-updates-dropdown):not(.flat-button):not(.status-icon-button):not(.history-nav .button) {
    color: var(--yv-primary) !important; /* #F23B22 - Orange color */
  }
  
  body.status a:not(.fa):not([class*="fa-"]):not(.group-parent-indicator):not(.show-updates-dropdown):not(.flat-button):not(.status-icon-button):not(.history-nav .button):hover {
    color: var(--yv-primary) !important;
    opacity: 0.8 !important;
  }
  
  /* Incident title links - white in dark mode */
  .layout-content.status-index .status-day .update-title a,
  .layout-content.status-full-history .month .incident-container .incident-title a {
    color: #ffffff !important;
  }
  
  .layout-content.status-index .status-day .update-title a:hover,
  .layout-content.status-full-history .month .incident-container .incident-title a:hover {
    color: #ffffff !important;
    opacity: 0.8 !important;
  }
  
  /* Subscribe button adjustments for dark mode - keep orange */
  .show-updates-dropdown,
  #show-updates-dropdown {
    background-color: var(--yv-primary) !important; /* Orange color */
    color: white !important;
  }
  
  .show-updates-dropdown:hover,
  #show-updates-dropdown:hover {
    background-color: var(--yv-primary) !important;
    opacity: 0.9 !important;
  }
  
  /* Pagination active state in dark mode */
  .history-footer .pagination a.current {
    background-color: var(--yv-primary) !important;
    color: var(--yv-background) !important; /* Dark background as text color */
  }
  
  /* Tab navigation dark mode */
  .history-nav .button {
    background-color: var(--yv-muted) !important; /* Dark muted for inactive */
    color: var(--yv-muted-foreground) !important;
    border-color: var(--yv-border) !important;
  }
  
  .history-nav .button.current,
  .history-nav .button[aria-current="page"] {
    background-color: var(--yv-card) !important; /* Dark card background for active */
    color: var(--yv-card-foreground) !important; /* Light text */
    border-bottom-color: var(--yv-card) !important;
  }
  
  .history-nav .button:not(.current):not([aria-current="page"]) {
    background-color: var(--yv-muted) !important;
    color: var(--yv-muted-foreground) !important;
  }
  
  .history-nav .button:hover:not(.current):not([aria-current="page"]) {
    background-color: var(--yv-muted) !important;
    color: var(--yv-foreground) !important;
  }
  
  /* Updates dropdown modal - dark mode */
  .updates-dropdown,
  .updates-dropdown-sections-container,
  .updates-dropdown-section {
    background-color: var(--yv-card) !important;
    color: var(--yv-card-foreground) !important;
    border-color: var(--yv-border) !important;
  }
  
  .updates-dropdown-section input,
  .updates-dropdown-section select,
  .updates-dropdown-section textarea {
    background-color: var(--yv-input) !important;
    color: var(--yv-foreground) !important;
    border-color: var(--yv-border) !important;
  }
  
  .updates-dropdown-section label {
    color: var(--yv-foreground) !important;
  }
  
  .updates-dropdown-section .flat-button {
    background-color: var(--yv-primary) !important;
    color: var(--yv-background) !important;
  }
  
  .updates-dropdown-section .flat-button:hover {
    opacity: 0.9 !important;
  }
  
  /* Updates dropdown navigation tabs - dark mode */
  .updates-dropdown-nav a,
  .updates-dropdown-nav a[role="tab"] {
    color: var(--yv-foreground) !important;
    background-color: transparent !important;
    border-color: var(--yv-border) !important;
  }
  
  .updates-dropdown-nav a:hover,
  .updates-dropdown-nav a[role="tab"]:hover {
    background-color: var(--yv-muted) !important;
    color: var(--yv-foreground) !important;
  }
  
  .updates-dropdown-nav a.active,
  .updates-dropdown-nav a[role="tab"][aria-selected="true"],
  .updates-dropdown-nav a[role="tab"].active {
    background-color: var(--yv-primary) !important;
    color: var(--yv-background) !important; /* Dark background as text color */
    border-color: var(--yv-primary) !important;
  }
}

/* Ensure fonts load properly */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/spacegrotesk/v16/V8mQoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2') format('woff2');
}