* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #f5f5f5;
  color: #333;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
}

html[dir='rtl'] body {
  direction: rtl !important;
  text-align: right;
}

html[dir='ltr'] body {
  direction: ltr !important;
  text-align: left;
}

/* Force RTL alignment for Material-UI components */
html[dir='rtl'] .MuiCardContent-root {
  direction: rtl !important;
  text-align: right;
}

html[dir='rtl'] .MuiCardContent-root * {
  text-align: right;
  direction: rtl !important;
}

html[dir='rtl'] .MuiTypography-root {
  text-align: right;
  direction: rtl !important;
}

/* Force LTR alignment for Material-UI components */
html[dir='ltr'] .MuiCardContent-root {
  direction: ltr;
  text-align: left;
}

html[dir='ltr'] .MuiCardContent-root * {
  text-align: left;
  direction: ltr;
}

html[dir='ltr'] .MuiTypography-root {
  text-align: left;
  direction: ltr;
}

/* Force RTL alignment for all Typography variants */
html[dir='rtl'] .MuiTypography-h4,
html[dir='rtl'] .MuiTypography-h6,
html[dir='rtl'] .MuiTypography-body1,
html[dir='rtl'] .MuiTypography-body2,
html[dir='rtl'] .MuiTypography-caption {
  text-align: right;
  direction: rtl !important;
}

/* Force LTR alignment for all Typography variants */
html[dir='ltr'] .MuiTypography-h4,
html[dir='ltr'] .MuiTypography-h6,
html[dir='ltr'] .MuiTypography-body1,
html[dir='ltr'] .MuiTypography-body2,
html[dir='ltr'] .MuiTypography-caption {
  text-align: left;
  direction: ltr;
}

/* Override MUI RTL classes */
html[dir='rtl'] .mui-rtl-ii2re3-MuiTypography-root,
html[dir='rtl'] .mui-rtl-1n6xdiy-MuiTypography-root,
html[dir='rtl'] .mui-rtl-1mw2mri-MuiTypography-root {
  text-align: right;
  direction: rtl !important;
}

/* Force all text elements to be right-aligned in RTL */
html[dir='rtl'] p,
html[dir='rtl'] div,
html[dir='rtl'] span,
html[dir='rtl'] label,
html[dir='rtl'] h1,
html[dir='rtl'] h2,
html[dir='rtl'] h3,
html[dir='rtl'] h4,
html[dir='rtl'] h5,
html[dir='rtl'] h6 {
  text-align: right;
  direction: rtl !important;
}

/* Force all text elements to be left-aligned in LTR */
html[dir='ltr'] p,
html[dir='ltr'] div,
html[dir='ltr'] span,
html[dir='ltr'] label,
html[dir='ltr'] h1,
html[dir='ltr'] h2,
html[dir='ltr'] h3,
html[dir='ltr'] h4,
html[dir='ltr'] h5,
html[dir='ltr'] h6 {
  text-align: left;
  direction: ltr;
}

/* Override any remaining left-aligned text - exclude MUI components as they handle RTL internally */
html[dir='rtl'] p:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] div:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] span:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] label:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h1:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h2:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h3:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h4:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h5:not([class*='Mui']):not([class*='react']),
html[dir='rtl'] h6:not([class*='Mui']):not([class*='react']) {
  text-align: right;
  direction: rtl !important;
}

/* Ensure images and media don't overflow */
img,
video,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

/* Prevent tables from causing horizontal scroll */
table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

/* Ensure containers don't overflow */
.container {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

@media (max-width: 768px) {
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

html[dir='rtl'] .MuiButton-root {
  text-align: right;
  direction: rtl !important;
}

/* Ensure DatePicker calendar is visible */
div[style*='position: absolute'] {
  z-index: 9999 !important;
}

/* DatePicker calendar positioning */
div[style*='zIndex: 1000'] {
  z-index: 9999 !important;
}

html[dir='rtl'] .MuiButton-root * {
  text-align: right;
  direction: rtl !important;
}

html[dir='ltr'] .MuiButton-root {
  text-align: left;
  direction: ltr;
}

html[dir='ltr'] .MuiButton-root * {
  text-align: left;
  direction: ltr;
}

html[dir='rtl'] .MuiCardHeader-title {
  text-align: right;
  direction: rtl !important;
}

html[dir='ltr'] .MuiCardHeader-title {
  text-align: left;
  direction: ltr;
}

html[dir='rtl'] .MuiStack-root {
  direction: rtl !important;
}

html[dir='ltr'] .MuiStack-root {
  direction: ltr;
}

html[dir='rtl'] .MuiBox-root {
  direction: rtl !important;
  text-align: right;
}

html[dir='ltr'] .MuiBox-root {
  direction: ltr;
  text-align: left;
}

/* Force scrollbar to right side in RTL mode for scrollable containers */
/* This targets Material-UI List components that are scrollable */
html[dir='rtl'] .MuiList-root {
  direction: ltr !important;
}

html[dir='ltr'] .MuiList-root {
  direction: ltr;
}

/* Override Material-UI Drawer RTL flipping - force sidebar to always be on the right */
/* This ensures the sidebar stays on the right side in both RTL and LTR modes */
html[dir='rtl'] .MuiDrawer-root[class*='anchor-right'] .MuiDrawer-paper,
html[dir='rtl'] .MuiDrawer-root[class*='anchor-left'] .MuiDrawer-paper,
html[dir='rtl'] .MuiDrawer-root .MuiDrawer-paper,
html[dir='ltr'] .MuiDrawer-root[class*='anchor-right'] .MuiDrawer-paper {
  right: 0 !important;
  left: auto !important;
  transform: translateX(0) !important;
}

/* Ensure mobile drawer has the highest z-index to appear above all content */
/* This prevents dashboard widgets and other elements from overlapping the sidebar in mobile mode */
@media (max-width: 899px) {
  .MuiDrawer-root.MuiDrawer-modal {
    z-index: 1400 !important;
  }

  .MuiDrawer-root.MuiDrawer-modal .MuiDrawer-paper {
    z-index: 1400 !important;
  }

  .MuiDrawer-root.MuiDrawer-modal .MuiBackdrop-root {
    z-index: 1399 !important;
  }
}

/* Force hamburger menu button to always be on the right side, even in RTL mode */
/* This ensures the menu button is visible on the right side of the screen on mobile */
html[dir='rtl'] [data-testid='menu-button'],
html[dir='ltr'] [data-testid='menu-button'] {
  right: 16px !important;
  left: auto !important;
  transform: none !important;
}

/* Ensure TopBar (AppBar) is positioned on the left and doesn't overlap sidebar */
/* TopBar should be pushed to the left, leaving space for sidebar on the right */
/* Allow right property to be set dynamically to accommodate sidebar */
html[dir='rtl'] .MuiAppBar-root,
html[dir='ltr'] .MuiAppBar-root {
  left: 0 !important;
  /* right property is set dynamically in TopBar component based on sidebar state */
}

/* Ensure main content area padding is applied correctly - always pad from right for sidebar */
/* This prevents RTL from flipping the padding direction */
/* Target the main element that contains the content */
html[dir='rtl'] main,
html[dir='ltr'] main {
  padding-right: var(--sidebar-padding, 0) !important;
  padding-left: 0 !important;
  transition: padding-right 300ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Restore RTL direction for content inside scrollable lists */
html[dir='rtl'] .MuiList-root .MuiListItem-root,
html[dir='rtl'] .MuiList-root .MuiListItemButton-root,
html[dir='rtl'] .MuiList-root .MuiListItemText-root,
html[dir='rtl'] .MuiList-root .MuiTypography-root {
  direction: rtl !important;
  text-align: right;
}

html[dir='ltr'] .MuiList-root .MuiTypography-root {
  direction: ltr;
  text-align: left;
}

/* Target scrollable DialogContent - move scrollbar to right */
html[dir='rtl'] .MuiDialogContent-root {
  direction: ltr !important;
}

/* Restore RTL for content inside DialogContent */
html[dir='rtl'] .MuiDialogContent-root > *:not(.MuiList-root) {
  direction: rtl !important;
}

/* Target Paper components that might be scrollable (like Popover content) */
html[dir='rtl'] .MuiPaper-root[style*='max-height'],
html[dir='rtl'] .MuiPaper-root[style*='overflow'] {
  direction: ltr !important;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navbar */
.navbar {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 1rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar .logo {
  font-size: 1.5rem;
  font-weight: bold;
}

.navbar nav {
  display: flex;
  gap: 1rem;
}

/* Buttons */
.btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  display: inline-block;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-size: 0.95rem;
}

.btn-primary {
  background-color: #667eea;
  color: white;
}

.btn-primary:hover {
  background-color: #5568d3;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: white;
  border: 2px solid white;
}

.btn-secondary:hover {
  background-color: white;
  color: #667eea;
}

.btn-outline {
  background-color: transparent;
  color: #667eea;
  border: 2px solid #667eea;
}

.btn-outline:hover {
  background-color: #667eea;
  color: white;
}

.btn-large {
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* Hero Section */
.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 4rem 0;
  text-align: center;
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* Features Section */
.features {
  padding: 4rem 0;
}

.features h3 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 3rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.feature-card {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.feature-card h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #667eea;
}

.feature-card p {
  color: #666;
  line-height: 1.6;
}

/* Footer */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 2rem 0;
  margin-top: 4rem;
}

footer p {
  opacity: 0.8;
}

/* Global rules to prevent horizontal overflow - apply to all viewport sizes */
/* Ensure all containers respect viewport width */
/* Use 100% instead of 100vw to avoid scrollbar width issues */
#__next,
#__next > * {
  max-width: 100%;
  overflow-x: hidden;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* Prevent elements with explicit large widths from causing overflow */
/* Only apply to block-level and inline-block elements to avoid breaking inline elements */
div[style*='width'],
section[style*='width'],
article[style*='width'],
aside[style*='width'],
header[style*='width'],
footer[style*='width'],
nav[style*='width'],
main[style*='width'],
form[style*='width'],
[class*='Mui'][style*='width'] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Ensure absolutely positioned elements don't extend beyond viewport */
/* Note: We don't override left/right as popovers/menus need positioning */
[style*='position: absolute'],
[style*='position: fixed'] {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Prevent flex items from overflowing */
.flex,
[class*='flex'],
[style*='display: flex'],
[style*='display:flex'] {
  min-width: 0;
}

/* Prevent grid items from overflowing */
[class*='grid'],
[style*='display: grid'],
[style*='display:grid'] {
  min-width: 0;
}

/* Ensure all block-level elements respect viewport width */
div,
section,
article,
aside,
header,
footer,
nav,
main,
form {
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent elements with min-width from causing overflow on flex/grid items */
.flex > *,
[class*='flex'] > *,
[style*='display: flex'] > *,
[style*='display:flex'] > *,
.grid > *,
[class*='grid'] > *,
[style*='display: grid'] > *,
[style*='display:grid'] > * {
  min-width: 0;
}

/* Responsive */
/* Cover all mobile and tablet viewports (up to md breakpoint at 900px) */
@media (max-width: 900px) {
  html,
  body {
    /* overflow-x: hidden !important; */
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    box-sizing: border-box !important;
  }

  /* Prevent any element from causing horizontal overflow */
  /* Note: Images, videos, and iframes are handled separately below */
  /* Use 100% instead of 100vw to avoid scrollbar width issues */
  div,
  section,
  article,
  aside,
  header,
  footer,
  nav,
  main,
  form {
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  /* Ensure root elements don't overflow */
  #__next,
  #__next > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent flex containers from overflowing */
  [class*='MuiBox-root'],
  [class*='MuiContainer-root'],
  [class*='MuiGrid-root'],
  [class*='MuiStack-root'],
  [class*='MuiPaper-root'] {
    max-width: 100% !important;
    /* overflow-x: hidden !important; */
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure flex items shrink properly */
  [class*='MuiBox-root'] > *,
  [class*='MuiStack-root'] > *,
  [class*='MuiGrid-root'] > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Prevent absolutely positioned elements from causing overflow on mobile */
  /* Note: We preserve positioning for popovers/menus but limit their width */
  [style*='position: absolute'],
  [style*='position: fixed'] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Ensure popovers and menus are constrained but preserve positioning */
  [class*='MuiPopper-root'],
  [class*='MuiPopover-root'],
  [class*='MuiMenu-root'] {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  [class*='MuiPopper-root'] > *,
  [class*='MuiPopover-root'] > *,
  [class*='MuiMenu-root'] > * {
    max-width: calc(100% - 16px) !important;
    box-sizing: border-box !important;
  }

  /* Dialogs should be centered and not exceed viewport */
  [class*='MuiDialog-root'] {
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure all buttons meet minimum touch target size (48px) on mobile */
  /* This applies to all viewports up to 900px (md breakpoint) */
  /* Use very specific selectors to override MUI's inline styles */
  button,
  [role='button'],
  .MuiButton-root,
  .MuiIconButton-root,
  button.MuiIconButton-root,
  button.MuiButton-root,
  [role='button'].MuiIconButton-root,
  [role='button'].MuiButton-root,
  .MuiButtonBase-root.MuiIconButton-root,
  button.MuiButtonBase-root,
  [role='button'].MuiButtonBase-root {
    min-height: 48px !important;
    min-width: 48px !important;
  }

  /* Override MUI's size="small" which sets fixed 32px dimensions */
  /* Force all IconButtons to be 48px on mobile, regardless of size prop or inline styles */
  /* Target all possible combinations of classes and attributes */
  .MuiIconButton-sizeSmall,
  button.MuiIconButton-sizeSmall,
  [role='button'].MuiIconButton-sizeSmall,
  .MuiIconButton-root.MuiIconButton-sizeSmall,
  .MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall,
  button.MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall,
  [role='button'].MuiButtonBase-root.MuiIconButton-root.MuiIconButton-sizeSmall,
  button[class*='MuiIconButton'][class*='sizeSmall'],
  [role='button'][class*='MuiIconButton'][class*='sizeSmall'],
  .MuiButtonBase-root[class*='MuiIconButton'][class*='sizeSmall'],
  button[class*='MuiButtonBase'][class*='MuiIconButton'][class*='sizeSmall'],
  [role='button'][class*='MuiButtonBase'][class*='MuiIconButton'][class*='sizeSmall'] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    padding: 0 !important;
    /* Override any inline styles */
    box-sizing: border-box !important;
  }

  /* Force all IconButtons to be 48px on mobile, overriding any inline styles from sx prop */
  /* This is more aggressive and targets all IconButtons regardless of size prop */
  .MuiIconButton-root,
  button.MuiIconButton-root,
  [role='button'].MuiIconButton-root,
  .MuiButtonBase-root.MuiIconButton-root,
  button.MuiButtonBase-root.MuiIconButton-root,
  [role='button'].MuiButtonBase-root.MuiIconButton-root {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Override any inline width/height styles from sx prop for IconButtons on mobile */
  /* Use attribute selectors to catch inline styles */
  .MuiIconButton-root[style],
  button.MuiIconButton-root[style],
  [role='button'].MuiIconButton-root[style],
  .MuiButtonBase-root.MuiIconButton-root[style],
  button.MuiButtonBase-root.MuiIconButton-root[style],
  [role='button'].MuiButtonBase-root.MuiIconButton-root[style] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    box-sizing: border-box !important;
  }

  /* Ensure form inputs are touch-friendly */
  input:not([type='checkbox']):not([type='radio']),
  textarea,
  select {
    min-height: 48px !important;
  }

  .navbar .container {
    flex-direction: column;
    gap: 1rem;
  }

  .hero h2 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
  }

  .cta-buttons {
    flex-direction: column;
  }

  .cta-buttons a {
    width: 100%;
    text-align: center;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  /* Ensure padding doesn't cause overflow on MUI containers */
  [class*='MuiContainer-root'] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* On very small viewports (320px), use minimal padding */
  @media (max-width: 360px) {
    [class*='MuiContainer-root'] {
      padding-left: 4px !important;
      padding-right: 4px !important;
    }
  }

  /* Prevent tables from overflowing on mobile - wrap in scrollable container if needed */
  table {
    width: 100%;
    max-width: 100%;
    table-layout: auto;
  }

  /* Wrap wide tables in a scrollable container */
  .table-wrapper,
  [class*='table'] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
  }

  /* Ensure code blocks are scrollable on mobile */
  pre,
  code,
  [class*='code'],
  [class*='CodeBlock'] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
    word-wrap: break-word;
    white-space: pre-wrap;
    box-sizing: border-box !important;
  }

  /* Prevent text from causing overflow */
  p,
  span,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  a,
  button,
  label,
  li {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }

  /* Ensure inputs and form elements don't overflow */
  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Prevent SVG and canvas from overflowing */
  svg,
  canvas {
    max-width: 100% !important;
    height: auto;
    box-sizing: border-box !important;
  }

  pre {
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.5;
  }

  code {
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    font-size: 0.875rem;
  }
}

/* Loading Spinner */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(102, 126, 234, 0.3);
  border-radius: 50%;
  border-top-color: #667eea;
  animation: spin 1s ease-in-out infinite;
}

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

/* Screen reader only - visually hidden but accessible to screen readers */
.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;
}

/* Hide Next.js development indicators from accessibility tree */
[data-nextjs-version-checker],
.turbopack-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}