/* Eletroware 2.0 — visual layer only
 * No business logic is replaced here. The release keeps the existing React/Supabase app.
 */

:root {
  color-scheme: dark;
}

body.ew-v2-collab,
body.ew-v2-admin {
  --background: 220 38% 7%;
  --foreground: 210 35% 96%;
  --card: 222 31% 11%;
  --card-foreground: 210 35% 96%;
  --popover: 222 34% 10%;
  --popover-foreground: 210 35% 96%;
  --primary: 174 82% 52%;
  --primary-foreground: 220 42% 7%;
  --secondary: 219 27% 17%;
  --secondary-foreground: 210 30% 91%;
  --muted: 219 27% 16%;
  --muted-foreground: 215 18% 65%;
  --accent: 258 82% 70%;
  --accent-foreground: 220 42% 7%;
  --destructive: 0 83% 65%;
  --destructive-foreground: 0 0% 100%;
  --border: 218 28% 23%;
  --input: 218 28% 19%;
  --ring: 174 82% 52%;
  --teal-primary: 174 82% 52%;
  --teal-light: 174 88% 66%;
  --teal-dark: 178 77% 29%;
  --teal-glow: 174 82% 52%;
  --tech-blue: 211 95% 63%;
  --success-green: 154 78% 52%;
  --warning-orange: 35 95% 62%;
  --cyber-purple: 258 82% 70%;
  --sidebar-background: 222 35% 9%;
  --sidebar-foreground: 210 35% 96%;
  --sidebar-primary: 174 82% 52%;
  --sidebar-primary-foreground: 220 42% 7%;
  --sidebar-accent: 219 27% 16%;
  --sidebar-accent-foreground: 210 30% 91%;
  --sidebar-border: 218 28% 22%;
  --sidebar-ring: 174 82% 52%;
  --shadow-sm: 0 2px 8px hsl(220 45% 2% / .28);
  --shadow-md: 0 12px 30px hsl(220 45% 2% / .38);
  --shadow-lg: 0 22px 55px hsl(220 45% 2% / .48);
  --shadow-neon: 0 0 18px hsl(174 82% 52% / .18), 0 0 44px hsl(258 82% 70% / .08);
}

body.ew-v2-collab,
body.ew-v2-admin {
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 82% -10%, hsl(258 82% 70% / .12), transparent 31rem),
    radial-gradient(circle at 4% 18%, hsl(174 82% 52% / .10), transparent 28rem),
    hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ew-v2-collab::before,
body.ew-v2-admin::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .26;
  background-image:
    linear-gradient(hsl(210 30% 80% / .035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(210 30% 80% / .035) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}

body.ew-v2-collab #root,
body.ew-v2-admin #root {
  position: relative;
  z-index: 1;
  isolation: isolate;
}

body.ew-v2-collab h1,
body.ew-v2-collab h2,
body.ew-v2-collab h3,
body.ew-v2-collab h4,
body.ew-v2-admin h1,
body.ew-v2-admin h2,
body.ew-v2-admin h3,
body.ew-v2-admin h4 {
  font-family: "Space Grotesk", Inter, sans-serif;
  letter-spacing: -.025em;
}

/* Shared chrome */
body.ew-v2-collab header.sticky,
body.ew-v2-admin header.sticky {
  background: linear-gradient(90deg, hsl(222 35% 9% / .96), hsl(222 33% 12% / .84));
  border-color: hsl(174 82% 52% / .22) !important;
  box-shadow: 0 10px 35px hsl(220 45% 2% / .26), inset 0 -1px hsl(174 82% 52% / .08);
  backdrop-filter: blur(18px) saturate(135%);
}

body.ew-v2-collab header.sticky::after,
body.ew-v2-admin header.sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, hsl(174 82% 52% / .7), hsl(258 82% 70% / .55), transparent);
  pointer-events: none;
}

body.ew-v2-collab header a,
body.ew-v2-admin header a {
  transition: color .2s ease, background .2s ease, transform .2s ease, border-color .2s ease;
}

body.ew-v2-collab header a:hover,
body.ew-v2-admin header a:hover {
  color: hsl(var(--primary));
}

body.ew-v2-collab aside[class*="md:flex"] {
  width: 17rem;
  background: linear-gradient(180deg, hsl(222 35% 10% / .98), hsl(220 36% 7% / .94));
  border-color: hsl(218 28% 23% / .9) !important;
  box-shadow: 16px 0 44px hsl(220 45% 2% / .18);
}

body.ew-v2-collab aside a,
body.ew-v2-admin header div[class*="border-t"] a {
  position: relative;
  border: 1px solid transparent;
  border-radius: 12px;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
}

body.ew-v2-collab aside a:hover,
body.ew-v2-admin header div[class*="border-t"] a:hover {
  transform: translateX(3px);
  color: hsl(var(--foreground));
  background: hsl(174 82% 52% / .08) !important;
  border-color: hsl(174 82% 52% / .22);
}

body.ew-v2-collab aside a[class*="bg-primary"],
body.ew-v2-admin header div[class*="border-t"] a[class*="bg-primary"] {
  color: hsl(var(--primary-foreground)) !important;
  background: linear-gradient(100deg, hsl(174 82% 52%), hsl(175 70% 42%)) !important;
  box-shadow: 0 8px 24px hsl(174 82% 52% / .2), inset 0 1px hsl(0 0% 100% / .18);
  border-color: hsl(174 82% 66% / .7) !important;
}

body.ew-v2-collab main,
body.ew-v2-admin main {
  position: relative;
}

body.ew-v2-collab main > div,
body.ew-v2-admin main > div {
  animation: ew-v2-enter .42s ease-out both;
}

@keyframes ew-v2-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

body.ew-v2-collab main h1,
body.ew-v2-admin main h1 {
  font-size: clamp(1.35rem, 2vw, 2rem);
  color: hsl(var(--foreground));
  text-shadow: 0 0 26px hsl(174 82% 52% / .12);
}

body.ew-v2-collab main h1 + p,
body.ew-v2-admin main h1 + p {
  color: hsl(var(--muted-foreground));
}

/* Cards, dashboard blocks, visit cards and summary tiles */
body.ew-v2-collab main [class*="rounded-lg"][class*="border"],
body.ew-v2-collab main [class*="rounded-xl"][class*="border"],
body.ew-v2-admin main [class*="rounded-lg"][class*="border"],
body.ew-v2-admin main [class*="rounded-xl"][class*="border"] {
  border-color: hsl(218 28% 23% / .95) !important;
  background: linear-gradient(145deg, hsl(222 31% 13% / .94), hsl(220 34% 9% / .88)) !important;
  box-shadow: 0 10px 26px hsl(220 45% 2% / .24), inset 0 1px hsl(210 35% 100% / .025);
}

body.ew-v2-collab main [class*="rounded-lg"][class*="border"]:hover,
body.ew-v2-collab main [class*="rounded-xl"][class*="border"]:hover,
body.ew-v2-admin main [class*="rounded-lg"][class*="border"]:hover,
body.ew-v2-admin main [class*="rounded-xl"][class*="border"]:hover {
  border-color: hsl(174 82% 52% / .34) !important;
}

body.ew-v2-collab main [class*="shadow-sm"],
body.ew-v2-admin main [class*="shadow-sm"] {
  box-shadow: 0 10px 26px hsl(220 45% 2% / .24) !important;
}

/* Buttons and controls */
body.ew-v2-collab button,
body.ew-v2-admin button {
  font-family: Inter, sans-serif;
  letter-spacing: .045em;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body.ew-v2-collab main button[class*="bg-primary"],
body.ew-v2-admin main button[class*="bg-primary"] {
  background: linear-gradient(105deg, hsl(174 82% 52%), hsl(191 78% 48%)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 8px 22px hsl(174 82% 52% / .18), inset 0 1px hsl(0 0% 100% / .15);
}

body.ew-v2-collab main button[class*="bg-primary"]:hover,
body.ew-v2-admin main button[class*="bg-primary"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px hsl(174 82% 52% / .26), inset 0 1px hsl(0 0% 100% / .18);
}

body.ew-v2-collab input,
body.ew-v2-collab textarea,
body.ew-v2-collab [role="combobox"],
body.ew-v2-admin input,
body.ew-v2-admin textarea,
body.ew-v2-admin [role="combobox"] {
  border-color: hsl(218 28% 26%) !important;
  background: hsl(220 35% 8% / .72) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow: inset 0 1px hsl(210 35% 100% / .025);
}

body.ew-v2-collab input:focus,
body.ew-v2-collab textarea:focus,
body.ew-v2-collab [role="combobox"]:focus,
body.ew-v2-admin input:focus,
body.ew-v2-admin textarea:focus,
body.ew-v2-admin [role="combobox"]:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 3px hsl(174 82% 52% / .13), 0 0 22px hsl(174 82% 52% / .08) !important;
}

body.ew-v2-collab input::placeholder,
body.ew-v2-collab textarea::placeholder,
body.ew-v2-admin input::placeholder,
body.ew-v2-admin textarea::placeholder {
  color: hsl(215 18% 65% / .7) !important;
}

/* Login screen */
body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 18%, hsl(174 82% 52% / .14), transparent 22rem),
    linear-gradient(135deg, hsl(222 36% 8%), hsl(220 34% 12%)) !important;
}

body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center > div {
  position: relative;
  overflow: hidden;
  border-color: hsl(174 82% 52% / .28) !important;
  background: linear-gradient(150deg, hsl(222 32% 14% / .97), hsl(220 36% 9% / .95)) !important;
  box-shadow: 0 28px 90px hsl(220 45% 2% / .52), 0 0 0 1px hsl(174 82% 52% / .05), var(--shadow-neon) !important;
}

body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center > div::before {
  content: "FIELD OPS 2.0";
  position: absolute;
  top: 14px;
  right: 16px;
  color: hsl(174 82% 66% / .75);
  font: 700 .58rem/1 Inter, sans-serif;
  letter-spacing: .18em;
}

body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center img {
  filter: drop-shadow(0 0 18px hsl(174 82% 52% / .28));
}

/* Responsive field navigation */
body.ew-v2-collab div[class*="md:hidden"][class*="fixed"][class*="bottom-0"],
body.ew-v2-admin div[class*="md:hidden"][class*="fixed"][class*="bottom-0"] {
  background: hsl(222 38% 8% / .9) !important;
  border-color: hsl(174 82% 52% / .22) !important;
  box-shadow: 0 -16px 40px hsl(220 45% 2% / .42), 0 -1px hsl(174 82% 52% / .1);
  backdrop-filter: blur(18px) saturate(140%);
}

body.ew-v2-collab div[class*="md:hidden"][class*="fixed"][class*="bottom-0"] a,
body.ew-v2-admin div[class*="md:hidden"][class*="fixed"][class*="bottom-0"] a {
  min-width: 52px;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: transform .18s ease, color .18s ease, background .18s ease;
}

body.ew-v2-collab div[class*="md:hidden"][class*="fixed"][class*="bottom-0"] a[class*="bg-primary"],
body.ew-v2-admin div[class*="md:hidden"][class*="fixed"][class*="bottom-0"] a[class*="bg-primary"] {
  background: hsl(174 82% 52% / .16) !important;
  border-color: hsl(174 82% 52% / .32);
  color: hsl(var(--primary)) !important;
  box-shadow: 0 0 20px hsl(174 82% 52% / .12);
}

body.ew-v2-collab main[class*="pb-mobile-nav"],
body.ew-v2-admin main[class*="pb-24"] {
  padding-bottom: 6.25rem;
}

/* Visit list and field workflow */
body.ew-v2-collab main [class*="grid-cols-1"][class*="md:grid-cols-2"] > div,
body.ew-v2-collab main [class*="grid-cols-1"][class*="lg:grid-cols-2"] > div {
  min-width: 0;
}

body.ew-v2-collab main [class*="uppercase"] {
  letter-spacing: .065em;
}

body.ew-v2-collab main button[title*="Fotos"],
body.ew-v2-collab main button[title*="roteiro"] {
  color: hsl(var(--primary));
}

/* Visit editor: full-height, readable and safe on phones */
body.ew-v2-collab [data-radix-dialog-overlay],
body.ew-v2-admin [data-radix-dialog-overlay] {
  z-index: 9000 !important;
  background: hsl(220 45% 2% / .78) !important;
  backdrop-filter: blur(8px) saturate(125%);
}

body.ew-v2-collab [role="dialog"],
body.ew-v2-admin [role="dialog"] {
  z-index: 9010 !important;
  width: min(980px, calc(100vw - 28px)) !important;
  max-height: min(92dvh, 980px) !important;
  overflow: hidden !important;
  border: 1px solid hsl(174 82% 52% / .38) !important;
  border-radius: 24px !important;
  background: linear-gradient(150deg, hsl(222 33% 14% / .99), hsl(220 36% 8% / .99)) !important;
  box-shadow: 0 30px 100px hsl(220 45% 2% / .66), var(--shadow-neon) !important;
}

body.ew-v2-collab [role="dialog"] > div:first-child,
body.ew-v2-admin [role="dialog"] > div:first-child {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 1.1rem 1.25rem .95rem !important;
  border-bottom: 1px solid hsl(174 82% 52% / .18);
  background: linear-gradient(90deg, hsl(222 34% 14% / .98), hsl(258 36% 15% / .88)) !important;
  text-align: left !important;
}

body.ew-v2-collab [role="dialog"] > div:first-child h2,
body.ew-v2-admin [role="dialog"] > div:first-child h2 {
  color: hsl(var(--foreground));
  font-size: 1.05rem;
  letter-spacing: .01em;
}

body.ew-v2-collab [role="dialog"] > div:nth-child(2),
body.ew-v2-admin [role="dialog"] > div:nth-child(2) {
  display: flex !important;
  flex-direction: column;
  gap: 1rem !important;
  min-height: 0;
  overflow-y: auto;
  padding: 1rem 1.25rem 1.25rem !important;
  scrollbar-color: hsl(174 82% 52% / .55) transparent;
}

body.ew-v2-collab [role="dialog"] label,
body.ew-v2-admin [role="dialog"] label {
  color: hsl(215 25% 82%);
  font-weight: 600;
  letter-spacing: .02em;
}

body.ew-v2-collab [role="dialog"] > div:nth-child(2) > button,
body.ew-v2-admin [role="dialog"] > div:nth-child(2) > button {
  position: sticky;
  bottom: -1.25rem;
  z-index: 2;
  min-height: 2.75rem;
  margin: 0 -1.25rem -1.25rem !important;
  border-radius: 0 !important;
  background: hsl(222 34% 10% / .96) !important;
  border-top: 1px solid hsl(174 82% 52% / .18) !important;
  backdrop-filter: blur(14px);
}

body.ew-v2-collab [role="dialog"] > div:nth-child(2) > button:last-child,
body.ew-v2-admin [role="dialog"] > div:nth-child(2) > button:last-child {
  color: hsl(var(--primary-foreground)) !important;
  background: linear-gradient(105deg, hsl(174 82% 52%), hsl(191 78% 48%)) !important;
  border-top-color: transparent !important;
}

body.ew-v2-collab [role="dialog"] > button,
body.ew-v2-admin [role="dialog"] > button {
  z-index: 4;
  top: .9rem !important;
  right: 1rem !important;
  color: hsl(210 35% 96% / .9) !important;
  background: hsl(220 35% 8% / .55);
  border: 1px solid hsl(210 35% 96% / .13);
}

/* Admin dashboard polish */
body.ew-v2-admin header div[class*="border-t"] {
  border-color: hsl(218 28% 23% / .75) !important;
  background: hsl(222 35% 9% / .54);
}

body.ew-v2-admin main [class*="grid"] > [class*="rounded"] {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

body.ew-v2-admin main [class*="grid"] > [class*="rounded"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px hsl(220 45% 2% / .34), var(--shadow-neon);
}

body.ew-v2-admin main svg {
  filter: drop-shadow(0 0 9px hsl(174 82% 52% / .16));
}

/* Small screens: keep the field workflow thumb-friendly */
@media (max-width: 767px) {
  body.ew-v2-collab,
  body.ew-v2-admin {
    font-size: 14px;
  }

  body.ew-v2-collab header.sticky,
  body.ew-v2-admin header.sticky {
    min-height: 3.75rem;
  }

  body.ew-v2-collab main,
  body.ew-v2-admin main {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  body.ew-v2-collab main [class*="rounded-lg"][class*="border"],
  body.ew-v2-admin main [class*="rounded-lg"][class*="border"] {
    border-radius: 16px !important;
  }

  body.ew-v2-collab main button,
  body.ew-v2-admin main button {
    min-height: 2.65rem;
  }

  body.ew-v2-collab [role="dialog"],
  body.ew-v2-admin [role="dialog"] {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    max-height: 94dvh !important;
    border-radius: 22px 22px 0 0 !important;
  }

  body.ew-v2-collab [role="dialog"] > div:nth-child(2),
  body.ew-v2-admin [role="dialog"] > div:nth-child(2) {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom)) !important;
  }

  body.ew-v2-collab [role="dialog"] > div:nth-child(2) > button,
  body.ew-v2-admin [role="dialog"] > div:nth-child(2) > button {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }

  body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center {
    padding: 1rem !important;
  }

  body.ew-v2-collab #root > div > div.min-h-screen.flex.items-center.justify-center > div {
    border-radius: 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.ew-v2-collab *,
  body.ew-v2-admin * {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}