/**
 * ZIDO HACCP — Clean Responsive System v108
 */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: #f8fafc;
  color: #0f172a;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  touch-action: manipulation;
}

#root {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Language dropdown responsive positioning */
[role="listbox"] {
  max-height: calc(100vh - 80px) !important;
  max-width: calc(100vw - 16px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

@media (max-width: 640px) {
  [role="listbox"] {
    right: 12px !important;
    left: auto !important;
    max-width: 220px !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.25), 0 10px 15px -5px rgba(0, 0, 0, 0.1) !important;
  }
}

/* 12-Language & RTL */
html[lang="ar"], [dir="rtl"] {
  direction: rtl;
  text-align: right;
}
html[lang="ar"] .text-left {
  text-align: right !important;
}
html[lang="ar"] .text-right {
  text-align: left !important;
}

/* ==========================================================================
   ENHANCED MOBILE RESPONSIVENESS (< 640px)
   ========================================================================== */
@media (max-width: 640px) {
  html, body, #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Mobile header container flex behavior */
  header div.lg\:hidden > div:first-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  header div.lg\:hidden h1 {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  header div.lg\:hidden p {
    font-size: 0.72rem !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Compact icon-only logout button on mobile header */
  header div.lg\:hidden div.flex.items-center.gap-1\.5.flex-shrink-0 > button:last-child {
    padding: 6px !important;
    min-height: 36px !important;
    height: 36px !important;
    font-size: 0 !important;
    width: 36px !important;
    min-width: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header div.lg\:hidden div.flex.items-center.gap-1\.5.flex-shrink-0 > button:last-child::after {
    content: "🚪";
    font-size: 1.15rem !important;
  }

  /* Toast notification positioning */
  div[role="status"], div[class*="toast"], [class*="sonner"] {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    bottom: 12px !important;
  }

  /* Dashboard card spacing */
  .grid {
    gap: 0.75rem !important;
  }
}