/**
 * EquipTrak looks + jobsite chrome.
 * Color tokens: shop (product default) | default | neon | phosphor.
 * Chrome (radius, density, badges, no glass) applies to the whole app.
 */

/* Mud Busters: near-black steel + safety orange. Color tokens only. */
:root,
.dark,
html[data-et-skin="shop"],
html.dark[data-et-skin="shop"],
html[data-et-skin="default"],
html.dark[data-et-skin="default"] {
  --background: 223 17% 8%;
  --foreground: 36 31% 94%;
  --card: 218 13% 12%;
  --card-foreground: 36 31% 94%;
  --popover: 218 13% 12%;
  --popover-foreground: 36 31% 94%;
  --primary: 17 88% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 223 17% 8%;
  --secondary-foreground: 36 31% 94%;
  --muted: 218 13% 12%;
  --muted-foreground: 35 9% 60%;
  --accent: 17 88% 40%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 78% 42%;
  --destructive-foreground: 0 0% 100%;
  --border: 215 9% 25%;
  --input: 215 9% 25%;
  --ring: 17 88% 40%;
  --radius: 0.25rem;
  --status-emergency: 0 78% 42%;
  --status-open: 0 78% 42%;
  --status-progress: 48 100% 46%;
  --status-completed: 145 72% 28%;
  --sidebar-background: 223 17% 8%;
  --sidebar-foreground: 36 31% 94%;
  --sidebar-primary: 17 88% 40%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 218 13% 12%;
  --sidebar-accent-foreground: 36 31% 94%;
  --sidebar-border: 215 9% 25%;
  --sidebar-ring: 17 88% 40%;
}
html[data-et-skin="shop"],
html[data-et-skin="shop"] body,
html[data-et-skin="shop"].et-shell-page,
html[data-et-skin="shop"].et-shell-page body,
html[data-et-skin="shop"] .et-profile-page {
  background: hsl(var(--background));
}
html[data-et-skin="shop"] .et-profile-hero::after {
  display: none;
}
html[data-et-skin="shop"] .et-profile-section,
html[data-et-skin="shop"] .et-profile-block,
html[data-et-skin="shop"] .et-profile-hero,
html[data-et-skin="shop"] .et-profile-homebar {
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html[data-et-skin="neon"],
html.dark[data-et-skin="neon"] {
  --background: 228 55% 6%;
  --foreground: 186 90% 90%;
  --card: 228 45% 10%;
  --card-foreground: 186 90% 90%;
  --popover: 228 45% 10%;
  --popover-foreground: 186 90% 90%;
  --primary: 187 100% 48%;
  --primary-foreground: 228 55% 6%;
  --secondary: 228 35% 16%;
  --secondary-foreground: 186 80% 88%;
  --muted: 228 35% 16%;
  --muted-foreground: 200 18% 68%;
  --accent: 22 92% 56%;
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 52%;
  --destructive-foreground: 0 0% 100%;
  --border: 228 30% 22%;
  --input: 228 30% 22%;
  --ring: 187 100% 48%;
  --radius: 0.25rem;
  --status-emergency: 0 78% 52%;
  --status-open: 0 78% 58%;
  --status-progress: 48 100% 50%;
  --status-completed: 152 55% 48%;
  --sidebar-background: 228 55% 5%;
  --sidebar-foreground: 186 90% 90%;
  --sidebar-primary: 187 100% 48%;
  --sidebar-primary-foreground: 228 55% 6%;
  --sidebar-accent: 228 40% 14%;
  --sidebar-accent-foreground: 186 90% 90%;
  --sidebar-border: 228 40% 14%;
  --sidebar-ring: 187 100% 48%;
}

html[data-et-skin="phosphor"],
html.dark[data-et-skin="phosphor"] {
  --background: 120 35% 4%;
  --foreground: 120 72% 66%;
  --card: 120 28% 7%;
  --card-foreground: 120 72% 66%;
  --popover: 120 28% 7%;
  --popover-foreground: 120 72% 66%;
  --primary: 120 70% 40%;
  --primary-foreground: 120 35% 4%;
  --secondary: 120 22% 12%;
  --secondary-foreground: 120 60% 72%;
  --muted: 120 22% 12%;
  --muted-foreground: 120 20% 55%;
  --accent: 40 92% 48%;
  --accent-foreground: 120 35% 4%;
  --destructive: 0 72% 48%;
  --destructive-foreground: 0 0% 100%;
  --border: 120 22% 16%;
  --input: 120 22% 16%;
  --ring: 120 70% 40%;
  --radius: 0.25rem;
  --status-emergency: 0 72% 48%;
  --status-open: 0 72% 50%;
  --status-progress: 48 100% 48%;
  --status-completed: 120 70% 40%;
  --sidebar-background: 120 35% 3%;
  --sidebar-foreground: 120 72% 66%;
  --sidebar-primary: 120 70% 40%;
  --sidebar-primary-foreground: 120 35% 4%;
  --sidebar-accent: 120 22% 10%;
  --sidebar-accent-foreground: 120 72% 66%;
  --sidebar-border: 120 22% 10%;
  --sidebar-ring: 120 70% 40%;
}

/* ========== Jobsite chrome (all screens) ========== */

html, body {
  background-color: hsl(var(--background));
}

/* Square-ish corners: 2–6px. Do not restyle Leaflet clusters/pins. */
.rounded,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 4px !important;
}
.rounded-sm {
  border-radius: 2px !important;
}
.rounded-xl,
.rounded-2xl,
.rounded-3xl {
  border-radius: 6px !important;
}

/* Soft SaaS shadows / glass off */
.shadow-sm,
.shadow,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl {
  box-shadow: none !important;
}
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
[class*="backdrop-blur"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.bg-card\/95,
.bg-background\/95,
.bg-background\/80,
.bg-card\/90 {
  background-color: hsl(var(--card)) !important;
}

/* Job cards keep token radius/shadow only — no padding shrink */
a.group.flex.overflow-hidden.rounded-lg.border.bg-card,
a.flex.overflow-hidden.rounded-lg.border.bg-card {
  box-shadow: none !important;
}

/* Status badges — high-vis, square-ish, on every job/equipment chip */
span.inline-flex.items-center.gap-1\.5.rounded-full,
span.inline-flex.items-center.gap-1.rounded-full,
div.inline-flex.items-center.rounded-full.border {
  border-radius: 3px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.65rem !important;
  line-height: 1.1;
  padding: 0.22rem 0.42rem !important;
  border: 1px solid currentColor;
}
span.inline-flex.items-center.gap-1\.5.rounded-full > span.h-2.w-2.rounded-full,
span.inline-flex.items-center.gap-1.rounded-full > span.h-2.w-2.rounded-full {
  border-radius: 999px !important;
  width: 0.45rem !important;
  height: 0.45rem !important;
}

/* Stronger status fills for sunlight */
.bg-status-open\/10 { background-color: hsl(var(--status-open) / 0.18) !important; }
.bg-status-progress\/10 { background-color: hsl(var(--status-progress) / 0.22) !important; }
.bg-status-completed\/10 { background-color: hsl(var(--status-completed) / 0.16) !important; }
.bg-status-emergency\/10 { background-color: hsl(var(--status-emergency) / 0.18) !important; }
.text-status-open { color: hsl(var(--status-open)) !important; }
.text-status-progress { color: hsl(var(--status-progress)) !important; }
.text-status-completed { color: hsl(var(--status-completed)) !important; }

div.pointer-events-auto.mx-auto.max-w-xs.rounded-xl.border {
  box-shadow: none !important;
  backdrop-filter: none !important;
}

/* Sticky headers: solid, not frosted */
.sticky.top-0.z-10,
.sticky.top-0.border-b {
  background-color: hsl(var(--background)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Tab bar / nav — solid steel, no glass */
nav.pb-safe.fixed.inset-x-0.bottom-0,
.pb-safe.fixed.inset-x-0.bottom-0 {
  background-color: hsl(var(--card)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Dialogs / sheets */
[role="dialog"],
[data-radix-dialog-content] {
  border-radius: 6px !important;
}

/* Leaflet popup chrome only — not tiles, not pin JS */
.leaflet-popup-content-wrapper {
  border-radius: 4px !important;
  box-shadow: none !important;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  padding: 0;
}
.leaflet-popup-tip {
  background: hsl(var(--card));
  box-shadow: none !important;
}
.leaflet-popup-content {
  margin: 0.55rem 0.7rem !important;
  font-family: Barlow, system-ui, sans-serif;
}
.leaflet-control-zoom a,
.leaflet-bar a {
  border-radius: 2px !important;
}

/* Color only — secondary / outline: dark fill + #3A3F46 border */
button.bg-background,
button.bg-secondary,
a.bg-background,
.btn-outline,
.et-btn-outline,
.et-shell .btn-outline,
.et-profile-tile:not(.et-profile-tile--accent):not(.et-profile-cta),
.et-shell-back,
.et-shell a.back,
.et-shell .back {
  background-color: #111318;
  border-color: #3A3F46;
  color: #F4F0EA;
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: #C2410C;
}
.bg-blue-600,
.bg-blue-500,
.bg-sky-500,
.bg-sky-600,
.bg-indigo-600,
.bg-indigo-500 {
  background-color: #C2410C !important;
  color: #fff !important;
}