/* ============================================================
   OASIS Irrigation Control — CSS
   Themes: dark (default) + light
   Responsive: mobile-first → tablet → desktop
   ============================================================ */

/* ── PWA Install & Update Banners ── */
.pwa-install-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  justify-content: center;
  padding: 0 12px 12px;
  pointer-events: none;
  animation: pwa-slide-up 0.35s ease-out;
}
.pwa-install-content {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  max-width: 420px;
  width: 100%;
  pointer-events: auto;
}
.pwa-install-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.pwa-install-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pwa-install-text strong {
  font-size: 13px;
  color: var(--text-1);
}
.pwa-install-text span {
  font-size: 11px;
  color: var(--text-3);
}
.pwa-install-btn {
  padding: 6px 16px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.pwa-install-btn:hover {
  filter: brightness(1.15);
}
.pwa-install-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}

.pwa-update-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);
  border-bottom: 1px solid var(--accent);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  animation: pwa-slide-down 0.3s ease-out;
}
.pwa-update-btn {
  padding: 4px 14px;
  border-radius: 6px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.pwa-update-btn:hover {
  background: var(--accent);
  color: #fff;
}

@keyframes pwa-slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes pwa-slide-down {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ---- CSS Custom Properties ---- */
:root {
  /* Accent */
  --accent: #00d4ff;
  --accent-dim: #00d4ff30;
  --accent-glow: #00d4ff60;

  /* Zone states */
  --zone-active: #0088ff;
  --zone-active-bg: #0088ff20;
  --zone-active-glow: #0088ff60;
  --zone-inactive: #00b8a9;
  --zone-inactive-bg: #00b8a920;
  --zone-error: #ff4444;
  --zone-error-bg: #ff444420;
  --zone-error-glow: #ff444460;

  /* Irrigation types */
  --type-drip: #00aaff;
  --type-mist: #cc88ff;
  --type-sprinkler: #00ff88;

  /* Status */
  --online: #00ff88;
  --offline: #ff4444;
  --warning: #ffaa44;
  --danger: #ff4444;
  --success: #00ff88;
  --error: #ff5252;

  /* Sizing */
  --header-h: 56px;
  --tabs-h: 44px;
  --bnav-h: 60px;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-0: #060a14;
  --bg-1: #0a0e1a;
  --bg-2: #0d1525;
  --bg-2-rgb: 13, 21, 37;
  --bg-3: #131d30;
  --bg-3-rgb: 19, 29, 48;
  --bg-card: #0d1525;
  --bg-card-rgb: 13, 21, 37;
  --bg-card-hover: #111b2e;
  --bg-hover: #111b2e;
  --border: #1e3050;
  --border-light: #1a2840;
  --text-1: #eef2f7;
  --text-2: #c9d1e0;
  --text-3: #6b8aad;
  --text-muted: #3a5070;
  --shadow: rgba(0, 0, 0, 0.5);
  --modal-bg: rgba(0, 0, 0, 0.7);
}

/* Light theme */
[data-theme="light"] {
  --bg-0: #f0f4f8;
  --bg-1: #f8fafc;
  --bg-2: #ffffff;
  --bg-2-rgb: 255, 255, 255;
  --bg-3: #e8ecf2;
  --bg-3-rgb: 232, 236, 242;
  --bg-card: #ffffff;
  --bg-card-rgb: 255, 255, 255;
  --bg-card-hover: #f1f5f9;
  --bg-hover: #f1f5f9;
  --border: #d0d8e4;
  --border-light: #e2e8f0;
  --text-1: #0f172a;
  --text-2: #334155;
  --text-3: #64748b;
  --text-muted: #94a3b8;
  --shadow: rgba(0, 0, 0, 0.1);
  --modal-bg: rgba(0, 0, 0, 0.4);
  --accent: #0088cc;
  --accent-dim: #0088cc20;
  --accent-glow: #0088cc40;
  --zone-active: #0066dd;
  --zone-active-bg: #0066dd15;
  --zone-active-glow: #0066dd40;
  --zone-inactive: #00897b;
  --zone-inactive-bg: #00897b15;
  --zone-error: #d32f2f;
  --zone-error-bg: #d32f2f15;
  --zone-error-glow: #d32f2f40;
  --online: #16a34a;
  --offline: #dc2626;
  --warning: #d97706;
  --danger: #dc2626;
  --success: #16a34a;
  --error: #dc2626;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}
body {
  background: var(--bg-1);
  color: var(--text-2);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
}
input,
select {
  font: inherit;
  color: inherit;
}
a {
  color: var(--accent);
  text-decoration: none;
}

/* ---- Screens ---- */
.screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- SPLASH ---- */
.splash {
  background: var(--bg-0);
  flex-direction: column;
  animation: splashIn 0.5s ease-out;
  overflow: hidden;
}
.splash-bg-anim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--accent-dim) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, #cc88ff12 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, #00d4aa08 0%, transparent 60%);
  animation: splashBgShift 6s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes splashBgShift {
  0% {
    opacity: 0.4;
    transform: scale(1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.15) rotate(3deg);
  }
}
.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
}
.splash-logo-text {
  user-select: none;
}
.splash-logo-custom {
  max-height: 120px;
  border-radius: 20px;
  box-shadow:
    0 0 40px var(--accent-glow),
    0 8px 32px var(--shadow);
  object-fit: contain;
}
.logo-icon {
  font-size: 64px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 20px var(--accent-glow));
  animation: splashIconFloat 3s ease-in-out infinite alternate;
}
@keyframes splashIconFloat {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-8px);
  }
}
.logo-title {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 8px;
  color: var(--accent);
  text-shadow: 0 0 30px var(--accent-glow);
}
.logo-subtitle {
  color: var(--text-3);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 4px;
}
.logo-version-tag {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--accent);
  opacity: 0.5;
  font-family: "Courier New", monospace;
}
.splash-loader {
  width: 100%;
  max-width: 280px;
  margin: 40px auto 0;
}
.loader-hose {
  position: relative;
  width: 100%;
}
.loader-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.loader-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--type-mist));
  border-radius: 4px;
  animation: loaderGrow 2.2s ease-in-out forwards;
  box-shadow: 0 0 8px var(--accent-glow);
}
/* Nozzle centered below the bar */
.loader-nozzle {
  position: absolute;
  left: 50%;
  top: 2px;
  transform: translateX(-50%);
  opacity: 0;
  animation: nozzleAppear 0.3s ease-out 1.8s forwards;
}
.nozzle-svg {
  filter: drop-shadow(0 0 4px var(--accent-glow));
}
/* Water drop that falls from the nozzle center */
.loader-drop {
  position: absolute;
  left: 50%;
  top: 28px;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  animation:
    dropGlow 1.6s ease-out 2.1s forwards,
    dropFall 0.7s ease-in 3.7s forwards;
}
.loader-drop svg {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
@keyframes nozzleAppear {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}
@keyframes dropGlow {
  0% {
    opacity: 0;
    top: 28px;
    transform: translateX(-50%) scale(0.4);
  }
  20% {
    opacity: 1;
    top: 30px;
    transform: translateX(-50%) scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px var(--accent)) brightness(1.4);
  }
  80% {
    filter: drop-shadow(0 0 8px var(--accent-glow)) brightness(1.1);
  }
  100% {
    opacity: 1;
    top: 30px;
    transform: translateX(-50%) scale(1);
    filter: drop-shadow(0 0 6px var(--accent-glow));
  }
}
@keyframes dropFall {
  0% {
    opacity: 1;
    top: 30px;
    transform: translateX(-50%) scale(1);
  }
  100% {
    opacity: 0;
    top: 72px;
    transform: translateX(-50%) scale(0.3);
  }
}
.splash-version {
  margin-top: 24px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-3);
  opacity: 0.6;
  font-family: "Courier New", monospace;
}
@keyframes loaderGrow {
  0% {
    width: 0;
  }
  85% {
    width: 95%;
  }
  100% {
    width: 100%;
  }
}
@keyframes splashIn {
  0% {
    opacity: 0;
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* ---- LOGIN ---- */
.login {
  background: var(--bg-0);
  overflow: hidden;
  flex-direction: column;
  gap: 0;
}
.login-bg-pattern {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 50% at 30% 15%,
      var(--accent-dim) 0%,
      transparent 70%
    ),
    radial-gradient(ellipse 50% 40% at 75% 85%, #cc88ff18 0%, transparent 65%),
    radial-gradient(circle at 50% 50%, #00d4aa06 0%, transparent 80%);
  animation: loginBgPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes loginBgPulse {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}
.login-card {
  position: relative;
  background: linear-gradient(
    145deg,
    rgba(var(--bg-2-rgb), 0.85),
    rgba(var(--bg-2-rgb), 0.95)
  );
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 36px 28px 30px;
  width: 94%;
  max-width: 400px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(0, 212, 255, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  animation: loginCardIn 0.5s ease-out;
}
.login-card::-webkit-scrollbar {
  display: none;
}
@keyframes loginCardIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Login Logo — centered and large */
.login-logo {
  text-align: center;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login-logo h1 {
  color: var(--accent);
  font-size: 40px;
  letter-spacing: 8px;
  font-weight: 800;
  text-shadow: 0 0 24px var(--accent-glow);
}
.login-logo-custom {
  display: block;
  max-width: 85%;
  max-height: 180px;
  width: auto;
  height: auto;
  border-radius: 20px;
  box-shadow:
    0 0 60px var(--accent-glow),
    0 12px 40px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  margin: 0 auto;
}
.logo-icon-sm {
  font-size: 72px;
  margin-bottom: 8px;
  filter: drop-shadow(0 0 24px var(--accent-glow));
  animation: splashIconFloat 3s ease-in-out infinite alternate;
}
.login-version {
  text-align: center;
  font-size: 10px;
  letter-spacing: 2.5px;
  color: var(--text-3);
  opacity: 0.4;
  margin-bottom: 20px;
  font-family: "Courier New", monospace;
  text-transform: uppercase;
}
.btn-reload-login {
  display: block;
  margin: 12px auto 0;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 12px;
  padding: 6px 18px;
  border-radius: 20px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.btn-reload-login:hover,
.btn-reload-login:active {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
}
.login-label {
  color: var(--text-2);
  font-size: 14px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 500;
}
.login-greeting {
  color: var(--accent);
  font-size: 17px;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 700;
  text-shadow: 0 0 12px var(--accent-glow);
}

/* User cards — premium style */
.user-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Mode picker cards */
.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mode-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(var(--bg-2-rgb), 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mode-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}
.mode-card:active {
  transform: translateY(0) scale(0.98);
}
.mode-card-icon {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.mode-card-icon.guest {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), transparent);
  border: 2px solid #10b981;
  color: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.3);
}
.mode-card-icon.last-user {
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 2px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.mode-card-icon.users {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), transparent);
  border: 2px solid #8b5cf6;
  color: #8b5cf6;
  box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}
.mode-card-info h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}
.mode-card-info p {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 2px;
}
#btn-back-mode {
  margin-top: 12px;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(var(--bg-2-rgb), 0.6);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.25s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.user-card:hover {
  border-color: var(--accent);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 212, 255, 0.15);
}
.user-card:active {
  transform: translateY(0) scale(0.98);
}
.user-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-dim), transparent);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  flex-shrink: 0;
}
.user-card-info h3 {
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
}
.user-card-info p {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 2px;
}

/* PIN pad — refined */
.pin-display {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 24px;
}
.pin-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  transition: all 0.25s ease;
}
.pin-dot.filled {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 0 14px var(--accent-glow),
    0 0 4px var(--accent);
  transform: scale(1.15);
}
.pin-error {
  color: var(--zone-error);
  text-align: center;
  font-size: 13px;
  margin-bottom: 12px;
  animation: shake 0.4s;
}
@keyframes shake {
  10%,
  90% {
    transform: translateX(-2px);
  }
  20%,
  80% {
    transform: translateX(4px);
  }
  30%,
  50%,
  70% {
    transform: translateX(-6px);
  }
  40%,
  60% {
    transform: translateX(6px);
  }
}

.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 280px;
  margin: 0 auto;
}
.pin-key {
  height: 58px;
  border-radius: 14px;
  background: rgba(var(--bg-2-rgb), 0.5);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 24px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.pin-key:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(var(--bg-2-rgb), 0.7);
}
.pin-key:active,
.pin-key.kb-press {
  background: var(--accent-dim);
  border-color: var(--accent);
  transform: scale(0.93);
  box-shadow: 0 0 12px var(--accent-glow);
}
.pin-key-empty {
  visibility: hidden;
}
.pin-key-back {
  font-size: 22px;
  color: var(--text-3);
}
.btn-text {
  color: var(--text-3);
  font-size: 13px;
  margin-top: 20px;
  display: block;
  text-align: center;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}
.btn-text:hover {
  color: var(--accent);
}

/* ---- MAIN APP ---- */
.app {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* Header */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  z-index: 100;
}
.header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-logo-icon {
  font-size: 24px;
}
.header-logo img {
  height: 32px;
  width: auto;
  border-radius: 4px;
}
.header-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 2px;
}
.header-greeting {
  font-size: 12px;
  color: var(--text-3);
}
.header-right {
  display: flex;
  align-items: center;
  gap: 4px;
}
.header-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.status-dot.online {
  background: var(--online);
  box-shadow: 0 0 6px var(--online);
}
.status-dot.offline {
  background: var(--offline);
  box-shadow: 0 0 6px var(--offline);
}
.status-label {
  font-size: 11px;
  color: var(--text-3);
}
.offline-banner {
  background: var(--warning, #f59e0b);
  color: #000;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-btn {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: background 0.2s;
}
.header-btn:hover {
  background: var(--accent-dim);
}
#btn-lang {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* Top Tabs */
.top-tabs {
  display: flex;
  gap: 2px;
  padding: 0 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.top-tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
  position: relative;
}
.tab:hover {
  color: var(--text-2);
  background: var(--accent-dim);
}
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-ipm {
  color: #c084fc;
}
.tab-ipm.active {
  color: #a855f7;
  border-bottom-color: #a855f7;
}
.tab-icon {
  font-size: 14px;
}
.tab-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--zone-error);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
}

/* Alert banner */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--zone-error-bg);
  border-bottom: 1px solid var(--zone-error);
  color: var(--zone-error);
  font-size: 13px;
  flex-shrink: 0;
  animation: slideBannerIn 0.3s;
}
@keyframes slideBannerIn {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
.alert-banner-close {
  color: var(--zone-error);
  font-size: 16px;
  margin-left: auto;
}

/* Content area */
.app-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Bottom Nav */
.bottom-nav {
  display: none;
  flex-shrink: 0;
  height: var(--bnav-h);
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.bnav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--text-3);
  font-size: 10px;
  transition: color 0.2s;
  position: relative;
}
.bnav.active {
  color: var(--accent);
}
.bnav-icon {
  font-size: 20px;
}
.bnav-label {
  font-size: 10px;
}
.bnav-badge {
  position: absolute;
  top: 4px;
  right: 50%;
  transform: translateX(14px);
  background: var(--zone-error);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 8px;
  min-width: 14px;
  text-align: center;
}

/* More menu */
.more-menu-backdrop {
  position: fixed;
  inset: 0;
  background: var(--modal-bg);
  z-index: 200;
}
.more-menu-panel {
  position: fixed;
  bottom: var(--bnav-h);
  left: 0;
  right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 8px 0;
  z-index: 201;
  animation: slideUp 0.2s;
}
@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
.more-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  font-size: 14px;
  color: var(--text-2);
  transition: background 0.2s;
}
.more-item:hover {
  background: var(--accent-dim);
}
.more-badge {
  background: var(--zone-error);
  color: #fff;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
}

/* FAB */
.fab {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 20px var(--accent-glow);
  z-index: 50;
  transition: all 0.2s;
}
.fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 30px var(--accent-glow);
}
.fab:active {
  transform: scale(0.95);
}
.map-active .fab {
  display: none;
}

/* ---- MODALS ---- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--modal-bg);
}
.modal-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.25s;
}
.modal-large {
  max-width: 560px;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2 {
  font-size: 16px;
  color: var(--text-1);
}
.modal-close {
  font-size: 20px;
  color: #ff3b3b;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
  transition: all 0.15s;
}
.modal-close:hover {
  background: rgba(255, 59, 59, 0.15);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}
.modal-body {
  padding: 16px 20px 24px;
}

/* Search input */
.search-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
  transition: border-color 0.2s;
}
.search-input:focus {
  border-color: var(--accent);
}
.search-input::placeholder {
  color: var(--text-muted);
}

/* Quick irrigation zones list */
.quick-zones {
  max-height: 50vh;
  overflow-y: auto;
}
.quick-zone-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.quick-zone-item:hover {
  background: var(--accent-dim);
}
.quick-zone-item .zone-name {
  font-weight: 600;
  color: var(--text-1);
}
.quick-zone-item .zone-esp {
  font-size: 11px;
  color: var(--text-3);
}
.quick-zone-item .zone-type-tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.type-drip {
  background: var(--type-drip);
  color: #000;
}
.type-mist {
  background: var(--type-mist);
  color: #000;
}
.type-sprinkler {
  background: var(--type-sprinkler);
  color: #000;
}

/* Duration presets */
.quick-zone-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  margin-bottom: 16px;
}
.duration-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.dur-btn {
  padding: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  transition: all 0.15s;
}
.dur-btn:hover,
.dur-btn.selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.duration-custom {
  margin-bottom: 20px;
}
.duration-custom label {
  display: block;
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 6px;
}
.duration-custom input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  text-align: center;
  font-size: 18px;
}

/* Quick Run — Running State */
.quick-running-panel {
  text-align: center;
  padding: 8px 0;
}
.quick-running-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.quick-running-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-1);
}
.quick-running-timer {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 2px;
  margin-bottom: 12px;
}
.quick-running-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}
.quick-running-progress {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 1s linear;
}
.quick-running-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-danger {
  width: 100%;
  padding: 14px;
  background: #ef4444;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 1px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger:hover {
  background: #dc2626;
}
.btn-danger:active {
  transform: scale(0.98);
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Buttons */
.btn-primary {
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--radius);
  letter-spacing: 1px;
  transition: all 0.2s;
}
.btn-primary:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 20px var(--accent-glow);
}
.btn-primary:active {
  transform: scale(0.98);
}
.btn-primary.btn-danger {
  background: var(--zone-error);
}
.btn-large {
  padding: 16px;
  font-size: 16px;
}
.btn-outline {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.btn-outline.btn-danger {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.btn-sm {
  padding: 6px 10px;
  font-size: 11px;
  background: transparent;
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
}
.btn-sm:hover {
  background: var(--bg-3);
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
}
.toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 24px;
  cursor: pointer;
  transition: 0.3s;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--text-3);
  border-radius: 50%;
  transition: 0.3s;
}
.toggle input:checked + .toggle-slider {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.toggle input:checked + .toggle-slider::before {
  transform: translateX(17px);
  background: var(--accent);
}

/* Settings — see refined versions below */
.logo-upload {
  display: flex;
  gap: 8px;
}

/* GPH per-zone override section */
.gph-zone-section {
  margin-top: 10px;
}
.gph-zone-toggle {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 0;
  width: 100%;
  text-align: left;
}
.gph-zone-toggle:hover {
  text-decoration: underline;
}
.gph-zone-list {
  margin-top: 8px;
  max-height: 420px;
  overflow-y: auto;
}
.gph-type-group {
  margin-bottom: 10px;
}
.gph-type-hdr {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid transparent;
  margin-bottom: 2px;
}
.gph-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.gph-zone-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  background: var(--bg-3);
  margin-bottom: 3px;
  transition: background 0.15s;
}
.gph-zone-row:hover {
  background: rgba(0, 212, 255, 0.04);
}
.gph-zone-name {
  flex: 1;
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gph-zone-input {
  width: 64px;
  height: 30px;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 14px;
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  outline: none;
}
.gph-zone-input:focus {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.06);
}
.gph-zone-input::placeholder {
  color: var(--text-3);
  font-weight: 400;
}
.gph-zone-unit {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  min-width: 28px;
}
/* Type-colored left borders */
.type-border-drip {
  border-left-color: var(--type-drip) !important;
}
.type-border-mist {
  border-left-color: var(--type-mist) !important;
}
.type-border-sprinkler {
  border-left-color: var(--type-sprinkler) !important;
}

/* ============================================================
   VIEW: Dashboard
   ============================================================ */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.dash-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.2s;
}
.dash-card:hover {
  border-color: var(--accent);
}
.dash-card-label {
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.dash-card-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--accent);
}
.dash-card-sub {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.dash-card.active .dash-card-value {
  color: var(--zone-active);
}
.dash-card.error .dash-card-value {
  color: var(--zone-error);
}

.dash-section-title {
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Active zones list in dashboard */
.active-zone-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg-card);
  border: 1px solid var(--zone-active-bg);
  border-left: 3px solid var(--zone-active);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  animation: pulseGlow 2s infinite;
}
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: none;
  }
  50% {
    box-shadow: 0 0 10px var(--zone-active-bg);
  }
}
.active-zone-row .az-name {
  font-weight: 600;
  color: var(--text-1);
  flex: 1;
}
.active-zone-row .az-timer {
  font-family: monospace;
  font-size: 16px;
  color: var(--zone-active);
  font-weight: 700;
}
.active-zone-row .az-stop {
  padding: 4px 10px;
  background: var(--zone-error-bg);
  border: 1px solid var(--zone-error);
  border-radius: var(--radius-sm);
  color: var(--zone-error);
  font-size: 11px;
  font-weight: 600;
}
.active-zone-row .az-stop:hover {
  background: var(--zone-error);
  color: #fff;
}

/* Dashboard status notifications */
.dash-status-notif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  gap: 8px;
}
.dash-notif-warn {
  background: rgba(234, 179, 8, 0.1);
  border: 1px solid rgba(234, 179, 8, 0.3);
  color: #eab308;
}
.dash-notif-fail {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.dash-notif-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  color: inherit;
  opacity: 0.6;
  padding: 2px 6px;
  border-radius: 4px;
  transition: opacity 0.15s;
}
.dash-notif-x:hover {
  opacity: 1;
}

/* Dashboard Quick Run bar */
.dash-qr-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  gap: 12px;
}

/* Dashboard schedule rows */
.dash-scheds-list {
  margin-bottom: 4px;
}
.dash-sched-summary {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.dash-sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
  font-size: 12px;
}
.dash-sched-row:last-child {
  border-bottom: none;
}
.dash-sched-off {
  opacity: 0.45;
}
.dash-sched-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 52px;
}
.dash-sched-zone {
  flex: 1;
  color: var(--text-1);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sched-days {
  color: var(--text-3);
  font-size: 11px;
  min-width: 70px;
}
.dash-sched-dur {
  color: var(--accent);
  min-width: 44px;
  text-align: right;
  font-weight: 700;
  font-size: 11px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}
.dash-sched-st {
  font-size: 13px;
}

/* Dashboard AM/PM mini rows */
.dash-ampm-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-light);
}
.dash-ampm-icon {
  font-size: 13px;
}
.dash-ampm-label {
  color: var(--text-1);
  min-width: 22px;
}
.dash-ampm-count {
  font-size: 10px;
  color: var(--accent);
  margin-left: auto;
  font-weight: 600;
}
.dash-seq-hint {
  margin-top: 6px;
  font-size: 11px;
  color: var(--accent);
  padding: 3px 8px;
  background: var(--accent-dim);
  border-radius: 6px;
  text-align: center;
}

/* Dashboard config items (Rain Delay / Override) */
.dash-cfg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.dash-cfg-icon {
  font-size: 22px;
}
.dash-cfg-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dash-cfg-text strong {
  font-size: 13px;
  color: var(--text-1);
}
.dash-cfg-desc {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.3;
}
.dash-cfg-off {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* Dashboard pressure indicator */
.dash-pressure-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.dp-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.dp-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dp-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}
.dp-high {
  color: #22c55e;
}
.dp-low {
  color: #f59e0b;
}
.dp-off {
  color: var(--text-3);
}
.dp-hint {
  font-size: 11px;
  color: var(--text-3);
}

/* ── Pressure Pill (shared across views) ── */
.pressure-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.pressure-pill:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.pp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pp-dot-high {
  background: #22c55e;
  box-shadow: 0 0 6px #22c55e80;
}
.pp-dot-low {
  background: #f59e0b;
  box-shadow: 0 0 6px #f59e0b80;
}
.pp-dot-off {
  background: var(--text-3);
}
.pp-text {
  white-space: nowrap;
}
.pp-high .pp-text {
  color: #22c55e;
}
.pp-low .pp-text {
  color: #f59e0b;
}
.pp-off .pp-text {
  color: var(--text-3);
}
.pp-hint {
  color: var(--text-3);
  font-weight: 400;
  font-size: 10px;
}
.pp-edit {
  font-size: 13px;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-left: 2px;
}
.pressure-pill:hover .pp-edit {
  opacity: 1;
}

.pp-dash {
  margin-bottom: 10px;
}
.pp-zones {
  margin-bottom: 8px;
}

/* Map pressure pill overlay */
.map-pressure-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  z-index: 16;
  pointer-events: auto;
}
.map-pressure-overlay .pressure-pill {
  background: rgba(var(--bg-card-rgb, 30, 30, 30), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-color: rgba(255, 255, 255, 0.08);
  font-size: 10px;
  padding: 3px 8px;
}

/* Timeline pressure band */
.sv-tl-pressure-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(34, 197, 94, 0.12);
  border-left: 1.5px dashed rgba(34, 197, 94, 0.4);
  border-right: 1.5px dashed rgba(34, 197, 94, 0.4);
  z-index: 2;
  pointer-events: none;
}
.sv-tl-ldot-pressure {
  background: rgba(34, 197, 94, 0.3);
  border: 1.5px dashed rgba(34, 197, 94, 0.6);
}

/* Weekly view pressure window */
.sv-wk-pressure {
  font-size: 9px;
  color: #22c55e;
  font-weight: 600;
  padding: 2px 0;
  opacity: 0.8;
  letter-spacing: 0.3px;
}

/* Pressure schedule editor (settings) */
.ps-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ps-hdr-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 48px;
  gap: 8px;
  padding: 0 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ps-hdr {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.ps-day-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 48px;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bg-3, #1a1a1a);
  border: 1px solid rgba(255,255,255,.06);
  transition: background .15s, border-color .15s;
}
.ps-day-row:hover {
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ps-day-row.ps-day-off {
  opacity: .4;
}
.ps-day-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: .3px;
}
.ps-day-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-3);
  margin-top: 1px;
}
.ps-time {
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2, #1e1e1e);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  width: 100%;
  text-align: center;
  transition: border-color .15s;
}
.ps-time:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px rgba(33,150,243,.2);
}

/* ============================================================
   VIEW: Zones Grid
   ============================================================ */
.zones-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.zones-toolbar .search-input {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.filter-btn {
  padding: 6px 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  color: var(--text-3);
  transition: all 0.2s;
}
.filter-btn.active,
.filter-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.zones-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}
.zone-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.zone-card.zc-type-drip {
  border-left-color: var(--type-drip);
}
.zone-card.zc-type-mist {
  border-left-color: var(--type-mist);
}
.zone-card.zc-type-sprinkler {
  border-left-color: var(--type-sprinkler);
}
.zone-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--shadow);
}
.zone-card.zc-type-drip:hover {
  border-color: var(--type-drip);
}
.zone-card.zc-type-mist:hover {
  border-color: var(--type-mist);
}
.zone-card.zc-type-sprinkler:hover {
  border-color: var(--type-sprinkler);
}
/* ── Active card: Neon Pulse + Type-colored Beam ── */
.zone-card.active {
  --beam-c1: var(--zone-active);
  --beam-c2: #00ffaa;
  border-color: var(--zone-active);
  border-left-color: var(--zone-active);
  background: var(--zone-active-bg);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: zoneActivePulse 3.5s ease-in-out infinite;
  overflow: hidden;
}
/* Type-specific beam colors */
.zone-card.active.zc-type-drip {
  --beam-c1: #00aaff;
  --beam-c2: #00ddff;
}
.zone-card.active.zc-type-sprinkler {
  --beam-c1: #00ff88;
  --beam-c2: #00cc66;
}
.zone-card.active.zc-type-mist {
  --beam-c1: #cc88ff;
  --beam-c2: #aa55ff;
}

/* Border Beam — glowing arc, type-colored, 2px wide */
.zone-card.active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0deg,
    var(--beam-c1) 25deg,
    var(--beam-c2) 55deg,
    transparent 80deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  animation: beamSpin 2.8s linear infinite;
  pointer-events: none;
  z-index: 1;
  opacity: 0.85;
}

@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes beamSpin {
  to {
    --beam-angle: 360deg;
  }
}

/* Breathing glow — slow, elegant */
@keyframes zoneActivePulse {
  0%, 100% {
    box-shadow: 0 0 4px rgba(0, 170, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 22px rgba(0, 170, 255, 0.2), 0 0 40px rgba(0, 170, 255, 0.06);
  }
}
.zone-card.error {
  border-color: var(--zone-error);
  border-left-color: var(--zone-error);
  background: var(--zone-error-bg);
}

.zone-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 6px;
}
.zone-card-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.zc-hdr-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.zone-card-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--zone-inactive);
  flex-shrink: 0;
}
.zone-card.active .zone-card-led {
  background: var(--zone-active);
  box-shadow: 0 0 8px var(--zone-active-glow), 0 0 16px var(--zone-active-glow);
  animation: ledBlink 2s ease-in-out infinite;
}
.zone-card.error .zone-card-led {
  background: var(--zone-error);
  box-shadow: 0 0 8px var(--zone-error-glow);
}
@keyframes ledBlink {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px var(--zone-active-glow), 0 0 18px var(--zone-active-glow);
  }
  50% {
    opacity: 0.5;
    box-shadow: 0 0 4px var(--zone-active-glow);
  }
}

.zc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.zone-card-type {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.zone-card-esp {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 500;
}
.zc-gph {
  font-size: 10px;
  color: var(--text-3);
}
.zone-card-timer {
  font-family: monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--zone-active);
  margin-top: 6px;
  text-shadow: 0 0 8px rgba(0, 170, 255, 0.5);
  letter-spacing: 0.5px;
}
.zc-stop-btn {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  border: none;
  border-radius: 6px;
  background: var(--danger, #ef4444);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.zc-stop-btn:active {
  opacity: 0.7;
}

/* ── Zone card info rows ── */
.zc-info {
  margin-top: 7px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.zc-info-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.zc-info-icon {
  font-size: 11px;
  flex-shrink: 0;
  line-height: 1;
}
.zc-info-val {
  color: var(--text-2);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-next-in {
  color: var(--accent);
  font-weight: 700;
}
.zc-none {
  color: var(--text-3);
  font-style: italic;
}
.zc-urg-ok {
  color: #22c55e;
  font-weight: 700;
}
.zc-urg-warn {
  color: #eab308;
  font-weight: 700;
}
.zc-urg-crit {
  color: #ef4444;
  font-weight: 700;
}
.zc-days-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.zc-days-row .zd-day-dot {
  width: 22px;
  height: 22px;
  font-size: 9px;
  font-weight: 800;
}
.zone-card-timer-paused {
  opacity: 0.4;
}

/* ── Pending ACK state ── */
.zone-card.pending-ack {
  border-color: #eab308;
  background: rgba(234, 179, 8, 0.08);
  animation: pendingPulse 1.5s infinite;
}
.zone-card.pending-ack .zone-card-led {
  background: #eab308;
  box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
  animation: ledBlink 0.7s infinite;
}
@keyframes pendingPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 transparent;
    border-color: #eab308;
  }
  50% {
    box-shadow: 0 0 12px rgba(234, 179, 8, 0.2);
    border-color: #ca8a04;
  }
}
.zone-card-pending {
  font-size: 11px;
  color: #eab308;
  margin-top: 4px;
  font-weight: 600;
  animation: pendingTextBlink 1.2s infinite;
}
.zone-card-failed {
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
  font-weight: 600;
}
.zone-clear-failed {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.2s;
}
.zone-clear-failed:hover {
  background: #ef444420;
}
.zone-failed-x {
  font-size: 14px;
  opacity: 0.5;
  margin-left: 6px;
}
.zone-clear-failed:hover .zone-failed-x {
  opacity: 1;
}
@keyframes pendingTextBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Map SVG pending overlay */
.mz-pend {
  animation: mzPendPulse 1.5s infinite;
}
@keyframes mzPendPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.mp-pend-alert {
  border-bottom: none !important;
}

/* ============================================================
   VIEW: Interactive Map v2 — Professional
   ============================================================ */

/* When map view is active, fill remaining space inline (no fullscreen overlay) */
.app-content.m-active {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  max-width: none !important;
  background: #0b1017;
}

/* ── Compact header/clock/tabs when map is active ── */
.map-active .app-header {
  height: 36px;
  padding: 0 10px;
}
.map-active .header-logo-icon {
  font-size: 18px;
}
.map-active .header-logo img {
  height: 24px;
}
.map-active .header-title {
  font-size: 13px;
  letter-spacing: 1.5px;
}
.map-active .header-greeting {
  display: none;
}
.map-active .header-btn {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.map-active #btn-lang {
  font-size: 10px;
}
.map-active .header-status {
  margin-right: 4px;
}
.map-active .status-label {
  display: none;
}

.map-active .global-clock {
  height: 22px;
  padding: 0 10px;
  gap: 6px;
  border-bottom: none;
}
.map-active .retro-clock-time {
  font-size: 11px;
}
.map-active .retro-clock-ampm {
  font-size: 7px;
}
.map-active #retro-clock-date {
  font-size: 9px;
}
.map-active .rc-sub {
  display: none;
}
.map-active .rc-wk-bar {
  width: 30px;
}
.map-active .retro-clock-week-big {
  font-size: 11px;
}
.map-active .rc-wk-pct {
  font-size: 8px;
}
.map-active .rc-wk-lbl {
  font-size: 8px;
}

.map-active .top-tabs {
  padding: 0 8px;
}
.map-active .tab {
  padding: 5px 10px;
  font-size: 11px;
}
.map-active .tab-icon {
  font-size: 12px;
}

/* Desktop: hide redundant map back/nav (header + tabs already visible) */
@media (min-width: 1025px) {
  .m-active .m-back {
    display: none;
  }
  .m-active .m-nav {
    display: none;
  }
  .m-active .m-title {
    display: none;
  }
  .m-active .m-chip {
    display: none;
  }
}
/* Mobile: hide clock on map to save space */
@media (max-width: 768px) {
  .map-active .global-clock {
    display: none;
  }
}

/* Map floating clock overlay */
.map-clock-overlay {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 16;
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(10, 12, 20, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 180, 50, 0.2);
  border-radius: 20px;
  padding: 4px 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.5),
    0 0 12px rgba(255, 180, 50, 0.06);
  pointer-events: none;
}
@media (min-width: 769px) {
  .map-clock-overlay {
    display: flex;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .map-clock-overlay {
    bottom: auto;
    top: 10px;
  }
}
.map-clock-time {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: 900;
  color: #ffb432;
  text-shadow: 0 0 8px rgba(255, 180, 50, 0.5);
  letter-spacing: 1px;
}
.map-clock-sep {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 900;
}
.map-clock-week {
  font-size: 11px;
  font-weight: 800;
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
  letter-spacing: 0.5px;
}

/* ── Root container — fills ALL remaining space, split layout on desktop ── */
.m {
  position: relative;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* ── Left side-panel (slide-in on mobile/tablet, fixed on desktop) ── */
.m-side {
  display: flex;
  flex-direction: column;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 22;
  width: 300px;
  min-width: 260px;
  max-width: 360px;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  box-shadow: none;
}
.m-side.ms-open {
  transform: translateX(0);
  box-shadow: 4px 0 24px rgba(0,0,0,0.4);
}
.m-side .m-side-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.m-side.ms-collapsed {
  width: 44px !important;
  min-width: 44px;
}
.m-side.ms-collapsed .m-side-body {
  display: none;
}

/* ── Tab strip (icon buttons on the left edge) ── */
.ms-tabs {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  min-width: 44px;
  flex-shrink: 0;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: 4px 0;
}
.ms-tab {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  margin: 2px 0;
}
.ms-tab:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
.ms-tab.ms-tab-active {
  background: var(--accent-dim);
  color: var(--accent);
}
.ms-tab-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 15px;
  height: 15px;
  border-radius: 8px;
  padding: 0 3px;
  background: #ef4444;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
}
.ms-tab-collapse {
  margin-top: auto;
  margin-bottom: 4px;
}

/* ── Panel content area ── */
.ms-panels {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 11px;
  display: flex;
  flex-direction: column;
}
.ms-panel-tab {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.ms-tab-hidden {
  display: none !important;
}

/* Panel titles */
.ms-panel-title {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 0 0 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

/* Node status chips */
.ms-node-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 11px;
}
.ms-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid var(--border);
}
.ms-nc-on {
  background: rgba(0, 204, 136, 0.12);
  border-color: rgba(0, 204, 136, 0.35);
  color: #00cc88;
}
.ms-nc-off {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.35);
  color: #ef4444;
}
.ms-nc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.ms-nc-id {
  line-height: 1;
}

/* Stat cards (3-col grid) */
.ms-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-bottom: 11px;
}
.ms-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 5px;
  text-align: center;
}
.ms-stat-accent {
  border-color: rgba(0, 212, 255, 0.35);
  background: rgba(0, 212, 255, 0.07);
}
.ms-stat-warn {
  border-color: rgba(255, 170, 68, 0.35);
  background: rgba(255, 170, 68, 0.07);
}
.ms-stat-ok {
  border-color: rgba(0, 204, 136, 0.35);
  background: rgba(0, 204, 136, 0.07);
}
.ms-stat-val {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
  display: block;
}
.ms-stat-lbl {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: block;
}
.ms-stat-denom {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
}

/* Info / description text */
.ms-info-txt {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 7px;
}
.ms-info-accent {
  color: var(--accent);
  font-weight: 700;
}

/* Action buttons */
.ms-btn-row {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
}
.ms-action-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  display: block;
  margin-bottom: 5px;
}
.ms-action-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.ms-action-btn.ms-btn-accent {
  background: linear-gradient(135deg, var(--accent), #0088ff);
  color: #000;
  border-color: transparent;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.ms-action-btn.ms-btn-accent:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ms-action-btn.ms-btn-green {
  background: linear-gradient(135deg, #00cc88, #00ff88);
  color: #000;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(0, 204, 136, 0.3);
}
.ms-action-btn.ms-btn-green:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.ms-action-btn.ms-btn-warn {
  background: rgba(255, 170, 68, 0.12);
  color: #ffaa44;
  border-color: rgba(255, 170, 68, 0.3);
}
.ms-action-btn.ms-btn-warn:hover {
  background: rgba(255, 170, 68, 0.22);
}
.ms-action-btn.ms-btn-danger-outline {
  background: transparent;
  color: var(--zone-error);
  border-color: var(--zone-error);
}
.ms-action-btn.ms-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* Rain delay chip options */
.ms-rd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 9px;
}
.ms-rd-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  min-width: 48px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  gap: 1px;
}
.ms-rd-chip:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.ms-rd-chip:hover .ms-rdc-val {
  color: var(--accent);
}
.ms-rdc-val {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
  display: block;
}
.ms-rdc-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  display: block;
}

.m-side-hd {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
}
.m-side-hd h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.3px;
}
.m-side-body {
  flex: 1;
  padding: 14px 16px;
  overflow-y: auto;
}
.m-side-section {
  margin-bottom: 14px;
}

/* Section headers */
.ms-sec-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-3);
  margin: 0 0 8px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ms-sec-icon {
  font-size: 13px;
}
.ms-sec-pulse {
  animation: mLed 1.5s infinite;
}

/* Stats row */
.m-side-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-side-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  margin-bottom: 0;
  font-size: 12px;
  color: var(--text-2);
}
.msc-stat {
  text-align: center;
  padding: 12px 8px;
}
.msc-stat .msc-val {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
}
.msc-stat .msc-label {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.msc-active .msc-val {
  color: var(--zone-active);
}
.msc-failing .msc-val {
  color: var(--text-3);
}
.msc-failing-active .msc-val {
  color: #ef4444;
}
.msc-missions .msc-val {
  color: var(--text-3);
}
.msc-missions-active .msc-val {
  color: #eab308;
}
.msc-vendidas .msc-val {
  color: #22c55e;
}
.msc-ipm .msc-val {
  color: #a855f7;
}
/* 4-col grid for inventory stats section */
#ms-inv-stats {
  grid-template-columns: 1fr 1fr;
}
.msc-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.msc-clickable:hover {
  border-color: var(--text-3);
  background: var(--bg-hover);
}
/* Top-5 popup inside side panel */
.ms-inv-top-popup {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin: 6px 0 10px;
  overflow: hidden;
}
.ms-itp-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.ms-itp-close {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.ms-itp-list {
  padding: 4px 0;
}
.ms-itp-row {
  display: block;
  width: 100%;
  padding: 6px 12px 8px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-1);
}
.ms-itp-row:hover {
  background: var(--bg-hover);
}
.ms-itp-top {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 4px;
}
.ms-itp-rank {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  min-width: 14px;
  text-align: center;
}
.ms-itp-field {
  font-size: 13px;
  font-weight: 700;
  flex: 1;
}
.ms-itp-val {
  font-size: 12px;
  font-weight: 700;
}
.ms-itp-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}
.ms-itp-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}

/* Active zones sidebar list */
.ms-active-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
  background: rgba(0, 136, 255, 0.06);
  border: 1px solid rgba(0, 136, 255, 0.15);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--zone-active);
}
.ms-az-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zone-active);
  animation: mLed 1s infinite;
  flex-shrink: 0;
}
.ms-az-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-az-timer {
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 136, 255, 0.25);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.5px;
  min-width: 52px;
  text-align: center;
}
.ms-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 8px 0;
  text-align: center;
}

/* Feature cards */
.ms-feat-card {
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-feat-status {
  font-size: 12px;
  color: var(--text-3);
}
.ms-status-on {
  color: var(--zone-active);
  font-weight: 700;
}
.ms-status-warn {
  color: var(--warning, #ffaa44);
}

/* Feature action buttons (premium) */
.ms-feat-btn {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.ms-btn-accent {
  background: linear-gradient(135deg, var(--accent), #0088ff);
  color: #000;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.ms-btn-accent:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
  transform: translateY(-1px);
}
.ms-btn-warn {
  background: rgba(255, 170, 68, 0.15);
  color: #ffaa44;
  border: 1px solid rgba(255, 170, 68, 0.3);
}
.ms-btn-warn:hover {
  background: rgba(255, 170, 68, 0.25);
}
.ms-btn-green {
  background: linear-gradient(135deg, #00cc88, #00ff88);
  color: #000;
  box-shadow: 0 2px 8px rgba(0, 204, 136, 0.3);
}
.ms-btn-green:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px rgba(0, 204, 136, 0.4);
  transform: translateY(-1px);
}

/* Rain delay chip buttons */
.ms-rd-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-rd-desc {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  margin-bottom: 4px;
}
.ms-rd-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.ms-rd-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  min-width: 56px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  gap: 1px;
}
.ms-rd-opt:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.ms-rd-opt:hover .ms-rd-val {
  color: var(--accent);
}
.ms-rd-val {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
}
.ms-rd-unit {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
}
.ms-rd-off {
  color: var(--text-3);
  font-size: 12px;
}
.ms-rd-active-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: rgba(234, 179, 8, 0.08);
  border: 1px solid rgba(234, 179, 8, 0.25);
}
.ms-rd-active-icon {
  font-size: 24px;
}
.ms-rd-active-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ms-rd-active-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--zone-active);
}
.ms-rd-active-time {
  font-size: 12px;
  color: var(--text-2);
}
.ms-btn-danger-outline {
  margin-top: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--zone-error);
  background: transparent;
  color: var(--zone-error);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  width: 100%;
  text-align: center;
}
.ms-btn-danger-outline:hover {
  background: rgba(239, 68, 68, 0.12);
}
.ms-ov-active-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ms-ov-detail {
  font-size: 12px;
  color: var(--text-2);
}
.ms-chip-btn {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.ms-chip-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}
.ms-chip-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ms-chip-danger {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.ms-chip-danger:hover {
  background: var(--zone-error-bg);
}

/* ── Inline schedule form (side panel) ── */
.ms-add-btn {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.ms-add-btn:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.ms-sched-btns {
  display: flex;
  gap: 6px;
}
.ms-inline-form {
  margin-top: 8px;
  padding: 12px !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
  animation: msFormIn 0.2s ease;
}
@keyframes msFormIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ms-if-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.ms-if-close {
  background: none;
  border: none;
  color: var(--text-3);
  font-size: 18px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.ms-if-close:hover {
  color: var(--zone-error);
}
.ms-if-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ms-if-field > label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ms-if-select {
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
  font-family: inherit;
}
/* Zone radio-button list */
.ms-zone-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.ms-zone-list::-webkit-scrollbar {
  width: 5px;
}
.ms-zone-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
.ms-zl-group {
  padding: 0;
}
.ms-zl-group-hd {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.ms-zl-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.12s;
  font-size: 12px;
  color: var(--text-1);
}
.ms-zl-item:hover {
  background: rgba(0, 212, 255, 0.07);
}
.ms-zl-item input[type="radio"] {
  accent-color: var(--accent);
  margin: 0;
  flex-shrink: 0;
}
.ms-zl-item input[type="radio"]:checked ~ .ms-zl-name {
  color: var(--accent);
  font-weight: 700;
}
.ms-zl-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.ms-zl-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-if-time {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ms-if-sep {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-2);
}
.ms-if-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
}
.ms-if-stepper-wide {
  width: fit-content;
}
.ms-if-step-btn {
  width: 28px;
  height: 28px;
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-if-step-btn:hover {
  background: rgba(0, 212, 255, 0.1);
}
.ms-if-step-val {
  min-width: 28px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  font-family: "SF Mono", Consolas, monospace;
}
.ms-if-unit {
  font-size: 11px;
  color: var(--text-3);
  margin-left: 6px;
  font-weight: 600;
}
.ms-if-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ms-if-day {
  width: 32px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
.ms-if-day:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ms-if-day.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}
.ms-if-submit {
  margin-top: 2px;
}

/* Duration h+m picker (shared across all forms) */
.ms-dur-hm {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ms-dur-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 20px;
}
.ms-dur-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-3);
  width: fit-content;
}
.ms-dur-input {
  width: 38px;
  height: 34px;
  text-align: center;
  border: none;
  background: transparent;
  color: var(--text-1);
  font-size: 16px;
  font-weight: 700;
  outline: none;
  font-family: "SF Mono", Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.ms-dur-input:focus {
  background: rgba(0, 212, 255, 0.06);
}
.ms-dur-step {
  width: 32px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ms-dur-step:hover {
  background: rgba(0, 212, 255, 0.1);
}
.ms-dur-step:active {
  background: rgba(0, 212, 255, 0.2);
}

/* Compact tp-display variant for side panel */
.tp-display-sm {
  padding: 6px 10px;
}
.tp-display-sm .tp-time-show {
  font-size: 18px;
}

/* Prevent text selection during hold-repeat */
.tp-min-step,
.ms-dur-step,
.ms-if-step-btn {
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* ── Sidebar toggle button ── */
.ms-side-toggle {
  display: flex;
  position: absolute;
  top: 52px;
  left: 8px;
  z-index: 25;
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text-1);
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
  align-items: center;
  justify-content: center;
  transition: left 0.25s ease, background 0.15s;
}
.ms-side-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.ms-side-toggle:active {
  transform: scale(0.92);
}

/* ── Sidebar header (close btn) ── */
.m-side-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--bg-2), var(--bg-card));
  flex-shrink: 0;
}
.m-side-hdr-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.3px;
}
.m-side-close {
  background: rgba(255,59,59,0.1);
  border: none;
  color: #ff3b3b;
  font-size: 26px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: all 0.15s;
  text-shadow: 0 0 6px rgba(255,59,59,0.4);
}
.m-side-close:hover {
  background: rgba(255,59,59,0.2);
  color: #ff1a1a;
  text-shadow: 0 0 12px rgba(255,59,59,0.7);
}

/* ── Tablet (769–1024px): same slide-in as mobile ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .m-side {
    width: 300px;
  }
}

/* ── Desktop (1025px+): sidebar always visible in flow ── */
@media (min-width: 1025px) {
  .ms-side-toggle {
    display: none;
  }
  .m-side-hdr {
    display: none;
  }
  .m-side {
    position: relative;
    display: flex;
    flex-direction: column;
    transform: none;
    box-shadow: none;
  }
  .m-side .m-side-body {
    flex: 1;
    overflow-y: auto;
  }
}
@media (min-width: 1400px) {
  .m-side {
    width: 380px;
  }
}

/* ── Map wrapper — fills remaining space to the right ── */
.m-wrap {
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #0b1017;
  touch-action: none;
  cursor: grab;
}
.m-wrap:active {
  cursor: grabbing;
}

/* ── Floating toolbar top-left ── */
.m-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 8px;
  background: transparent;
  pointer-events: auto;
}
@media (min-width: 769px) {
  .m-bar {
    gap: 8px;
    padding: 8px 12px;
  }
}
.m-bar-l {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}
.m-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.m-back:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-card-hover);
}
.m-back:active {
  transform: scale(0.93);
}
.m-bar-r {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 768px) {
  .m-title {
    font-size: 12px;
    max-width: 80px;
  }
  .m-chip {
    display: none;
  }
  .m-btn-txt {
    display: none;
  }
  .m-zbtn {
    width: 28px;
    height: 28px;
  }
  .global-clock {
    height: 26px;
    padding: 0 10px;
    gap: 7px;
  }
  .rc-sep-wk {
    display: none;
  }
  .rc-week-row {
    display: none;
  }
  #retro-clock-sub {
    display: none;
  }
}
.m-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--bg-3);
  color: var(--text-3);
  white-space: nowrap;
}
.m-chip-on {
  background: var(--zone-active-bg);
  color: var(--zone-active);
}

/* ── Map top nav icons ── */
.m-nav {
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.m-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 28px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 4px;
  border: none;
  background: transparent;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  opacity: 0.55;
}
.m-nav-btn:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
}
.m-nav-btn.m-nav-active {
  opacity: 1;
  background: rgba(0, 212, 255, 0.12);
}

/* ── Buttons ── */
.m-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1.3;
}
.m-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-card-hover);
}
.m-btn:active {
  transform: scale(0.97);
}
.m-btn svg {
  flex-shrink: 0;
}
.m-btn-txt {
}
.m-btn-edit {
  border-color: var(--accent-dim);
  color: var(--accent);
}
.m-btn-cy {
  border-color: var(--accent);
  color: var(--accent);
}
.m-btn-gn {
  border-color: var(--online);
  color: var(--online);
}
.m-btn-gn:hover {
  background: rgba(0, 255, 136, 0.08);
}
.m-btn-rd {
  border-color: var(--zone-error);
  color: var(--zone-error);
}
.m-btn-rd:hover {
  background: rgba(255, 68, 68, 0.08);
}

/* ── Zoom group — floating top-right ── */
/* ── Map Navigation Control (D-pad + Zoom) ── */
/* Hide old zoom group if still present */
.m-zgrp {
  display: none;
}

/* ── Zoom level indicator ── */
.m-zlvl {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.85);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 2px 10px;
  z-index: 12;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.m-zlvl.m-zlvl-show {
  opacity: 1;
}

/* ── Edit bar — floating overlay below toolbar ── */
.m-ebar {
  position: absolute;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 14;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(var(--bg-3-rgb, 20, 24, 32), 0.92);
  border-bottom: 1px solid var(--accent-dim);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.m-ebar[hidden] {
  display: none !important;
}
.m-ehint {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  flex: 1;
  margin: 0;
}
.m-ebtns {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

/* ── Viewport — sized by JS, transform for zoom/pan ── */
.m-vp {
  transform-origin: 0 0;
  will-change: transform;
}
.m-vp.m-smooth {
  transition: transform 0.22s cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── Background image ── */
.m-img {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* ── Empty state ── */
.m-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 40px;
}
.m-empty-lbl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: center;
  color: var(--text-3);
  padding: 32px;
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  transition:
    border-color 0.2s,
    color 0.2s;
}
.m-empty-lbl:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.m-empty-t {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 600;
}
.m-empty-s {
  font-size: 12px;
  color: var(--text-3);
}

/* ── SVG layers ── */
.m-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.m-dsv {
  pointer-events: none;
}

/* ── HTML labels overlay (spread across polygon area) ── */
.m-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  will-change: contents;
}
.ml-zone {
  position: absolute;
  transform: scale(var(--lbl-scale, 1));
  transform-origin: center;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  overflow: visible;
  text-shadow:
    0 1px 4px rgba(0, 0, 0, 1),
    0 0 8px rgba(0, 0, 0, 0.8);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (hover: hover) {
  .ml-hover {
    transform: scale(calc(var(--lbl-scale, 1) * 1.35)) !important;
    z-index: 10 !important;
  }
  .ml-hover .ml-name {
    background: rgba(0, 0, 0, 0.75);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  }
  .ml-hover .ml-timer {
    font-size: 15px;
    background: rgba(0, 0, 0, 0.75);
  }
}
.ml-name {
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.5px;
  white-space: nowrap;
  text-align: center;
  line-height: 1.2;
  background: rgba(0, 0, 0, 0.45);
  padding: 1px 5px;
  border-radius: 3px;
  max-width: none;
}
.ml-sm .ml-name {
  font-size: 7px;
  letter-spacing: 0.3px;
  padding: 0 3px;
}
.ml-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.6);
  padding: 1px 6px;
  border-radius: 4px;
  text-shadow: none;
  line-height: 1.2;
}
.ml-status {
  font-size: 12px;
  line-height: 1;
}
.ml-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  line-height: 1;
  margin-top: 1px;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 3px;
}
.ml-type-tag {
  font-size: 7px;
  font-weight: 800;
  padding: 1px 3px;
  border-radius: 3px;
  letter-spacing: 0.3px;
  line-height: 1;
}
.ml-urg {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.ml-on .ml-name {
  color: #80d0ff;
}
.ml-fail .ml-name {
  color: #ff8888;
}
.ml-pend .ml-name {
  color: #fcd34d;
}
.ml-next {
  font-size: 8px;
  font-weight: 700;
  color: rgba(255, 255, 160, 0.95);
  white-space: nowrap;
  background: rgba(0, 0, 0, 0.5);
  padding: 1px 4px;
  border-radius: 3px;
  text-shadow: none;
  line-height: 1.2;
  margin-top: 1px;
}
/* Narrow-tall zone labels (OH hoop houses) */
.ml-narrow {
  gap: 2px;
}
.ml-narrow .ml-name {
  font-size: 8px;
  padding: 1px 3px;
  letter-spacing: 0.3px;
}
.ml-narrow .ml-type-tag {
  font-size: 7px;
  padding: 1px 3px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 3px;
}
.ml-narrow .ml-urg {
  font-size: 10px;
  background: rgba(0, 0, 0, 0.55);
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 900;
}
.ml-narrow .ml-next {
  font-size: 6px;
  padding: 1px 3px;
}

/* ── Zone Badges ── */
.m-badges {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.zb-badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: auto;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 9px;
  background: rgba(60, 60, 70, 0.5);
  backdrop-filter: blur(3px);
  transform: scale(var(--lbl-scale, 1));
  transform-origin: right top;
  transition: opacity 0.2s ease, filter 0.2s ease;
  z-index: 5;
  opacity: 0.8;
}
.zb-badge:hover {
  opacity: 1;
  filter: brightness(1.3);
}
.zb-desh {
  font-size: 8px;
  line-height: 1;
  filter: saturate(0.55) brightness(0.85);
}
.zb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: rgba(180, 60, 60, 0.75);
  color: rgba(255, 255, 255, 0.9);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
}
.zb-fail {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 8px;
  color: rgba(200, 160, 60, 0.85);
  font-weight: 600;
  line-height: 1;
}

/* ── Badge Quick-Actions Popup ── */
.zb-popup {
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--border, #334155);
  border-radius: 12px;
  padding: 8px;
  min-width: 180px;
  max-width: 220px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
}
.zb-popup-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 0 4px;
}
.zb-popup-field {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-1, #f1f5f9);
  letter-spacing: 0.3px;
}
.zb-popup-close {
  background: none;
  border: none;
  color: #ff3b3b;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.6);
  transition: all 0.15s;
}
.zb-popup-close:hover {
  background: rgba(255, 59, 59, 0.15);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.8);
}
.zb-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.zb-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-1, #f1f5f9);
  cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
  text-align: left;
}
.zb-action:hover {
  background: var(--hover, rgba(255,255,255,0.08));
}
.zb-action:active {
  background: var(--hover, rgba(255,255,255,0.14));
}
.zb-action-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.zb-action-text {
  flex: 1;
  font-weight: 600;
  font-size: 12.5px;
}
.zb-action-val {
  font-size: 16px;
  font-weight: 800;
  min-width: 32px;
  text-align: right;
  line-height: 1.1;
}
.zb-val-ok { color: #00ff6a; text-shadow: 0 0 6px rgba(0, 255, 106, 0.4); }
.zb-val-warn { color: #ffcc00; text-shadow: 0 0 6px rgba(255, 204, 0, 0.4); }
.zb-val-crit { color: #ff4444; text-shadow: 0 0 6px rgba(255, 68, 68, 0.4); }
.zb-val-muted { color: #7a8ba8; font-weight: 600; font-size: 14px; }
.zb-val-plants { color: #00d4ff; text-shadow: 0 0 8px rgba(0, 212, 255, 0.5); }
.zb-val-ipm { color: #bf5af2; text-shadow: 0 0 8px rgba(191, 90, 242, 0.5); }
.zb-val-sub {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2, #cbd5e1);
  display: block;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.85;
}
.zb-ipm {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: 9px;
  color: #bf5af2;
  text-shadow: 0 0 4px rgba(191, 90, 242, 0.5);
  font-weight: 700;
  line-height: 1;
}
.zb-action-plants {
  border-top: 1px solid var(--border, #334155);
  margin-top: 2px;
  padding-top: 4px;
}

/* Badge popup — IPM grouped sub-rows */
.zb-ipm-group {
  border-top: 1px solid var(--border, #334155);
  margin-top: 2px;
  padding-top: 2px;
}
.zb-ipm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 0;
  font-size: 12px;
  font-weight: 700;
  color: #bf5af2;
}
.zb-action-sub {
  padding-left: 28px;
  font-size: 11.5px;
}
.zb-action-sub .zb-action-icon {
  font-size: 12px;
  width: 16px;
}
.zb-action-sub .zb-action-text {
  font-size: 11.5px;
  font-weight: 500;
}
.zb-action-sub .zb-action-val {
  font-size: 14px;
  font-weight: 700;
}

/* ── Zone elements ── */
.mz {
  cursor: pointer;
  pointer-events: auto;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.25s ease, filter 0.25s ease;
}
@media (hover: hover) {
  .mz:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 0 6px rgba(0, 212, 255, 0.35));
  }
  .mz:hover rect,
  .mz:hover polygon,
  .mz:hover circle {
    stroke-width: 2.5 !important;
  }
  .mz:active {
    transform: scale(1.03);
  }
  /* Active zones: NO scale on hover/touch */
  .mz-on:hover,
  .mz-on:active {
    transform: none !important;
  }
}
/* Active polygon: glow + pulse */
.mz-on rect,
.mz-on polygon,
.mz-on circle {
  animation: mPulse 3s ease-in-out infinite;
}
.mz-on {
  filter: drop-shadow(0 0 6px rgba(0, 170, 255, 0.3));
}
@keyframes mPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

/* LED indicator — slower rhythm with halo */
.m-led {
  animation: mLed 2s ease-in-out infinite;
}
@keyframes mLed {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.m-vtx {
  cursor: move;
  transition: r 0.12s;
}
.m-vtx:hover {
  r: 7.5;
}

/* ── Node dot styles (.mn) ── */
.mn {
  cursor: default;
}
.mn-edit {
  cursor: grab;
}
.mn-drag {
  cursor: grab;
}
.mn:hover circle:not(.mn-drag) {
  filter: brightness(1.2);
}
@keyframes mn-pulse {
  0%,
  100% {
    opacity: 0.07;
    r: 17;
  }
  50% {
    opacity: 0.18;
    r: 22;
  }
}
.mn-pls {
  animation: mn-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* ── Node tooltip (.mn-tt) ── */
.mn-tt {
  position: absolute;
  z-index: 120;
  background: rgba(14, 18, 28, 0.97);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 13px;
  min-width: 200px;
  max-width: 240px;
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  pointer-events: none;
  font-size: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mn-tt-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.mn-tt-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mn-tt-id {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0.5px;
}
.mn-tt-lbl {
  font-size: 11px;
  color: var(--text-3);
  flex: 1;
}
.mn-tt-stat {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}
.mn-tt-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mn-tt-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  gap: 8px;
}
.mn-tt-row span:first-child {
  color: var(--text-3);
  white-space: nowrap;
}
.mn-tt-row span:last-child {
  color: var(--text-1);
  text-align: right;
  font-weight: 500;
}

/* ── Place-node button in edit bar ── */
.m-btn-pu {
  background: rgba(147, 51, 234, 0.18);
  border-color: rgba(147, 51, 234, 0.5);
  color: #c084fc;
}
.m-btn-pu:hover {
  background: rgba(147, 51, 234, 0.32);
  border-color: #c084fc;
}

/* ── Minimap ── */
.m-mini {
  display: none;
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 15;
  width: 120px;
  height: 80px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px;
  opacity: 0.8;
  transition: opacity 0.2s;
  box-shadow: 0 2px 8px var(--shadow);
}
.m-mini:hover {
  opacity: 1;
}
.m-mini svg {
  width: 100%;
  height: 100%;
}

/* ── Detail panel — always absolute overlay ── */
.m-panel {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 280px;
  max-height: calc(100% - 16px);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 4px 24px var(--shadow);
  z-index: 20;
  animation: mSlide 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.92);
}
@keyframes mSlide {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.m-panel-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.m-panel-id {
  font-weight: 700;
  color: var(--text-1);
  font-size: 15px;
}
.m-panel-tp {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.m-panel-hd {
  cursor: grab;
  user-select: none;
}
.m-panel-hd:active {
  cursor: grabbing;
}
.m-panel-x {
  margin-left: auto;
  background: rgba(255, 59, 59, 0.1);
  border: none;
  color: #ff3b3b;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 10px;
  border-radius: 8px;
  transition: all 0.15s;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
}
.m-panel-x:hover {
  background: rgba(255, 59, 59, 0.2);
  color: #ff1a1a;
  text-shadow: 0 0 12px rgba(255, 59, 59, 0.7);
}
.m-panel.mp-dragging {
  transition: none !important;
  animation: none !important;
}

.mp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--border-light);
}
.mp-row:last-child {
  border-bottom: none;
}
.mp-v {
  color: var(--text-1);
  font-weight: 600;
}
.mp-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 17px;
  color: var(--zone-active);
}

.mp-act {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: center;
  border: 1px solid;
  transition: all 0.15s;
}

.mp-dur {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.mp-d {
  padding: 10px 6px;
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.mp-d:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.mp-d:active {
  transform: scale(0.95);
}
.mp-custom-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.mp-custom-row .ms-dur-hm {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.mp-custom-row .ms-dur-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.mp-custom-row .ms-dur-input {
  width: 32px;
  text-align: center;
  padding: 6px 2px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--text-1);
}
.mp-custom-row .ms-dur-lbl {
  font-size: 11px;
  color: var(--text-3);
  margin: 0 2px;
}
.mp-custom-row .ms-dur-step {
  padding: 4px 6px;
  font-size: 14px;
  min-width: 28px;
  border: none;
  background: transparent;
  color: var(--accent);
}
#mp-custom-go {
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
#mp-custom-go:hover {
  background: var(--accent);
  color: #fff;
}

/* ── Enhanced panel sections ── */
.mp-section {
  margin-bottom: 10px;
}
.mp-section:last-of-type {
  margin-bottom: 4px;
}
.mp-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding-bottom: 4px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--border-light);
}
.mp-grp-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.mp-urg-ok {
  color: #22c55e !important;
}
.mp-urg-warn {
  color: #eab308 !important;
}
.mp-urg-crit {
  color: #ef4444 !important;
}

/* ── Map panel compact card overrides ── */
.m-panel .zd-summary {
  gap: 4px;
  margin-bottom: 8px;
}
.m-panel .zd-sum-card {
  padding: 8px 10px;
  gap: 10px;
}
.m-panel .zd-sum-icon {
  font-size: 18px;
}
.m-panel .zd-sum-label {
  font-size: 11px;
}
.m-panel .zd-sum-value {
  font-size: 14px;
}
.m-panel .zd-day-dot {
  width: 26px;
  height: 26px;
  font-size: 10px;
}
.m-panel .zd-status-banner {
  margin-bottom: 6px;
}
.m-panel .zd-act-btn {
  padding: 10px 8px;
  font-size: 13px;
}
.m-panel .zd-expand-btn {
  padding: 9px;
  font-size: 13px;
}
.m-panel .zd-detail-group {
  margin-bottom: 8px;
}
.m-panel .zd-detail-title {
  font-size: 11px;
}
.m-panel .zd-row {
  padding: 4px 0;
  font-size: 11px;
}
.m-panel .zd-sched-item {
  font-size: 11px;
  padding: 4px 0;
}

/* ── Legend (positioned inside the map area) ── */
.m-leg {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 4px 12px;
  background: rgba(var(--bg-2-rgb, 10, 14, 20), 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 10px;
  color: var(--text-3);
  z-index: 12;
  white-space: nowrap;
}
.m-leg-g {
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-li {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.m-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.m-leg-bar {
  width: 1px;
  height: 12px;
  background: var(--border);
}
.m-leg-pill {
  font-size: 8px;
  font-weight: 800;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.4px;
  line-height: 1;
}

/* ============================================================
   VIEW: ESP Nodes
   ============================================================ */
.esp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.esp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: all 0.2s;
}
.esp-card.online {
  border-left: 3px solid var(--online);
}
.esp-card.offline {
  border-left: 3px solid var(--offline);
}
.esp-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.esp-card-id {
  background: var(--accent);
  color: #000;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.esp-card-label {
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
}
.esp-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.esp-rename-btn:hover {
  opacity: 1;
}
.esp-card-status {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.esp-card-status.online {
  color: var(--online);
}
.esp-card-status.offline {
  color: var(--offline);
}
.esp-detail {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-3);
  padding: 3px 0;
}
.esp-detail-val {
  color: var(--text-2);
  font-weight: 500;
}
/* Signal bars — removed: using Unicode block chars instead */

/* ── ESP View Header ── */
.esp-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.esp-view-header h2 {
  font-size: 16px;
  color: var(--text-1);
  margin: 0;
}
.esp-summary {
  display: flex;
  gap: 14px;
  font-size: 13px;
  font-weight: 700;
}
.esp-sum-online {
  color: var(--online);
}
.esp-sum-offline {
  color: var(--offline);
}

/* ── Conectar Nodos Section ── */
.esp-conn-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.esp-conn-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  user-select: none;
  transition: background 0.15s;
}
.esp-conn-hd:hover {
  background: rgba(0, 212, 255, 0.04);
}
.esp-conn-arrow {
  font-size: 16px;
}
.esp-conn-body {
  padding: 0 16px 16px;
}
.esp-conn-intro {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin-bottom: 16px;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.esp-conn-intro code {
  color: var(--accent);
  font-size: 12px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.esp-conn-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}
.esp-conn-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.esp-conn-step p {
  margin: 2px 0 0;
  color: var(--text-3);
  font-size: 12px;
}
.esp-conn-step code {
  color: var(--accent);
  font-size: 11px;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
}
.esp-conn-step strong {
  color: var(--text-1);
}
.esp-conn-step-num {
  min-width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50%;
  flex-shrink: 0;
}
.esp-conn-subtitle {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.esp-conn-table-wrap {
  margin-bottom: 16px;
  overflow-x: auto;
}
.esp-conn-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.esp-conn-table th {
  text-align: left;
  padding: 8px 10px;
  background: var(--bg-3);
  color: var(--text-3);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.esp-conn-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
  color: var(--text-2);
}
.esp-conn-table tr:hover td {
  background: rgba(0, 212, 255, 0.02);
}
.esp-conn-node-id {
  background: var(--accent);
  color: #000;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.esp-conn-zones-cell {
  font-size: 11px;
  color: var(--text-3);
  max-width: 260px;
}
.esp-conn-trouble {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.esp-conn-tip {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 8px 12px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.esp-conn-tip strong {
  color: var(--text-1);
}

/* ── ESP Firmware code block ── */
.esp-firmware-code {
  font-family: "Courier New", monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #c9d1d9;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  overflow-x: auto;
  white-space: pre;
  max-height: 420px;
  overflow-y: auto;
  margin: 0;
  tab-size: 2;
}

/* ── ESP Zone Chips ── */
.esp-zone-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
}
.esp-zc {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  position: relative;
}
.esp-zc-off {
  background: var(--bg-3);
  color: var(--text-3);
}
.esp-zc-on {
  background: rgba(34, 197, 94, 0.15);
  color: var(--online);
}
.esp-zc-pend {
  background: rgba(234, 179, 8, 0.15);
  color: #eab308;
}
.esp-zc-hidden {
  opacity: 0.45;
  text-decoration: line-through;
}
.zc-rename-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 0 0 0 3px;
  opacity: 0.5;
  vertical-align: middle;
}
.zc-rename-btn:hover {
  opacity: 1;
}

/* ============================================================
   VIEW: Schedules
   ============================================================ */
/* Schedule header bar */
.sched-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.sched-header h2 {
  font-size: 18px;
  color: var(--text-1);
  font-weight: 700;
}
.sched-header-actions {
  display: flex;
  gap: 8px;
}
.btn-new-sched {
  padding: 9px 18px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-new-sched:hover {
  filter: brightness(1.1);
  box-shadow: 0 4px 16px var(--accent-glow);
}
.btn-new-sched:active {
  transform: scale(0.97);
}

/* Schedule list */
.sched-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Próximos Riegos Section (schedules view) ── */
.next-runs-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.next-runs-hd {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
}
.next-runs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.next-run-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
}
.next-run-item:hover {
  background: var(--bg-card-hover);
}
.next-run-dim {
  opacity: 0.45;
}
.next-run-day {
  font-weight: 700;
  min-width: 26px;
  color: var(--text-2);
  font-size: 11px;
  text-transform: uppercase;
}
.next-run-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 72px;
}
.next-run-zone {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
}
.next-run-dur {
  font-size: 12px;
  color: var(--accent);
  min-width: 55px;
  text-align: right;
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.next-blocked {
  font-size: 10px;
  color: var(--danger, #ff4444);
  font-weight: 600;
}

/* ── Sidebar Next Runs Widget ── */
.ms-next-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}
.ms-next-item:last-child {
  border-bottom: none;
}
.ms-next-dim {
  opacity: 0.4;
}
.ms-next-time {
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 80px;
}
.ms-next-zone {
  flex: 1;
  font-weight: 600;
  color: var(--text-1);
}
.ms-next-dur {
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  white-space: nowrap;
}
.ms-next-blocked {
  color: var(--danger, #ff4444);
}

/* IPM Treatment list in side panel */
.ms-tx-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ms-tx-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(168, 85, 247, 0.06);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: var(--radius-sm);
}
.ms-tx-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.ms-tx-zone {
  font-weight: 700;
  font-size: 12px;
  color: #a855f7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-product {
  font-size: 11px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-plants {
  font-size: 10px;
  color: #86efac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ms-tx-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.ms-tx-time {
  font-size: 11px;
  font-weight: 600;
  color: #a855f7;
  font-variant-numeric: tabular-nums;
}
.ms-tx-cancel {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: transparent;
  color: #a855f7;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.ms-tx-cancel:hover {
  background: rgba(168, 85, 247, 0.15);
}

/* ── IPM Treatment Modal (Professional) ── */
.tx-modal-pro {
  max-width: 440px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.tx-modal-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(
    135deg,
    rgba(147, 51, 234, 0.15),
    rgba(168, 85, 247, 0.05)
  );
  border-bottom: 1px solid rgba(168, 85, 247, 0.2);
}
.tx-modal-hdr-icon {
  font-size: 28px;
  flex-shrink: 0;
}
.tx-modal-hdr-text {
  flex: 1;
  min-width: 0;
}
.tx-modal-hdr-text h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: #d8b4fe;
  text-shadow: 0 0 6px rgba(191, 90, 242, 0.4);
}
.tx-modal-zone-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-2);
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.04);
  padding: 2px 10px;
  border-radius: 20px;
}
.tx-modal-zone-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.tx-modal-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Sections */
.tx-section {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.tx-sec-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tx-sec-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tx-sec-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
/* Inputs */
.tx-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.tx-input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}
.tx-input::placeholder {
  color: var(--text-3);
  font-size: 13px;
}
.tx-input-sm {
  width: 80px;
  padding: 8px 10px;
  font-size: 13px;
}
.tx-textarea {
  resize: vertical;
  min-height: 44px;
}
/* Chips */
.tx-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tx-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 52px;
}
.tx-chip:hover {
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.06);
}
.tx-chip-active {
  border-color: #a855f7 !important;
  background: rgba(168, 85, 247, 0.15) !important;
  box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}
.tx-chip-val {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1.1;
}
.tx-chip-active .tx-chip-val {
  color: #c084fc;
}
.tx-chip-unit {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.tx-chip-active .tx-chip-unit {
  color: #a855f7;
}
/* Custom row */
.tx-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tx-custom-lbl {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 600;
}
.tx-custom-unit {
  font-size: 12px;
  color: var(--text-3);
}
/* Preview */
.tx-preview {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(168, 85, 247, 0.06);
  border-radius: 8px;
  border-left: 3px solid #a855f7;
}
.tx-preview strong {
  color: #c084fc;
}
/* Action buttons */
.tx-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tx-btn-submit {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #9333ea, #7c3aed);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.tx-btn-submit:hover {
  background: linear-gradient(135deg, #a855f7, #8b5cf6);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}
.tx-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.tx-btn-cancel {
  width: 100%;
  padding: 10px;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  background: transparent;
  color: #f87171;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.tx-btn-cancel:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ── Plant selector in treatment form ── */
.tx-plant-toolbar {
  display: flex;
  gap: 6px;
  align-items: center;
}
.tx-plant-toolbar .tx-input {
  flex: 1;
}
.tx-plant-selall {
  padding: 8px 12px;
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 10px;
  background: rgba(147,51,234,0.12);
  color: #e9d5ff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.tx-plant-selall:hover {
  background: rgba(147,51,234,0.25);
  border-color: rgba(147,51,234,0.5);
}
.tx-plant-sel-list {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  background: rgba(0,0,0,0.25);
  margin-top: 6px;
}
.tx-plant-letter {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
  color: #a855f7;
  background: rgba(30,20,50,0.95);
  border-bottom: 1px solid rgba(147,51,234,0.2);
  letter-spacing: 1px;
}
.tx-plant-sep {
  text-align: center;
  color: #6b7280;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}
.tx-plant-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.tx-plant-opt:hover {
  background: rgba(147,51,234,0.1);
}
.tx-plant-opt:last-child {
  border-bottom: none;
}
.tx-plant-checked {
  background: rgba(147,51,234,0.15);
}
.tx-plant-opt input[type="checkbox"] {
  accent-color: #a855f7;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.tx-plant-name {
  flex: 1;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
}
.tx-plant-info {
  color: #9ca3af;
  font-size: 11px;
}
.tx-plant-status {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  letter-spacing: 0.3px;
  background: rgba(255,255,255,0.08);
  color: #9ca3af;
}
.tx-st-ipm {
  background: rgba(234,179,8,0.18);
  color: #facc15;
}
.tx-st-hold {
  background: rgba(96,165,250,0.15);
  color: #60a5fa;
}
.tx-st-fail {
  background: rgba(239,68,68,0.15);
  color: #f87171;
}
.tx-plant-loading {
  padding: 14px;
  text-align: center;
  color: #9ca3af;
  font-size: 13px;
}
.tx-plant-selected {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.tx-plant-count {
  color: #a855f7;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  background: rgba(147,51,234,0.15);
  border-radius: 6px;
}
.tx-plant-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: rgba(147,51,234,0.2);
  border: 1px solid rgba(147,51,234,0.3);
  border-radius: 6px;
  color: #e9d5ff;
  font-size: 11px;
}
.tx-plant-badge-x {
  background: none;
  border: none;
  color: #f87171;
  cursor: pointer;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}

/* ── IPM tab in inventory viewer ── */
.inv-ipm-loading {
  padding: 20px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}
.inv-ipm-hdr {
  padding: 8px 4px;
}
.inv-ipm-total {
  color: #bf5af2;
  font-size: 14px;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(191, 90, 242, 0.4);
}
.inv-ipm-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.inv-ipm-row {
  display: grid;
  grid-template-columns: 2fr 1.5fr 1fr 0.5fr 1fr 1fr;
  gap: 6px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  align-items: center;
  font-size: 13px;
  color: #ddd;
}
.inv-ipm-row-hdr {
  color: #9ca3af;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  position: sticky;
  top: 0;
  background: var(--dp-card, #1e1e2e);
  z-index: 1;
}
.inv-ipm-name {
  color: #fff;
  font-weight: 600;
}
.inv-ipm-count {
  color: #bf5af2;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 4px rgba(191, 90, 242, 0.3);
}
.inv-ipm-sec-hdr {
  font-size: 14px;
  font-weight: 700;
  color: #e9d5ff;
  padding: 10px 4px 6px;
  border-bottom: 1px solid rgba(147,51,234,0.2);
}
.inv-ipm-treated {
  background: rgba(34,197,94,0.06);
}
.inv-ipm-active {
  background: rgba(239,68,68,0.06);
}
.inv-ipm-tx-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(34,197,94,0.2);
  color: #86efac;
  font-weight: 600;
  margin-left: 4px;
}
.inv-ipm-treat-btn {
  padding: 4px 10px;
  border: 1px solid rgba(191,90,242,0.35);
  border-radius: 6px;
  background: rgba(191,90,242,0.18);
  color: #e9d5ff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}
.inv-ipm-treat-btn:hover {
  background: rgba(191,90,242,0.35);
  border-color: rgba(191,90,242,0.6);
  box-shadow: 0 0 8px rgba(191,90,242,0.3);
}
.inv-ipm-tx-sub {
  font-size: 11px !important;
  color: #9ca3af !important;
  border-bottom: 1px solid rgba(255,255,255,0.03) !important;
}
.inv-ipm-tx-sub span {
  color: #9ca3af;
}
@media (max-width: 600px) {
  .inv-ipm-row {
    grid-template-columns: 2fr 0.5fr 1fr 1fr;
  }
  .inv-ipm-row > span:nth-child(2),
  .inv-ipm-row > span:nth-child(3) {
    display: none;
  }
}

/* Treatment labels on map */
.ml-zone.ml-tx {
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.35);
}
.ml-zone.ml-tx .ml-name {
  font-size: 10px;
  color: #e9d5ff;
}
.ml-sm.ml-tx .ml-name {
  font-size: 7px;
}
.ml-tx-line {
  font-size: 12px;
  font-weight: 900;
  color: #e9d5ff;
  letter-spacing: 1.5px;
  line-height: 1.1;
  white-space: nowrap;
}
.ml-sm .ml-tx-line {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.ml-tx-time {
  font-size: 10px;
  font-weight: 700;
  color: #c084fc;
  font-family: "SF Mono", Consolas, monospace;
  line-height: 1.1;
  white-space: nowrap;
}
.ml-sm .ml-tx-time {
  font-size: 7px;
}
.ml-tx-drip {
  font-size: 7px;
  font-weight: 700;
  color: #86efac;
  line-height: 1.1;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Side panel treatment tags */
.ms-tx-tag {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.ms-tx-tag-block {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}
.ms-tx-tag-info {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}
.ms-tx-item.ms-tx-drip {
  border-color: rgba(59, 130, 246, 0.2);
  background: rgba(59, 130, 246, 0.04);
}

/* Next runs treatment info badge */
.ms-next-tx-info {
  color: #a855f7;
  font-size: 10px;
  margin-left: 2px;
}

/* Zone card treatment banner — rich row with icon/label/product/timer */
.zone-card-treatment {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  margin: 4px 0 2px;
  font-weight: 600;
}
.zc-tx-block {
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.3);
}
.zc-tx-drip {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
}
.zc-tx-icon {
  font-size: 13px;
  flex-shrink: 0;
}
.zc-tx-label {
  font-weight: 900;
  color: #c084fc;
  letter-spacing: 1px;
  font-size: 10px;
  text-transform: uppercase;
}
.zc-tx-prod {
  color: #e9d5ff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zc-tx-timer {
  font-family: "SF Mono", Consolas, monospace;
  font-weight: 700;
  color: #a855f7;
  white-space: nowrap;
  font-size: 10px;
}
.zc-tx-pest {
  font-size: 10px;
  color: #f59e0b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zc-tx-ok {
  font-size: 10px;
  flex-shrink: 0;
}
/* Zone card — purple border when treatment active */
.zone-card:has(.zone-card-treatment) {
  border-color: rgba(168, 85, 247, 0.4) !important;
  border-left-color: #9333ea !important;
}
.zone-card:has(.zone-card-treatment):hover {
  border-color: #9333ea !important;
  box-shadow: 0 4px 15px rgba(147, 51, 234, 0.25);
}
/* Mini IPM button on zone card */
.zc-ipm-btn {
  position: absolute;
  top: 8px;
  right: 38px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(168, 85, 247, 0.3);
  background: rgba(168, 85, 247, 0.08);
  color: #a855f7;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 2;
  transition: all 0.2s;
}
.zc-ipm-btn:hover {
  background: rgba(168, 85, 247, 0.2);
  border-color: #a855f7;
  transform: scale(1.1);
}

/* Zone detail IPM button row */
.zd-ipm-btns {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  align-items: stretch;
}
.zd-btn-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.zd-btn-row .zd-act-btn {
  min-width: 0;
  font-size: .78rem;
  padding: 7px 4px;
}

/* Quick Run modal treatment lock on zone label */
.qr-area-zone .qr-tx-lock {
  color: #a855f7;
  font-size: 11px;
  margin-left: 2px;
}
.qr-area-zone:has(input:disabled) {
  opacity: 0.5;
  text-decoration: line-through;
  cursor: not-allowed;
}

/* Belt treatment style */
.belt-sched-tx {
  opacity: 0.6;
}
.belt-sched-tx .belt-sched-name {
  color: #a855f7;
}

/* Multi-zone IPM modal — 2-page wizard */
.ms-btn-ipm {
  background: rgba(168, 85, 247, 0.12) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  margin-bottom: 10px;
}
.ms-btn-ipm:hover {
  background: rgba(168, 85, 247, 0.22) !important;
  border-color: #a855f7 !important;
}
.tx-modal-multi {
  max-width: 500px;
  overflow: hidden;
}
.txm-pages {
  position: relative;
  overflow: hidden;
}
.txm-page {
  display: none;
  padding: 14px 18px;
  flex-direction: column;
  gap: 10px;
  max-height: 65vh;
  overflow-y: auto;
}
.txm-page-active {
  display: flex;
}
.txm-select-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.txm-sel-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.txm-sel-btn:hover {
  border-color: #a855f7;
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}
.txm-count {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  margin-left: auto;
}
.txm-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
}
/* Type section */
.txm-type-sec {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.015);
}
.txm-type-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  cursor: pointer;
  margin-bottom: 6px;
}
.txm-type-cnt {
  font-weight: 400;
  color: var(--text-3);
  font-size: 11px;
}
/* Series grid */
.txm-series-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.txm-series-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 8px;
  background: var(--bg-2);
}
.txm-series-hd {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.txm-series-hd strong {
  color: var(--text-1);
  font-size: 11px;
}
/* Zone cell grid */
.txm-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 3px;
}
.txm-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--text-2);
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
}
.txm-cell:hover {
  background: rgba(168, 85, 247, 0.08);
  border-color: rgba(168, 85, 247, 0.2);
}
.txm-cell:has(input:checked) {
  background: rgba(168, 85, 247, 0.12);
  border-color: #a855f7;
  color: #c084fc;
}
.txm-cell input {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  accent-color: #a855f7;
}
.txm-cell-lbl {
  overflow: hidden;
  text-overflow: ellipsis;
}
.txm-cell-tx {
  background: rgba(168, 85, 247, 0.05);
}
.txm-cell-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a855f7;
}
.txm-cell-solo {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 11px;
}
/* Nav & fields */
.txm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.txm-field-lbl {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
}
.txm-nav {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.txm-nav-split {
  justify-content: space-between;
}
.txm-nav-btn {
  padding: 8px 18px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.txm-btn-next {
  background: #a855f7;
  color: #fff;
  border-color: #a855f7;
}
.txm-btn-next:hover:not(:disabled) {
  background: #9333ea;
}
.txm-btn-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.txm-btn-back {
  background: var(--bg-3);
  color: var(--text-2);
}
.txm-btn-back:hover {
  border-color: #a855f7;
  color: #c084fc;
}

/* ── IPM History View ── */
.ipm-hist-view { padding: 0 4px; max-width: 1400px; margin: 0 auto; }
.ipm-hist-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 14px;
}

/* Two-column layout: main + sidebar */
.ipm-hist-layout {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.ipm-hist-main { flex: 1; min-width: 0; }

/* ── Reports Sidebar ── */
.ipm-reports-sidebar {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239,68,68,0.03) 0%, rgba(168,85,247,0.03) 100%);
  padding: 14px;
}
.ipm-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(239, 68, 68, 0.15);
}
.ipm-sidebar-icon { font-size: 20px; }
.ipm-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  flex: 1;
}
.ipm-sidebar-count {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-size: 13px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 10px;
}
.ipm-sidebar-empty {
  text-align: center;
  padding: 28px 10px;
  color: var(--text-3);
  font-size: 14px;
}
.ipm-sidebar-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.ipm-sidebar-section-count {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
.ipm-sidebar-archive { margin-top: 14px; }
.ipm-sidebar-archive-title { cursor: pointer; user-select: none; }
.ipm-sidebar-archive-title::-webkit-details-marker { display: none; }
.ipm-sidebar-archive[open] > .ipm-sidebar-archive-title::before { content: "▾ "; font-size: 10px; }
.ipm-sidebar-archive:not([open]) > .ipm-sidebar-archive-title::before { content: "▸ "; font-size: 10px; }

/* IPM Varieties grid (Campos con Plantas IPM) */
.ipm-varieties-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  padding: 12px;
}
.ipm-var-card {
  background: var(--bg-1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ipm-var-field {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: 0.5px;
}
.ipm-var-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ipm-var-cnt {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
}
.ipm-var-cnt-grp { background: rgba(34,197,94,0.15); color: #22c55e; }
.ipm-var-cnt-rpt { background: rgba(239,68,68,0.15); color: #ef4444; }
.ipm-var-cnt-tx  { background: rgba(168,85,247,0.15); color: #a855f7; }
.ipm-var-pests {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ipm-var-pest-tag {
  font-size: 11px;
  background: rgba(168,85,247,0.1);
  color: var(--text-2);
  border-radius: 4px;
  padding: 2px 6px;
}
.ipm-var-map-btn {
  margin-top: auto;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.3);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  align-self: flex-start;
}
.ipm-var-map-btn:hover { background: rgba(59,130,246,0.22); }

/* Block letter breakdown table inside IPM var card */
.ipm-var-blocks {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--border);
  font-size: 12px;
}
.ipm-vb-hdr {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 32px;
  background: var(--bg-card);
  padding: 4px 8px;
  font-weight: 700;
  color: var(--text-3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
}
.ipm-vb-row {
  display: grid;
  grid-template-columns: 48px 1fr 1fr 32px;
  padding: 4px 8px;
  border-bottom: 1px solid rgba(var(--border-rgb,255,255,255),0.05);
  align-items: center;
  transition: background 0.1s;
}
.ipm-vb-row:last-child { border-bottom: none; }
.ipm-vb-row:hover { background: rgba(255,255,255,0.03); }
.ipm-vb-row-ipm { background: rgba(34,197,94,0.05); }
.ipm-vb-row-ipm:hover { background: rgba(34,197,94,0.1); }
.ipm-vb-c-key {
  font-weight: 700;
  color: var(--text-2);
  font-size: 13px;
}
.ipm-vb-c-qty { color: var(--text-2); text-align: right; }
.ipm-vb-c-vend { text-align: right; }
.ipm-vb-vend { color: #f59e0b; font-weight: 600; }
.ipm-vb-c-ipm { text-align: center; }
.ipm-vb-ipm-badge {
  display: inline-block;
  background: rgba(34,197,94,0.2);
  color: #22c55e;
  font-weight: 700;
  font-size: 11px;
  border-radius: 10px;
  padding: 0 6px;
  min-width: 18px;
  text-align: center;
}
.ipm-vb-ipm-none { color: var(--text-4, #444); font-size: 10px; }

/* Report Cards */
.ipm-rpt-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  transition: box-shadow 0.15s;
}
.ipm-rpt-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.ipm-rpt-open { border-left: 3px solid #ef4444; }
.ipm-rpt-done { border-left: 3px solid #22c55e; opacity: 0.7; }
.ipm-rpt-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.ipm-rpt-zone {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}
.ipm-rpt-date {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}
.ipm-rpt-card-body { margin-bottom: 8px; }
.ipm-rpt-body-done { margin-bottom: 0; }
.ipm-rpt-row {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.ipm-rpt-loc { color: var(--text-3); font-size: 12px; }
.ipm-rpt-pest { color: #f59e0b; font-weight: 600; }
.ipm-rpt-notes { font-style: italic; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.ipm-rpt-by { font-size: 11px; color: var(--text-3); }
.ipm-rpt-completed-info { font-size: 12px; color: #22c55e; }
.ipm-rpt-card-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.ipm-rpt-btn-done {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  cursor: pointer;
  transition: background 0.15s;
}
.ipm-rpt-btn-done:hover { background: rgba(34, 197, 94, 0.3); }
.ipm-rpt-btn-del {
  padding: 4px 10px;
  font-size: 12px;
  border: none;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  cursor: pointer;
  transition: background 0.15s;
}
.ipm-rpt-btn-del:hover { background: rgba(239, 68, 68, 0.25); }

@media (max-width: 900px) {
  .ipm-hist-layout { flex-direction: column; }
  .ipm-reports-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    order: -1;
    margin-bottom: 14px;
  }
}
.ipm-hist-active-bar,
.ipm-hist-active-label,
.ipm-hist-active-chips,
.ipm-hist-active-chip { display: none; } /* legacy — replaced by countdown cards */

/* Active Treatments — Countdown Cards */
.ipm-active-section {
  margin-bottom: 16px;
  border: 1px solid rgba(168, 85, 247, 0.25);
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(168,85,247,0.04) 0%, rgba(59,130,246,0.03) 100%);
}
.ipm-active-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(168, 85, 247, 0.08);
  border-bottom: 1px solid rgba(168, 85, 247, 0.15);
}
.ipm-active-icon { font-size: 20px; }
.ipm-active-title {
  font-size: 14px;
  font-weight: 700;
  color: #a855f7;
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ipm-active-count {
  background: #a855f7;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ipm-active-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 12px;
}
.ipm-atx-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  position: relative;
  overflow: hidden;
}
.ipm-atx-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #a855f7, #3b82f6);
}
.ipm-atx-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ipm-atx-zone {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  background: rgba(255,255,255,0.06);
  color: var(--text-1);
  border: 1px solid var(--border);
}
.ipm-atx-zone.ipm-zone-drip { border-left: 3px solid var(--type-drip); }
.ipm-atx-zone.ipm-zone-mist { border-left: 3px solid var(--type-mist); }
.ipm-atx-zone.ipm-zone-sprinkler { border-left: 3px solid var(--type-sprinkler); }
.ipm-atx-countdown {
  font-family: "Courier New", monospace;
  font-size: 18px;
  font-weight: 700;
  color: #a855f7;
  letter-spacing: 1px;
}
.ipm-atx-product {
  font-size: 14px;
  color: var(--text-1);
  font-weight: 600;
  margin-bottom: 4px;
}
.ipm-atx-pest {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-weight: 600;
  margin-bottom: 8px;
}
.ipm-atx-bar-wrap {
  height: 6px;
  background: var(--bg-3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}
.ipm-atx-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #a855f7, #ec4899);
  transition: width 1s linear;
}
.ipm-atx-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-3);
  font-weight: 500;
}
.ipm-atx-exp { text-align: right; }
.ipm-hist-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}
.ipm-hist-count {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}

/* Bulk delete toolbar */
.ipm-hist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ipm-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-2);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 8px;
  padding: 4px 10px;
}
.ipm-select-all-label {
  font-size: 11px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.ipm-row-chk {
  width: 16px; height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: #a855f7;
}

/* Collapsible sections */
.ipm-section {
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.ipm-section-header {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  padding: 12px 14px;
  background: var(--bg-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipm-section-header::-webkit-details-marker { display: none; }
.ipm-section-header::before {
  content: "▶";
  display: inline-block;
  margin-right: 8px;
  font-size: 10px;
  transition: transform 0.2s;
}
.ipm-section[open] > .ipm-section-header::before {
  transform: rotate(90deg);
}

/* Charts grid */
.ipm-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 14px;
}
@media (max-width: 700px) {
  .ipm-charts-grid { grid-template-columns: 1fr; }
}
.ipm-chart-card {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
}

/* Horizontal bar chart */
.ipmch-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 2px;
}
.ipmch-total {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 12px;
}
.ipmch-bars {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ipmch-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ipmch-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.ipmch-bar-wrap {
  flex: 1;
  height: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  overflow: hidden;
}
.ipmch-bar {
  height: 100%;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  min-width: 24px;
  transition: width 0.4s ease;
}
.ipmch-bar-val {
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ipmch-pct {
  width: 34px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: right;
}

/* Expandable row cards */
.ipm-row-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  background: var(--bg-1);
  transition: border-color 0.2s;
}
.ipm-row-card:hover { border-color: rgba(168, 85, 247, 0.3); }
.ipm-row-card.ipm-row-expanded { border-color: #a855f7; }
.ipm-row-card.ipm-row-clear { opacity: 0.7; }
.ipm-row-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  gap: 8px;
}
.ipm-row-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.ipm-row-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.ipm-row-zone { font-size: 14px; color: var(--text-1); }
.ipm-row-product { font-size: 13px; color: var(--text-2); }
.ipm-row-pest {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
  font-weight: 600;
}
.ipm-row-hours { font-size: 12px; color: var(--text-3); font-weight: 600; }
.ipm-wx-chip {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(59, 130, 246, 0.1);
  color: var(--text-2);
  white-space: nowrap;
}
.ipm-row-wx-full {
  grid-column: 1 / -1;
  padding-top: 4px;
  border-top: 1px dashed var(--border);
}
.ipm-row-date { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.ipm-row-chevron {
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.2s;
}
.ipm-row-detail {
  padding: 0 12px 12px;
  border-top: 1px solid var(--border);
}
.ipm-row-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  font-size: 13px;
  color: var(--text-2);
  padding: 12px 0;
}
.ipm-delete-btn { margin-top: 8px; }
.ipm-action-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.ipm-badge-set { background: rgba(168, 85, 247, 0.15); color: #a855f7; }
.ipm-badge-clear { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.ipm-td-id { font-size: 10px; color: var(--text-3); }
.ipm-td-na { color: var(--text-3); }

/* IPM Grid Table */
.ipm-grid-table {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-1);
}
.ipm-grid-header {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr auto 1fr auto;
  gap: 0;
  background: rgba(168, 85, 247, 0.08);
  border-bottom: 2px solid rgba(168, 85, 247, 0.2);
}
.ipm-grid-header.ipm-grid-adm {
  grid-template-columns: 30px auto 1fr 1fr 1fr 1fr auto 1fr auto 36px;
}
.ipm-grid-th {
  padding: 12px 10px;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-2);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.ipm-grid-row {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr 1fr auto 1fr auto;
  gap: 0;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.ipm-grid-row:last-child { border-bottom: none; }
.ipm-grid-row:hover { background: rgba(168, 85, 247, 0.04); }
.ipm-grid-row-clear { opacity: 0.65; }
.ipm-grid-td {
  padding: 11px 10px;
  font-size: 14px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ipm-gcol-chk { width: 30px; justify-content: center; }
.ipm-gcol-action { min-width: 90px; }
.ipm-gcol-date { min-width: 110px; white-space: nowrap; font-size: 13px; color: var(--text-3); }
.ipm-gcol-zone { min-width: 90px; color: var(--text-1); font-size: 14px; }
.ipm-gcol-by { min-width: 70px; font-size: 13px; color: var(--text-3); }
.ipm-gcol-del { width: 36px; justify-content: center; }
.ipm-gcol-del .ipm-delete-btn { padding: 2px 6px; font-size: 12px; }

@media (max-width: 700px) {
  .ipm-charts-grid { grid-template-columns: 1fr; }
  .ipm-grid-table { border-radius: 8px; }
  .ipm-grid-header { display: none; }
  .ipm-grid-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
  }
  .ipm-grid-td { padding: 2px 0; font-size: 13px; }
  .ipm-gcol-product, .ipm-gcol-by, .ipm-gcol-wx { display: none; }
}
/* Pest type optional label */
.tx-sec-opt {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-left: 4px;
}
.tx-sec-icon {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}

.sched-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sched-card:hover {
  border-left-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 212, 255, 0.08);
}
.sched-card.disabled {
  opacity: 0.45;
  border-left-color: var(--border);
}
.sched-time {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-family: "SF Mono", Consolas, monospace;
  min-width: 65px;
  letter-spacing: -0.5px;
}
.sched-info {
  flex: 1;
  min-width: 0;
}
.sched-zone {
  font-weight: 600;
  color: var(--text-1);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sched-days {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.sched-duration {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.sched-toggle {
  margin-left: auto;
}

/* Empty schedules — big CTA */
.sched-empty {
  text-align: center;
  padding: 48px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}
.sched-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
}
.sched-empty-title {
  font-size: 16px;
  color: var(--text-1);
  font-weight: 700;
  margin-bottom: 4px;
}
.sched-empty-sub {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 16px;
}
.sched-empty .btn-new-sched {
  margin: 0 auto;
}

/* ── Grouped Schedules (sg-*) ── */
.sg-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sg-group {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sg-group-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-3);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
}
.sg-group-icon {
  font-size: 16px;
}
.sg-group-name {
  flex: 1;
}
.sg-group-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--bg-card);
  padding: 2px 8px;
  border-radius: 10px;
}
.sg-group-rows {
  display: flex;
  flex-direction: column;
}
/* ── Schedule multi-select toolbar ── */
.sg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card, rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sg-tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sg-tb-selall {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
}
.sg-tb-selall input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
}
.sg-tb-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sg-tb-fbtn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.sg-tb-fbtn:hover {
  background: rgba(0, 212, 255, 0.08);
}
.sg-tb-fbtn-active {
  background: rgba(0, 212, 255, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.sg-tb-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sg-tb-count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
.sg-tb-del {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.sg-tb-del:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.sg-tb-active {
  border-color: rgba(0, 212, 255, 0.3);
  background: rgba(0, 212, 255, 0.04);
}
/* Selection checkbox in rows */
.sg-sel-cb {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
}
.sg-row-selected {
  background: rgba(0, 212, 255, 0.06) !important;
}
.sg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  border-top: 1px solid var(--border-light, rgba(255, 255, 255, 0.04));
  transition: background 0.15s;
}
.sg-row:hover {
  background: var(--bg-card-hover, rgba(255, 255, 255, 0.03));
}
.sg-row-off {
  opacity: 0.4;
}
.sg-row-disabled {
  opacity: 0.45;
}
.sg-row-disabled .sg-time,
.sg-row-disabled .sg-zone,
.sg-row-disabled .sg-dur {
  text-decoration: line-through;
}
.sg-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.sg-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.sg-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 9px;
  transition: background 0.2s;
}
.sg-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--text-3);
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
}
.sg-toggle input:checked + .sg-toggle-slider {
  background: var(--accent);
}
.sg-toggle input:checked + .sg-toggle-slider::before {
  transform: translateX(14px);
  background: #fff;
}
.sg-src { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 800; color: #fff; flex-shrink: 0; line-height: 1; }
.sg-src-prog { background: #2196F3; }
.sg-src-man { background: #ff9800; }
.sg-src-unk { background: #666; }
.sg-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  min-width: 72px;
  font-size: 13px;
}
.sg-zone {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-days {
  display: flex;
  gap: 2px;
  min-width: 90px;
}
.sg-day {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 4px;
  border-radius: 3px;
}
.sg-dur {
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
  min-width: 48px;
  text-align: right;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.sg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  justify-content: flex-end;
}
.sg-edit,
.sg-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-3);
  padding: 2px 4px;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}
.sg-edit:hover {
  color: var(--accent);
  background: rgba(0, 212, 255, 0.1);
}
.sg-del:hover {
  color: var(--danger, #ff4444);
  background: rgba(255, 68, 68, 0.1);
}
.sg-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.sg-status-dot.sg-on {
  background: var(--success, #22c55e);
}
.sg-status-dot.sg-off {
  background: var(--text-3, #888);
  opacity: 0.5;
}
.toggle-sm {
  transform: scale(0.8);
}

@media (max-width: 600px) {
  .sg-row {
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
  }
  .sg-time {
    min-width: 65px;
    font-size: 12px;
  }
  .sg-zone {
    flex-basis: calc(100% - 75px);
  }
  .sg-days {
    flex-basis: 100%;
    justify-content: flex-start;
  }
  .sg-dur {
    min-width: auto;
  }
  .sg-actions {
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

/* ============================================================
   SCHEDULE VIEWS — Tabs, AM/PM, Timeline 24h, Weekly
   ============================================================ */

/* ── View Toggle Tabs ── */
.sv-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: 4px;
  border: 1px solid var(--border);
}
.sv-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.sv-tab:hover {
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.04);
}
.sv-tab-active {
  background: var(--bg-card);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
.sv-tab-icon {
  font-size: 14px;
}
.sv-tab-text {
  white-space: nowrap;
}
.sv-tab-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}
.sv-tab-mizona {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 6px 10px;
}
.sv-tab-mizona.sv-tab-active {
  background: var(--accent);
  color: var(--bg-1);
}
.sv-seq-del {
  font-size: 10px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: middle;
}

/* ── Summary Bar ── */
.sv-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  margin-bottom: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  color: var(--text-2);
}
.sv-sum-item strong {
  color: var(--accent);
  font-weight: 800;
}
.sv-sum-sep {
  color: var(--border);
}
.sv-sum-paused {
  color: var(--text-3);
}

/* ── Type Dot ── */
.sv-type-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.type-bg-drip {
  background: var(--type-drip);
}
.type-bg-mist {
  background: var(--type-mist);
}
.type-bg-sprinkler {
  background: var(--type-sprinkler);
}

/* ── Sequence Detection ── */
.sv-sequences {
  background: var(--bg-card);
  border: 1px solid rgba(0, 212, 255, 0.15);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.sv-seq-hd {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-seq-badge {
  font-size: 10px;
  font-weight: 800;
  background: var(--accent);
  color: #000;
  padding: 1px 7px;
  border-radius: 10px;
}
.sv-seq-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sv-seq-item {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.sv-seq-zone {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-1);
  margin-bottom: 6px;
}
.sv-seq-freq {
  font-size: 11px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 1px 6px;
  border-radius: 8px;
}
.sv-seq-chain {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sv-seq-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  font-size: 12px;
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
}
.sv-seq-arrow {
  color: var(--text-3);
  font-size: 11px;
}
.sv-seq-total {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ── AM/PM Period Sections ── */
.sv-period {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.sv-period-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.sv-period-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
}
/* Period info grid */
.sv-prd-info {
  padding: 6px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.sv-prd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.sv-prd-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
}
.sv-prd-stat-n {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-1);
}
.sv-prd-stat-l {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sv-prd-chips {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sv-prd-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-2);
  border: 1px solid var(--border);
}

/* ── View Filter Bar ── */
.sv-filter-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.sv-fbtn {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  opacity: 0.5;
}
.sv-fbtn:hover {
  opacity: 0.8;
}
.sv-fbtn-active {
  opacity: 1;
  background: rgba(0, 212, 255, 0.1);
  border-color: rgba(0, 212, 255, 0.3);
  color: var(--text-1);
  font-weight: 600;
}
.sv-fbtn-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 2px;
  flex-shrink: 0;
}
.sv-filter-group-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

/* ── Collapsible delete tools ── */
.sg-del-tools {
  background: var(--bg-card);
  border: 1px solid rgba(255, 80, 80, 0.15);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.sg-del-tools-hdr {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}
.sg-del-tools-hdr::-webkit-details-marker {
  display: none;
}
.sg-del-tools-hdr:hover {
  background: rgba(255, 80, 80, 0.05);
}
.sg-del-tools-arrow {
  font-size: 11px;
  color: var(--text-3);
  transition: transform 0.2s;
  margin-left: auto;
}
details[open] > .sg-del-tools-hdr .sg-del-tools-arrow {
  transform: rotate(0deg);
}
details:not([open]) > .sg-del-tools-hdr .sg-del-tools-arrow {
  transform: rotate(-90deg);
}
.sg-del-tools-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px 8px;
  border-top: 1px solid rgba(255, 80, 80, 0.1);
  flex-wrap: wrap;
}

/* ── Combined stats bar (top-level) ── */
.sv-prd-info-top {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  padding: 8px 14px 10px;
}

/* ── Unified list card ── */
.sv-unified-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

/* ── Period divider lines (inside unified list) ── */
.sv-period-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
}
.sv-period-divider.sv-period-am {
  border-bottom: none;
  border-top: none;
}
.sv-period-divider.sv-period-pm {
  border-top: 2px solid rgba(103, 58, 183, 0.3);
  border-bottom: none;
}
.sv-divider-label {
  color: var(--text-1);
  font-size: 13px;
}
.sv-divider-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
}

/* ── Collapsible sections (Próximos / Secuencias) ── */
.sv-collapse-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
}
.sv-collapse-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 0.15s;
}
.sv-collapse-hdr::-webkit-details-marker {
  display: none;
}
.sv-collapse-hdr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sv-collapse-next {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.06), transparent);
  border-bottom: 1px solid rgba(0, 212, 255, 0.12);
}
.sv-collapse-seq {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.04), transparent);
  border-bottom: 1px solid rgba(0, 212, 255, 0.08);
}
.sv-collapse-icon {
  font-size: 16px;
}
.sv-collapse-title {
  color: var(--text-1);
}
.sv-collapse-badge {
  font-size: 10px;
  font-weight: 800;
  background: var(--accent);
  color: #000;
  padding: 1px 7px;
  border-radius: 10px;
}
.sv-collapse-meta {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  margin-left: auto;
}
.sv-collapse-arrow {
  font-size: 12px;
  color: var(--text-3);
  transition: transform 0.2s;
  flex-shrink: 0;
}
details[open] > .sv-collapse-hdr .sv-collapse-arrow {
  transform: rotate(0deg);
}
details:not([open]) > .sv-collapse-hdr .sv-collapse-arrow {
  transform: rotate(-90deg);
}
.sv-collapse-body {
  padding: 8px 14px 12px;
}
.sv-period-am {
  background: linear-gradient(
    135deg,
    rgba(255, 183, 77, 0.1) 0%,
    rgba(255, 235, 59, 0.05) 100%
  );
  border-bottom: 2px solid rgba(255, 183, 77, 0.3);
}
.sv-period-pm {
  background: linear-gradient(
    135deg,
    rgba(103, 58, 183, 0.1) 0%,
    rgba(63, 81, 181, 0.05) 100%
  );
  border-bottom: 2px solid rgba(103, 58, 183, 0.3);
}
.sv-period-icon {
  font-size: 18px;
}
.sv-period-label {
  color: var(--text-1);
  font-size: 14px;
}
.sv-period-range {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 500;
  margin-left: auto;
}
.sv-period-stats {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 8px;
  border-radius: 10px;
}
.sv-period-empty {
  text-align: center;
  padding: 20px;
  color: var(--text-3);
  font-size: 13px;
  font-style: italic;
}
.sv-period-disabled {
  border-color: rgba(255, 255, 255, 0.06);
}
.sv-period-off-hd {
  cursor: pointer;
}
.sv-period-off-hd:hover {
  background: rgba(255, 255, 255, 0.03);
}
.sv-period-chevron {
  margin-left: auto;
  color: var(--text-3);
  transition: transform 0.2s;
}

/* ── Timeline 24h v2 ── */
/* ── Multi-Day Timeline ── */
.sv-tl-multi {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  overflow-x: auto;
  overflow-y: visible;
}

/* ── Global Clock - compact strip ── */
.global-clock {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 30px;
  background: rgba(10, 12, 20, 0.96);
  border-bottom: 1px solid rgba(255, 180, 50, 0.15);
  gap: 10px;
  flex-shrink: 0;
  overflow: hidden;
}
.rc-time {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.retro-clock-time {
  font-family: "Courier New", Consolas, monospace;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: #ffb432;
  text-shadow: 0 0 8px rgba(255, 180, 50, 0.55);
}
.retro-clock-ampm {
  font-family: "Courier New", monospace;
  font-size: 9px;
  font-weight: 800;
  color: #ffb432;
  opacity: 0.7;
  letter-spacing: 1px;
}
.rc-sep {
  color: rgba(255, 255, 255, 0.2);
  font-size: 13px;
}
.rc-date {
  display: flex;
  align-items: center;
  gap: 6px;
}
#retro-clock-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-1);
}
.rc-sub {
  font-size: 10px;
  color: var(--text-3);
}
.rc-week-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.rc-wk-lbl {
  font-size: 9px;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: 1px;
}
.retro-clock-week-big {
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: 900;
  color: #00e5ff;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.45);
}
.rc-wk-bar {
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.retro-clock-week-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #00e5ff, #00ff88);
}
.rc-wk-pct {
  font-size: 9px;
  color: var(--text-3);
}

/* Old topbar kept for compat */
.sv-tl-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(
    180deg,
    rgba(0, 20, 40, 0.5) 0%,
    transparent 100%
  );
  gap: 12px;
  flex-wrap: wrap;
}
.sv-tl-topbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.sv-tl-topbar-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  white-space: nowrap;
}
.sv-tl-topbar-right {
  flex-shrink: 0;
}
.sv-tl-compass-loading {
  font-size: 11px;
  color: var(--text-3);
}

/* Compass */
.sv-compass {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 5px 10px 5px 5px;
}
.sv-compass-svg {
  display: block;
  flex-shrink: 0;
}
.sv-compass-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sv-compass-wx {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}
.sv-compass-wind {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
}

/* Day section */
.sv-tl-day {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}
.sv-tl-day:last-of-type {
  border-bottom: none;
}
.sv-tl-day-today {
  background: rgba(0, 212, 255, 0.02);
}

.sv-tl-day-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 2px 12px;
}
.sv-tl-day-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  white-space: nowrap;
}
.sv-tl-day-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 10px;
}

/* Per-day weather row (aligned with ruler/tracks) */
.sv-tl-wxrow {
  display: flex;
  align-items: center;
  height: 58px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  overflow: visible;
  position: relative;
}
.sv-tl-wxrow-label {
  width: 110px;
  flex-shrink: 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
}
.sv-tl-wxrow-strip {
  flex: 1;
  position: relative;
  height: 100%;
}
.sv-wxr-cell {
  position: absolute;
  top: 0;
  width: calc(100% / 8);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-right: 1px solid rgba(255, 255, 255, 0.03);
  cursor: default;
  transition: background 0.15s;
  padding: 2px 0;
}
.sv-wxr-cell:hover {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}
.sv-wxr-top {
  display: flex;
  align-items: center;
  gap: 3px;
}
.sv-wxr-icon {
  font-size: 18px;
  line-height: 1;
}
.sv-wxr-temp {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-1);
  line-height: 1;
}
.sv-wxr-bottom {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sv-wxr-compass {
  display: block;
  flex-shrink: 0;
}
.sv-wxr-spd {
  font-size: 8px;
  color: var(--text-3);
  font-weight: 600;
  line-height: 1;
}
.sv-wxr-spd small {
  font-size: 6px;
  opacity: 0.7;
}
.sv-wxr-calm {
  font-size: 8px;
  color: var(--text-3);
  opacity: 0.5;
}

/* Weather hover popup */
.sv-wx-popup {
  display: none;
  position: fixed;
  z-index: 999;
  width: 260px;
  background: rgba(18, 22, 36, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 14px;
  pointer-events: none;
  animation: wxPopIn 0.15s ease-out;
}
@keyframes wxPopIn {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.sv-wx-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sv-wx-popup-hour {
  font-size: 14px;
  font-weight: 900;
  color: var(--accent);
}
.sv-wx-popup-cond {
  font-size: 13px;
  color: var(--text-1);
}
.sv-wx-popup-body {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.sv-wx-popup-compass {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.sv-wx-popup-wind-label {
  font-size: 11px;
  font-weight: 700;
  color: #00e5ff;
  letter-spacing: 0.5px;
}
.sv-wx-popup-calm {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 20px 0;
}
.sv-wx-popup-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.sv-wx-popup-stat {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sv-wx-popup-stat-icon {
  font-size: 16px;
}
.sv-wx-popup-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-1);
  min-width: 50px;
}
.sv-wx-popup-stat-lbl {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Ruler v2 */
.sv-tl-ruler-v2 {
  position: relative;
  height: 28px;
  border-bottom: 1px solid var(--border);
  margin-left: 110px;
  overflow: hidden;
}
.sv-tl-phase {
  position: absolute;
  top: 0;
  bottom: 0;
  opacity: 0.25;
}
.sv-tl-night-l,
.sv-tl-night-r {
  background: linear-gradient(180deg, #0a0e1a, #141830);
}
.sv-tl-dawn {
  background: linear-gradient(90deg, #1a1040, #ff8c42 80%);
}
.sv-tl-dayphase {
  background: linear-gradient(180deg, #ffa726 0%, #fff3e0 50%, #ffa726 100%);
  opacity: 0.12;
}
.sv-tl-dusk {
  background: linear-gradient(90deg, #ff6f42, #1a1040 80%);
}
.sv-tl-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.sv-tl-tick-major {
  background: rgba(255, 255, 255, 0.12);
}
.sv-tl-tick-lbl {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  color: var(--text-3);
  font-weight: 700;
  white-space: nowrap;
}
.sv-tl-tick-major .sv-tl-tick-lbl {
  font-size: 9px;
  color: var(--text-2);
}

/* Now marker — precise current-time indicator */
.sv-tl-now {
  position: absolute;
  top: -2px;
  bottom: -2px;
  z-index: 8;
  width: 3px;
  background: #ff2222;
  box-shadow:
    0 0 12px 3px rgba(255, 34, 34, 0.8),
    0 0 24px 6px rgba(255, 34, 34, 0.35);
  pointer-events: auto;
  cursor: pointer;
  animation: nowPulse 1.2s ease-in-out infinite;
}
.sv-tl-now::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  pointer-events: auto;
}
@keyframes nowPulse {
  0%,
  100% {
    box-shadow:
      0 0 12px 3px rgba(255, 34, 34, 0.8),
      0 0 24px 6px rgba(255, 34, 34, 0.35);
    opacity: 1;
  }
  50% {
    box-shadow:
      0 0 22px 8px rgba(255, 34, 34, 1),
      0 0 40px 12px rgba(255, 34, 34, 0.5);
    opacity: 0.8;
  }
}
.sv-tl-now-flag {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 900;
  color: #fff;
  background: #ff2222;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  letter-spacing: 0.5px;
  box-shadow:
    0 2px 10px rgba(255, 34, 34, 0.7),
    0 0 20px rgba(255, 34, 34, 0.3);
  animation: nowFlagPulse 1.2s ease-in-out infinite;
}
@keyframes nowFlagPulse {
  0%,
  100% {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    box-shadow: 0 2px 10px rgba(255, 34, 34, 0.7);
  }
  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.1);
    box-shadow:
      0 2px 18px rgba(255, 34, 34, 1),
      0 0 30px rgba(255, 34, 34, 0.5);
  }
}
.sv-tl-now-flag::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ff2222;
}
.sv-tl-now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 6;
  background: #ff2222;
  box-shadow:
    0 0 12px 3px rgba(255, 34, 34, 0.7),
    0 0 24px 6px rgba(255, 34, 34, 0.3);
  pointer-events: auto;
  cursor: pointer;
  animation: nowPulse 1.2s ease-in-out infinite;
}
.sv-tl-now-line::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -6px;
  right: -6px;
  pointer-events: auto;
}
/* Now-line detail popup */
.sv-now-popup {
  display: none;
  position: fixed;
  z-index: 1000;
  width: 280px;
  background: rgba(18, 22, 36, 0.97);
  border: 1px solid rgba(255, 34, 34, 0.3);
  border-radius: 12px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(255, 34, 34, 0.15);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  padding: 16px;
  pointer-events: none;
  animation: wxPopIn 0.15s ease-out;
}
.sv-now-popup-time {
  font-size: 22px;
  font-weight: 900;
  color: #ff4444;
  text-align: center;
  letter-spacing: 1px;
  text-shadow: 0 0 12px rgba(255, 68, 68, 0.6);
}
.sv-now-popup-date {
  font-size: 11px;
  color: var(--text-3);
  text-align: center;
  margin-bottom: 10px;
}
.sv-now-popup-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
  margin: 8px 0 12px;
  overflow: hidden;
}
.sv-now-popup-progress-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff4444, #ff8844);
  transition: width 0.3s;
}
.sv-now-popup-pct {
  font-size: 10px;
  color: var(--text-3);
  text-align: center;
  margin-top: -6px;
  margin-bottom: 8px;
}
.sv-now-popup-section {
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 8px 0 4px;
  font-weight: 700;
}
.sv-now-popup-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text-1);
}
.sv-now-popup-item-icon {
  font-size: 14px;
}
.sv-now-popup-item-name {
  font-weight: 700;
  flex: 1;
}
.sv-now-popup-item-time {
  font-size: 11px;
  color: var(--text-3);
}
.sv-now-popup-none {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  padding: 2px 0;
}

/* Schedule tracks v2 */
.sv-tl-tracks-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.sv-tl-row {
  display: flex;
  align-items: center;
  min-height: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  transition: background 0.1s;
}
.sv-tl-row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.sv-tl-row-label {
  width: 110px;
  flex-shrink: 0;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-tl-row-icon {
  font-size: 12px;
}
.sv-tl-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-tl-row-bar {
  flex: 1;
  position: relative;
  height: 24px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 3px;
  overflow: hidden;
}
.sv-tl-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  min-width: 4px;
  background: var(--bar-clr, #00d4ff);
  opacity: 0.8;
  cursor: default;
  transition:
    opacity 0.15s,
    transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 6px rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 6px
    color-mix(in srgb, var(--bar-clr, #00d4ff) 40%, transparent);
}
.sv-tl-bar:hover {
  opacity: 1;
  transform: scaleY(1.3);
  z-index: 3;
}
.sv-tl-bar-text {
  font-size: 8px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  overflow: hidden;
}

/* Legend v2 */
.sv-tl-legend-v2 {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-3);
  font-weight: 600;
  clear: both;
}
.sv-tl-leg2 {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sv-tl-ldot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.sv-tl-ldot-now {
  background: #ff4444;
  box-shadow: 0 0 4px #ff4444;
}
.sv-tl-leg-sep {
  color: var(--border);
  font-weight: 300;
}
.sv-tl-leg-now {
  color: #ff6666;
}

/* Old timeline classes hidden */
.sv-tl-v2 {
  display: none;
}
.sv-tl-wx {
  display: none;
}
.sv-tl-periods {
  display: none;
}
.sv-tl-ruler {
  display: none;
}
.sv-tl-tracks {
  display: none;
}
.sv-tl-noon-line {
  display: none;
}

/* ── Mobile tweaks ── */
@media (max-width: 600px) {
  .retro-clock-bar {
    padding: 8px 10px;
    gap: 10px;
  }
  .retro-clock-time {
    font-size: 20px;
    letter-spacing: 1px;
  }
  .retro-clock-face {
    padding: 6px 10px;
  }
  .retro-clock-date {
    font-size: 10px;
  }
  .retro-clock-sub {
    font-size: 9px;
  }
  .retro-clock-week {
    padding: 4px 10px;
    min-width: 70px;
  }
  .retro-clock-week-big {
    font-size: 22px;
  }
  .sv-tl-topbar {
    padding: 8px 10px;
  }
  .sv-tl-topbar-title {
    font-size: 10px;
  }
  .sv-compass {
    padding: 4px 6px 4px 4px;
    gap: 5px;
  }
  .sv-compass-svg {
    width: 42px;
    height: 42px;
  }
  .sv-compass-wx {
    font-size: 11px;
  }
  .sv-compass-wind {
    font-size: 9px;
  }
  .sv-tl-row-label {
    width: 80px;
    font-size: 10px;
    padding: 0 6px;
  }
  .sv-tl-ruler-v2 {
    margin-left: 80px;
  }
  .sv-tl-wxrow-label {
    width: 80px;
    font-size: 10px;
  }
  .sv-tl-day-hd {
    padding: 6px 8px 2px 8px;
  }
  .sv-tl-day-label {
    font-size: 11px;
  }
  .sv-tl-wxrow {
    height: 52px;
  }
  .sv-wxr-icon {
    font-size: 14px;
  }
  .sv-wxr-temp {
    font-size: 9px;
  }
  .sv-wxr-compass {
    width: 20px;
    height: 20px;
  }
}

/* ── Weekly Calendar ── */
.sv-weekly {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  overflow: hidden;
}
.sv-wk-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.sv-wk-col {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 6px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  transition: border-color 0.2s;
}
.sv-wk-today {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.04);
}
.sv-wk-hd {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.sv-wk-day {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-1);
}
.sv-wk-full {
  font-size: 9px;
  color: var(--text-3);
  font-weight: 500;
  display: none;
}
.sv-wk-today-dot {
  color: var(--accent);
  font-size: 8px;
  margin-left: auto;
}
.sv-wk-count {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 6px;
}
.sv-wk-slots {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.sv-wk-empty {
  text-align: center;
  color: var(--text-3);
  font-size: 12px;
  opacity: 0.4;
  padding: 10px 0;
}
.sv-wk-slot {
  padding: 4px 5px;
  border-radius: 4px;
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-left: 3px solid transparent;
}
.sv-wk-am {
  background: rgba(255, 183, 77, 0.08);
  border-left-color: rgba(255, 183, 77, 0.5);
}
.sv-wk-pm {
  background: rgba(103, 58, 183, 0.08);
  border-left-color: rgba(103, 58, 183, 0.5);
}
.sv-wk-slot-time {
  font-weight: 800;
  font-family: "SF Mono", Consolas, monospace;
  color: var(--accent);
  font-size: 10px;
}
.sv-wk-slot-zone {
  color: var(--text-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sv-wk-slot-dur {
  color: var(--text-3);
  font-size: 9px;
}

/* ── Weekly responsive ── */
@media (min-width: 769px) {
  .sv-wk-full {
    display: inline;
  }
}
@media (max-width: 600px) {
  .sv-wk-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .sv-wk-col {
    min-height: 90px;
  }
  .sv-tl-track-label {
    width: 70px;
    font-size: 10px;
  }
  .sv-tab {
    padding: 6px 8px;
    font-size: 11px;
  }
  .sv-tab-icon {
    font-size: 12px;
  }
}
@media (max-width: 400px) {
  .sv-wk-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================================
   VIEW: Logs
   ============================================================ */
.logs-table {
  width: 100%;
  border-collapse: collapse;
}
.logs-table th {
  text-align: left;
  padding: 8px 12px;
  background: var(--bg-3);
  color: var(--accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.logs-table td {
  padding: 8px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-light);
}
.logs-table tr:hover td {
  background: var(--bg-card-hover);
}
.log-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  white-space: nowrap;
}
.log-status.completed {
  background: var(--online);
  color: #000;
}
.log-status.interrupted {
  background: var(--warning);
  color: #000;
}
.log-status.failed {
  background: var(--zone-error);
  color: #fff;
}
.log-row-failed td {
  opacity: 0.7;
}
.log-row-failed td:first-child {
  border-left: 3px solid var(--zone-error);
}

/* ══════ Log Checkboxes + Bulk Bar ══════ */
.log-th-cb,
.log-td-cb {
  width: 36px;
  text-align: center;
  padding: 6px 4px !important;
}
.log-cb,
#log-select-all {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}
.log-row-selected td {
  background: rgba(0, 212, 255, 0.08) !important;
}
.log-bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  margin-bottom: 8px;
  background: var(--bg-2);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-1);
}
#log-sel-count {
  font-weight: 700;
  color: var(--accent);
}

/* ══════ Log Sub-info Lines ══════ */
.log-zone-id {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 1px;
}
.log-esp-label {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 400;
  margin-top: 1px;
}
.log-date-rel {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 1px;
}
.log-no-data {
  color: var(--text-3);
}
.recent-failed {
  opacity: 0.7;
  border-left: 3px solid var(--zone-error);
  padding-left: 6px;
}
.zd-log-failed {
  opacity: 0.7;
  border-left: 3px solid var(--zone-error);
  padding-left: 6px;
}

/* ============================================================
   VIEW: Alerts
   ============================================================ */
.alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}
.alerts-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.alerts-select-all-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}
.alert-check-label {
  display: flex;
  align-items: center;
  margin-right: 6px;
}
.alert-check {
  cursor: pointer;
  accent-color: var(--accent);
}

/* Base card */
.alert-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--zone-error);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  animation: alertSlideIn 0.3s;
}
/* Type-specific left border */
.alert-card--offline { border-left-color: #f59e0b; }
.alert-card--timeout { border-left-color: #ef4444; }
.alert-card--signal  { border-left-color: #6366f1; }
.alert-card--generic { border-left-color: var(--zone-error); }

@keyframes alertSlideIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}
.alert-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

/* Type badge */
.alert-type-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.alert-type-badge--offline { background: rgba(245,158,11,0.15); color: #f59e0b; }
.alert-type-badge--timeout { background: rgba(239,68,68,0.15); color: #ef4444; }
.alert-type-badge--signal  { background: rgba(99,102,241,0.15); color: #6366f1; }
.alert-type-badge--generic { background: rgba(239,68,68,0.15); color: var(--zone-error); }

/* Detail tags (ESP / zone) */
.alert-detail-tags {
  display: flex;
  gap: 4px;
  align-items: center;
}
.alert-esp-tag, .alert-zone-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.alert-time {
  font-size: 11px;
  color: var(--text-3);
  margin-left: auto;
}
.alert-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}
.alert-actions {
  margin-top: 8px;
}

/* No data */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-3);
}
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.5;
}
.empty-state-text {
  font-size: 14px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Mobile: show bottom nav, hide top tabs */
@media (max-width: 768px) {
  .top-tabs {
    display: none;
  }
  .bottom-nav {
    display: flex;
  }
  .fab {
    bottom: calc(var(--bnav-h) + 20px);
  }
  .app-content {
    padding: 10px;
  }
  .dash-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .esp-grid {
    grid-template-columns: 1fr;
  }
  .header-greeting {
    display: none;
  }
  .modal-card {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }

  /* Map mobile */
  .m-bar {
    padding: 4px 6px;
    gap: 4px;
  }
  .m-bar-l {
    gap: 4px;
  }
  .m-title {
    font-size: 13px;
    display: none;
  }
  .m-chip {
    display: none;
  }
  .m-nav {
    gap: 0;
    padding: 1px;
  }
  .m-nav-btn {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .m-btn-txt {
    display: none;
  }
  .m-btn {
    padding: 4px 7px;
    font-size: 10px;
  }
  .m-mini {
    display: none !important;
  }
  .m-panel {
    position: fixed;
    bottom: var(--bnav-h);
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    padding: 14px;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .m-ebar {
    flex-direction: column;
    gap: 5px;
    padding: 5px 8px;
  }
  .m-ebtns {
    width: 100%;
  }
  .m-leg {
    font-size: 9px;
    padding: 3px 8px;
    gap: 4px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 70%;
  }
  .m-leg-bar {
    display: none;
  }
  .m-leg-pill {
    font-size: 7px;
    padding: 1px 4px;
  }

  .logs-table-wrap {
    overflow-x: auto;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .bottom-nav {
    display: flex;
  }
  .top-tabs {
    display: none;
  }
  .fab {
    bottom: calc(var(--bnav-h) + 20px);
  }
  .dash-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Map tablet */
  .m-panel {
    position: fixed;
    bottom: var(--bnav-h);
    left: 0;
    right: 0;
    top: auto;
    width: auto;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    z-index: 200;
  }
}

/* Desktop: show top tabs, hide bottom nav */
@media (min-width: 1025px) {
  .top-tabs {
    display: flex;
  }
  .bottom-nav {
    display: none;
  }
  .fab {
    bottom: 24px;
    right: 24px;
  }
  .modal-card {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
  .modal {
    align-items: center;
  }
  .dash-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .zones-grid {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  }

  /* Map desktop */
  .m-panel {
    width: 320px;
  }
}

/* Large desktop */
@media (min-width: 1400px) {
  .app-content {
    padding: 20px 40px;
  }
  .m-panel {
    width: 360px;
  }
}

/* ============================================================
   SCHEDULE FORM / CONFIG MODALS
   ============================================================ */

/* Config banners (rain delay / override) */
.config-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  font-size: 13px;
  gap: 8px;
}
.rain-delay-banner {
  background: rgba(0, 136, 255, 0.12);
  border: 1px solid rgba(0, 136, 255, 0.3);
  color: var(--text-1);
}
.override-banner {
  background: rgba(255, 170, 68, 0.12);
  border: 1px solid rgba(255, 170, 68, 0.3);
  color: var(--text-1);
}

/* Day chips */
.day-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--border);
  color: var(--text-3);
  background: transparent;
  transition: all 0.15s;
}
.day-chip.active-day {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

/* Schedule delete button */
.sched-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sched-del {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 68, 68, 0.12);
  color: var(--zone-error);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sched-del:hover {
  background: rgba(255, 68, 68, 0.25);
}

/* Modal structure for dynamic modals */
.modal-content {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  animation: slideUp 0.25s;
  z-index: 1;
}
.sched-form-modal {
  max-width: 440px;
}
.modal-content .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-content .modal-header h3 {
  font-size: 15px;
  color: var(--text-1);
  font-weight: 700;
}
.modal-close-x {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 59, 59, 0.08);
  color: #ff3b3b;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 6px rgba(255, 59, 59, 0.4);
  transition: all 0.15s;
}
.modal-close-x:hover {
  background: rgba(255, 59, 59, 0.18);
  color: #ff1a1a;
  text-shadow: 0 0 10px rgba(255, 59, 59, 0.7);
}
.modal-content .modal-body {
  padding: 16px 20px;
  max-height: 55vh;
  overflow-y: auto;
}
.modal-content .modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}
@media (min-width: 1025px) {
  .modal-content {
    border-radius: var(--radius-lg);
    max-height: 80vh;
  }
}

/* Schedule form fields */
.sf-field {
  margin-bottom: 14px;
}
.sf-field label {
  display: block;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sf-select,
.sf-input {
  width: 100%;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.sf-select:focus,
.sf-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.12);
}
.sf-days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.sf-range {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  outline: none;
}
.sf-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
}

/* Buttons (modal context) */
.modal-content .btn-primary {
  width: auto;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0;
}
.modal-content .btn-primary:hover {
  opacity: 0.85;
  filter: none;
  box-shadow: none;
}
.modal-content .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-content .btn-outline {
  padding: 8px 18px;
}
/* Sidebar rain delay chip buttons — see .ms-chip-btn */

/* Override / Quick Run zone groups */
.ov-groups {
  max-height: 40vh;
  overflow-y: auto;
}
.ov-group {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
}
.ov-group-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-1);
}
.ov-zone-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 20px;
}
.ov-zone-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

/* ══════ Quick Run Modal (Tabs) ══════ */
.qr-modal-wide {
  max-width: 520px;
}
.qr-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
  gap: 2px;
  background: var(--bg-2);
}
.qr-tab {
  flex: 1;
  padding: 10px 4px;
  font-size: 12px;
  font-weight: 600;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  text-align: center;
}
.qr-tab:hover {
  color: var(--text-1);
}
.qr-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.qr-panel {
  padding: 16px 20px;
  max-height: 55vh;
  overflow-y: auto;
}

/* ── Quick Run / Schedule day buttons ── */
.qrs-days {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.qrs-day-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qrs-day-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.qrs-day-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

/* ── Upcoming / Próximos Riegos list ── */
.qru-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qru-loading,
.qru-empty {
  text-align: center;
  padding: 24px 0;
  color: var(--text-3);
  font-size: 13px;
}
.qru-alert {
  background: rgba(255, 193, 7, 0.12);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #ffc107;
}
.qru-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.qru-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.qru-item.qru-blocked {
  opacity: 0.55;
  border-color: rgba(255, 100, 100, 0.3);
}
.qru-item-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.qru-item-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.qru-item-time {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.qru-item-zone {
  font-size: 11px;
  color: var(--text-3);
}
.qru-item-dur {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.qru-item-blocked {
  font-size: 14px;
}
.qru-item-ok {
  font-size: 12px;
  color: var(--zone-active);
}

/* Schedule summary inside upcoming tab */
.qru-summary {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.qru-sum-ok {
  color: var(--zone-active);
  font-weight: 600;
}
.qru-sum-off {
  color: var(--text-3);
}
.qru-sched-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.qru-sched-left {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.qru-sched-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.qru-sched-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qru-sched-zone {
  font-size: 11px;
  color: var(--text-3);
}
.qru-sched-days {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.qru-sched-dur {
  font-size: 11px;
  color: var(--text-2);
}

/* ── Smart Window ── */
.sw-intro {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
}
.sw-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sw-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sw-field-lbl {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
}
.sw-time-sel {
  max-width: 180px;
}
.sw-summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin-bottom: 4px;
}
.sw-gap-info {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: 12px;
}
.sw-preview-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 35vh;
  overflow-y: auto;
}
.sw-preview-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
}
.sw-preview-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.sw-preview-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 68px;
}
.sw-preview-zone {
  flex: 1;
  color: var(--text-1);
}
.sw-preview-dur {
  font-size: 11px;
  color: var(--text-3);
}

/* ── Quick Run blue theme overrides (water theme instead of IPM purple) ── */
.qr-btn-run {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #1e90ff, #0070dd);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.qr-btn-run:hover {
  background: linear-gradient(135deg, #3aa0ff, #1e90ff);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 144, 255, 0.3);
}
.qr-btn-run:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ── Zone Type Editor (settings) ── */
.zt-list {
  max-height: 50vh;
  overflow-y: auto;
}
.zt-esp-group {
  margin-bottom: 10px;
}
.zt-esp-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.zt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--bg-3);
}
.zt-zone-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zt-zone-id {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
  min-width: 80px;
}
.zt-select {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.zv-toggle {
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 12px;
  cursor: pointer;
  font-weight: 600;
  flex-shrink: 0;
}
.zv-visible {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border-color: #22c55e44;
}
.zv-hidden {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
  border-color: #ef444444;
}

/* ── Time Control Stepper ── */
.tc-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tc-label {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 700;
  min-width: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tc-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.tc-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: var(--bg-3);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-btn:hover {
  background: rgba(0, 212, 255, 0.12);
}
.tc-btn:active {
  background: rgba(0, 212, 255, 0.22);
}
.tc-btn-sm {
  width: 30px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
}
.tc-btn-sm:hover {
  color: var(--accent);
}
.tc-val {
  min-width: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}
.tc-unit {
  font-size: 12px;
  color: var(--text-3);
}
.tc-sep {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-2);
  padding: 0 3px;
  align-self: flex-end;
  margin-bottom: 2px;
}
.tc-time-picker {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.tc-ampm-picker {
  align-items: center;
}
.tc-ampm-btn {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(0, 212, 255, 0.3);
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 50px;
  text-align: center;
  user-select: none;
}
.tc-ampm-btn:hover {
  background: rgba(0, 212, 255, 0.2);
}

/* ── New Time Picker (AM/PM grid) ── */
.tp-picker {
  position: relative;
}
.tp-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
}
.tp-time-show {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.tp-edit-btn {
  margin-left: auto;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.tp-edit-btn:hover {
  background: rgba(0, 212, 255, 0.12);
}
.tp-dropdown {
  margin-top: 8px;
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  animation: slideUp 0.15s ease-out;
}
.tp-section {
  margin-bottom: 10px;
}
.tp-section:last-child {
  margin-bottom: 0;
}
.tp-sec-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.tp-hour-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}
.tp-hr-btn {
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tp-hr-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.tp-hr-btn.tp-hr-sel {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.35);
}
.tp-min-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tp-min-input {
  width: 52px;
  height: 38px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  outline: none;
  font-variant-numeric: tabular-nums;
}
.tp-min-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}
.tp-min-step {
  width: 42px;
  height: 38px;
  font-size: 14px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.tp-ampm-row {
  display: flex;
  gap: 4px;
}
.tp-ampm-opt {
  flex: 1;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 1px;
}
.tp-ampm-opt:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.tp-ampm-opt.tp-ampm-sel {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
}

/* ── Quick Run area groups ── */
.qr-area-list {
  max-height: 40vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qr-area-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  background: var(--bg-2);
}
.qr-area-hd {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-1);
}
.qr-area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qr-area-cnt {
  font-size: 11px;
  color: var(--text-3);
  font-weight: 400;
}
.qr-area-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-left: 24px;
}
.qr-area-zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

/* ── Map panel schedule button ── */
.mp-sched-btn {
  background: rgba(0, 212, 255, 0.1) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(0, 212, 255, 0.25) !important;
  margin-top: 6px;
}
.mp-sched-btn:hover {
  background: rgba(0, 212, 255, 0.2) !important;
}

/* ── Polygon Zone Picker modal ── */
.pzp-modal {
  max-width: 440px;
}
.pzp-search {
  margin-bottom: 12px;
}
.pzp-list {
  max-height: 50vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pzp-group-hd {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.pzp-zone-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  cursor: pointer;
  transition: all 0.15s;
  text-align: left;
  color: var(--text-1);
  font-size: 13px;
  margin-bottom: 3px;
}
.pzp-zone-btn:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.06);
}
.pzp-zone-label {
  flex: 1;
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pzp-zone-id {
  font-size: 11px;
  color: var(--text-3);
  flex-shrink: 0;
}
.pzp-zone-mode {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--text-3);
  flex-shrink: 0;
}
.pzp-zone-mode.pzp-has-poly {
  background: rgba(0, 212, 255, 0.12);
  color: var(--accent);
}

/* ══════ Schedule Edit Button ══════ */
.sched-edit {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 212, 255, 0.1);
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.sched-edit:hover {
  background: rgba(0, 212, 255, 0.25);
}
.sf-readonly {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
}

/* ══════ Log Filters ══════ */
.log-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.log-filter-ctrl {
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
  min-width: 0;
}
.log-filter-ctrl:focus {
  border-color: var(--accent);
}
#log-filter-custom-dates {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.log-count {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 8px;
}

/* ══════ Zone Detail Panel ══════ */
.zone-detail-modal {
  max-width: 420px;
}
.zone-detail-modal .modal-header {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zone-detail-modal .modal-header h3 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zd-rename-btn {
  font-size: 14px;
  padding: 2px 6px;
}

/* Status banners */
.zd-status-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 10px;
}
.zd-banner-active {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
}
.zd-banner-pending {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
}
.zd-banner-fail {
  background: rgba(239, 68, 68, 0.12);
  color: #ef4444;
}
.zd-banner-treatment {
  background: rgba(168, 85, 247, 0.12);
  color: #a855f7;
}

/* IPM Treatment banners — zone detail panel */
.zd-tx-info-banner,
.zd-tx-block-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}
.zd-tx-info-banner {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.25);
}
.zd-tx-block-banner {
  background: rgba(168, 85, 247, 0.15);
  border: 2px solid rgba(168, 85, 247, 0.5);
}
.zd-tx-info-icon,
.zd-tx-block-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.zd-tx-info-body,
.zd-tx-block-body {
  flex: 1;
  min-width: 0;
}
.zd-tx-info-title,
.zd-tx-block-title {
  font-weight: 800;
  font-size: 13px;
  color: #a855f7;
}
.zd-tx-block-title {
  color: #c084fc;
}
.zd-tx-info-sub {
  font-size: 11px;
  color: var(--text-2);
  margin-top: 2px;
  opacity: 0.85;
}
.zd-tx-info-time,
.zd-tx-block-time {
  font-size: 12px;
  font-weight: 700;
  color: #a855f7;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.zd-tx-block-product {
  font-size: 12px;
  color: var(--text-1);
  margin-top: 2px;
}
.zd-tx-info-notes,
.zd-tx-block-notes {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  font-style: italic;
}
.zd-banner-action {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.zd-compact-timer {
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

/* Summary cards */
.zd-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.zd-sum-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: var(--bg-3);
  border-radius: var(--radius-sm);
}
.zd-sum-icon {
  font-size: 16px;
  line-height: 1;
  margin-top: 2px;
}
.zd-sum-info {
  flex: 1;
  min-width: 0;
}
.zd-sum-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  font-weight: 600;
}
.zd-sum-value {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 600;
  margin-top: 2px;
}
.zd-sum-none {
  color: var(--text-3);
  font-weight: 400;
}
.zd-sum-days {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.zd-day-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  background: var(--bg-2);
  color: var(--text-3);
  border: 1px solid var(--border);
}
.zd-day-on {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Admin action buttons */
.zd-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.zd-act-btn {
  flex: 1;
  padding: 9px 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  text-align: center;
}
.zd-act-primary {
  background: var(--accent);
  color: #fff;
}
.zd-act-danger {
  background: var(--danger, #ef4444);
  color: #fff;
}
.zd-act-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-2);
}
.zd-act-treatment {
  background: rgba(168, 85, 247, 0.15);
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}
.zd-act-treatment:hover {
  background: rgba(168, 85, 247, 0.25);
}
.zd-act-treatment-cancel {
  background: transparent;
  border: 1px solid rgba(168, 85, 247, 0.3);
  color: #a855f7;
}
.zd-act-treatment-cancel:hover {
  background: rgba(168, 85, 247, 0.1);
}

/* IPM History button */
.zd-act-ipm-hist {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.2);
  color: #c084fc;
  font-size: 14px;
}
.zd-act-ipm-hist:hover {
  background: rgba(168, 85, 247, 0.18);
}

/* IPM History Modal */
.ipm-hist-modal {
  max-height: 85vh;
}
.ipmh-body {
  overflow-y: auto;
  max-height: 65vh;
  padding-bottom: 12px;
}
.ipmh-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-3);
  font-size: 15px;
}
.ipmh-empty {
  text-align: center;
  padding: 40px 20px;
}
.ipmh-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.ipmh-empty-text {
  color: var(--text-3);
  font-size: 15px;
  line-height: 1.4;
}
.ipmh-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.ipmh-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.15);
  border-radius: 10px;
  padding: 10px 8px;
  gap: 3px;
}
.ipmh-stat-val {
  font-size: 22px;
  font-weight: 700;
  color: #c084fc;
}
.ipmh-stat-lbl {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.3;
}
.ipmh-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ipmh-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 14px 16px;
  border-left: 3px solid rgba(168, 85, 247, 0.4);
}
.ipmh-card-clear {
  border-left-color: rgba(239, 68, 68, 0.4);
}
.ipmh-card-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.ipmh-badge {
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 10px;
}
.ipmh-badge-set {
  background: rgba(168, 85, 247, 0.15);
  color: #c084fc;
}
.ipmh-badge-clear {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}
.ipmh-card-date {
  font-size: 13px;
  color: var(--text-3);
  margin-left: auto;
  font-weight: 500;
}
.ipmh-card-details {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ipmh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  padding: 3px 0;
}
.ipmh-detail-lbl {
  color: var(--text-3);
  font-weight: 500;
  font-size: 13px;
}
.ipmh-detail-val {
  color: var(--text-1);
  text-align: right;
  max-width: 60%;
  word-break: break-word;
  font-size: 14px;
  font-weight: 500;
}
.ipmh-wx {
  font-size: 11px;
  color: var(--text-3);
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  padding: 4px 8px;
  margin-top: 4px;
}

/* IPM History Tabs */
.ipmh-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 6px;
}
.ipmh-tab {
  flex: 1; padding: 10px 10px; border: none; background: transparent;
  color: var(--text-3); font-size: .95rem; font-weight: 600; cursor: pointer;
  border-radius: 8px 8px 0 0; transition: all .2s;
}
.ipmh-tab:hover { background: rgba(255,255,255,0.04); color: var(--text-1); }
.ipmh-tab-active { background: rgba(168,85,247,0.12); color: #c084fc; }
.ipmh-tab-count {
  font-size: .8rem; font-weight: 700; background: rgba(168,85,247,0.2);
  color: #c084fc; border-radius: 8px; padding: 2px 8px; margin-left: 4px;
}
.ipmh-tab-content { }
.ipmh-empty-sm { text-align: center; color: var(--text-3); padding: 24px; font-size: 1rem; line-height: 1.4; }

/* IPM Groups tab */
.ipmh-groups-list { display: flex; flex-direction: column; gap: 8px; }
.ipmh-group-card {
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.12);
  border-left: 3px solid rgba(168,85,247,0.4);
  border-radius: 10px;
  padding: 14px 16px;
}
.ipmh-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 6px;
}
.ipmh-group-name {
  font-size: 1.05rem; font-weight: 700; color: var(--text-1);
}
.ipmh-group-date {
  font-size: .9rem; color: var(--text-3); font-weight: 500;
}
.ipmh-group-details {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.ipmh-group-tag {
  font-size: .9rem; color: var(--text-2);
  background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 4px 10px;
  font-weight: 500;
}

/* Dual-column layout */
.ipm-hist-wide.modal-content,
.ipm-hist-wide.tx-modal-pro { max-width: 92vw !important; width: 850px; }
.ipmh-dual { display: flex; gap: 14px; min-height: 200px; }
.ipmh-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ipmh-col-title {
  font-size: 1.1rem; font-weight: 700; color: var(--text-2);
  margin-bottom: 10px; display: flex; align-items: center; gap: 8px;
}
.ipmh-col-count {
  font-size: .9rem; font-weight: 600; color: var(--text-3);
  background: rgba(255,255,255,0.06); border-radius: 10px; padding: 3px 10px;
}

/* Report card actions */
.ipmh-card-actions { display: flex; gap: 6px; margin-top: 8px; }
.ipmh-btn-done, .ipmh-btn-del {
  flex: 1; padding: 8px 12px; border: none; border-radius: 8px;
  font-size: .9rem; font-weight: 600; cursor: pointer; transition: all .2s;
}
.ipmh-btn-done {
  background: rgba(34,197,94,0.12); color: #22c55e;
}
.ipmh-btn-done:hover { background: rgba(34,197,94,0.25); }
.ipmh-btn-del {
  background: rgba(239,68,68,0.1); color: #ef4444;
}
.ipmh-btn-del:hover { background: rgba(239,68,68,0.2); }

/* Archive section */
.ipmh-archive-title {
  font-size: 1rem; font-weight: 600; color: var(--text-3);
  margin: 14px 0 8px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.ipmh-archive-list { display: flex; flex-direction: column; gap: 4px; }
.ipmh-row-done {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: rgba(34,197,94,0.04); border-radius: 8px; font-size: .95rem;
  color: var(--text-3);
}
.ipmh-row-done .ipmh-compact-main { font-weight: 500; }
.ipmh-rpt-plant { color: #22c55e; font-size: .95rem; flex-shrink: 0; font-weight: 600; }

@media (max-width: 600px) {
  .ipmh-dual { flex-direction: column; }
  .ipm-hist-wide.modal-content,
  .ipm-hist-wide.tx-modal-pro { max-width: 98vw !important; width: 98vw; }
}

/* Report cards (bigger) */
.ipmh-card-report {
  border-left-color: rgba(251,146,60,0.5);
  background: rgba(251,146,60,0.04);
}
.ipmh-badge-report {
  background: rgba(251,146,60,0.15);
  color: #fb923c;
}

/* Compact treatment rows */
.ipmh-compact-list { display: flex; flex-direction: column; gap: 6px; }
.ipmh-compact-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,0.02); border-radius: 8px; font-size: 1rem;
}
.ipmh-badge-sm { font-size: 16px; flex-shrink: 0; }
.ipmh-compact-date { color: var(--text-3); min-width: 60px; flex-shrink: 0; font-size: .95rem; font-weight: 500; }
.ipmh-compact-main { color: var(--text-1); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.ipmh-compact-pest { color: #fb923c; flex-shrink: 0; font-size: .95rem; font-weight: 500; }
.ipmh-compact-hrs { color: var(--text-3); flex-shrink: 0; font-size: .95rem; }
.ipmh-compact-wx { color: var(--text-3); flex-shrink: 0; font-size: .9rem; }
.ipmh-compact-by { color: var(--text-3); flex-shrink: 0; margin-left: auto; font-size: .95rem; }

/* IPM Report Modal */
.ipm-report-modal { max-height: 85vh; }
.rpt-body { padding: 0 16px 16px; }
.rpt-step-label { font-size: .82rem; font-weight: 600; color: var(--text-2); margin: 10px 0 6px; }
.rpt-block-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rpt-chip {
  padding: 5px 14px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03); color: var(--text-2); font-size: .85rem;
  font-weight: 700; cursor: pointer; transition: all .2s;
}
.rpt-chip:hover { background: rgba(168,85,247,0.1); border-color: rgba(168,85,247,0.3); }
.rpt-chip-active { background: rgba(168,85,247,0.2); border-color: #c084fc; color: #c084fc; }
.rpt-plant-list { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.rpt-plant-btn {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02); border-radius: 8px; color: var(--text-1);
  cursor: pointer; transition: all .15s; text-align: left; font-size: .8rem;
}
.rpt-plant-btn:hover { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); }
.rpt-plant-active { background: rgba(34,197,94,0.15); border-color: #22c55e; }
.rpt-plant-name { font-weight: 600; flex: 1; }
.rpt-plant-loc { color: var(--text-3); font-size: .75rem; }
.rpt-plant-qty { color: var(--text-3); font-size: .75rem; min-width: 30px; text-align: right; }
.rpt-pest-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rpt-selected-plant {
  padding: 8px 12px; background: rgba(34,197,94,0.08); border-radius: 8px;
  font-size: .82rem; color: #22c55e;
}
.rpt-label { font-size: .8rem; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.rpt-label select, .rpt-label input, .rpt-label textarea {
  padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04); color: var(--text-1); font-size: .82rem;
}
.rpt-no-plants { color: var(--text-3); text-align: center; padding: 16px; font-size: .82rem; }

/* Pest type chips */
.rpt-pest-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
}
.rpt-pest-chip {
  padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color: var(--text-2);
  font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .2s;
}
.rpt-pest-chip:hover {
  background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.3);
}
.rpt-pest-chip-active {
  background: rgba(251,146,60,0.2); border-color: #fb923c; color: #fb923c;
}

/* Report button style */
.zd-act-report {
  background: rgba(251,146,60,0.12); color: #fb923c; border: 1px solid rgba(251,146,60,0.25);
}
.zd-act-report:hover { background: rgba(251,146,60,0.2); }

/* Clickable summary card (irrigation history) */
.zd-sum-clickable {
  cursor: pointer;
  position: relative;
  transition: background 0.2s;
}
.zd-sum-clickable:hover {
  background: rgba(0,170,255,0.08);
}
.zd-sum-clickable:active {
  background: rgba(0,170,255,0.14);
}
.zd-sum-chevron {
  font-size: 18px;
  color: var(--text-3);
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
}

/* Irrigation History Modal */
.irrh-modal {
  max-height: 85vh;
}
.irrh-body {
  overflow-y: auto;
  max-height: 65vh;
  padding-bottom: 12px;
}
.irrh-loading {
  text-align: center;
  padding: 32px;
  color: var(--text-3);
  font-size: 14px;
}
.irrh-empty {
  text-align: center;
  padding: 40px 20px;
}
.irrh-empty-icon {
  font-size: 36px;
  margin-bottom: 8px;
}
.irrh-empty-text {
  color: var(--text-3);
  font-size: 13px;
}
.irrh-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.irrh-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 3px solid rgba(0,170,255,0.4);
}
.irrh-card-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.irrh-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.irrh-badge-ok {
  background: rgba(34,197,94,0.12);
  color: #4ade80;
}
.irrh-badge-warn {
  background: rgba(245,158,11,0.12);
  color: #fbbf24;
}
.irrh-badge-fail {
  background: rgba(239,68,68,0.12);
  color: #f87171;
}
.irrh-card-date {
  font-size: 12px;
  color: var(--text-3);
  font-weight: 500;
}
.irrh-card-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.irrh-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 2px 0;
}
.irrh-detail-lbl {
  color: var(--text-3);
  font-weight: 500;
}
.irrh-detail-val {
  color: var(--text-1);
  font-weight: 600;
}

/* Expand/collapse */
.zd-expand-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-bottom: 6px;
}
.zd-expand-btn:hover {
  color: var(--text-1);
  border-color: var(--accent);
}
.zd-expand-arrow {
  display: inline-block;
  transition: transform 0.2s;
  font-size: 14px;
}

/* Expandable detail groups */
.zd-expand-section {
  animation: fadeInUp 0.2s ease;
}
.zd-detail-group {
  margin-bottom: 12px;
}
.zd-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 6px;
}
.zd-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.zd-row span:first-child {
  color: var(--text-3);
}
.zd-row span:last-child {
  color: var(--text-1);
  font-weight: 600;
}

/* Existing styles kept */
.zd-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.zd-active {
  color: var(--zone-active) !important;
}
.zd-inactive {
  color: var(--text-3) !important;
}
.zd-btn {
  font-size: 13px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.zd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin: 14px 0 8px;
}
.zd-empty {
  font-size: 12px;
  color: var(--text-3);
  padding: 6px 0;
}
.zd-sched-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.zd-sched-time {
  font-weight: 700;
  color: var(--accent);
  min-width: 44px;
}
.zd-sched-days {
  flex: 1;
  color: var(--text-2);
}
.zd-sched-dur {
  color: var(--accent);
  font-weight: 700;
  font-family: "SF Mono", Consolas, monospace;
  background: rgba(0, 212, 255, 0.08);
  padding: 1px 6px;
  border-radius: 5px;
  white-space: nowrap;
}
.zd-enabled {
  color: var(--zone-active);
}
.zd-disabled {
  color: var(--text-3);
}
.zd-log-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.zd-log-item span {
  flex: 1;
}
.zd-loading {
  text-align: center;
  padding: 24px 0;
  color: var(--text-3);
}
.zd-sched-form {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin: 4px 0 8px;
}
.zd-sched-form .sf-field {
  margin-bottom: 8px;
}
.zd-sched-form label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 4px;
}
.zd-sched-form .sf-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  color: var(--text-1);
  font-size: 13px;
  box-sizing: border-box;
}

/* ══════ Dashboard Recent Activity ══════ */
.dash-recent-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 20px;
}
.recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.recent-zone {
  font-weight: 700;
  color: var(--text-1);
  min-width: 70px;
}
.recent-time {
  color: var(--text-3);
  min-width: 50px;
}
.recent-dur {
  color: var(--text-2);
}
.recent-trigger {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-3);
  color: var(--text-3);
}
.empty-state-sm {
  text-align: center;
  padding: 16px 0;
  color: var(--text-3);
  font-size: 13px;
}
.dash-flow-badge {
  font-size: 11px;
  font-weight: 400;
  color: var(--accent);
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 212, 255, 0.1);
}

/* ══════ Settings: Limits ══════ */
.setting-input-sm {
  width: 60px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.setting-input-sm:focus {
  border-color: var(--accent);
}

/* ══════ Settings: Map Tools ══════ */
.stg-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.stg-tool-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stg-tool-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.stg-tool-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.stg-tool-preview {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  object-fit: cover;
  background: var(--bg-2);
}
.stg-tool-input {
  width: 100%;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  outline: none;
}
.stg-tool-input:focus {
  border-color: var(--accent);
}
.stg-tool-file-btn {
  padding: 4px 10px;
  font-size: 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  cursor: pointer;
}

/* ══════ GPH Edit (Zone Detail) ══════ */
.zd-gph-edit {
  display: flex;
  align-items: center;
  gap: 6px;
}
.zd-gph-input {
  width: 70px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
  outline: none;
}
.zd-gph-input:focus {
  border-color: var(--accent);
}
.zd-gph-edit span {
  font-size: 12px;
  color: var(--text-3);
}
.zd-gph-save {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.2s;
}
.zd-gph-save:hover {
  background: var(--accent-dim);
}

/* ══════ Toggle Switch ══════ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  border-radius: 22px;
  border: 1px solid var(--border);
  transition: background 0.2s;
  cursor: pointer;
}
.toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: var(--text-3);
  border-radius: 50%;
  transition:
    transform 0.2s,
    background 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(18px);
  background: var(--accent);
}

/* ══════ CSV Export ══════ */
#log-export-csv {
  margin-left: auto;
}

/* ══════ Responsive: Log Filters ══════ */
@media (max-width: 600px) {
  .log-filter-ctrl {
    flex: 1 1 45%;
  }
  .zd-log-item {
    font-size: 11px;
    gap: 4px;
  }
  .analytics-summary {
    grid-template-columns: 1fr 1fr;
  }
  .chart-wrap svg {
    height: auto;
  }
}

/* ══════ Log Tabs ══════ */
.log-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--border);
}
.log-tab {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.log-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.log-tab:hover {
  color: var(--text-1);
}

/* ══════ Delete button ══════ */
.log-delete-btn {
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}
.log-delete-btn:hover {
  background: rgba(255, 60, 60, 0.1) !important;
}

/* ══════ Analytics ══════ */
.analytics-period {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.analytics-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 10px;
  text-align: center;
}
.analytics-card-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}
.analytics-card-lbl {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 4px;
}

/* ══════ SVG Charts ══════ */
.chart-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-bottom: 14px;
}
.chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 8px;
}
.chart-empty {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 20px 0;
}
.svg-chart {
  width: 100%;
  max-height: 220px;
}
.svg-chart-lg {
  max-height: none;
  height: auto;
}
.chart-rssi-container {
  position: relative;
}
.chart-label {
  font-size: 9px;
  fill: var(--text-3);
  font-family: inherit;
}
.chart-axis-title {
  font-size: 10px;
  fill: var(--text-3);
  font-weight: 600;
  font-family: inherit;
}
.chart-band-label {
  font-size: 8px;
  font-weight: 600;
  font-family: inherit;
  opacity: 0.6;
}
.chart-grid {
  stroke: var(--border);
  stroke-width: 0.5;
  stroke-dasharray: 3, 3;
}
.chart-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.chart-area {
  opacity: 0.15;
}
.chart-dot {
  fill: var(--accent);
  stroke: var(--bg-1);
  stroke-width: 1.5;
  cursor: pointer;
}
.chart-dot:hover {
  r: 5;
}

/* ── Enhanced signal chart styles ── */
.chart-wrap-lg {
  padding: 18px;
}
.chart-wrap-lg .svg-chart {
  max-height: none;
}
.chart-wrap-individual {
  min-width: 0;
}
.signal-individual-hdr {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-2);
  margin: 16px 0 8px;
}
.signal-individual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* Disconnection gap zones */
.chart-gap-zone {
  fill: rgba(239, 68, 68, 0.12);
  stroke: none;
  cursor: help;
}
.chart-gap-zone:hover {
  fill: rgba(239, 68, 68, 0.22);
}

/* Signal line + dot hover effects */
.chart-signal-line {
  transition: opacity 0.15s;
}
.chart-signal-dot {
  cursor: pointer;
  transition: r 0.15s;
}
.chart-signal-dot:hover {
  r: 5.5;
  stroke-width: 2;
}

/* Crosshair line */
.chart-crosshair {
  stroke: var(--text-3);
  stroke-width: 1;
  stroke-dasharray: 4, 3;
  pointer-events: none;
  opacity: 0.5;
}

/* ══════ Top Zones ══════ */
.top-zones-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.top-zone-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.top-zone-name {
  min-width: 100px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.top-zone-bar-wrap {
  flex: 1;
  height: 14px;
  background: var(--bg-3);
  border-radius: 7px;
  overflow: hidden;
}
.top-zone-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #22c55e);
  border-radius: 7px;
  transition: width 0.4s ease;
}
.top-zone-stat {
  font-size: 11px;
  color: var(--text-3);
  white-space: nowrap;
}

/* ---- Toast Notifications ---- */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-card);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 20px;
  font-size: 13px;
  z-index: 99999;
  opacity: 0;
  transition: all 0.3s ease;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-error {
  border-color: var(--error);
  background: var(--bg-card);
}
.toast-success {
  border-color: var(--success);
  background: var(--bg-card);
}
.toast-warn {
  border-color: #f59e0b;
  background: #1a150a;
}

/* ---- Map Water Consumption Widget ---- */
.m-water {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 15;
  background: rgba(10, 15, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  transition: opacity 0.3s ease;
}
.m-water-active {
  display: flex;
  border-color: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.3);
}
.m-water-icon-svg {
  flex-shrink: 0;
  display: block;
}
.m-water-data {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.m-water-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
}
.m-water-val {
  font-size: 16px;
  font-weight: 800;
  color: #3b82f6;
  font-variant-numeric: tabular-nums;
}
.m-water-gal {
  color: #22c55e;
}
.m-water-unit {
  font-size: 10px;
  color: var(--text-3);
}
.m-water-zones {
  font-size: 10px;
  color: var(--text-3);
}
.m-water-zones span {
  font-weight: 700;
  color: var(--accent);
}
@media (max-width: 480px) {
  .m-water {
    bottom: 48px;
    left: 8px;
    padding: 8px 10px;
    min-width: 120px;
  }
  .m-water-val {
    font-size: 14px;
  }
  .m-water-icon-svg {
    width: 18px;
    height: 18px;
  }
  .m-leg {
    bottom: 8px;
    right: 8px;
    padding: 3px 6px;
    font-size: 8px;
    gap: 3px;
    max-width: 60%;
  }
  .m-leg-pill {
    font-size: 6px;
    padding: 1px 3px;
  }
}

/* ── Map Tools FAB ── */
.m-tools {
  position: absolute;
  bottom: 72px;
  right: 14px;
  z-index: 16;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 10px;
}
.m-tools-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--bg-card);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.4),
    0 0 12px var(--accent-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  flex-shrink: 0;
}
.m-tools-fab:active {
  transform: scale(0.92);
}
.m-tools-fab svg {
  transition: transform 0.3s ease;
}
.m-tools.open .m-tools-fab svg {
  transform: rotate(45deg);
}
.m-tools-fab:hover {
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.5),
    0 0 18px var(--accent-glow);
}
.m-tools-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.m-tools-ring:empty {
  display: none;
}
.m-tools-item {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transform: scale(0.3);
  opacity: 0;
  transition:
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease,
    box-shadow 0.2s ease;
  flex-shrink: 0;
  position: relative;
}
.m-tools.open .m-tools-item {
  display: flex;
  opacity: 1;
  transform: scale(1);
}
.m-tools.open .m-tools-item:hover {
  box-shadow: 0 2px 16px var(--accent-glow);
  border-color: var(--accent);
}
.m-tools-item:nth-child(1) {
  transition-delay: 0ms;
}
.m-tools-item:nth-child(2) {
  transition-delay: 40ms;
}
.m-tools-item:nth-child(3) {
  transition-delay: 80ms;
}
.m-tools-item:nth-child(4) {
  transition-delay: 120ms;
}
.m-tools-item:nth-child(5) {
  transition-delay: 160ms;
}
.m-tools-item:nth-child(6) {
  transition-delay: 200ms;
}
.m-tools-item img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
}
.m-tools-item .m-tools-letter {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  text-shadow: 0 0 8px var(--accent-glow);
}
.m-tools-tip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(10, 15, 25, 0.95);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--accent);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.5),
    0 0 8px var(--accent-glow);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 10;
}
.m-tools-item:hover .m-tools-tip,
.m-tools-item.touched .m-tools-tip {
  opacity: 1;
}

@media (max-width: 480px) {
  .m-tools {
    bottom: 58px;
    right: 10px;
    gap: 8px;
  }
  .m-tools-fab {
    width: 42px;
    height: 42px;
  }
  .m-tools-ring {
    gap: 6px;
  }
  .m-tools-item {
    width: 36px;
    height: 36px;
  }
  .m-tools-item img {
    width: 24px;
    height: 24px;
  }
}

/* ---- Deshierve in-panel styles ---- */
.desh-loading, .desh-err {
  text-align: center;
  padding: 30px 0;
  color: #94a3b8;
  font-size: 14px;
}
.desh-err { color: #ef4444; }

.desh-zone-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.desh-zone-icon { font-size: 18px; }
.desh-zone-name {
  font-weight: 700;
  font-size: 16px;
  color: #e2e8f0;
  flex: 1;
}
.desh-zone-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 10px;
}
.desh-zone-lbl-green { color: #22c55e; background: rgba(34,197,94,0.12); }
.desh-zone-lbl-yellow { color: #eab308; background: rgba(234,179,8,0.12); }
.desh-zone-lbl-red { color: #ef4444; background: rgba(239,68,68,0.12); }
.desh-zone-lbl-none { color: #64748b; background: rgba(100,116,139,0.12); }

.desh-zone-days {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.desh-zone-days-green { background: rgba(34,197,94,0.08); }
.desh-zone-days-yellow { background: rgba(234,179,8,0.08); }
.desh-zone-days-red { background: rgba(239,68,68,0.08); }
.desh-zone-days-none { background: rgba(100,116,139,0.08); }
.desh-zone-days-num {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}
.desh-zone-days-green .desh-zone-days-num { color: #22c55e; }
.desh-zone-days-yellow .desh-zone-days-num { color: #eab308; }
.desh-zone-days-red .desh-zone-days-num { color: #ef4444; }
.desh-zone-days-none .desh-zone-days-num { color: #64748b; }
.desh-zone-days-txt {
  font-size: 13px;
  color: #94a3b8;
}

.desh-zone-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 12px;
}
.desh-pend {
  font-size: 11px;
  color: #f97316;
  font-weight: 600;
  background: rgba(249,115,22,0.12);
  padding: 2px 8px;
  border-radius: 8px;
}

.desh-section-title {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 12px 0 6px;
}

.desh-last-card {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: #e2e8f0;
  padding: 8px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border, #1e293b);
  border-radius: 8px;
}
.desh-last-none { color: #64748b; }

.desh-hist-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #94a3b8;
  padding: 4px 12px;
  border-left: 2px solid var(--border, #1e293b);
  margin-left: 4px;
}

.desh-reg-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.desh-reg-form label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 500;
}
.desh-reg-form select, .desh-reg-form textarea {
  background: var(--bg-1, #080c14);
  color: #e2e8f0;
  border: 1px solid var(--border, #1e293b);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
}
.desh-reg-form textarea { resize: vertical; }
.desh-btn-save {
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.2s;
  align-self: flex-end;
}
.desh-btn-save:hover { background: #16a34a; }
.desh-btn-save:disabled { opacity: 0.5; cursor: not-allowed; }

.desh-subs-label {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .85rem; color: #cbd5e1; margin-bottom: 4px;
}
.desh-subs-all {
  font-size: .7rem; padding: 2px 8px; border-radius: 6px;
  border: 1px solid #475569; background: transparent; color: #94a3b8; cursor: pointer;
}
.desh-subs-all:hover { background: #334155; color: #e2e8f0; }
.desh-subs-grid {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px;
}
.desh-sub-chk {
  display: flex; align-items: center; gap: 4px;
  font-size: .8rem; color: #e2e8f0; cursor: pointer;
  background: #1e293b; border: 1px solid #334155; border-radius: 6px;
  padding: 3px 8px;
}
.desh-sub-chk input { accent-color: #22c55e; }

/* ---- Custom Modal Dialog ---- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
}
.modal-overlay.active {
  opacity: 1;
}
.modal-dialog {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  min-width: 320px;
  max-width: 90vw;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.modal-dialog-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 8px;
}
.modal-dialog-msg {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.5;
  margin-bottom: 16px;
  white-space: pre-line;
}
.modal-dialog-input {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  margin-bottom: 16px;
  outline: none;
}
.modal-dialog-input:focus {
  border-color: var(--accent);
}
.modal-dialog-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.modal-btn-cancel {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 13px;
}
.modal-btn-cancel:hover {
  background: var(--bg-3);
}
.modal-btn-ok {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #000;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
}
.modal-btn-ok:hover {
  filter: brightness(1.1);
}

/* ---- Zone Groups: Zones View ---- */
.zg-filter {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 12px;
  cursor: pointer;
  min-width: 120px;
}
.filter-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.zg-section {
  margin-bottom: 24px;
}
.zg-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 16px;
  border-left: 4px solid var(--border);
  border-radius: 8px;
  background: var(--bg-2);
  margin-bottom: 10px;
  box-shadow: 0 1px 0 var(--border);
  position: relative;
}
.zg-header::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.zg-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.zg-name {
  font-weight: 800;
  font-size: 14px;
  color: var(--text-1);
  letter-spacing: 0.2px;
}
.zg-count {
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 2px 9px;
  border-radius: 10px;
  font-weight: 700;
}
.zg-users {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(0, 212, 255, 0.07);
  border: 1px solid rgba(0, 212, 255, 0.18);
  border-radius: 20px;
  padding: 3px 10px 3px 7px;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.zg-badge {
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1;
}
#zones-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---- Zone Groups: Settings ---- */
.zg-settings-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--bg-3);
  border-radius: 8px;
  margin-bottom: 6px;
}
.zg-settings-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.zg-settings-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
}
.zg-settings-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-1);
}
.zg-settings-meta {
  font-size: 11px;
  color: var(--text-3);
}
.zg-settings-actions {
  display: flex;
  gap: 4px;
}
.btn-xs {
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
}

/* ---- Zone Groups: Editor Modal ---- */
.zg-ed-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  margin: 12px 0 4px;
}
.zg-icon-picker,
.zg-color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.zg-icon-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-3);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zg-icon-btn.active {
  border-color: var(--accent);
  background: var(--accent-bg, rgba(0, 200, 83, 0.15));
}

/* ── Stepper wide value (duration) ── */
.tc-val-wide {
  min-width: 52px;
}

/* ── Relay Expansion ── */
.relay-exp-intro {
  font-size: 12px;
  color: var(--text-3);
  line-height: 1.5;
  padding: 0 0 12px;
}
.relay-esp-group {
  margin-bottom: 16px;
}
.relay-esp-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.relay-esp-summary {
  font-size: 11px;
  font-weight: 400;
}
.relay-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
}
.relay-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 6px;
  border-radius: 8px;
  border: 1px solid var(--border);
  text-align: center;
  min-height: 64px;
  justify-content: center;
  gap: 2px;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.relay-slot-idx {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  position: absolute;
  top: 3px;
  left: 6px;
}
.relay-slot-name {
  font-size: 11px;
  color: var(--text-1);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
}
.relay-slot-type {
  font-size: 10px;
  color: var(--text-3);
}
.rs-catalog {
  background: var(--bg-2);
  border-color: var(--border);
}
.rs-custom {
  background: rgba(0, 200, 83, 0.08);
  border-color: rgba(0, 200, 83, 0.35);
}
.rs-custom:hover {
  border-color: var(--accent);
}
.rs-empty {
  background: var(--bg-3);
  border: 1px dashed var(--border);
  cursor: pointer;
}
.rs-empty:hover {
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.05);
}
.relay-slot-add {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}
.rs-empty:hover .relay-slot-add {
  color: var(--accent);
}
.relay-slot-actions {
  display: flex;
  gap: 2px;
  position: absolute;
  top: 2px;
  right: 2px;
}
.relay-slot-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.relay-slot-btn:hover {
  opacity: 1;
}
.rs-hidden {
  opacity: 0.45;
}

/* ══════ Signal Analytics Tab ══════ */
.signal-view {
  padding-bottom: 32px;
}
.signal-header {
  margin-bottom: 16px;
}
.signal-header h2 {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-1);
}
.signal-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.signal-periods {
  display: flex;
  gap: 4px;
}
.signal-period-btn {
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.signal-period-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.signal-period-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Signal node filter chips */
.signal-chip-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.signal-chip {
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-3);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.signal-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.signal-chip.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Downtime / Red Muerta Panel */
.signal-downtime-wrap {
  border-left: 3px solid #ef4444;
}
.signal-downtime-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signal-downtime-node {
  background: var(--bg-3);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.sdn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.sdn-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}
.sdn-uptime {
  font-size: 12px;
  font-weight: 700;
}
.sdn-ok {
  font-size: 12px;
  color: var(--success);
}
.sdn-bar {
  position: relative;
  height: 10px;
  background: var(--bg-1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 6px;
}
.sdn-gap {
  position: absolute;
  top: 0;
  height: 100%;
  background: #ef4444;
  opacity: 0.6;
  border-radius: 2px;
}
.sdn-gap.sdn-ongoing {
  background: repeating-linear-gradient(
    90deg,
    #ef4444,
    #ef4444 4px,
    transparent 4px,
    transparent 8px
  );
  opacity: 0.8;
}
.sdn-gaps-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sdn-gap-item {
  font-size: 11px;
  color: var(--text-3);
}
.sdn-gap-item strong {
  color: #ef4444;
}
.sdn-live {
  color: #ef4444;
  font-weight: 700;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% {
    opacity: 0.4;
  }
}

.signal-esp-select {
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 12px;
}

/* Signal quality distribution bars */
.signal-quality-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.signal-quality-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signal-quality-name {
  min-width: 120px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.signal-quality-bar {
  flex: 1;
  height: 22px;
  display: flex;
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-3);
}
.sq-segment {
  height: 100%;
  transition: width 0.4s ease;
  min-width: 0;
}
.sq-excellent {
  background: #22c55e;
}
.sq-good {
  background: #eab308;
}
.sq-fair {
  background: #f97316;
}
.sq-weak {
  background: #ef4444;
}
.sq-critical {
  background: #dc2626;
}

/* Signal legend */
.signal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-3);
}
.sl-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* RSSI chart background bands */
.band-excellent {
  fill: #22c55e;
  opacity: 0.1;
}
.band-good {
  fill: #eab308;
  opacity: 0.1;
}
.band-fair {
  fill: #f97316;
  opacity: 0.1;
}
.band-weak {
  fill: #ef4444;
  opacity: 0.1;
}
.band-critical {
  fill: #dc2626;
  opacity: 0.12;
}

@media (max-width: 600px) {
  .signal-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .signal-quality-name {
    min-width: 80px;
    font-size: 11px;
  }
  .signal-quality-bar {
    height: 18px;
  }
  .signal-individual-grid {
    grid-template-columns: 1fr;
  }
}
.rs-hidden .relay-slot-name {
  text-decoration: line-through;
}

/* Relay slot modal */
.relay-modal-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}
.relay-modal-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
}
.relay-modal-input {
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-1);
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}
.relay-modal-input:focus {
  border-color: var(--accent);
}
.relay-modal-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.zg-color-btn {
  width: 24px;
  height: 24px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
}
.zg-color-btn.active {
  border-color: var(--text-1);
  box-shadow: 0 0 0 2px var(--bg-1);
}
.zg-zone-list {
  max-height: 180px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 4px;
  padding: 6px;
  background: var(--bg-3);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.zg-zone-cb {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}
.zg-zone-cb:hover {
  background: var(--bg-2);
}
.zg-zone-cb input {
  accent-color: var(--accent);
}

/* ---- Full-Screen Settings ---- */
.stg {
  padding: 12px;
}
.stg-header h2 {
  font-size: 20px;
  margin: 0 0 12px;
}
.stg-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.stg-tab {
  padding: 8px 16px;
  border: none;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.stg-tab.active {
  background: var(--accent);
  color: #fff;
}
.stg-panel {
  display: none;
}
.stg-panel.active {
  display: block;
  animation: fadeIn 0.2s;
}
.stg-desc {
  font-size: 12px;
  color: var(--text-3);
  margin: 0 0 12px;
  line-height: 1.5;
}
.stg-loading {
  color: var(--text-3);
  font-size: 12px;
  padding: 16px;
  text-align: center;
}
.stg-empty {
  color: var(--text-3);
  font-size: 12px;
  padding: 16px;
  text-align: center;
  font-style: italic;
}

.setting-group {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
}
.setting-group h3 {
  font-size: 14px;
  margin: 0 0 12px;
  color: var(--text-1);
}
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  gap: 8px;
}
.setting-row:last-child {
  border-bottom: none;
}
.setting-row > span {
  font-size: 13px;
  color: var(--text-2);
}
.setting-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
}
.setting-input-sm {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
  text-align: center;
}
.setting-row select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-3);
  color: var(--text-1);
  font-size: 13px;
}
.logo-upload {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ---- Settings: User Cards ---- */
.stg-user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-3);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.stg-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.stg-user-avatar-mini {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}
.stg-user-info {
  flex: 1;
  min-width: 0;
}
.stg-user-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.stg-user-role {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}
.stg-user-id {
  font-family: monospace;
  opacity: 0.7;
}
.stg-user-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.stg-user-group-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}
.stg-user-no-group {
  font-size: 10px;
  color: var(--text-3);
  font-style: italic;
}
.stg-user-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* ---- Settings: Group Cards ---- */
.stg-group-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: var(--bg-3);
  border-radius: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
}
.stg-group-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.stg-group-info {
  flex: 1;
  min-width: 0;
}
.stg-group-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-1);
}
.stg-group-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.stg-group-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.stg-zone-chip {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.stg-zone-more {
  background: var(--accent);
  color: #fff;
  border: none;
  font-weight: 600;
}
.stg-group-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  margin-top: 4px;
}

/* ---- Zone Group Editor Modal ---- */
.zge-modal {
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
}
.zge-row {
  display: flex;
  gap: 16px;
}
.zge-col {
  flex: 1;
}
.zge-esp-group {
  margin-bottom: 8px;
}
.zge-esp-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.zge-esp-zones {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 2px;
}
.zge-zones-scroll {
  max-height: 220px;
  overflow-y: auto;
}
.zge-users-list {
  max-height: 140px;
}
.zg-user-cb {
  display: flex;
  align-items: center;
  gap: 6px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Zone Group Headers: Enhanced ---- */
.zg-header-click {
  transition: background 0.15s;
}
.zg-header-click:hover {
  background: var(--bg-3);
}
.zg-active-badge {
  font-size: 11px;
  color: var(--zone-active);
  font-weight: 700;
  background: var(--zone-active-bg);
  padding: 2px 8px;
  border-radius: 10px;
}
.zg-arrow {
  margin-left: auto;
  font-size: 18px;
  color: var(--text-3);
  transition: transform 0.15s;
}
.zg-header-click:hover .zg-arrow {
  transform: translateX(3px);
  color: var(--accent);
}

/* ============================================
   GROUP DETAIL VIEW (Polygon)
   ============================================ */
.gd {
  padding: 12px;
  animation: fadeIn 0.2s;
}
.gd-header {
  border-bottom: 3px solid var(--accent);
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.gd-back {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 8px;
}
.gd-back:hover {
  text-decoration: underline;
}
.gd-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gd-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.gd-title {
  font-size: 20px;
  margin: 0;
  color: var(--text-1);
}
.gd-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Stats row */
.gd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.gd-stat {
  background: var(--bg-2);
  border-radius: 10px;
  padding: 12px;
  border-left: 3px solid var(--border);
  text-align: center;
}
.gd-stat-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-1);
}
.gd-stat-label {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* Section titles */
.gd-section {
  margin-bottom: 16px;
}
.gd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  margin: 0 0 8px;
}

/* Users */
.gd-users {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.gd-user-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-2);
  border-radius: 20px;
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-1);
}
.gd-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.gd-user-role {
  font-size: 14px;
}

/* ESP distribution */
.gd-esp-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.gd-esp-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  border: 1px solid var(--border);
}
.gd-esp-offline {
  opacity: 0.5;
}
.gd-esp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.gd-dot-on {
  background: var(--success);
}
.gd-dot-off {
  background: var(--danger);
}
.gd-esp-cnt {
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}

/* Zone Points Grid */
.gd-zone-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gd-zone-point {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.15s;
}
.gd-zone-point:hover {
  background: var(--bg-3);
  transform: translateX(3px);
}
.gd-zone-point.gd-zp-active {
  border-color: var(--zone-active);
  background: var(--zone-active-bg);
}

/* Zone dot (colored by type) */
.gd-zp-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.type-bg-drip {
  background: var(--type-drip);
}
.type-bg-mist {
  background: var(--type-mist);
}
.type-bg-sprinkler {
  background: var(--type-sprinkler);
}
.gd-zp-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--zone-active);
  animation: ledBlink 1s infinite;
}

/* Zone info */
.gd-zp-info {
  flex: 1;
  min-width: 0;
}
.gd-zp-name {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-1);
}
.gd-zp-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-3);
}
.gd-zp-esp {
  font-size: 10px;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 6px;
}
.gd-zp-last {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  font-size: 11px;
  flex-wrap: wrap;
}
.gd-zp-timer {
  color: var(--zone-active);
  font-weight: 700;
  font-family: monospace;
}
.gd-zp-hours {
  font-weight: 600;
}
.gd-zp-hours.gd-urg-ok {
  color: var(--success);
}
.gd-zp-hours.gd-urg-warn {
  color: var(--warning, #f59e0b);
}
.gd-zp-hours.gd-urg-crit {
  color: var(--danger);
}
.gd-zp-hours.gd-urg-none {
  color: var(--text-3);
}
.gd-zp-trigger {
  font-size: 10px;
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 6px;
  color: var(--text-3);
}
.gd-zp-by {
  font-size: 10px;
  color: var(--text-3);
}

/* LED indicator */
.gd-zp-led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: 0.3;
  flex-shrink: 0;
}
.gd-led-on {
  background: var(--zone-active);
  opacity: 1;
  box-shadow: 0 0 6px var(--zone-active-glow);
  animation: ledBlink 1s infinite;
}

/* Responsive - phone */
@media (max-width: 480px) {
  .gd-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .gd-zp-meta {
    flex-wrap: wrap;
  }
}

/* ---- Accessibility ---- */

/* Reduced motion — disable all animations/transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Focus visible — keyboard navigation indicator */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) {
  outline: none;
}

/* Print styles */
@media print {
  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }
  .app-header,
  .bottom-nav,
  .top-tabs,
  .fab,
  .more-menu,
  .alert-banner,
  .modal,
  #splash-screen,
  #login-screen,
  .global-clock {
    display: none !important;
  }
  .app-content {
    padding: 0;
    margin: 0;
  }
  .zone-card,
  .esp-card,
  .sched-card {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* ═══════════════════════════════════════════════════════
   BELT (Cinta) — 3D horizontal cylinder timeline
   ═══════════════════════════════════════════════════════ */

/* ── Container ── */
.belt-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}

/* ── Day navigation dots ── */
.belt-days {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 6px;
}
.belt-day-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: none;
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.1;
}
.belt-day-dot:hover {
  color: var(--text-1);
  background: var(--bg-3);
}
.belt-day-dot.belt-day-active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0, 212, 255, 0.08);
}
.belt-day-dot .belt-dd-name {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.belt-day-dot .belt-dd-num {
  font-size: 14px;
  font-weight: 900;
}

/* ── 3D Scene ── */
.belt-scene {
  perspective: 1200px;
  perspective-origin: 50% 50%;
  width: 100%;
  height: 320px;
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.belt-scene:active {
  cursor: grabbing;
}

.belt-cylinder {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: none;
  will-change: transform;
}
.belt-cylinder.belt-snap {
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Each face (1 hour column) ── */
.belt-face {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  padding: 10px 6px 8px;
  box-sizing: border-box;
  border-left: 1px solid rgba(255, 255, 255, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  overflow: visible;
}
/* Remove seam borders on pressure faces for line continuity */
.belt-face.belt-pressure {
  border-left-color: transparent;
  border-right-color: transparent;
}
.belt-face::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 35%,
    rgba(0, 0, 0, 0.12) 100%
  );
  pointer-events: none;
}

/* Pressure zone coloring */
.belt-face.belt-pressure {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.13) 0%,
    rgba(5, 150, 105, 0.05) 100%
  );
}

/* ── Fixed-height header section ── */
.belt-face-head {
  min-height: 82px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* ── Pressure line — inside head for continuity across faces ── */
.belt-pline {
  width: calc(100% + 40px);
  margin-left: -20px;
  height: 4px;
  flex-shrink: 0;
  margin-top: auto;
  border-radius: 0;
  position: relative;
  z-index: 5;
}
.belt-pline-off {
  background: transparent;
  height: 4px;
  width: calc(100% + 40px);
  margin-left: -20px;
}
.belt-face.belt-pressure .belt-pline {
  background: #00ff88;
  box-shadow:
    0 0 10px 2px #00ff88,
    0 0 25px 4px rgba(0, 255, 136, 0.5);
}
/* Partial pressure line for edge hours (15-min fractions) */
.belt-pline.belt-pline-partial {
  width: 100%;
  margin-left: 0;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.belt-pline.belt-pline-partial::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pl, 0%);
  width: var(--pw, 100%);
  height: 100%;
  background: #00ff88;
  box-shadow:
    0 0 10px 2px #00ff88,
    0 0 25px 4px rgba(0, 255, 136, 0.5);
}
.belt-face.belt-no-pressure {
  background: linear-gradient(
    180deg,
    rgba(20, 24, 32, 0.95),
    rgba(15, 18, 25, 0.98)
  );
}

/* Daylight backgrounds — layered on top of pressure */
.belt-face.belt-night {
  --dl-overlay: rgba(10, 12, 25, 0.55);
}
.belt-face.belt-dawn {
  --dl-overlay: linear-gradient(
    180deg,
    rgba(255, 140, 50, 0.1) 0%,
    rgba(255, 100, 30, 0.03) 100%
  );
}
.belt-face.belt-dusk {
  --dl-overlay: linear-gradient(
    180deg,
    rgba(180, 80, 180, 0.1) 0%,
    rgba(120, 50, 140, 0.03) 100%
  );
}
.belt-face.belt-daylight {
  --dl-overlay: rgba(255, 255, 255, 0.03);
}
/* Daylight overlay via pseudo-element (stacks on top of pressure) */
.belt-face.belt-night::before {
  background: var(--dl-overlay, transparent);
}
.belt-face.belt-dawn::before {
  background: linear-gradient(
    180deg,
    rgba(255, 160, 60, 0.12) 0%,
    rgba(255, 120, 40, 0.02) 50%,
    rgba(0, 0, 0, 0.1) 100%
  );
}
.belt-face.belt-dusk::before {
  background: linear-gradient(
    180deg,
    rgba(200, 100, 180, 0.1) 0%,
    rgba(140, 60, 140, 0.03) 50%,
    rgba(0, 0, 0, 0.12) 100%
  );
}
.belt-face.belt-daylight::before {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.01) 35%,
    rgba(0, 0, 0, 0.08) 100%
  );
}
/* Night faces are visibly darker */
.belt-face.belt-night .belt-hr-time {
  opacity: 0.6;
}
.belt-face.belt-night .belt-wx {
  opacity: 0.7;
}
/* Pressure + daylight combo */
.belt-face.belt-pressure.belt-daylight {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.16) 0%,
    rgba(34, 197, 94, 0.04) 100%
  );
}
.belt-face.belt-pressure.belt-dawn,
.belt-face.belt-pressure.belt-dusk {
  background: linear-gradient(
    180deg,
    rgba(16, 185, 129, 0.1) 0%,
    rgba(34, 197, 94, 0.03) 50%,
    rgba(255, 140, 60, 0.03) 100%
  );
}
/* Neon line glow per daylight state */
.belt-face.belt-pressure.belt-night .belt-pline {
  box-shadow:
    0 0 8px #00ff88,
    0 0 20px rgba(0, 255, 136, 0.6);
}
.belt-face.belt-pressure.belt-daylight .belt-pline {
  box-shadow:
    0 0 5px #00ff88,
    0 0 10px rgba(0, 255, 136, 0.3);
}

/* ── Face header ── */
.belt-hr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  margin-bottom: 6px;
  flex-shrink: 0;
  text-align: center;
}
.belt-hr-time {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-1);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.belt-hr-badge {
  font-size: 8px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 8px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  white-space: nowrap;
}
.belt-hr-badge.belt-badge-ok {
  background: rgba(34, 197, 94, 0.15);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.belt-hr-badge.belt-badge-low {
  background: rgba(239, 68, 68, 0.1);
  color: rgba(239, 68, 68, 0.7);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* ── Now pill ── */
.belt-now-pill {
  text-align: center;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  background: #ef4444;
  padding: 1px 4px;
  border-radius: 6px;
  white-space: nowrap;
  margin-bottom: 4px;
  flex-shrink: 0;
}

/* ── Schedule groups inside face ── */
.belt-groups {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  scrollbar-width: none;
}
.belt-groups::-webkit-scrollbar {
  display: none;
}

/* ════════════════════════════════════════════════════════════
   Smart Conflict, Mi Zona
   ═══════════════════════════════════════════════════════════ */
.btn-mi-zona {
  padding: 9px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
  border: 1px solid;
}
.btn-mi-zona:hover {
  background: rgba(160, 60, 255, 0.22);
}

/* Smart Conflict styles */
.sf-conflict-warn {
  font-size: 13px;
  font-weight: 600;
  color: var(--warning, #ffa000);
  margin-bottom: 6px;
}
.sf-conflict-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}
.sf-conflict-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border);
}
.sf-conflict-limit {
  color: var(--error, #ff5252);
}
.sf-conflict-pressure {
  color: var(--warning, #ffa000);
}

/* Mi Zona */
.mz-users {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mz-user-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.mz-user-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.mz-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.mz-user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-1);
}
.mz-user-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-3);
}
.mz-zone-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mz-zone-pick {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 11px;
  cursor: pointer;
  background: var(--bg-card);
  transition: all 0.12s;
}
.mz-zone-pick:has(input:checked) {
  background: rgba(0, 212, 255, 0.12);
  border-color: var(--accent);
}
.mz-zone-pick input {
  display: none;
}

/* My Zones view */
.mzv-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mzv-zone {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.mzv-zone-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.mzv-no-sched {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
}
.mzv-sched-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mzv-sched-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
}


@media (max-width: 600px) {
  .sched-header-actions {
    flex-wrap: wrap;
  }
  .btn-mi-zona {
    font-size: 12px;
    padding: 7px 10px;
  }
}

.belt-grp {
  border-radius: 5px;
  padding: 3px 4px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid var(--grp-clr, var(--border));
}
.belt-grp-hd {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-2);
  margin-bottom: 1px;
  flex-wrap: wrap;
}
.belt-grp-icon {
  font-size: 10px;
}
.belt-grp-name {
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══════════════════════════════════════
   Unified Scheduler (op-*)
   ═══════════════════════════════════════ */
.op-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  background: var(--bg-1, #121212);
  color: var(--text-1, #fff);
  overflow: hidden;
}
.op-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-2, #1e1e1e);
  border-bottom: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.op-header h2 { margin: 0; font-size: 18px; }
.op-close-btn {
  background: none; border: none; color: var(--text-2); font-size: 28px;
  cursor: pointer; padding: 0 4px; line-height: 1;
}
.op-body {
  flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 12px 14px 24px;
}
.op-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--bg-2, #1e1e1e);
  border-top: 1px solid var(--border, #333);
  flex-shrink: 0;
}
.op-pw-banner {
  background: linear-gradient(135deg, rgba(33,150,243,.15), rgba(76,175,80,.12));
  border: 1px solid rgba(33,150,243,.3);
  border-radius: 8px; padding: 8px 12px;
  font-weight: 600; font-size: 13px;
}
.op-pw-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.op-pw-day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 4px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.05);
}
.op-pw-day-off { opacity: .35; }
.op-pw-day-name {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  color: var(--text-2); letter-spacing: .5px;
}
.op-pw-day-val { font-size: 11px; white-space: nowrap; font-weight: 600; }
.op-pw-day-hrs { font-size: 10px; color: var(--text-2); font-weight: 600; }

/* ── Mode toggle (Presión / Manual) ── */
.op-mode-toggle {
  display: flex; gap: 0; margin-bottom: 10px;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.2);
}
.op-mode-btn {
  flex: 1; padding: 10px 14px;
  font-size: 14px; font-weight: 700;
  background: transparent; color: var(--text-2);
  border: none; cursor: pointer;
  transition: background .2s, color .2s;
}
.op-mode-btn:hover { background: rgba(255,255,255,.06); }
.op-mode-btn.op-mode-active {
  background: rgba(33,150,243,.22);
  color: #64b5f6;
  box-shadow: inset 0 -2px 0 #64b5f6;
}
.op-mode-btn[data-mode="manual"].op-mode-active {
  background: rgba(255,152,0,.18);
  color: #ffb74d;
  box-shadow: inset 0 -2px 0 #ffb74d;
}

/* ── Manual time inputs ── */
.op-manual-times {
  background: rgba(255,152,0,.08);
  border: 1px solid rgba(255,152,0,.25);
  border-radius: 10px; padding: 14px 16px;
  margin-bottom: 8px;
}
.op-manual-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.op-manual-row:last-of-type { margin-bottom: 4px; }
.op-manual-label {
  font-size: 13px; font-weight: 600; color: var(--text-2);
  min-width: 80px;
}
.op-manual-input {
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.3); color: var(--text-1, #fff);
  font-size: 15px; font-weight: 600;
  font-family: inherit;
}
.op-manual-input:focus {
  outline: none; border-color: #ffb74d;
  box-shadow: 0 0 0 2px rgba(255,152,0,.25);
}
.op-manual-window {
  font-size: 12px; font-weight: 600;
  color: var(--text-2); text-align: right;
  margin-top: 4px;
}
@media (max-width: 480px) {
  .op-pw-grid { grid-template-columns: repeat(4, 1fr); }
}
.op-section {
  background: var(--bg-2, #1e1e1e);
  border: 1px solid var(--border, #333);
  border-radius: 12px; margin-bottom: 10px;
  overflow: hidden;
}
/* Type-coded section borders + header tint (blue=sprk, green=drip, orange=mist).
   Same visual language as the row colors and preview columns. */
.op-section-sprk { border-left: 4px solid #2196F3; }
.op-section-drip { border-left: 4px solid #4caf50; }
.op-section-mist { border-left: 4px solid #f59e0b; }
.op-section-sprk > .op-sec-hdr { background: rgba(33,150,243,.10); color: #64b5f6; }
.op-section-drip > .op-sec-hdr { background: rgba(76,175,80,.10); color: #81c784; }
.op-section-mist > .op-sec-hdr { background: rgba(245,158,11,.10); color: #ffb74d; }
.op-sec-hdr {
  padding: 12px 16px; cursor: pointer;
  font-weight: 700; font-size: 16px;
  user-select: none; display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.op-sec-hdr::-webkit-details-marker { display: none; }
.op-section[open] > .op-sec-hdr::before { content: '▾ '; font-size: 12px; }
.op-section:not([open]) > .op-sec-hdr::before { content: '▸ '; font-size: 12px; }
.op-sec-body { padding: 8px 14px 14px; }
.op-sec-badge {
  font-size: 12px; font-weight: 800; background: var(--accent, #2196F3);
  color: #fff; border-radius: 10px; padding: 2px 8px; margin-left: 6px;
}
.op-cfg-row {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 8px;
}
.op-cfg-lbl { font-weight: 600; font-size: 14px; min-width: 60px; }
.op-days { display: flex; gap: 5px; flex-wrap: wrap; }
.op-day-btn {
  padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--border, #444); background: transparent;
  color: var(--text-2); font-size: 13px; font-weight: 700;
  cursor: pointer; transition: background .15s, color .15s, transform .1s;
}
.op-day-btn:active { transform: scale(.95); }
.op-day-btn.active {
  background: var(--accent, #2196F3); color: #fff;
  border-color: var(--accent, #2196F3);
  box-shadow: 0 2px 8px rgba(33,150,243,.25);
}
.op-mode-sel {
  background: var(--bg-3, #2a2a2a); color: var(--text-1);
  border: 1px solid var(--border, #444); border-radius: 6px;
  padding: 5px 8px; font-size: 13px; font-weight: 600;
}
.op-stepper {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--border, #444); border-radius: 6px; overflow: hidden;
}
.op-sbtn {
  background: var(--bg-3, #2a2a2a); color: var(--text-1); border: none;
  padding: 4px 10px; font-size: 16px; font-weight: 700;
  cursor: pointer; line-height: 1;
}
.op-sbtn:active { background: var(--accent, #2196F3); }
.op-sval {
  width: 36px; text-align: center; border: none;
  background: var(--bg-2, #1e1e1e); color: var(--text-1);
  font-size: 14px; font-weight: 700; padding: 4px 0;
}
.op-unit { font-size: 11px; color: var(--text-3); margin-left: 4px; }
.op-x { font-weight: 700; color: var(--text-3); font-size: 14px; text-align: center; }
.op-zone-btns {
  display: flex; gap: 8px; margin-bottom: 10px;
}
.op-zones-list {
  display: flex; flex-direction: column; gap: 0;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}
/* Grid column header */
/* Unified compact grid (same on desktop and mobile, simpler & consistent UX).
   6 columns instead of 7 — the decorative "×" separator is hidden globally
   because the dur and rnd controls are visually distinct on their own. */
.op-grid-hdr {
  display: grid;
  grid-template-columns: 1.8fr 1fr 36px 48px 1.1fr .9fr;
  align-items: center; gap: 0;
  padding: 8px 0;
  background: rgba(255,255,255,.10);
  border-bottom: 2px solid rgba(255,255,255,.22);
}
/* Hide the decorative "×" separator and its column header */
.op-x { display: none !important; }
.op-grid-hdr .op-gh-x { display: none !important; }
.op-grid-hdr > span {
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .8px; color: var(--text-1);
  padding: 4px 10px; text-align: center;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.15);
}
.op-grid-hdr > span:last-child { border-right: none; }
.op-grid-hdr .op-gh-zona { text-align: left; }

.op-campo-div {
  font-size: 12px; font-weight: 700; color: var(--text-2);
  padding: 6px 0 2px; border-bottom: 1px dashed var(--border, #333);
}
/* Collapsible campo group wrapper */
.op-campo-wrap { margin: 6px 0 2px; border-radius: 10px; overflow: hidden; }
.op-campo-wrap > summary { list-style: none; cursor: pointer; }
.op-campo-wrap > summary::-webkit-details-marker { display: none; }
.op-campo-wrap > summary::marker { display: none; content: ''; }
.op-campo-hdr {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; padding: 10px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
}
/* Zone count badge (visible when collapsed) */
.op-campo-count {
  font-size: 11px; font-weight: 700; color: var(--text-3);
  background: rgba(255,255,255,.08); border-radius: 10px;
  padding: 1px 7px; min-width: 18px; text-align: center;
}
/* Collapse arrow indicator */
.op-campo-arrow::after { content: '▾'; font-size: 12px; color: var(--text-3); transition: transform .2s; }
.op-campo-wrap:not([open]) .op-campo-arrow::after { content: '▸'; }
/* Hide day buttons when collapsed */
.op-campo-wrap:not([open]) .op-grupo-days { display: none; }
.op-campo-title { font-size: 15px; font-weight: 800; color: var(--text-1); letter-spacing: .3px; }
/* ── Encargado chip in campo headers ── */
.op-campo-enc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
  text-transform: capitalize;
  letter-spacing: .2px;
}
/* Mine = highlighted (assigned to current logged-in user) */
.op-campo-enc-mine {
  background: rgba(34,197,94,.16);
  color: #4ade80;
  border-color: rgba(34,197,94,.4);
}
/* Sin encargado — needs attention, gentle warning style */
.op-campo-enc-none {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
  border-color: rgba(245,158,11,.3);
  font-style: italic;
  font-weight: 600;
}
@media (max-width: 600px) {
  .op-campo-enc { font-size: 10px; padding: 1px 6px; }
}
.op-campo-days { display: flex; gap: 3px; flex-wrap: wrap; }
.op-campo-days .op-day-btn { padding: 2px 6px; font-size: 10px; }
/* Grupo-level day apply row */
.op-grupo-days { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.op-grupo-days .op-grupo-day {
  padding: 4px 8px; font-size: 12px; border-radius: 6px;
  border: 1px solid var(--border, #444); background: transparent;
  color: var(--text-3); cursor: pointer; font-weight: 700;
  min-width: 30px; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.op-grupo-days .op-grupo-day:active { transform: scale(.93); }
.op-grupo-days .op-grupo-day.active {
  background: var(--warning, #ff9800); color: #fff; border-color: var(--warning);
  box-shadow: 0 2px 6px rgba(255,152,0,.25);
}
.op-grupo-apply {
  padding: 3px 8px; font-size: 13px; border-radius: 6px;
  border: 1px solid var(--success, #4caf50); background: rgba(76,175,80,.15);
  color: var(--success, #4caf50); cursor: pointer; font-weight: 700;
  transition: background .15s;
}
.op-grupo-apply:active { background: rgba(76,175,80,.3); }
/* Per-zone day buttons */
.op-zdays {
  display: flex; gap: 5px;
  grid-column: 1 / -1;
  margin-top: 4px; padding: 6px 8px 6px 28px;
  border-right: none !important;
  border-top: 1px solid rgba(255,255,255,.06);
}
.op-zday-btn {
  padding: 6px 10px; font-size: 14px; border-radius: 6px;
  border: 1px solid var(--border, #555); background: rgba(255,255,255,.03);
  color: var(--text-2); cursor: pointer; font-weight: 800;
  min-width: 36px; text-align: center;
  transition: background .15s, color .15s, transform .1s;
}
.op-zday-btn:active { transform: scale(.93); }
.op-zday-btn.active {
  background: var(--accent, #2196F3); color: #fff; border-color: var(--accent);
  box-shadow: 0 1px 4px rgba(33,150,243,.3);
}
.op-zrow {
  display: grid;
  grid-template-columns: 1.8fr 1fr 36px 48px 1.1fr .9fr;
  align-items: center; gap: 0;
  padding: 8px 0;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.15);
  border-left: 4px solid transparent; /* Replaced per-type below */
  transition: background .15s, border-color .15s;
}
.op-zrow:hover { background: rgba(255,255,255,.07); }
.op-zrow:nth-child(even) { background: rgba(255,255,255,.05); }
/* ── Type-based row coloring (sprk = blue, drip = green, mist = orange) ──
   Lets you scan at a glance which kind of zone each row is. */
.op-zrow[data-ztype="sprk"] { border-left-color: #2196F3; }
.op-zrow[data-ztype="drip"] { border-left-color: #4caf50; }
.op-zrow[data-ztype="mist"] { border-left-color: #f59e0b; }
.op-zrow[data-ztype="sprk"]:hover { background: rgba(33,150,243,.10); }
.op-zrow[data-ztype="drip"]:hover { background: rgba(76,175,80,.10); }
.op-zrow[data-ztype="mist"]:hover { background: rgba(245,158,11,.10); }
.op-zrow > * {
  padding: 4px 10px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.op-zrow > *:last-child { border-right: none; }
.op-zrow-off { opacity: .4; }
/* Dimmed campos/zones (not assigned to current user) */
.op-campo-dim { opacity: .5; }
.op-zrow-dim { opacity: .45; }
.op-campo-dim .op-campo-title { font-weight: 600; }
.op-zcb { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; overflow: hidden; }
.op-zcb-in { width: 22px; height: 22px; accent-color: var(--accent, #2196F3); }
.op-zname {
  font-size: 16px; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Last-irrigation cell (two-line: duration + time ago) */
.op-last-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 4px 6px; border-radius: 8px;
  line-height: 1.2; text-align: center;
}
.op-last-dur { font-size: 15px; font-weight: 800; }
.op-last-ago { font-size: 11px; font-weight: 600; opacity: .8; white-space: nowrap; }
.op-last-ok   { background: rgba(76,175,80,.15); color: #66bb6a; }
.op-last-warn { background: rgba(255,152,0,.15); color: #ffa726; }
.op-last-crit { background: rgba(244,67,54,.15); color: #ef5350; }
.op-last-none { background: rgba(255,255,255,.04); color: var(--text-3); }
.op-hist-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  font-size: 18px; line-height: 1; opacity: .7; transition: opacity .15s;
  justify-self: center;
}
.op-hist-btn:hover { opacity: 1; }
/* History popup */
.op-hist-popup {
  z-index: 100; width: 270px; max-width: calc(100vw - 24px);
  background: var(--bg-2, #1e1e1e); border: 1px solid var(--border, #444);
  border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.5);
  padding: 10px; font-size: 12px;
}
.op-hist-loading, .op-hist-empty {
  text-align: center; padding: 16px 8px; color: var(--text-3);
}
.op-hist-hdr {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 8px; font-size: 12px; color: var(--text-2);
}
.op-hist-close {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 16px; padding: 0 2px; line-height: 1;
}
.op-hist-close:hover { color: var(--text-1, #fff); }
.op-hist-rows { display: flex; flex-direction: column; gap: 5px; }
.op-hist-row {
  display: grid; grid-template-columns: 1fr auto auto auto;
  align-items: center; gap: 6px;
}
.op-hist-bar-wrap {
  height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden;
}
.op-hist-bar {
  height: 100%; border-radius: 4px; min-width: 3px;
  transition: width .3s ease;
}
.op-hist-ok   { background: #66bb6a; }
.op-hist-warn { background: #ffa726; }
.op-hist-crit { background: #ef5350; }
.op-hist-dur { font-weight: 700; color: var(--text-1, #fff); white-space: nowrap; }
.op-hist-date { color: var(--text-3); white-space: nowrap; }
.op-hist-trigger { color: var(--text-3); white-space: nowrap; font-size: 11px; }
.op-order-sel {
  background: var(--bg-3, #2a2a2a); color: var(--text-1);
  border: 1px solid var(--border, #444); border-radius: 6px;
  padding: 6px 8px; font-size: 15px; font-weight: 800;
  min-width: 42px; text-align: center; justify-self: center;
}
.op-dur-wrap {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--accent, #2196F3); border-radius: 8px;
  overflow: hidden; background: rgba(33,150,243,.06);
  justify-self: center;
}
.op-dur-wrap .op-sbtn { padding: 6px 12px; font-size: 18px; }
.op-dur-display {
  padding: 4px 10px; font-size: 16px; font-weight: 800;
  color: var(--accent, #2196F3); min-width: 50px; text-align: center;
  white-space: nowrap;
}
.op-rnd-wrap {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--success, #4caf50); border-radius: 8px;
  overflow: hidden; background: rgba(76,175,80,.06);
  justify-self: center;
}
.op-rnd-wrap .op-sbtn { padding: 6px 12px; font-size: 18px; }
.op-rnd-display {
  padding: 4px 12px; font-size: 17px; font-weight: 900;
  color: var(--success, #4caf50); min-width: 26px; text-align: center;
}
.op-rnd-toggle {
  background: transparent; border: 1px solid var(--border, #444);
  border-radius: 6px; padding: 2px 6px; cursor: pointer;
  font-size: 14px; color: var(--text-3);
}
.op-rnd-toggle.active { background: var(--accent, #2196F3); color: #fff; border-color: var(--accent); }
.op-rnd-lbl { font-size: 13px; }
.op-rounds-row { display: flex; align-items: center; gap: 4px; width: 100%; padding-left: 24px; }
.op-rounds-row.hidden { display: none; }
/* Preview */
.op-preview-summary {
  background: rgba(33,150,243,.08); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; text-align: center;
  border: 1px solid rgba(33,150,243,.15);
}
.op-ps-main { font-size: 16px; font-weight: 700; color: var(--success, #4caf50); }
.op-ps-detail { font-size: 12px; color: var(--text-3); margin-top: 3px; }
.op-ps-spacing { font-size: 12px; color: var(--warning, #ff9800); margin-top: 3px; }
/* Day tabs */
.op-day-tabs {
  display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; justify-content: center;
}
.op-day-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, #444);
  background: rgba(255,255,255,.03); color: var(--text-2); cursor: pointer;
  font-size: 12px; font-weight: 600; min-width: 44px; transition: all .15s;
}
.op-day-tab:hover:not([disabled]) { border-color: var(--accent, #2196F3); background: rgba(33,150,243,.08); }
.op-day-tab-sel { background: var(--accent, #2196F3); color: #fff; border-color: var(--accent); box-shadow: 0 2px 8px rgba(33,150,243,.3); }
.op-day-tab-off { opacity: .3; cursor: default; }
.op-dt-label { font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; }
.op-dt-count { font-size: 14px; font-weight: 800; }
/* ── Resumen Semanal (op-all-days-summary) ── */
.op-all-days-summary {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, #333);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.op-ads-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-1);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.op-ads-row {
  display: grid;
  grid-template-columns: 22px minmax(70px, 1.3fr) auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid transparent;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.op-ads-row:hover {
  background: rgba(33,150,243,.08);
  border-color: rgba(33,150,243,.3);
}
.op-ads-row:active { transform: scale(.99); }
.op-ads-row-sel {
  background: rgba(33,150,243,.16);
  border-color: rgba(33,150,243,.5);
  color: var(--text-1);
}
.op-ads-row-total {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.3);
  cursor: default;
  margin-top: 6px;
}
.op-ads-row-total:hover { background: rgba(34,197,94,.08); border-color: rgba(34,197,94,.3); }
.op-ads-icon { font-size: 14px; text-align: center; line-height: 1; }
.op-ads-day { font-weight: 700; }
.op-ads-act, .op-ads-hrs {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  text-align: right;
}
.op-ads-act small, .op-ads-hrs small {
  font-size: 9px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 2px;
  font-weight: 600;
}
.op-ads-chips {
  display: inline-flex;
  gap: 6px;
  font-size: 11px;
  color: var(--text-3);
}
.op-ads-chips span {
  background: rgba(255,255,255,.06);
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Timeline visualization ── */
.tl-wrap { margin: 12px 0 16px; background: rgba(0,0,0,.2); border-radius: 10px; padding: 10px 12px; overflow: hidden; }
.tl-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; text-align: center; }
.tl-axis { position: relative; min-height: 50px; padding-top: 20px; }
.tl-hour { position: absolute; top: 0; bottom: 0; transform: translateX(-50%); z-index: 2; pointer-events: none; }
.tl-hour-line { display: block; width: 1px; background: rgba(255,255,255,.18); position: absolute; top: 18px; left: 50%; bottom: 0; }
.tl-hour-lbl { display: block; font-size: 10px; font-weight: 700; color: var(--text-2); white-space: nowrap; text-align: center; padding: 0 2px; position: relative; z-index: 3; }
.tl-tick { position: absolute; top: 20px; bottom: 0; width: 1px; background: rgba(255,255,255,.06); z-index: 1; pointer-events: none; }
.tl-lanes { position: relative; display: flex; flex-direction: column; gap: 6px; }
.tl-lane { display: flex; gap: 4px; align-items: stretch; min-height: 24px; }
.tl-lane-hdr { flex-shrink: 0; width: 80px; font-size: 10px; font-weight: 700; color: var(--text-1); display: flex; align-items: center; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,.04); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.tl-lane-body { flex: 1; display: flex; flex-direction: column; gap: 2px; position: relative; min-height: 22px; }
.tl-sublane { position: relative; height: 22px; display: flex; align-items: center; }
.tl-slot-tag { position: absolute; left: -1px; top: 1px; font-size: 8px; font-weight: 800; color: #fff; padding: 1px 3px; border-radius: 3px; z-index: 3; line-height: 1; opacity: .7; }
.tl-block { position: absolute; height: 18px; border-radius: 4px; opacity: .85; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: default; transition: opacity .15s; min-width: 2px; }
.tl-block:hover { opacity: 1; z-index: 10; box-shadow: 0 0 6px rgba(255,255,255,.3); }
.tl-block-lbl { font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 3px; }
@media (max-width: 600px) {
  .tl-lane-hdr { width: 55px; font-size: 9px; }
  .tl-hour-lbl { font-size: 8px; }
  .tl-block-lbl { font-size: 7px; }
}

.op-preview-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.op-pv-col { display: flex; flex-direction: column; gap: 3px; }
.op-pv-col-empty { opacity: .5; }
.op-pv-col-hdr { font-weight: 700; font-size: 13px; padding: 6px 8px; border-radius: 8px; text-align: center; margin-bottom: 4px; }
/* Type-based column header colors (more reliable than nth-child since the
   number of columns varies — sprk + drip + N HH groups). */
.op-pv-col-sprk .op-pv-col-hdr { background: rgba(33,150,243,.12); color: #2196F3; }
.op-pv-col-drip .op-pv-col-hdr { background: rgba(76,175,80,.12); color: #4caf50; }
.op-pv-col-mist .op-pv-col-hdr { background: rgba(245,158,11,.12); color: #f59e0b; }
/* nth-child fallback for unknown types (no ztype passed) */
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(1) .op-pv-col-hdr { background: rgba(33,150,243,.12); color: #2196F3; }
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(2) .op-pv-col-hdr { background: rgba(76,175,80,.12); color: #4caf50; }
.op-pv-col:not([class*="op-pv-col-sprk"]):not([class*="op-pv-col-drip"]):not([class*="op-pv-col-mist"]):nth-child(3) .op-pv-col-hdr { background: rgba(245,158,11,.12); color: #f59e0b; }
.op-preview-list { display: flex; flex-direction: column; gap: 3px; }
.op-pv-round-sep { height: 1px; background: rgba(255,255,255,.15); margin: 6px 0; }
.op-pv-round-hdr { font-size: 11px; font-weight: 700; color: var(--text-2); padding: 4px 8px; margin: 2px 0; border-radius: 4px; background: rgba(255,255,255,.06); text-align: center; }
.op-pv-row {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,.03);
}
.op-pv-sprk { border-left: 3px solid #2196F3; }
.op-pv-drip { border-left: 3px solid #4caf50; }
.op-pv-mist { border-left: 3px solid #f59e0b; }
.op-pv-slot { flex-shrink: 0; }
.op-pv-icon { font-size: 13px; flex-shrink: 0; }
.op-pv-name { font-weight: 600; font-size: 13px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-pv-time { font-weight: 700; font-size: 12px; color: var(--success, #4caf50); white-space: nowrap; }
.op-pv-dur { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.op-pv-rnd { font-size: 10px; color: var(--text-3); white-space: nowrap; }
.op-remain { text-align: center; padding: 6px; font-size: 12px; color: var(--success, #4caf50); margin-top: 4px; }
.op-remain-tight { color: var(--warning, #ff9800); }
/* Button in schedules header */
.btn-unified-prog {
  background: linear-gradient(135deg, #2196F3, #4caf50);
  color: #fff; border: none; padding: 6px 14px;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.btn-unified-prog:active { opacity: .8; }
/* Mobile */
@media (max-width: 600px) {
  .op-header { padding: 8px 10px; }
  .op-header h2 { font-size: 15px; }
  .op-body { padding: 8px 8px 16px; }
  .op-footer { padding: 8px 10px; flex-wrap: wrap; }
  .op-sec-body { padding: 6px 8px 10px; }
  /* The compact 6-col grid is the default (defined on .op-zrow /
     .op-grid-hdr at the top of this file). On mobile we just tighten
     vertical paddings; the grid itself stays the same. */
  .op-zrow { padding: 6px 0; }
  .op-grid-hdr { padding: 6px 0; }
  .op-grid-hdr > span { font-size: 10px; padding: 2px 6px; }
  .op-zrow > * { padding: 3px 6px; }
  .op-zname { font-size: 14px; }
  .op-last-dur { font-size: 13px; }
  .op-last-ago { font-size: 10px; }
  .op-dur-wrap .op-sbtn { padding: 4px 8px; font-size: 15px; }
  .op-dur-display { font-size: 14px; padding: 3px 6px; min-width: 40px; }
  .op-rnd-wrap .op-sbtn { padding: 4px 8px; font-size: 15px; }
  .op-rnd-display { font-size: 14px; padding: 3px 8px; }
  .op-order-sel { font-size: 13px; padding: 4px 6px; }
  .op-zdays { padding-left: 12px; gap: 4px; }
  .op-zday-btn { font-size: 12px; min-width: 30px; padding: 5px 7px; }
  .op-grupo-days { gap: 3px; }
  .op-grupo-days .op-grupo-day { font-size: 11px; padding: 3px 6px; }
  .op-campo-hdr { padding: 8px 10px; }
  .op-campo-title { font-size: 14px; }
  .op-day-tab { padding: 5px 7px; min-width: 38px; font-size: 11px; }
  .op-dt-label { font-size: 10px; }
  .op-dt-count { font-size: 12px; }
  /* Resumen Semanal — compact mobile layout */
  .op-all-days-summary { padding: 8px 10px; margin-top: 10px; }
  .op-ads-title { font-size: 12px; margin-bottom: 4px; }
  .op-ads-row {
    grid-template-columns: 18px 1fr auto auto;
    gap: 6px;
    padding: 5px 7px;
    font-size: 11px;
  }
  .op-ads-row-total { margin-top: 4px; }
  .op-ads-icon { font-size: 13px; }
  .op-ads-act, .op-ads-hrs { font-size: 11px; }
  .op-ads-chips { gap: 3px; font-size: 10px; }
  .op-ads-chips span { padding: 1px 4px; }
  /* Preview rows — compact */
  .op-pv-row { gap: 5px; padding: 4px 6px; }
  .op-pv-name { font-size: 12px; }
  .op-pv-time { font-size: 11px; }
}

/* ── Smallest screens (iPhone SE / mini): tighter Resumen Semanal ── */
@media (max-width: 400px) {
  .op-ads-row {
    grid-template-columns: 16px 1fr auto;
    font-size: 10px;
    padding: 4px 6px;
  }
  /* Hide the chips row on very narrow screens — info still in row count */
  .op-ads-chips { display: none; }
  .op-ads-act small, .op-ads-hrs small { display: none; }
}

/* ============================================================
   ENCARGADO VIEW
   ============================================================ */
.enc-view { max-width: 900px; margin: 0 auto; padding: 12px; }
.enc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.enc-title { font-size: 1.4rem; font-weight: 700; margin: 0; }
.enc-share { background: none; border: none; font-size: 1.3rem; cursor: pointer; padding: 6px; border-radius: 8px; }
.enc-share:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }
.enc-empty { text-align: center; padding: 40px 20px; color: var(--text-secondary, #888); }

.enc-group { background: var(--card-bg, #fff); border-radius: 12px; margin-bottom: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.enc-group[open] { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.enc-group-hdr { padding: 12px 14px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; user-select: none; }
.enc-group-hdr::-webkit-details-marker { display: none; }
.enc-gh-icon { font-size: 1.3rem; }
.enc-gh-name { font-weight: 600; font-size: 1.05rem; flex: 1; }
.enc-gh-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.enc-badge { font-size: .75rem; padding: 2px 8px; border-radius: 10px; background: var(--badge-bg, #e8f5e9); color: var(--badge-color, #2e7d32); font-weight: 600; white-space: nowrap; }
.enc-badge-active { background: #e3fcec; color: #0d6; animation: enc-pulse 1.5s infinite; }
@keyframes enc-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.7 } }

.enc-group-body { padding: 0 14px 14px; }
.enc-users { font-size: .85rem; color: var(--text-secondary, #666); margin-bottom: 8px; }

.enc-active-banner { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); padding: 8px 12px; border-radius: 8px; font-size: .88rem; font-weight: 600; margin-bottom: 10px; }
.enc-active-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.7); padding: 2px 8px; border-radius: 6px; margin: 2px; }

.enc-next { font-size: .85rem; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.enc-next-title { font-weight: 600; }
.enc-next-chip { background: var(--chip-bg, #f0f4ff); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.enc-next-more { color: var(--text-secondary, #888); font-size: .8rem; }

.enc-prog-summary { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-color, #e0e0e0); }
.enc-ps { font-size: .85rem; }
.enc-ps-paused { color: var(--text-secondary, #999); }

.enc-sched-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.enc-srow { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--row-bg, #fafafa); font-size: .88rem; transition: opacity .2s; }
.enc-srow-off { opacity: .5; }
.enc-srow-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.enc-srow-zone { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc-srow-days { display: flex; gap: 2px; }
.enc-sd { font-size: .7rem; font-weight: 600; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--day-bg, #e8f5e9); color: var(--day-color, #2e7d32); }
.enc-srow-dur { font-size: .8rem; color: var(--text-secondary, #666); min-width: 40px; text-align: right; }
.enc-srow-edit { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 2px 4px; border-radius: 6px; }
.enc-srow-edit:hover { background: var(--hover-bg, rgba(0,0,0,.06)); }

.enc-no-scheds { text-align: center; padding: 16px; color: var(--text-secondary, #999); font-size: .88rem; }

.enc-missing { background: #fff8e1; padding: 8px 12px; border-radius: 8px; margin-bottom: 10px; font-size: .85rem; }
.enc-miss-title { font-weight: 600; }
.enc-miss-chip { display: inline-block; margin: 2px 4px; }

.enc-timeline { margin-bottom: 10px; }
.enc-timeline-title { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }

.enc-actions { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border-color, #e0e0e0); }
.enc-act-prog { flex: 1; padding: 10px; border: none; border-radius: 10px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; font-weight: 700; font-size: .95rem; cursor: pointer; text-align: center; }
.enc-act-prog:hover { filter: brightness(1.05); }

/* Encargado dark mode */
@media (prefers-color-scheme: dark) {
  .enc-group { background: var(--card-bg, #1e1e2e); }
  .enc-badge { background: rgba(34,197,94,.15); color: #4ade80; }
  .enc-badge-active { background: rgba(34,197,94,.2); color: #4ade80; }
  .enc-active-banner { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.08)); }
  .enc-active-chip { background: rgba(255,255,255,.1); }
  .enc-next-chip { background: rgba(99,102,241,.15); }
  .enc-srow { background: var(--row-bg, rgba(255,255,255,.04)); }
  .enc-sd { background: rgba(34,197,94,.15); color: #4ade80; }
  .enc-missing { background: rgba(251,191,36,.1); }
}

/* Encargado mobile */
@media (max-width: 600px) {
  .enc-view { padding: 8px; }
  .enc-title { font-size: 1.15rem; }
  .enc-group-hdr { padding: 10px; gap: 6px; }
  .enc-gh-name { font-size: .95rem; }
  .enc-srow { padding: 6px 8px; font-size: .82rem; gap: 5px; }
  .enc-srow-time { min-width: 44px; font-size: .82rem; }
  .enc-sd { width: 16px; height: 16px; font-size: .65rem; }
  .enc-srow-dur { font-size: .75rem; }
  .enc-act-prog { padding: 9px; font-size: .88rem; }
  .op-preview-cols { grid-template-columns: 1fr; }
}

/* ── Mi Turno Card ── */
.mi-turno-card { background: linear-gradient(135deg, rgba(99,102,241,.15), rgba(34,197,94,.1)); border: 1px solid rgba(99,102,241,.3); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.mi-turno-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 4px; }
.mi-turno-title { font-weight: 700; font-size: 1.05rem; }
.mi-turno-grp { font-size: .82rem; color: var(--text-3); }
.mi-turno-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mi-turno-stat { font-size: .85rem; color: var(--text-2); }
.mi-turno-stat b { color: var(--text-1); }
.mi-turno-active { color: #4ade80 !important; }
.mi-turno-active b { color: #4ade80; }
.mi-turno-active-list { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.mi-turno-chip { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.08); padding: 3px 8px; border-radius: 6px; font-size: .8rem; color: var(--text-2); }
.mi-turno-chip-active { background: rgba(34,197,94,.15); color: #4ade80; }
.mi-turno-next { font-size: .82rem; color: var(--text-2); margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.mi-turno-next-lbl { font-weight: 600; color: var(--text-1); }
.mi-turno-more { font-size: .75rem; color: var(--text-3); }
.mi-turno-btn { background: rgba(99,102,241,.2); color: var(--primary); border: 1px solid rgba(99,102,241,.3); border-radius: 8px; padding: 6px 14px; font-size: .82rem; cursor: pointer; font-weight: 600; }
.mi-turno-btn:hover { background: rgba(99,102,241,.35); }

.belt-grp-user {
  font-size: 8px;
  font-weight: 600;
  color: var(--text-3);
  opacity: 0.7;
  white-space: nowrap;
}

.belt-sched {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 1px 0;
  font-size: 9px;
  flex-wrap: wrap;
}
.belt-sched-type {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.belt-sched-name {
  font-weight: 600;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90%;
}
.belt-sched-time {
  font-size: 8px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.belt-sched-dur {
  font-size: 9px;
  font-weight: 800;
  color: var(--accent);
  margin-left: auto;
  font-family: "SF Mono", Consolas, monospace;
}

/* ── Empty face ── */
.belt-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-3);
  font-size: 10px;
  opacity: 0.4;
}

/* ── Status bar ── */
.belt-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  border-top: 1px solid var(--border);
  background: var(--bg-2);
}
.belt-status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.belt-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.belt-status-sun {
  font-size: 10px;
  color: var(--text-2);
  letter-spacing: 0.3px;
}

/* ── Edge fade for 3D illusion ── */
.belt-fade-l,
.belt-fade-r {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 4;
  pointer-events: none;
}
.belt-fade-l {
  left: 0;
  background: linear-gradient(to right, var(--bg-1) 0%, transparent 100%);
}
.belt-fade-r {
  right: 0;
  background: linear-gradient(to left, var(--bg-1) 0%, transparent 100%);
}

/* ═══════════════════════════════════════════
   LIGHT THEME OVERRIDES
   ═══════════════════════════════════════════ */
[data-theme="light"] .tx-modal-pro {
  border-color: rgba(147, 51, 234, 0.25);
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}
[data-theme="light"] .tx-modal-hdr {
  background: linear-gradient(135deg, rgba(147,51,234,0.08), rgba(168,85,247,0.03));
  border-bottom-color: rgba(147,51,234,0.12);
}
[data-theme="light"] .tx-modal-hdr-text h3 { color: #7c3aed; }
[data-theme="light"] .tx-modal-zone-pill { background: rgba(0,0,0,0.04); color: var(--text-2); }
[data-theme="light"] .tx-section { background: rgba(0,0,0,0.02); }

/* Zone panel action buttons */
[data-theme="light"] .zd-act-treatment { background: rgba(147,51,234,0.1); color: #7c3aed; border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .zd-act-treatment-cancel { color: #7c3aed; border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .zd-act-ipm-hist { background: rgba(147,51,234,0.06); border-color: rgba(147,51,234,0.15); color: #7c3aed; }
[data-theme="light"] .zd-act-ipm-hist:hover { background: rgba(147,51,234,0.14); }
[data-theme="light"] .zd-act-report { background: rgba(234,88,12,0.08); color: #c2410c; border-color: rgba(234,88,12,0.2); }
[data-theme="light"] .zd-act-report:hover { background: rgba(234,88,12,0.15); }

/* IPM History modal */
[data-theme="light"] .ipmh-stat { background: rgba(147,51,234,0.06); border-color: rgba(147,51,234,0.12); }
[data-theme="light"] .ipmh-stat-val { color: #7c3aed; }
[data-theme="light"] .ipmh-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ipmh-card-report { background: rgba(234,88,12,0.04); border-left-color: rgba(234,88,12,0.4); }
[data-theme="light"] .ipmh-badge-set { background: rgba(147,51,234,0.1); color: #7c3aed; }
[data-theme="light"] .ipmh-badge-clear { background: rgba(34,197,94,0.1); color: #15803d; }
[data-theme="light"] .ipmh-badge-report { background: rgba(234,88,12,0.1); color: #c2410c; }
[data-theme="light"] .ipmh-compact-row { background: rgba(0,0,0,0.02); }
[data-theme="light"] .ipmh-compact-main { color: var(--text-1); }
[data-theme="light"] .ipmh-compact-pest { color: #c2410c; }
[data-theme="light"] .ipmh-tab-active { background: rgba(147,51,234,0.08); color: #7c3aed; }
[data-theme="light"] .ipmh-tab-count { background: rgba(147,51,234,0.1); color: #7c3aed; }
[data-theme="light"] .ipmh-group-card { background: rgba(147,51,234,0.04); border-color: rgba(147,51,234,0.1); border-left-color: rgba(147,51,234,0.3); }
[data-theme="light"] .ipmh-group-tag { background: rgba(0,0,0,0.04); color: var(--text-2); }
[data-theme="light"] .ipmh-col-title { color: var(--text-1); }
[data-theme="light"] .ipmh-col-count { background: rgba(0,0,0,0.06); color: var(--text-2); }
[data-theme="light"] .ipmh-btn-done { background: rgba(22,163,74,0.1); color: #15803d; }
[data-theme="light"] .ipmh-btn-done:hover { background: rgba(22,163,74,0.2); }
[data-theme="light"] .ipmh-btn-del { background: rgba(220,38,38,0.06); color: #dc2626; }
[data-theme="light"] .ipmh-btn-del:hover { background: rgba(220,38,38,0.12); }
[data-theme="light"] .ipmh-archive-title { color: var(--text-3); border-top-color: rgba(0,0,0,0.08); }
[data-theme="light"] .ipmh-row-done { background: rgba(22,163,74,0.04); color: var(--text-3); }
[data-theme="light"] .ipmh-rpt-plant { color: #15803d; }
[data-theme="light"] .ipmh-wx { background: rgba(0,0,0,0.03); color: var(--text-3); }
[data-theme="light"] .ipmh-card-details { color: var(--text-2); }
[data-theme="light"] .ipmh-detail-lbl { color: var(--text-3); }
[data-theme="light"] .ipmh-detail-val { color: var(--text-1); }

/* IPM Report modal */
[data-theme="light"] .rpt-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: var(--text-1); }
[data-theme="light"] .rpt-chip:hover { background: rgba(147,51,234,0.08); border-color: rgba(147,51,234,0.25); }
[data-theme="light"] .rpt-chip-active { background: rgba(147,51,234,0.12); border-color: #7c3aed; color: #7c3aed; }
[data-theme="light"] .rpt-plant-btn { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: var(--text-1); }
[data-theme="light"] .rpt-plant-btn:hover { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.2); }
[data-theme="light"] .rpt-plant-active { background: rgba(22,163,74,0.1); border-color: #15803d; }
[data-theme="light"] .rpt-plant-name { color: var(--text-1); }
[data-theme="light"] .rpt-plant-loc { color: var(--text-3); }
[data-theme="light"] .rpt-plant-qty { color: var(--text-3); }
[data-theme="light"] .rpt-selected-plant { background: rgba(22,163,74,0.06); color: #15803d; }
[data-theme="light"] .rpt-label { color: var(--text-2); }
[data-theme="light"] .rpt-label select,
[data-theme="light"] .rpt-label input,
[data-theme="light"] .rpt-label textarea {
  background: #f8fafc; border-color: rgba(0,0,0,0.15); color: var(--text-1);
}
[data-theme="light"] .rpt-pest-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: var(--text-1); }
[data-theme="light"] .rpt-pest-chip:hover { background: rgba(234,88,12,0.08); border-color: rgba(234,88,12,0.25); }
[data-theme="light"] .rpt-pest-chip-active { background: rgba(234,88,12,0.12); border-color: #c2410c; color: #c2410c; }

/* Deshierbe modal */
[data-theme="light"] .desh-last-card { color: var(--text-1); background: rgba(0,0,0,0.02); border-color: var(--border); }
[data-theme="light"] .desh-hist-row { color: var(--text-3); border-left-color: var(--border); }
[data-theme="light"] .desh-reg-form label { color: var(--text-3); }
[data-theme="light"] .desh-reg-form select,
[data-theme="light"] .desh-reg-form textarea { background: #f8fafc; color: var(--text-1); border-color: var(--border); }
[data-theme="light"] .desh-subs-label { color: var(--text-2); }
[data-theme="light"] .desh-subs-all { border-color: var(--border); color: var(--text-3); }
[data-theme="light"] .desh-subs-all:hover { background: #f1f5f9; color: var(--text-1); }
[data-theme="light"] .desh-sub-chk { background: #f1f5f9; border-color: var(--border); color: var(--text-1); }
[data-theme="light"] .desh-zone-name { color: var(--text-1); }
[data-theme="light"] .desh-pend { color: var(--text-2); background: rgba(0,0,0,0.03); border-color: var(--border); }
[data-theme="light"] .desh-section-title { color: var(--text-2); }

/* ── Indicator triangle (top center) ── */
.belt-indicator {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid var(--accent);
  z-index: 10;
  filter: drop-shadow(0 1px 3px rgba(0, 212, 255, 0.4));
}

/* ── Weather row inside face ── */
.belt-wx {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 9px;
  color: var(--text-3);
  padding: 2px 0 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
  flex-shrink: 0;
}
.belt-wx-icon {
  font-size: 14px;
  line-height: 1;
}
.belt-wx-temp {
  font-weight: 800;
  color: var(--text-1);
  font-size: 12px;
  line-height: 1;
}
.belt-wx-wind-row {
  display: flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}
.belt-wind-arrow {
  flex-shrink: 0;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4));
}
.belt-wx-wspd {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.belt-wx-wunit {
  font-size: 7px;
  color: var(--text-3);
  opacity: 0.7;
}
.belt-wx-wdir {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-2);
  margin-left: 1px;
}

/* ── Filter bar ── */
.belt-filters {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.belt-filters::-webkit-scrollbar {
  display: none;
}
.belt-fbtn {
  flex-shrink: 0;
  padding: 3px 10px;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text-3);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.belt-fbtn:hover {
  color: var(--text-1);
  border-color: var(--text-3);
}
.belt-fbtn.belt-fbtn-active {
  background: rgba(0, 212, 255, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.belt-fsep {
  color: var(--border);
  font-size: 14px;
  font-weight: 300;
  flex-shrink: 0;
  padding: 0 2px;
}

/* ── Arrow navigation buttons ── */
.belt-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  width: 44px;
  height: 50px;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.45);
  color: var(--text-1);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0.6;
}
.belt-arrow:hover {
  opacity: 1;
  background: rgba(0, 212, 255, 0.2);
}
.belt-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.belt-arrow-l {
  left: 4px;
}
.belt-arrow-r {
  right: 4px;
}

/* ── Duration bar ── */
.belt-dur-bar {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
  margin: 1px 0 3px;
}
.belt-dur-fill {
  height: 100%;
  border-radius: 2px;
  opacity: 0.7;
  transition: width 0.3s ease;
}

/* ── Phone optimization ── */
@media (max-width: 600px) {
  .belt-scene {
    height: 280px;
  }
  .belt-face {
    padding: 8px 4px 6px;
  }
  .belt-hr-time {
    font-size: 13px;
  }
  .belt-sched-name {
    max-width: 95%;
  }
  .belt-days {
    gap: 3px;
    padding: 8px 0 4px;
  }
  .belt-day-dot {
    padding: 3px 7px;
    font-size: 9px;
  }
  .belt-day-dot .belt-dd-num {
    font-size: 12px;
  }
  .belt-fade-l,
  .belt-fade-r {
    width: 35px;
  }
  .belt-wx-temp {
    font-size: 10px;
  }
  .belt-wx-wspd {
    font-size: 9px;
  }
  .belt-filters {
    padding: 3px 6px 4px;
    gap: 3px;
  }
  .belt-fbtn {
    padding: 2px 7px;
    font-size: 9px;
  }
  .belt-arrow {
    width: 26px;
    height: 40px;
    font-size: 18px;
    opacity: 0.5;
  }
}

/* ══════ Touch Device Fallbacks ══════ */
@media (hover: none) {
  .relay-slot-btn,
  .esp-rename-btn {
    opacity: 0.8;
  }
  .belt-arrow {
    opacity: 0.8;
  }
}

/* ══════ Inventory — Fullscreen Plant & Mission Viewer ══════ */
.inv-fs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:9998;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}
.inv-fs{position:relative;background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:16px;width:min(960px,96vw);height:min(92vh,800px);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6)}

/* Header */
.inv-fs-hd{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border,#333);background:var(--bg-card,#1a1a2e);flex-shrink:0}
.inv-fs-hd-left{display:flex;align-items:center;gap:12px;flex:1;flex-wrap:wrap}
.inv-fs-title{font-size:20px;font-weight:800;color:#fff;letter-spacing:0.3px}
.inv-fs-stats{font-size:13px;color:var(--text-muted,#888);background:#ffffff08;padding:4px 10px;border-radius:6px}
.inv-fs-week{font-size:11px;font-weight:700;color:#00ff6a;background:#00ff6a18;padding:2px 8px;border-radius:4px;text-shadow:0 0 4px rgba(0,255,106,0.3)}
.inv-fs-cap{font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px}
.inv-cap-ok{background:#00ff6a18;color:#00ff6a;text-shadow:0 0 4px rgba(0,255,106,0.3)}
.inv-cap-high{background:#ffcc0018;color:#ffcc00;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-cap-over{background:#ff444418;color:#ff4444;text-shadow:0 0 4px rgba(255,68,68,0.3)}
.inv-fs-pot{font-size:11px;color:var(--text-muted,#888);background:#ffffff08;padding:2px 8px;border-radius:4px}
.inv-fs-close{background:none;border:none;color:#ff3b3b;font-size:30px;font-weight:700;cursor:pointer;padding:0 8px;line-height:1;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.inv-fs-close:hover{color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}

/* Tabs */
.inv-tabs{display:flex;gap:2px;padding:0 20px;border-bottom:1px solid var(--border,#333);background:var(--bg-card,#1a1a2e);flex-shrink:0}
.inv-tab{background:none;border:none;color:var(--text-muted,#888);font-size:13px;font-weight:600;padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.inv-tab:hover{color:var(--text,#e0e0e0)}
.inv-tab-sel{color:#00d4ff;border-bottom-color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-tab-body{display:none;flex:1;overflow-y:auto;padding:16px 20px}
.inv-tab-active{display:block}

/* Field sub-tabs (merged zones) */
.inv-field-tabs{display:flex;gap:4px;padding:0 0 12px;border-bottom:1px solid #ffffff12;margin-bottom:14px;flex-wrap:wrap}
.inv-field-tab{background:#ffffff0a;border:1px solid #ffffff15;border-radius:8px;color:var(--text-muted,#999);font-size:13px;font-weight:600;padding:7px 14px;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:6px}
.inv-field-tab:hover{background:#a78bfa18;border-color:#a78bfa44;color:#d4bfff}
.inv-field-tab-sel{background:#a78bfa22;border-color:#a78bfa;color:#d4bfff;box-shadow:0 0 12px #a78bfa33}
.inv-ft-qty{font-size:11px;font-weight:400;color:var(--text-muted,#777);background:#ffffff0a;padding:1px 6px;border-radius:4px}
.inv-field-tab-sel .inv-ft-qty{color:#c4b5fd;background:#a78bfa22}

/* Block chips */
.inv-fs-blocks{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.inv-block-chip{display:flex;flex-direction:column;align-items:center;gap:3px;background:#ffffff08;border:1px solid #ffffff15;border-radius:10px;padding:10px 16px;cursor:pointer;transition:all .15s}
.inv-block-chip:hover{background:#00d4ff12;border-color:#00d4ff44}
.inv-bk-sel{background:#00d4ff18;border-color:#00d4ff;box-shadow:0 0 14px #00d4ff33}
.inv-bk-label{font-size:13px;font-weight:600;color:var(--text,#e0e0e0)}
.inv-bk-qty{font-size:11px;color:var(--text-muted,#888)}
.inv-bk-qty em{font-style:normal;color:#00d4ff}

/* Sortable column headers */
.inv-col-sort,.inv-ms-col-sort{cursor:pointer;user-select:none;transition:color .15s}
.inv-col-sort:hover,.inv-ms-col-sort:hover{color:#60a5fa!important}
.inv-col-active{color:#60a5fa!important}
/* Mission sort header row */
.inv-ms-hdr{display:flex;gap:8px;padding:8px 6px;border-bottom:2px solid var(--border,#444);margin-bottom:4px}
.inv-ms-h{font-size:12px;font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:.3px;cursor:pointer;user-select:none;transition:color .15s;flex:1;white-space:nowrap}
.inv-ms-h:hover{color:#60a5fa}
.inv-ms-h.inv-col-active{color:#60a5fa}

/* Plant table */
.inv-fs-plant-list{flex:1}
.inv-tbl-hd{font-size:15px;font-weight:700;color:#fff;padding:10px 6px;border-bottom:1px solid var(--border,#333)}
.inv-tbl{display:flex;flex-direction:column}
.inv-tbl-row{display:grid;grid-template-columns:2fr 44px 1fr 80px 70px 80px 80px 44px;gap:8px;align-items:center;padding:10px 6px;border-bottom:1px solid #ffffff0a;font-size:14px}
.inv-tbl-header{font-weight:700;color:#ccc;font-size:12px;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;background:var(--bg-card,#1a1a2e);z-index:1;padding:10px 6px;border-bottom:2px solid var(--border,#444)}
.inv-c-name{color:#fff;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.inv-c-name.inv-name-expanded{white-space:normal;word-break:break-word}
.inv-c-loc{font-size:13px;color:#ddd;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-c-size{font-size:13px;color:#ddd;font-weight:500}
.inv-c-st{text-align:center}
.inv-c-qty{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:#fff;font-size:15px}
.inv-c-vend{text-align:right;font-variant-numeric:tabular-nums;color:#00d4ff;font-weight:700;font-size:15px;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-c-xref{text-align:center;white-space:nowrap}
.inv-c-act{text-align:center}
.inv-c-act-btn{background:none;border:1px solid #ffffff20;color:#aaa;font-size:16px;cursor:pointer;border-radius:6px;padding:2px 6px;line-height:1;transition:all .15s}
.inv-c-act-btn:hover{background:#22c55e20;border-color:#22c55e;color:#22c55e}
.inv-badge{display:inline-block;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.3px}
.inv-badge-lnd{background:#22c55e35;color:#4ade80;text-shadow:0 0 4px rgba(34,197,94,0.3)}
.inv-badge-hold{background:#f59e0b35;color:#fde047;text-shadow:0 0 4px rgba(245,158,11,0.3)}
.inv-badge-ipm{background:#bf5af235;color:#d8b4fe;text-shadow:0 0 4px rgba(191,90,242,0.3)}
.inv-badge-failing{background:#ef444435;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-row-failing{background:#ef444415}
.inv-row-ipm{background:#bf5af212}
.inv-row-hold{background:#f59e0b12}

/* Empty state */
.inv-empty-state{text-align:center;padding:40px 20px;color:var(--text-muted,#888);font-size:14px}

/* ── Mission cards ── */
.inv-mission-card{background:#ffffff06;border:1px solid #ffffff12;border-radius:12px;padding:14px 16px;margin-bottom:10px;border-left:4px solid #3b82f6;transition:opacity .3s,transform .3s}
.inv-pri-alta{border-left-color:#ef4444}
.inv-pri-media{border-left-color:#f59e0b}
.inv-pri-baja{border-left-color:#3b82f6}
.inv-mc-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.inv-mc-pri{font-size:11px;font-weight:700;letter-spacing:.3px}
.inv-mc-type{font-size:12px;color:var(--text-muted,#888);background:#ffffff08;padding:3px 10px;border-radius:6px;text-transform:uppercase;font-weight:600;letter-spacing:.3px}
.inv-mt-failing{background:#ef444430;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-mt-ipm{background:#bf5af228;color:#d8b4fe;text-shadow:0 0 4px rgba(191,90,242,0.3)}
.inv-mt-hold{background:#3b82f628;color:#60a5fa}
.inv-mt-vendidas{background:#00d4ff20;color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-mt-overcap{background:#f9731628;color:#fb923c}
.inv-mt-vencido{background:#bf5af725;color:#d8b4fe;text-shadow:0 0 4px rgba(191,90,242,0.3)}
.inv-mt-slow-mover{background:#14b8a628;color:#2dd4bf}
.inv-mt-rotacion{background:#6366f128;color:#818cf8}
.inv-mt-custom{background:#6b728028;color:#9ca3af}
/* ── Mission filter chips ── */
.inv-mf-bar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #ffffff10}
.inv-mf-chip{border:1px solid #ffffff18;background:#ffffff08;color:#bbb;padding:5px 12px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;text-transform:uppercase;letter-spacing:.3px;transition:all .2s}
.inv-mf-chip:hover{background:#ffffff15;color:#fff}
.inv-mf-active{border-color:#7c3aed;background:#7c3aed25;color:#c4b5fd;box-shadow:0 0 8px #7c3aed40}
.inv-mf-failing.inv-mf-active{border-color:#ef4444;background:#ef444430;color:#fca5a5;box-shadow:0 0 8px #ef444440}
.inv-mf-ipm.inv-mf-active{border-color:#bf5af2;background:#bf5af230;color:#d8b4fe;box-shadow:0 0 10px #bf5af250}
.inv-mf-hold.inv-mf-active{border-color:#3b82f6;background:#3b82f630;color:#93c5fd;box-shadow:0 0 8px #3b82f640}
.inv-mf-vendidas.inv-mf-active{border-color:#00d4ff;background:#00d4ff25;color:#00e5ff;box-shadow:0 0 10px #00d4ff40}
.inv-mf-overcap.inv-mf-active{border-color:#f97316;background:#f9731630;color:#fdba74;box-shadow:0 0 8px #f9731640}
.inv-mf-vencido.inv-mf-active{border-color:#bf5af7;background:#bf5af730;color:#d8b4fe;box-shadow:0 0 10px #bf5af740}
.inv-mf-slow-mover.inv-mf-active{border-color:#14b8a6;background:#14b8a630;color:#5eead4;box-shadow:0 0 8px #14b8a640}
.inv-mf-rotacion.inv-mf-active{border-color:#6366f1;background:#6366f130;color:#a5b4fc;box-shadow:0 0 8px #6366f140}
.inv-mf-custom.inv-mf-active{border-color:#6b7280;background:#6b728030;color:#d1d5db;box-shadow:0 0 8px #6b728040}
.inv-mc-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:6px;line-height:1.3}
.inv-mc-loc{font-size:12px;font-weight:600;color:#00d4ff;background:rgba(0,212,255,0.12);padding:2px 7px;border-radius:5px;margin-left:6px;white-space:nowrap}
.inv-mc-desc{font-size:13px;color:#ccc;margin-bottom:8px;line-height:1.4}
.inv-mc-details{display:flex;flex-wrap:wrap;gap:6px 12px;margin-bottom:10px}
.inv-mc-det{font-size:13px;color:#ddd;white-space:nowrap}
.inv-mc-actions{display:flex;justify-content:flex-end;gap:6px}
.inv-mc-complete{background:#22c55e;color:#fff;border:none;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;text-shadow:0 0 4px rgba(0,0,0,0.2)}
.inv-mc-complete:hover{background:#16a34a}
.inv-mc-edit{background:#3b82f620;color:#60a5fa;border:1px solid #3b82f640;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.inv-mc-edit:hover{background:#3b82f640;border-color:#60a5fa}
.inv-mc-delete{background:#ef444418;color:#ff6b6b;border:1px solid #ef444435;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.inv-mc-delete:hover{background:#ef444435;border-color:#ff6b6b}

/* ── Variety cross-ref badge ── */
.inv-xref-badge{display:inline-flex;align-items:center;gap:2px;background:#bf5af222;color:#d8b4fe;border:1px solid #bf5af240;padding:1px 7px;border-radius:10px;font-size:10px;font-weight:700;cursor:pointer;margin-left:6px;vertical-align:middle;transition:all .2s;line-height:1.4}
.inv-xref-badge:hover{background:#bf5af240;color:#e9d5ff;border-color:#bf5af2;box-shadow:0 0 8px #bf5af240}

/* ── Variety comparison modal ── */
.variety-modal-box{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--card-bg,#1a1a2e);border:1px solid #ffffff15;border-radius:16px;width:min(94vw,700px);max-height:80vh;display:flex;flex-direction:column;z-index:10001;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.variety-modal-hdr{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #ffffff10}
.variety-modal-title{font-size:16px;font-weight:700;color:#fff}
.variety-modal-close{background:none;border:none;color:#ff3b3b;font-size:22px;font-weight:700;cursor:pointer;padding:4px 8px;border-radius:6px;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.variety-modal-close:hover{background:rgba(255,59,59,0.12);color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}
.variety-modal-body{padding:16px 20px;overflow-y:auto;flex:1}
.variety-summary{font-size:13px;color:#bbb;margin-bottom:12px;padding:8px 12px;background:#ffffff06;border-radius:8px;text-align:center}
.variety-tbl{display:flex;flex-direction:column;gap:1px}
.variety-tbl-hdr{background:#ffffff08;font-weight:700;font-size:11px;color:#999;text-transform:uppercase;letter-spacing:.3px;position:sticky;top:0}
.variety-tbl-row{display:grid;grid-template-columns:80px 90px 65px 90px 70px 70px 70px;gap:4px;padding:8px 6px;border-bottom:1px solid #ffffff06;font-size:12px;color:#ddd;align-items:center}
.vt-current{background:#7c3aed15;border-left:3px solid #7c3aed}
.vt-field{font-weight:600;color:#60a5fa}
.vt-loc{color:#ccc}
.vt-size{color:#bbb}
.vt-pd{color:#a78bfa;font-weight:600}
.vt-st{text-align:center}
.vt-qty{text-align:right;font-weight:600}
.vt-vend{text-align:right;color:#888}

/* ── History cards ── */
.inv-hist-card{background:#ffffff06;border:1px solid #ffffff08;border-radius:10px;padding:12px 14px;margin-bottom:8px}
.inv-hist-hd{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.inv-hist-icon{font-size:16px}
.inv-hist-title{font-size:13px;font-weight:600;color:var(--text,#e0e0e0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inv-hist-date{font-size:11px;color:var(--text-muted,#666);white-space:nowrap}
.inv-hist-details{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:11px;color:var(--text-muted,#888)}
.inv-hist-result{padding:1px 6px;border-radius:4px;font-weight:600;font-size:10px;text-transform:uppercase}
.inv-hist-r-exito{background:#00ff6a20;color:#00ff6a;text-shadow:0 0 3px rgba(0,255,106,0.3)}
.inv-hist-r-parcial{background:#ffcc0020;color:#ffcc00;text-shadow:0 0 3px rgba(255,204,0,0.3)}
.inv-hist-r-no-pudo{background:#ff444420;color:#ff4444;text-shadow:0 0 3px rgba(255,68,68,0.3)}
.inv-hist-notes{font-size:12px;color:var(--text-muted,#999);font-style:italic;margin-top:4px;padding-left:8px;border-left:2px solid #ffffff15}

/* ── Completion dialog ── */
.inv-complete-dialog{position:fixed;inset:0;z-index:10001}
.inv-cd-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.inv-cd-box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--bg-card,#1a1a2e);border:1px solid var(--border,#333);border-radius:14px;padding:20px;width:min(400px,90vw);box-shadow:0 12px 40px rgba(0,0,0,.5)}
.inv-cm-box{display:flex;flex-direction:column;max-height:85vh;padding:16px}
.inv-cm-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-right:4px}
.inv-cm-footer{display:flex;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid #ffffff10;margin-top:8px;flex-shrink:0}
.inv-cd-title{font-size:17px;font-weight:700;color:var(--text,#e0e0e0);margin-bottom:4px}
.inv-cd-mission{font-size:13px;color:var(--text-muted,#aaa);margin-bottom:14px;line-height:1.3}
.inv-cd-label{font-size:11px;font-weight:600;color:var(--text-muted,#888);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:block}
.inv-cd-results{display:flex;gap:6px;margin-bottom:14px}
.inv-cd-res{flex:1;background:#ffffff08;border:1px solid #ffffff15;color:var(--text-muted,#888);padding:8px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;text-align:center;transition:all .15s}
.inv-cd-res:hover{border-color:#22c55e44}
.inv-cd-res-sel{background:#22c55e20;border-color:#22c55e;color:#22c55e}
.inv-cd-notes{width:100%;background:#ffffff08;border:1px solid #ffffff15;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:8px 10px;resize:vertical;margin-bottom:14px;font-family:inherit}
.inv-cd-notes::placeholder{color:var(--text-muted,#666)}
.inv-cd-btns{display:flex;gap:8px;justify-content:flex-end}
.inv-cd-cancel{background:#ffffff08;border:1px solid #ffffff15;color:var(--text-muted,#888);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px}
.inv-cd-confirm{background:#22c55e;border:none;color:#fff;padding:8px 20px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.inv-cd-confirm:hover{background:#16a34a}

/* ── Create mission from plant dialog ── */
.inv-cm-header{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.inv-cm-header-icon{font-size:22px;line-height:1}
.inv-cm-header-text{font-size:18px;font-weight:700;color:var(--text,#e0e0e0);flex:1}
.inv-cm-close{background:none;border:none;color:#ff3b3b;font-size:28px;font-weight:700;line-height:1;cursor:pointer;padding:0 6px;transition:all .15s;text-shadow:0 0 6px rgba(255,59,59,0.5)}
.inv-cm-close:hover{color:#ff1a1a;text-shadow:0 0 12px rgba(255,59,59,0.7)}
.inv-cm-plant-card{display:flex;align-items:center;gap:10px;background:#ffffff06;border:1px solid #ffffff12;border-radius:10px;padding:10px 12px;margin-bottom:16px}
.inv-cm-plant-icon{font-size:22px;flex-shrink:0}
.inv-cm-plant-details{min-width:0}
.inv-cm-plant-name{font-size:14px;font-weight:600;color:var(--text,#e0e0e0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inv-cm-plant-meta{font-size:12px;color:var(--text-muted,#888);margin-top:2px}
.inv-cm-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.inv-cm-act{background:#ffffff08;border:1px solid #ffffff15;color:#ccc;padding:10px 8px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;text-align:left;transition:all .15s}
.inv-cm-act:hover{border-color:#3b82f644;background:#ffffff0c}
.inv-cm-act-sel{background:#3b82f620;border-color:#3b82f6;color:#60a5fa}
.inv-cm-act-otro{grid-column:1/-1;text-align:center;border-style:dashed}
.inv-cm-otro-wrap{margin:-6px 0 12px}
.inv-cm-otro-input{width:100%;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:9px 12px;font-family:inherit;transition:border-color .15s}
.inv-cm-otro-input::placeholder{color:var(--text-muted,#666)}
.inv-cm-otro-input:focus{outline:none;border-color:#3b82f6}
.inv-cm-worker-wrap{margin-bottom:14px}
.inv-cm-worker{width:100%;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:9px 12px;font-family:inherit;cursor:pointer;appearance:auto}
.inv-cm-worker:focus{outline:none;border-color:#3b82f6}
.inv-cm-worker option{background:#1e1e2e;color:#e0e0e0}
.inv-mc-assignee{font-size:12px;color:#60a5fa;margin:2px 0 4px;font-weight:500}
.inv-cm-priorities{display:flex;gap:6px;margin-bottom:14px}
.inv-cm-pri{flex:1;background:#ffffff08;border:1px solid #ffffff15;color:#ccc;padding:9px 8px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;text-align:center;transition:all .15s}
.inv-cm-pri:hover{border-color:#f59e0b44}
.inv-cm-pri-sel{font-weight:700}
.inv-cm-pri-alta.inv-cm-pri-sel{background:#ef444420;border-color:#ef4444;color:#f87171}
.inv-cm-pri-media.inv-cm-pri-sel{background:#f59e0b20;border-color:#f59e0b;color:#fbbf24}
.inv-cm-pri-baja.inv-cm-pri-sel{background:#22c55e20;border-color:#22c55e;color:#4ade80}
.inv-cm-opt{font-weight:400;color:var(--text-muted,#666);text-transform:none;letter-spacing:0}

/* ── Pickup (Recoger) Tab ── */
.inv-pk-header{margin-bottom:12px}
.inv-pk-title{font-size:15px;font-weight:800;color:#ff6b6b;text-shadow:0 0 4px rgba(239,68,68,0.3)}
.inv-pk-table{border:1px solid #ffffff12;border-radius:10px;overflow:hidden;margin-bottom:14px}
.inv-pk-row{display:grid;grid-template-columns:1.5fr 1fr 0.6fr 0.7fr 1.2fr;gap:4px;padding:8px 12px;align-items:center;border-bottom:1px solid #ffffff08;font-size:13px}
.inv-pk-row-hd{background:#ffffff08;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:var(--text-muted,#999)}
.inv-pk-row:last-child{border-bottom:none}
.inv-pk-c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.inv-pk-c-name:active,.inv-pk-c-name.inv-pk-expanded{white-space:normal;word-break:break-word}
.inv-pk-c-exp{text-align:center;color:#ffcc00;font-weight:700;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-pk-c-act{text-align:center}
.inv-pk-input{width:80px;background:#ffffff08;border:1px solid #ffffff20;border-radius:6px;color:var(--text,#e0e0e0);font-size:13px;padding:5px 8px;text-align:center;font-family:inherit}
.inv-pk-input:focus{outline:none;border-color:#3b82f6}
.inv-pk-footer{display:flex;gap:10px;align-items:flex-end;margin-bottom:20px}
.inv-pk-notes{flex:1;background:#ffffff08;border:1px solid #ffffff20;border-radius:8px;color:var(--text,#e0e0e0);font-size:13px;padding:8px 10px;font-family:inherit;resize:vertical}
.inv-pk-notes::placeholder{color:var(--text-muted,#666)}
.inv-pk-notes:focus{outline:none;border-color:#3b82f6}
.inv-pk-register{background:#ef4444;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .15s;text-shadow:0 0 3px rgba(0,0,0,0.3);box-shadow:0 0 8px rgba(239,68,68,0.3)}
.inv-pk-register:hover{background:#dc2626;box-shadow:0 0 14px rgba(239,68,68,0.5)}
.inv-pk-register:disabled{opacity:.5;cursor:not-allowed}
.inv-pk-hist-title{font-size:14px;font-weight:700;margin:18px 0 10px;color:var(--text-muted,#aaa);border-top:1px solid #ffffff10;padding-top:14px}
.inv-pk-hist-card{background:#ffffff06;border:1px solid #ffffff10;border-radius:10px;padding:12px;margin-bottom:10px}
.inv-pk-hist-hd{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px;font-size:12px}
.inv-pk-hist-date{font-weight:700;color:#e0e0e0}
.inv-pk-hist-by{color:#60a5fa}
.inv-pk-hist-totals{color:var(--text-muted,#999);margin-left:auto}
.inv-pk-hist-items{display:flex;flex-direction:column;gap:2px}
.inv-pk-hist-item{display:grid;grid-template-columns:1.5fr 1fr 0.6fr 0.6fr auto;gap:4px;padding:3px 8px;font-size:12px;border-radius:4px;align-items:center}
.inv-pk-eq{color:var(--text-muted,#888)}
.inv-pk-less{background:#ff444412;color:#ff6b6b}
.inv-pk-more{background:#00d4ff10;color:#00d4ff}
.inv-pk-hi-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;cursor:pointer}
.inv-pk-hi-name:active,.inv-pk-hi-name.inv-pk-expanded{white-space:normal;word-break:break-word}
.inv-pk-hi-exp,.inv-pk-hi-act{text-align:center}
.inv-pk-hi-diff{font-weight:700;font-size:11px}
.inv-pk-hist-notes{font-style:italic;color:var(--text-muted,#888);font-size:12px;margin-top:6px}

/* ── Orders expansion (per-plant sales detail) ── */
.inv-c-vend-has{cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.inv-c-vend-has:hover{color:#00e5ff;text-shadow:0 0 6px rgba(0,229,255,0.4)}
.inv-c-vend-open{color:#00e5ff!important;text-shadow:0 0 6px rgba(0,229,255,0.4)}
.inv-orders-row{grid-column:1/-1;background:#ffffff06;border:1px solid #ffffff10;border-radius:8px;padding:8px 10px;margin:-4px 0 4px;overflow-x:auto}
.inv-orders-hdr{display:grid;grid-template-columns:40px 1fr 70px 50px 70px 80px 50px;gap:4px;padding:4px 6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:#999;border-bottom:1px solid #ffffff10;margin-bottom:2px}
.inv-orders-item{display:grid;grid-template-columns:40px 1fr 70px 50px 70px 80px 50px;gap:4px;padding:4px 6px;font-size:12px;color:#ddd;border-bottom:1px solid #ffffff06;align-items:center}
.inv-orders-item:last-child{border-bottom:none}
.inv-ord-shipped{text-decoration:line-through;opacity:.5}
.inv-ord-urgent{background:#ef444412;border-radius:4px}
.inv-ord-pri{text-align:center;font-weight:700;color:#ffcc00;text-shadow:0 0 4px rgba(255,204,0,0.3)}
.inv-ord-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.inv-ord-date{font-weight:600;font-size:11px}
.inv-ord-qty{text-align:center;font-weight:700;color:#00d4ff;text-shadow:0 0 4px rgba(0,212,255,0.3)}
.inv-ord-id{font-size:11px;color:#999;font-variant-numeric:tabular-nums}
.inv-ord-fob{font-size:10px;color:#bf5af2;text-shadow:0 0 3px rgba(191,90,242,0.3)}
.inv-ord-st{text-align:center;font-size:14px}
.inv-mc-det-urgent{background:#ef444425;color:#ff6b6b;padding:2px 8px;border-radius:5px;font-weight:700;text-shadow:0 0 4px rgba(239,68,68,0.3)}

/* ── Responsive ── */
@media(max-width:640px){
  .inv-fs{width:100vw;height:100vh;border-radius:0}
  .inv-tbl-row{grid-template-columns:1.2fr 30px 0.8fr 42px 44px 50px 50px 32px;gap:3px;font-size:11px;padding:7px 4px}
  .inv-tbl-header{font-size:9px;letter-spacing:.2px;padding:7px 4px}
  .inv-c-qty{font-size:12px}
  .inv-c-vend{font-size:12px}
  .inv-c-act-btn{font-size:14px;padding:1px 4px}
  .inv-badge{padding:2px 5px;font-size:9px}
  .inv-fs-hd{padding:12px 14px}
  .inv-fs-hd-left{gap:6px}
  .inv-fs-title{font-size:16px}
  .inv-fs-stats{font-size:11px;padding:3px 7px}
  .inv-fs-cap,.inv-fs-pot,.inv-fs-week{font-size:11px}
  .inv-tabs{padding:0 8px;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .inv-tab{font-size:11px;padding:8px 10px;white-space:nowrap}
  .inv-tab-body{padding:12px 10px}
  .inv-block-chip{padding:7px 10px}
  .inv-bk-label{font-size:11px}
  .inv-bk-qty{font-size:10px}
  .inv-mc-title{font-size:14px}
  .inv-mc-actions{flex-wrap:wrap;gap:4px}
  .inv-mc-complete,.inv-mc-edit,.inv-mc-delete{padding:6px 10px;font-size:11px}
  .inv-mission-card{padding:10px 12px}
  .inv-hist-card{padding:10px 12px}
  .inv-hist-hd{gap:5px;flex-wrap:wrap}
  .inv-pk-row{grid-template-columns:1fr 0.8fr 0.5fr 0.5fr 0.7fr;font-size:11px;padding:6px 8px;gap:3px}
  .inv-pk-c-size{display:none}
  .inv-pk-input{width:56px;font-size:12px;padding:4px 4px}
  .inv-pk-footer{flex-direction:column}
  .inv-pk-row-hd{font-size:10px}
  .inv-pk-hist-item{grid-template-columns:1fr 0.8fr 0.5fr 0.5fr auto;font-size:11px}
  .inv-cm-actions-grid{grid-template-columns:1fr 1fr;gap:5px;margin-bottom:8px}
  .inv-cm-box{max-height:90vh;max-height:90dvh;width:min(400px,94vw);padding:12px}
  .inv-cm-header{margin-bottom:8px}
  .inv-cm-header-text{font-size:16px}
  .inv-cm-plant-card{padding:8px 10px;margin-bottom:10px;gap:8px}
  .inv-cm-plant-name{font-size:14px}
  .inv-cm-act{font-size:12px;padding:8px 6px}
  .inv-cm-worker{font-size:12px;padding:7px 10px}
  .inv-cm-pri{padding:7px 6px;font-size:12px}
  .inv-cd-notes{font-size:12px}
  .inv-cm-footer .inv-cd-cancel,.inv-cm-footer .inv-cd-confirm{padding:10px 14px;font-size:13px}
  .inv-orders-hdr{grid-template-columns:28px 1fr 52px 36px 52px 56px 32px;font-size:9px;gap:2px;padding:3px 4px}
  .inv-orders-item{grid-template-columns:28px 1fr 52px 36px 52px 56px 32px;font-size:10px;gap:2px;padding:3px 4px}
  .inv-orders-row{padding:4px 6px}
}
@media(max-height:500px){
  .inv-cm-box{max-height:96vh;max-height:96dvh;top:50%;width:min(440px,96vw)}
  .inv-cm-scroll{max-height:calc(96dvh - 110px)}
  .inv-cm-plant-card{padding:6px 8px;margin-bottom:6px}
  .inv-cd-label{margin-bottom:3px;font-size:10px}
  .inv-cm-actions-grid{gap:4px;margin-bottom:6px}
  .inv-cm-act{padding:6px 4px;font-size:11px}
  .inv-cm-pri{padding:6px 4px;font-size:11px}
  .inv-cm-worker-wrap{margin-bottom:6px}
  .inv-cm-otro-wrap{margin:-4px 0 6px}
  .inv-cm-priorities{margin-bottom:6px}
}

/* ── Light theme: Mode toggle + Manual times ── */
[data-theme="light"] .op-mode-toggle {
  border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04);
}
[data-theme="light"] .op-mode-btn { color: var(--text-2); }
[data-theme="light"] .op-mode-btn:hover { background: rgba(0,0,0,.06); }
[data-theme="light"] .op-mode-btn.op-mode-active {
  background: rgba(33,150,243,.12); color: #1976d2;
  box-shadow: inset 0 -2px 0 #1976d2;
}
[data-theme="light"] .op-mode-btn[data-mode="manual"].op-mode-active {
  background: rgba(245,124,0,.1); color: #e65100;
  box-shadow: inset 0 -2px 0 #e65100;
}
[data-theme="light"] .op-manual-times {
  background: rgba(255,152,0,.06);
  border-color: rgba(245,124,0,.2);
}
[data-theme="light"] .op-manual-input {
  background: #fff; border-color: rgba(0,0,0,.15); color: var(--text-1);
}
[data-theme="light"] .op-manual-input:focus {
  border-color: #e65100;
  box-shadow: 0 0 0 2px rgba(245,124,0,.15);
}

/* ══════ Light theme: Inventory Panel ══════ */
[data-theme="light"] .inv-fs{background:var(--bg-card);border-color:var(--border);box-shadow:0 20px 60px rgba(0,0,0,.15)}
[data-theme="light"] .inv-fs-hd{background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-fs-title{color:var(--text-1)}
[data-theme="light"] .inv-fs-stats{color:var(--text-2);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-fs-pot{color:var(--text-3);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-fs-close{color:#e11d48;text-shadow:none}
[data-theme="light"] .inv-fs-close:hover{color:#be123c}

/* Light: Tabs */
[data-theme="light"] .inv-tabs{background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tab{color:var(--text-3)}
[data-theme="light"] .inv-tab:hover{color:var(--text-1)}

/* Light: Field sub-tabs */
[data-theme="light"] .inv-field-tabs{border-bottom-color:var(--border)}
[data-theme="light"] .inv-field-tab{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-field-tab:hover{background:rgba(139,92,246,.06);border-color:rgba(139,92,246,.3);color:#7c3aed}
[data-theme="light"] .inv-field-tab-sel{background:rgba(139,92,246,.08);border-color:#7c3aed;color:#6d28d9}
[data-theme="light"] .inv-ft-qty{color:var(--text-3);background:rgba(0,0,0,.04)}
[data-theme="light"] .inv-field-tab-sel .inv-ft-qty{color:#7c3aed;background:rgba(139,92,246,.1)}

/* Light: Block chips */
[data-theme="light"] .inv-block-chip{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .inv-block-chip:hover{background:rgba(2,132,199,.06);border-color:rgba(2,132,199,.3)}
[data-theme="light"] .inv-bk-sel{background:rgba(2,132,199,.1);border-color:#0284c7}
[data-theme="light"] .inv-bk-label{color:var(--text-1)}
[data-theme="light"] .inv-bk-qty{color:var(--text-3)}

/* Light: Plant table */
[data-theme="light"] .inv-tbl-hd{color:var(--text-1);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tbl-header{color:var(--text-3);background:var(--bg-card);border-bottom-color:var(--border)}
[data-theme="light"] .inv-tbl-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .inv-c-name{color:var(--text-1)}
[data-theme="light"] .inv-c-loc{color:var(--text-2)}
[data-theme="light"] .inv-c-size{color:var(--text-2)}
[data-theme="light"] .inv-c-qty{color:var(--text-1)}
[data-theme="light"] .inv-c-vend{color:#0284c7;text-shadow:none}
[data-theme="light"] .inv-c-act-btn{border-color:rgba(0,0,0,.12);color:var(--text-3)}
[data-theme="light"] .inv-c-act-btn:hover{background:rgba(34,197,94,.08);border-color:#16a34a;color:#16a34a}
[data-theme="light"] .inv-row-failing{background:rgba(239,68,68,.06)}
[data-theme="light"] .inv-row-ipm{background:rgba(168,85,247,.06)}
[data-theme="light"] .inv-row-hold{background:rgba(245,158,11,.06)}

/* Light: Sort headers */
[data-theme="light"] .inv-ms-hdr{border-bottom-color:var(--border)}
[data-theme="light"] .inv-ms-h{color:var(--text-3)}

/* Light: Mission cards */
[data-theme="light"] .inv-mission-card{background:var(--bg-1);border-color:var(--border)}
[data-theme="light"] .inv-mc-type{background:rgba(0,0,0,.05);color:var(--text-2)}
[data-theme="light"] .inv-mc-title{color:var(--text-1)}
[data-theme="light"] .inv-mc-desc{color:var(--text-2)}
[data-theme="light"] .inv-mc-det{color:var(--text-2)}
[data-theme="light"] .inv-mc-assignee{color:#2563eb}
[data-theme="light"] .inv-mc-edit{background:rgba(59,130,246,.06);color:#2563eb;border-color:rgba(59,130,246,.25)}
[data-theme="light"] .inv-mc-edit:hover{background:rgba(59,130,246,.12);border-color:#3b82f6}
[data-theme="light"] .inv-mc-delete{background:rgba(239,68,68,.06);color:#dc2626;border-color:rgba(239,68,68,.2)}
[data-theme="light"] .inv-mc-delete:hover{background:rgba(239,68,68,.12);border-color:#ef4444}

/* Light: Mission filter chips */
[data-theme="light"] .inv-mf-chip{border-color:var(--border);background:rgba(0,0,0,.03);color:var(--text-2)}
[data-theme="light"] .inv-mf-chip:hover{background:rgba(0,0,0,.06);color:var(--text-1)}
[data-theme="light"] .inv-mf-bar{border-bottom-color:rgba(0,0,0,.06)}

/* Light: History cards */
[data-theme="light"] .inv-hist-card{background:var(--bg-1);border-color:var(--border)}
[data-theme="light"] .inv-hist-notes{border-left-color:var(--border);color:var(--text-3)}

/* Light: Completion & Create-mission dialog */
[data-theme="light"] .inv-cd-box{background:var(--bg-card);border-color:var(--border);box-shadow:0 12px 40px rgba(0,0,0,.12)}
[data-theme="light"] .inv-cm-plant-card{background:rgba(0,0,0,.03);border-color:var(--border)}
[data-theme="light"] .inv-cm-footer{border-top-color:var(--border)}
[data-theme="light"] .inv-cm-act{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-2)}
[data-theme="light"] .inv-cm-act:hover{border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.04)}
[data-theme="light"] .inv-cm-act-sel{background:rgba(59,130,246,.08);border-color:#3b82f6;color:#2563eb}
[data-theme="light"] .inv-cm-pri{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-2)}
[data-theme="light"] .inv-cm-pri:hover{border-color:rgba(245,158,11,.3)}
[data-theme="light"] .inv-cm-otro-input{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cm-worker{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cm-worker option{background:#fff;color:var(--text-1)}
[data-theme="light"] .inv-cd-res{background:rgba(0,0,0,.03);border-color:var(--border);color:var(--text-3)}
[data-theme="light"] .inv-cd-res:hover{border-color:rgba(34,197,94,.3)}
[data-theme="light"] .inv-cd-res-sel{background:rgba(34,197,94,.1);border-color:#16a34a;color:#15803d}
[data-theme="light"] .inv-cd-notes{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-cd-cancel{background:rgba(0,0,0,.04);border-color:var(--border);color:var(--text-2)}

/* Light: Pickup tab */
[data-theme="light"] .inv-pk-table{border-color:var(--border)}
[data-theme="light"] .inv-pk-row{border-bottom-color:rgba(0,0,0,.06)}
[data-theme="light"] .inv-pk-row-hd{background:rgba(0,0,0,.03);color:var(--text-3)}
[data-theme="light"] .inv-pk-input{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-pk-notes{background:#fff;border-color:var(--border);color:var(--text-1)}
[data-theme="light"] .inv-pk-hist-title{color:var(--text-2);border-top-color:var(--border)}
[data-theme="light"] .inv-pk-hist-card{background:var(--bg-1);border-color:var(--border)}
[data-theme="light"] .inv-pk-hist-date{color:var(--text-1)}
[data-theme="light"] .inv-pk-hist-by{color:#2563eb}
[data-theme="light"] .inv-pk-eq{color:var(--text-3)}
[data-theme="light"] .inv-pk-less{background:rgba(239,68,68,.08);color:#dc2626}
[data-theme="light"] .inv-pk-more{background:rgba(59,130,246,.08);color:#2563eb}

/* Light: Variety comparison modal */
[data-theme="light"] .variety-modal-box{background:var(--bg-card);border-color:var(--border)}
[data-theme="light"] .variety-modal-hdr{border-bottom-color:var(--border)}
[data-theme="light"] .variety-modal-title{color:var(--text-1)}
[data-theme="light"] .variety-modal-close{color:#e11d48;text-shadow:none}
[data-theme="light"] .variety-modal-close:hover{background:rgba(225,29,72,0.08);color:#be123c}
[data-theme="light"] .variety-summary{color:var(--text-2);background:rgba(0,0,0,.03)}
[data-theme="light"] .variety-tbl-hdr{background:rgba(0,0,0,.03);color:var(--text-3)}
[data-theme="light"] .variety-tbl-row{border-bottom-color:rgba(0,0,0,.05);color:var(--text-2)}
[data-theme="light"] .vt-current{background:rgba(124,58,237,.06)}
[data-theme="light"] .vt-field{color:#2563eb}
[data-theme="light"] .vt-loc{color:var(--text-2)}
[data-theme="light"] .vt-pd{color:#7c3aed}

/* Light: Cross-ref badge */
[data-theme="light"] .inv-xref-badge{background:rgba(124,58,237,.08);color:#7c3aed;border-color:rgba(124,58,237,.25)}
[data-theme="light"] .inv-xref-badge:hover{background:rgba(124,58,237,.15);color:#6d28d9;border-color:#7c3aed}

/* Light: Orders expansion */
[data-theme="light"] .inv-c-vend-has:hover{color:#0369a1}
[data-theme="light"] .inv-c-vend-open{color:#0369a1!important}
[data-theme="light"] .inv-orders-row{background:rgba(0,0,0,.02);border-color:var(--border)}
[data-theme="light"] .inv-orders-hdr{color:var(--text-3);border-bottom-color:var(--border)}
[data-theme="light"] .inv-orders-item{color:var(--text-2);border-bottom-color:rgba(0,0,0,.05)}
[data-theme="light"] .inv-ord-shipped{opacity:.45}
[data-theme="light"] .inv-ord-urgent{background:rgba(239,68,68,.06)}
[data-theme="light"] .inv-ord-pri{color:#d97706}
[data-theme="light"] .inv-ord-qty{color:#2563eb}
[data-theme="light"] .inv-ord-id{color:var(--text-3)}
[data-theme="light"] .inv-ord-fob{color:#7c3aed}
[data-theme="light"] .inv-mc-det-urgent{background:rgba(239,68,68,.1);color:#dc2626}

/* ══════ Landscape: Full Inventory Panel ══════ */
@media(max-height:500px){
  .inv-fs{height:100vh;height:100dvh;border-radius:0}
  .inv-fs-hd{padding:6px 12px}
  .inv-fs-title{font-size:15px}
  .inv-fs-stats,.inv-fs-cap,.inv-fs-pot,.inv-fs-week{font-size:10px;padding:2px 6px}
  .inv-fs-close{font-size:22px}
  .inv-tabs{padding:0 8px;gap:0}
  .inv-tab{font-size:11px;padding:5px 10px}
  .inv-tab-body{padding:8px 12px}
  .inv-field-tabs{padding:0 0 6px;margin-bottom:8px;gap:3px}
  .inv-field-tab{padding:4px 10px;font-size:11px}
  .inv-fs-blocks{gap:4px;margin-bottom:8px}
  .inv-block-chip{padding:5px 10px;border-radius:6px}
  .inv-bk-label{font-size:11px}
  .inv-bk-qty{font-size:9px}
  .inv-tbl-header{font-size:10px;padding:5px 4px}
  .inv-tbl-row{padding:5px 4px;font-size:12px}
  .inv-c-qty,.inv-c-vend{font-size:13px}
  .inv-mission-card{padding:8px 10px;margin-bottom:6px;border-radius:8px}
  .inv-mc-title{font-size:13px;margin-bottom:3px}
  .inv-mc-desc{font-size:11px;margin-bottom:4px}
  .inv-mc-details{gap:4px 8px;margin-bottom:6px}
  .inv-mc-det{font-size:11px}
  .inv-mc-complete,.inv-mc-edit,.inv-mc-delete{padding:5px 10px;font-size:11px}
  .inv-mf-bar{gap:4px;margin-bottom:8px;padding-bottom:6px}
  .inv-mf-chip{padding:3px 8px;font-size:10px}
  .inv-ms-hdr{padding:4px 4px;margin-bottom:2px}
  .inv-ms-h{font-size:10px}
  .inv-hist-card{padding:8px 10px;margin-bottom:6px}
  .inv-hist-hd{margin-bottom:2px}
  .inv-hist-title{font-size:12px}
  .inv-hist-details{font-size:10px}
  .inv-pk-row{padding:5px 8px;font-size:11px}
  .inv-pk-input{width:60px;font-size:11px;padding:3px 4px}
  .inv-pk-footer{gap:6px;margin-bottom:10px}
  .inv-pk-notes{font-size:12px;padding:6px 8px}
  .inv-pk-register{padding:7px 14px;font-size:12px}
  .inv-pk-hist-title{margin:10px 0 6px;padding-top:8px;font-size:12px}
  .inv-pk-hist-card{padding:8px 10px;margin-bottom:6px}
  .inv-pk-hist-item{font-size:11px;padding:2px 6px}
  .inv-empty-state{padding:16px 12px;font-size:12px}
  .inv-orders-row{padding:4px 6px}
  .inv-orders-hdr{font-size:9px;gap:2px;padding:2px 4px}
  .inv-orders-item{font-size:10px;gap:2px;padding:2px 4px}
}

/* ── Zone Badges: light theme ── */
[data-theme="light"] .zb-badge {
  background: rgba(180, 180, 190, 0.4);
}
[data-theme="light"] .zb-badge:hover {
  opacity: 1;
  filter: brightness(1.1);
}
[data-theme="light"] .zb-popup {
  background: #ffffff;
  border-color: #d0d8e4;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}
[data-theme="light"] .zb-action:hover {
  background: rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .zb-action-plants {
  border-top-color: #d0d8e4;
}
[data-theme="light"] .zb-ipm-group {
  border-top-color: #d0d8e4;
}
[data-theme="light"] .zb-ipm-header {
  color: #9333ea;
}
[data-theme="light"] .zb-popup-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .zb-popup-close:hover { background: rgba(225, 29, 72, 0.1); color: #be123c; }
[data-theme="light"] .m-panel-x { color: #e11d48; background: rgba(225, 29, 72, 0.08); text-shadow: none; }
[data-theme="light"] .m-panel-x:hover { color: #be123c; background: rgba(225, 29, 72, 0.15); }
[data-theme="light"] .m-side-close { color: #e11d48; background: rgba(225, 29, 72, 0.08); text-shadow: none; }
[data-theme="light"] .m-side-close:hover { color: #be123c; background: rgba(225, 29, 72, 0.15); }
[data-theme="light"] .inv-cm-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .variety-modal-close { color: #e11d48; text-shadow: none; }
[data-theme="light"] .zb-val-ok { color: #059669; text-shadow: none; }
[data-theme="light"] .zb-val-warn { color: #d97706; text-shadow: none; }
[data-theme="light"] .zb-val-crit { color: #dc2626; text-shadow: none; }
[data-theme="light"] .zb-val-muted { color: #94a3b8; }
[data-theme="light"] .zb-val-plants { color: #0284c7; text-shadow: none; }
[data-theme="light"] .zb-val-ipm { color: #9333ea; text-shadow: none; }
[data-theme="light"] .zb-val-sub { color: #475569; }
[data-theme="light"] .zb-ipm { color: #9333ea; text-shadow: none; }