/* Q8iDev mobile-first compatibility layer */
html { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
body, #root { width: 100%; min-width: 0; max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, svg, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }
a, button, input, select, textarea { touch-action: manipulation; }
:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }
pre, code { overflow-wrap: anywhere; }

@media (max-width: 767px) {
  header > div:first-child { min-height: 4rem; padding-inline: .75rem; gap: .5rem; }
  header > div:first-child > div:first-child { gap: .5rem; min-width: 0; }
  header > div:first-child > div:first-child > div:first-child { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; }
  header > div:first-child > div:first-child span.text-2xl { font-size: 1.15rem; }
  header > div:first-child > div:last-child { gap: .35rem; flex: 0 0 auto; }
  #header-theme-toggle, #header-installer-btn { display: none !important; }
  #header-login-btn, #header-admin-link { display: inline-flex !important; padding: .625rem .75rem; white-space: nowrap; }
  #header-request-service-cta { display: none !important; }
  #header-request-service-cta { padding: .625rem .75rem; white-space: nowrap; }
  #header-request-service-cta svg { display: none; }
  #header-mobile-menu-toggle { padding: .625rem; flex: 0 0 auto; }

  main section { scroll-margin-top: 4rem; }
  main section > div[class*="max-w-"] { padding-inline: 1rem; }
  h1 { font-size: clamp(1.85rem, 9vw, 2.5rem) !important; line-height: 1.25 !important; }
  h2 { line-height: 1.35 !important; }
  .grid { min-width: 0; }
  .grid > * { min-width: 0; }
  .flex { min-width: 0; }
  [class*="w-[600px]"] { width: min(600px, 100vw) !important; }
  [class*="w-[300px]"] { width: min(300px, 85vw) !important; }
  [class*="-right-6"] { right: .5rem !important; }
  [class*="-left-6"] { left: .5rem !important; }
  [class*="max-w-"][class*="rounded-3xl"], [class*="max-w-"][class*="rounded-2xl"] { max-width: calc(100vw - 1.5rem); }
  .fixed.inset-0 { padding: .75rem !important; }
  .fixed.inset-0 > div { max-height: calc(100dvh - 1.5rem); overflow-y: auto; }
  table { min-width: 42rem; }
  .overflow-x-auto { -webkit-overflow-scrolling: touch; }
  footer { padding-top: 3rem !important; padding-bottom: 6rem !important; }
  footer [class*="flex"][class*="items-center"] { flex-wrap: wrap; }

  /* Admin area: keep content readable and sidebar dismissible on phones. */
  aside { width: min(18rem, 88vw) !important; }
  aside + div, aside ~ main { min-width: 0 !important; width: 100% !important; }
  [class*="p-8"] { padding: 1rem; }
  [class*="px-8"] { padding-inline: 1rem; }
}

@media (max-width: 390px) {
  header > div:first-child > div:first-child > div:last-child span[class*="bg-sky-500"] { display: none; }
  #header-request-service-cta { font-size: .7rem; padding-inline: .6rem; }
  h1 { font-size: 1.75rem !important; }
  [class*="grid-cols-2"] { grid-template-columns: minmax(0, 1fr) !important; }
}

@supports not (overflow: clip) {
  body, #root { overflow-x: hidden; }
}

/* Functional light theme, activated by the header sun/moon control. */
html.light-mode { color-scheme: light; }
html.light-mode body,
html.light-mode #root,
html.light-mode [class*="bg-[#0a0a0c]"] { background-color: #f8fafc !important; color: #0f172a !important; }
html.light-mode [class*="bg-[#111114]"],
html.light-mode [class*="bg-slate-900"],
html.light-mode [class*="bg-slate-950"] { background-color: #ffffff !important; }
html.light-mode [class*="border-[#1e1e24]"],
html.light-mode [class*="border-slate-800"] { border-color: #dbe4ee !important; }
html.light-mode [class*="text-white"],
html.light-mode [class*="text-slate-100"],
html.light-mode [class*="text-slate-200"] { color: #0f172a !important; }
html.light-mode [class*="text-slate-300"],
html.light-mode [class*="text-slate-400"],
html.light-mode [class*="text-slate-500"] { color: #475569 !important; }
html.light-mode header { background-color: rgba(248, 250, 252, .94) !important; }
html.light-mode header button:hover,
html.light-mode [class*="hover:bg-slate-800"]:hover { background-color: #e2e8f0 !important; }
html.light-mode .bg-sky-600,
html.light-mode [class*="bg-sky-600"] { color: #ffffff !important; }


/* Responsive polish v3 */
@media (max-width: 767px) {
  input, select, textarea { min-height: 44px; font-size: 16px !important; }
  textarea { min-height: 110px; }
  footer a, footer button { display: inline-flex; align-items: center; min-height: 44px; padding-block: .55rem; }
  #cookie-consent-banner { bottom: max(.75rem, env(safe-area-inset-bottom)); padding: 1rem; }
  body:has(#cookie-consent-banner) #enable-push-notifications { display: none !important; }
}
#enable-push-notifications { bottom: max(16px, env(safe-area-inset-bottom)); }
.fixed[role="dialog"] { overscroll-behavior: contain; }
[class*="text-slate-500"] { color: #94a3b8 !important; }
[class*="text-slate-400"] { color: #a8b6c8 !important; }
button[class*="bg-sky-600"], a[class*="bg-sky-600"] { background-color: #0369a1 !important; }
button[class*="bg-sky-600"]:hover, a[class*="bg-sky-600"]:hover { background-color: #075985 !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Corporate mobile layout: never hide overflow as a substitute for fitting content. */
@media (max-width: 767px) {
  html, body, #root { width: 100% !important; max-width: 100vw !important; margin: 0 !important; overflow-x: hidden !important; }
  header > div,
  main > section > div[class*="max-w-"],
  footer > div[class*="max-w-"] { width: 100% !important; max-width: 100% !important; margin-inline: auto !important; padding-inline: 1rem !important; }
  main h1, main h2, main h3, main p { max-width: 100% !important; overflow-wrap: anywhere; }
  main section:first-of-type > div[class*="max-w-"] { display: flex !important; flex-direction: column !important; gap: 2rem !important; }
  main section:first-of-type > div[class*="max-w-"] > div { width: 100% !important; max-width: 100% !important; }
  main section:first-of-type > div[class*="max-w-"] > div:nth-child(2) { display: none !important; }
  main section:first-of-type > div.absolute { display: none !important; }
  main section:first-of-type > div.relative[class*="max-w-"] > div.grid > div:nth-child(2) { display: none !important; }
  main section:first-of-type > div.relative[class*="max-w-"] > div.grid { display: block !important; width: 100% !important; max-width: 100% !important; }
  main section:first-of-type > div.relative[class*="max-w-"] > div.grid > div:first-child { width: 100% !important; max-width: 100% !important; }
  main section:first-of-type [class*="flex-wrap"] { width: 100%; }
  main section:first-of-type [class*="flex-wrap"] > a,
  main section:first-of-type [class*="flex-wrap"] > button { flex: 1 1 100%; justify-content: center; min-height: 48px; }
  #cookie-consent-banner,
  [role="dialog"] { inset-inline: .75rem !important; width: auto !important; max-width: calc(100vw - 1.5rem) !important; }
}

@media (max-width: 430px) {
  header > div > div:first-child > div:last-child { display: none !important; }
  header > div { min-height: 4rem !important; }
  #header-request-service-cta { flex: 1 1 auto; justify-content: center; }
}
