/* CSS Variables and Global Reset */

:root {
  /* 🎨 NEW: Premium Hydro-Tech Palette */

  /* Backgrounds: Deep rich darks instead of flat gray */
  --background-colour: #0f172a; /* Deep midnight blue/slate */
  --card-background: #1e293b; /* Slightly lighter slate for cards */

  /* Accents: Neon/Electric for high visibility on farms */
  --primary-colour: #0ea5e9; /* Electric Sky Blue (Water) */
  --primary-hover: #38bdf8; /* Brighter cyan for interaction */

  /* Status Colors: Vibrant and glowing */
  --danger-colour: #ef4444; /* Vivid Red */
  --danger-hover: #f87171;
  --success-colour: #22c55e; /* Hydro Green */

  /* Typography */
  --text-colour: #f8fafc; /* Almost white for readability */
  --subtle-text: #94a3b8; /* Blue-grey for labels */
  --border-colour: #334155; /* Subtle dark border */

  /* Depth & Glass Effects */
  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --glass-border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle frost border */

  --radius-lg: 1.5rem; /* Modern rounded corners */
  --radius-md: 0.75rem;
}

/* Global Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* ENHANCED FIX: Move Background to HTML for Status Bar Transparency */
html {
  overscroll-behavior: none !important;
  overscroll-behavior-x: none !important;
  overscroll-behavior-y: none !important;
  height: 100% !important;
  overflow: hidden !important;

  /* 1. Base color matches your Status Bar (#0f172a) */
  background-color: #0f172a !important;

  /* 2. GRADIENT FIX: Move the glow down to 300px.
     This leaves the top area solid dark, so Header = Status Bar. */
  background-image: radial-gradient(
    circle at 50% 300px,
    #1e293b 0%,
    #0f172a 70%
  ) !important;
}

body {
  font-family:
    "League Spartan",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  /* ✅ UPDATED: Make body transparent so HTML background shows through */
  background-color: transparent !important;
  background-image: none !important;

  color: var(--text-colour);
  line-height: 1.6;
  min-height: 100vh;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overscroll-behavior: none !important;
  overflow: auto !important; /* KEEP SCROLL FUNCTIONALITY */
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;

  /* iOS safe area handling */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Prevent ALL elements from stretching on overscroll */
* {
  overscroll-behavior: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Hardware Acceleration for smooth performance */
.motor-box,
.app-header,
.grid-status-indicator {
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
}

/* Container scrolling fix */
body > * {
  max-height: 100vh !important;
  overflow-y: auto !important;
  overscroll-behavior: none !important;
}

/* Button & Touch Resets */
button,
.btn,
.start-btn,
.stop-btn,
.icon-btn {
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  appearance: none;
  -webkit-appearance: none;
  touch-action: manipulation;
}

/* Typography Selection */
body,
button,
label,
span {
  -webkit-user-select: none;
  user-select: none;
}

/* Input Styles */
input,
select,
textarea {
  font-size: 16px !important; /* Prevent iOS zoom */
}

/* HIDE SCROLLBARS */
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none;
}
body,
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

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