:root {
      --bg: #f5f7fb;
      --panel: #ffffff;
      --sidebar: #0f172a;
      --sidebar-2: #111827;
      --line: #e5e7eb;
      --text: #111827;
      --muted: #6b7280;
      --primary: #2563eb;
      --primary-dark: #1d4ed8;
      --green: #16a34a;
      --red: #dc2626;
      --amber: #d97706;
      --purple: #7c3aed;
      --cyan: #0891b2;
      --card-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, Helvetica, sans-serif;
      background: radial-gradient(circle at top left, #e0f2fe 0, transparent 28%), var(--bg);
      color: var(--text);
    }

    .app { display: flex; min-height: 100vh; }

    .sidebar {
      width: 292px;
      position: fixed;
      inset: 0 auto 0 0;
      background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
      color: white;
      overflow-y: auto;
      z-index: 10;
      box-shadow: 8px 0 30px rgba(15, 23, 42, 0.25);
    }

    .brand {
      padding: 24px 18px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      text-align: center;
    }

    @property --logo-rgb-angle {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: false;
    }

    .logo-box {
      width: 112px;
      height: 112px;
      margin: 0 auto 14px;
      position: relative;
      isolation: isolate;
      background: transparent;
      border-radius: 24px;
      padding: 9px;
      display: grid;
      place-items: center;
    }

    /* Animated RGB light that runs around the logo frame. */
    .logo-box::before {
      content: "";
      position: absolute;
      inset: -4px;
      z-index: 0;
      border-radius: inherit;
      background: conic-gradient(
        from var(--logo-rgb-angle),
        #ff2d55 0deg,
        #ff9f0a 55deg,
        #ffee00 105deg,
        #30d158 155deg,
        #00d7ff 215deg,
        #0a84ff 265deg,
        #bf5af2 315deg,
        #ff2d55 360deg
      );
      box-shadow:
        0 0 8px rgba(0, 215, 255, 0.55),
        0 0 16px rgba(191, 90, 242, 0.34),
        0 18px 32px rgba(0, 0, 0, 0.22);
      animation: logoRgbOrbit 3.2s linear infinite;
      pointer-events: none;
    }

    .logo-box::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      background: #ffffff;
      pointer-events: none;
    }

    @keyframes logoRgbOrbit {
      to { --logo-rgb-angle: 360deg; }
    }

    .logo-img {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    @media (prefers-reduced-motion: reduce) {
      .logo-box::before { animation: none; }
    }

    .brand-title { font-size: 22px; font-weight: 800; letter-spacing: 0.2px; }
    .brand-subtitle { margin-top: 5px; font-size: 13px; color: #cbd5e1; }
    .brand-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding: 7px 11px;
      background: rgba(37, 99, 235, 0.18);
      color: #bfdbfe;
      border: 1px solid rgba(147, 197, 253, 0.22);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }

    .nav { padding: 16px 14px 24px; }
    .nav-title {
      position: relative;
      margin: 20px 10px 9px;
      color: #94a3b8;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.75px;
      font-weight: 800;
      padding: 0 2px;
    }

    .nav-title.section-divider {
      margin-top: 20px;
      padding-top: 0;
    }

    /* Expanded sidebar: show section labels without horizontal divider lines. */
    .nav-title.section-divider::before {
      display: none;
    }

    .nav-title .nav-title-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(148,163,184,0.14);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    }

    .nav-title.section-divider .nav-title-label {
      background: linear-gradient(180deg, rgba(15,23,42,0.96), rgba(15,23,42,0.90));
    }

    /* One visual card per greenhouse/control category. */
    .nav-category {
      --nav-category-rgb: 148, 163, 184;
      position: relative;
      margin: 8px 0 14px;
      padding: 5px;
      overflow: hidden;
      border: 1px solid rgba(var(--nav-category-rgb), 0.20);
      border-radius: 18px;
      background:
        radial-gradient(circle at 12% 0%, rgba(var(--nav-category-rgb), 0.16), transparent 48%),
        linear-gradient(155deg, rgba(30,41,59,0.82), rgba(15,23,42,0.72));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.055),
        0 10px 26px rgba(2,6,23,0.16);
    }

    .nav-category[data-nav-category="evap-house"] { --nav-category-rgb: 34, 211, 238; }
    .nav-category[data-nav-category="net-house"] { --nav-category-rgb: 52, 211, 153; }
    .nav-category[data-nav-category="nursery-house"] { --nav-category-rgb: 167, 139, 250; }
    .nav-category[data-nav-category="shared-control"] { --nav-category-rgb: 245, 158, 11; }
    .nav-category[data-nav-category="export"] { --nav-category-rgb: 129, 140, 248; }
    .nav-category[data-nav-category="user-management"] { --nav-category-rgb: 244, 114, 182; }

    .nav-category .nav-title[data-auth-group] {
      position: relative;
      z-index: 1;
      margin: 0 0 4px;
      padding: 0;
      text-transform: none;
      letter-spacing: 0.1px;
    }

    .nav-category .nav-title[data-auth-group] .nav-title-label {
      display: flex;
      align-items: center;
      width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid rgba(var(--nav-category-rgb), 0.30);
      border-radius: 14px;
      color: #f8fbff;
      font-size: 14px;
      font-weight: 900;
      line-height: 1.25;
      background:
        linear-gradient(135deg, rgba(var(--nav-category-rgb), 0.25), rgba(var(--nav-category-rgb), 0.08)),
        rgba(15,23,42,0.70);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 6px 16px rgba(2,6,23,0.12);
    }

    .nav-category .nav-title[data-auth-group] .nav-title-label::before {
      content: "";
      width: 9px;
      height: 9px;
      flex: 0 0 9px;
      border-radius: 999px;
      background: rgb(var(--nav-category-rgb));
      box-shadow:
        0 0 0 4px rgba(var(--nav-category-rgb), 0.12),
        0 0 14px rgba(var(--nav-category-rgb), 0.48);
    }

    .nav-category-items {
      position: relative;
      z-index: 1;
      display: grid;
      gap: 3px;
      padding: 3px;
      border-radius: 13px;
      background: rgba(2,6,23,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
    }

    .nav-category .nav-button.nav-subitem {
      position: relative;
      min-height: 48px;
      margin: 0;
      padding: 9px 9px;
      border: 1px solid transparent;
      border-radius: 12px;
      background: rgba(255,255,255,0.018);
      box-shadow: none;
    }

    .nav-category .nav-button.nav-subitem::before,
    .nav-category .nav-button.nav-subitem::after {
      display: none;
    }

    .nav-category .nav-button.nav-subitem:hover {
      border-color: rgba(var(--nav-category-rgb), 0.22);
      background: rgba(var(--nav-category-rgb), 0.10);
      transform: translateX(2px);
    }

    .nav-category .nav-button.nav-subitem.active {
      color: #ffffff;
      font-weight: 800;
      border-color: rgba(var(--nav-category-rgb), 0.46);
      background:
        linear-gradient(135deg, rgba(var(--nav-category-rgb), 0.52), rgba(var(--nav-category-rgb), 0.20)),
        #172033;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.12),
        0 8px 18px rgba(2,6,23,0.18);
    }


    /* Divider shown only on the compact/collapsed sidebar rail. */
    .nav-rail-divider {
      display: none;
      height: 1px;
      margin: 18px 5px 12px;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(148,163,184,0.08) 0%,
        rgba(148,163,184,0.62) 22%,
        rgba(226,232,240,0.82) 50%,
        rgba(148,163,184,0.62) 78%,
        rgba(148,163,184,0.08) 100%
      );
      box-shadow: 0 1px 0 rgba(255,255,255,0.04);
    }

    @media (min-width: 851px) {
      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-rail-divider {
        display: block;
      }

      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-category {
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-category-items {
        display: grid;
        gap: 3px;
        padding: 0;
        background: transparent;
        box-shadow: none;
      }

      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-button.nav-subitem {
        padding: 12px 8px;
      }

      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-button.nav-subitem::before,
      body.sidebar-collapsed:not(.sidebar-hover-open) .nav-button.nav-subitem::after {
        display: none;
      }
    }

    .nav-button {
      width: 100%;
      border: 0;
      background: transparent;
      color: #e5e7eb;
      text-align: left;
      padding: 12px 12px;
      margin-bottom: 7px;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      transition: 0.18s ease;
    }

    .nav-button:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); }
    .nav-button.active { background: linear-gradient(135deg, #2563eb, #06b6d4); color: white; font-weight: 800; }
    .nav-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,0.10); }

    /* Color greenhouse icons used by EVAP, Net House and Nursery menus. */
    .nav-icon.nav-icon-greenhouse {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 12px;
      background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(219,234,254,0.93));
      border: 1px solid rgba(191,219,254,0.72);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.92),
        0 7px 16px rgba(2,132,199,0.16);
      overflow: hidden;
    }

    .nav-icon svg {
      width: 19px;
      height: 19px;
      display: block;
      overflow: visible;
      color: currentColor;
    }

    .nav-icon.nav-icon-greenhouse svg {
      width: 32px;
      height: 32px;
    }

    .nav-icon svg * {
      vector-effect: non-scaling-stroke;
    }

    .nav-button:hover .nav-icon-greenhouse {
      transform: translateY(-1px) scale(1.03);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.95),
        0 10px 20px rgba(14,165,233,0.23);
    }

    .nav-button.active .nav-icon-greenhouse {
      background: linear-gradient(145deg, #ffffff, #e0f2fe);
      border-color: rgba(255,255,255,0.88);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 10px 24px rgba(3,105,161,0.28);
    }

    .main {
      margin-left: 292px;
      width: calc(100% - 292px);
      min-height: 100vh;
    }

    .topbar {
      position: sticky;
      top: 0;
      z-index: 5;
      padding: 20px 28px;
      background: rgba(255,255,255,0.86);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--line);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .topbar h1 { margin: 0; font-size: 28px; color: #0f172a; }
    .topbar p { margin: 6px 0 0; color: var(--muted); font-size: 14px; }
    .topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

    .wifi-widget {
      min-width: 245px;
      border: 1px solid #dbe3ef;
      background: rgba(255, 255, 255, 0.96);
      color: #0f172a;
      border-radius: 18px;
      padding: 10px 12px;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.08);
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .wifi-widget.online { border-color: #bbf7d0; background: linear-gradient(135deg, rgba(240,253,244,0.98), rgba(255,255,255,0.96)); }
    .wifi-widget.warning { border-color: #fde68a; background: linear-gradient(135deg, rgba(255,251,235,0.98), rgba(255,255,255,0.96)); }
    .wifi-widget.offline { border-color: #fecaca; background: linear-gradient(135deg, rgba(254,242,242,0.98), rgba(255,255,255,0.96)); }

    .wifi-dot {
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #94a3b8;
      box-shadow: 0 0 0 5px rgba(148,163,184,0.15);
      flex: 0 0 auto;
    }
    .wifi-widget.online .wifi-dot { background: #22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,0.15); }
    .wifi-widget.warning .wifi-dot { background: #f59e0b; box-shadow: 0 0 0 5px rgba(245,158,11,0.15); }
    .wifi-widget.offline .wifi-dot { background: #ef4444; box-shadow: 0 0 0 5px rgba(239,68,68,0.15); }

    .wifi-main { min-width: 0; flex: 1; }
    .wifi-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
    .wifi-title { font-size: 12px; color: #475569; font-weight: 950; white-space: nowrap; }
    .wifi-status-text { font-size: 12px; font-weight: 950; color: #64748b; white-space: nowrap; }
    .wifi-widget.online .wifi-status-text { color: #166534; }
    .wifi-widget.warning .wifi-status-text { color: #92400e; }
    .wifi-widget.offline .wifi-status-text { color: #991b1b; }

    .wifi-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; height: 18px; align-items: end; }
    .wifi-bar { border-radius: 999px 999px 3px 3px; background: #cbd5e1; opacity: 0.75; }
    .wifi-bar:nth-child(1) { height: 6px; }
    .wifi-bar:nth-child(2) { height: 10px; }
    .wifi-bar:nth-child(3) { height: 14px; }
    .wifi-bar:nth-child(4) { height: 18px; }
    .wifi-widget.online .wifi-bar.active { background: #22c55e; opacity: 1; }
    .wifi-widget.warning .wifi-bar.active { background: #f59e0b; opacity: 1; }
    .wifi-widget.offline .wifi-bar.active { background: #ef4444; opacity: 1; }

    .wifi-detail {
      margin-top: 5px;
      color: #64748b;
      font-size: 11px;
      font-weight: 800;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 195px;
    }

    .pill {
      border: 1px solid var(--line);
      background: white;
      color: #334155;
      padding: 8px 11px;
      border-radius: 999px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: 0 3px 12px rgba(15,23,42,0.06);
    }

    .content { padding: 24px 28px 32px; }
    .page { display: none; }
    .page.active { display: block; }

    .hero {
      background: linear-gradient(135deg, #0f172a, #1e40af 55%, #0891b2);
      color: white;
      border-radius: 26px;
      padding: 28px;
      margin-bottom: 22px;
      box-shadow: var(--card-shadow);
      position: relative;
      overflow: hidden;
    }
    .hero::after {
      content: "";
      position: absolute;
      width: 260px;
      height: 260px;
      right: -70px;
      top: -90px;
      background: rgba(255,255,255,0.12);
      border-radius: 999px;
    }
    .hero h2 { margin: 0 0 8px; font-size: 28px; }
    .hero p { margin: 0; color: #dbeafe; max-width: 780px; line-height: 1.55; }

    .summary-grid, .sensor-grid, .status-grid, .control-grid {
      display: grid;
      gap: 16px;
    }
    .summary-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin-bottom: 20px; }
    .sensor-grid { grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); }
    .status-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .control-grid { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

    .section {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(226,232,240,0.95);
      border-radius: 22px;
      padding: 22px;
      margin-bottom: 22px;
      box-shadow: var(--card-shadow);
    }
    .section-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 18px;
    }


    /* Hide only the visible monitor section titles/count badges above EVAP, Net, and Nursery content. */
    #evap-monitor > .section > .section-head,
    #net-monitor > .section > .section-head,
    #nursery-monitor > .section > .section-head {
      display: none;
    }
    .section h2 { margin: 0; font-size: 23px; color: #0f172a; }
    .section-desc { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

    .summary-card, .sensor-card, .status-card, .control-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: 20px;
      box-shadow: 0 10px 24px rgba(15,23,42,0.07);
    }
    .summary-card {
      padding: 18px;
      position: relative;
      overflow: hidden;
      min-height: 142px;
      isolation: isolate;
      background:
        radial-gradient(circle at 85% 12%, rgba(37, 99, 235, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,250,252,0.88));
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .summary-card:hover {
      transform: translateY(-3px);
      border-color: rgba(37,99,235,0.26);
      box-shadow: 0 18px 38px rgba(15,23,42,0.11);
    }
    .summary-card::before {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: 22px;
      background: linear-gradient(
        135deg,
        rgba(37, 99, 235, 0.55),
        rgba(6, 182, 212, 0.35),
        rgba(255, 255, 255, 0.20)
      );

      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

      -webkit-mask-composite: xor;
      mask-composite: exclude;

      pointer-events: none;
      z-index: 0;
    }
    .summary-card::after {
      content: "";
      position: absolute;
      right: -30px;
      top: -34px;
      width: 122px;
      height: 122px;
      border-radius: 999px;
      background: rgba(37,99,235,0.10);
      z-index: -1;
    }
    .summary-card.summary-temp::after { background: rgba(249,115,22,0.13); }
    .summary-card.summary-humidity::after { background: rgba(8,145,178,0.13); }
    .summary-card.summary-alarm::after { background: rgba(220,38,38,0.13); }
    .summary-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
    .summary-icon {
      width: 42px;
      height: 42px;
      border-radius: 15px;
      display: grid;
      place-items: center;
      font-size: 20px;
      background: rgba(37,99,235,0.10);
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.12);
    }
    .summary-temp .summary-icon { background: rgba(249,115,22,0.12); box-shadow: inset 0 0 0 1px rgba(249,115,22,0.14); }
    .summary-humidity .summary-icon { background: rgba(8,145,178,0.12); box-shadow: inset 0 0 0 1px rgba(8,145,178,0.14); }
    .summary-alarm .summary-icon { background: rgba(220,38,38,0.10); box-shadow: inset 0 0 0 1px rgba(220,38,38,0.14); }
    .summary-title { color: #475569; font-size: 13px; margin-bottom: 8px; font-weight: 900; }
    .summary-value { font-size: 34px; line-height: 1.05; font-weight: 950; letter-spacing: -0.8px; color: #020617; }
    .summary-unit { margin-left: 4px; color: #64748b; font-size: 14px; font-weight: 800; }
    .summary-sub { margin-top: 13px; color: #64748b; font-size: 12px; display: flex; align-items: center; gap: 7px; }
    .summary-sub::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
    }
    .summary-alarm .summary-sub::before { background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,0.12); }
    .summary-sub.sensor-count-ok::before {
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.12);
    }
    .summary-sub.sensor-count-warning::before {
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245,158,11,0.14);
    }
    .summary-sub.sensor-count-offline::before {
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239,68,68,0.14);
    }

    .sensor-chart-board {
      margin: 4px 0 20px;
      padding: 18px;
      border-radius: 24px;
      background:
        radial-gradient(circle at top right, rgba(6,182,212,0.14), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94));
      border: 1px solid rgba(226,232,240,0.95);
      box-shadow: 0 14px 32px rgba(15,23,42,0.08);
    }
    .sensor-chart-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 14px;
    }
    .sensor-chart-head h3 { margin: 0; color: #0f172a; font-size: 19px; }
    .sensor-chart-head p { margin: 5px 0 0; color: #64748b; font-size: 13px; }
    .metric-chart-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(260px, 1fr));
      gap: 14px;
    }
    .chart-card {
      background: rgba(255,255,255,0.96);
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 14px;
      box-shadow: 0 10px 24px rgba(15,23,42,0.06);
      min-width: 0;
    }
    .chart-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
      color: #0f172a;
      font-size: 14px;
      font-weight: 900;
    }
    .chart-dot { width: 10px; height: 10px; border-radius: 999px; display: inline-block; }
    .chart-vpd-dot { background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,0.11); }
    .chart-temp-dot { background: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,0.11); }
    .chart-humidity-dot { background: #0891b2; box-shadow: 0 0 0 4px rgba(8,145,178,0.11); }
    .chart-card canvas {
      width: 100%;
      height: 260px;
      display: block;
    }


    /* =========================
       24-hour Light History Chart
       Full-width strip below the current sensor charts
    ========================= */
    .light-history-strip {
      margin-top: 16px;
      padding: 16px;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      background:
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
      box-shadow: 0 10px 24px rgba(15,23,42,0.06);
      min-width: 0;
    }

    .light-history-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px;
      margin-bottom: 12px;
    }

    .light-history-title-wrap h4 {
      margin: 0;
      color: #0f172a;
      font-size: 17px;
      font-weight: 950;
    }

    .light-history-title-wrap p {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    .light-history-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }

    .light-history-status {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      padding: 7px 10px;
      border-radius: 999px;
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
      font-size: 11px;
      font-weight: 900;
      white-space: nowrap;
    }

    .light-history-status.loading { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
    .light-history-status.success { color: #166534; background: #f0fdf4; border-color: #bbf7d0; }
    .light-history-status.error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }

    .light-history-action-btn {
      min-height: 32px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      padding: 7px 10px;
      background: #ffffff;
      color: #334155;
      cursor: pointer;
      font-size: 11px;
      font-weight: 950;
    }

    .light-history-action-btn:hover { border-color: #2563eb; color: #1d4ed8; background: #eff6ff; }

    .light-history-legend {
      display: flex;
      align-items: center;
      gap: 7px;
      overflow-x: auto;
      padding: 4px 1px 10px;
      scrollbar-width: thin;
    }

    .light-history-legend-btn {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid #dbe3ef;
      border-radius: 999px;
      padding: 6px 9px;
      background: #ffffff;
      color: #0f172a;
      cursor: pointer;
      font-size: 11px;
      font-weight: 900;
      transition: opacity 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
    }

    .light-history-legend-btn:hover { transform: translateY(-1px); border-color: var(--sensor-color, #2563eb); }
    .light-history-legend-btn.hidden-series { opacity: 0.34; filter: grayscale(1); }

    .light-history-legend-dot {
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: var(--sensor-color, #2563eb);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--sensor-color, #2563eb) 18%, transparent);
    }

    .light-history-latest {
      color: #64748b;
      font-weight: 850;
    }

    .light-history-scroll {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid #eef2f7;
      border-radius: 16px;
      background: #ffffff;
      -webkit-overflow-scrolling: touch;
    }

    .light-history-canvas-wrap {
      position: relative;
      width: 100%;
      min-width: 980px;
      padding: 4px 4px 0;
    }

    .light-history-canvas-wrap canvas {
      width: 100%;
      height: 360px;
      display: block;
    }

    /* Blue accent for the 24-hour VPD history strip. */
    .vpd-history-strip {
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.96));
    }

    @media (max-width: 760px) {
      .light-history-head { flex-direction: column; }
      .light-history-actions { justify-content: flex-start; }
      .light-history-strip { padding: 12px; }
      .light-history-canvas-wrap { min-width: 900px; }
    }

    .sensor-card { padding: 17px; }
    .sensor-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 13px; }
    .sensor-title { margin: 0; font-size: 17px; color: #0f172a; }
    .sensor-values { display: grid; gap: 9px; }
    .sensor-item, .status-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      background: #f8fafc;
      border: 1px solid #eef2f7;
      border-radius: 13px;
      padding: 10px 12px;
    }
    .sensor-label, .status-label { color: var(--muted); font-size: 13px; }
    .sensor-value, .status-value { color: #0f172a; font-size: 15px; font-weight: 800; text-align: right; }

    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 900;
      white-space: nowrap;
    }
    .badge-online, .badge-on { color: #166534; background: #dcfce7; }
    .badge-offline, .badge-off { color: #991b1b; background: #fee2e2; }
    .badge-warning { color: #92400e; background: #fef3c7; }
    .badge-info { color: #1d4ed8; background: #dbeafe; }
    .badge-demo { color: #5b21b6; background: #ede9fe; }
    .badge-neutral { color: #334155; background: #e2e8f0; }

    .status-card, .control-card { padding: 18px; }
    .status-card h3, .control-card h3 { margin: 0 0 14px; color: #0f172a; font-size: 18px; }
    .status-row { margin-bottom: 10px; }

    /* =========================
       Shade Curtain Control UI
    ========================= */
    .curtain-shell {
      display: grid;
      grid-template-columns: minmax(320px, 1.1fr) minmax(320px, 0.9fr);
      gap: 18px;
      align-items: stretch;
    }

    .curtain-panel {
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff, #f8fafc);
      border: 1px solid #e2e8f0;
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
      min-width: 0;
    }

    .curtain-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 15px;
    }

    .curtain-panel-title {
      margin: 0;
      font-size: 20px;
      color: #0f172a;
      font-weight: 950;
    }

    .curtain-panel-desc {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 13px;
      line-height: 1.45;
    }

    .curtain-mode-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 6px;
      background: #eef2ff;
      border: 1px solid #dbeafe;
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .curtain-mode-tab {
      border: 0;
      cursor: pointer;
      border-radius: 12px;
      padding: 11px 12px;
      font-weight: 950;
      color: #334155;
      background: transparent;
      transition: 0.18s ease;
    }

    .curtain-mode-tab.active {
      background: linear-gradient(135deg, #2563eb, #06b6d4);
      color: white;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    }

    .curtain-command-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      margin-bottom: 16px;
    }

    .curtain-command-btn {
      border: 0;
      cursor: pointer;
      border-radius: 16px;
      min-height: 82px;
      padding: 12px;
      color: white;
      font-weight: 950;
      box-shadow: 0 14px 28px rgba(15, 23, 42, 0.14);
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .curtain-command-btn:hover { transform: translateY(-2px); opacity: 0.94; }
    .curtain-command-btn .cmd-icon { display: block; font-size: 28px; margin-bottom: 6px; }
    .curtain-command-btn .cmd-sub { display: block; font-size: 11px; opacity: 0.88; margin-top: 3px; }
    .cmd-open { background: linear-gradient(135deg, #16a34a, #22c55e); }
    .cmd-stop { background: linear-gradient(135deg, #d97706, #f59e0b); }
    .cmd-close { background: linear-gradient(135deg, #dc2626, #f97316); }

    .auto-rule-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(230px, 1fr));
      gap: 12px;
      margin-top: 12px;
    }

    .auto-rule-card {
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.92);
      padding: 14px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .auto-rule-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 11px;
      color: #0f172a;
      font-weight: 950;
    }

    .auto-rule-title input { width: 17px; height: 17px; }

    .rule-form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
    }

    .rule-field { min-width: 0; }
    .rule-field.full { grid-column: 1 / -1; }
    .rule-field label {
      display: block;
      margin-bottom: 5px;
      color: #64748b;
      font-size: 12px;
      font-weight: 850;
    }

    .rule-field input,
    .rule-field select {
      width: 100%;
      border: 1px solid #dbe3ef;
      border-radius: 12px;
      padding: 10px 11px;
      background: #ffffff;
      color: #0f172a;
      font-weight: 850;
      outline: none;
    }

    .rule-field input:focus,
    .rule-field select:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

    .curtain-action-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
      margin-top: 14px;
    }

    .btn-secondary {
      border: 0;
      border-radius: 13px;
      padding: 10px 13px;
      cursor: pointer;
      color: #0f172a;
      background: #e2e8f0;
      font-weight: 950;
    }

    .btn-success { background: #16a34a; color: #ffffff; }
    .btn-danger { background: #dc2626; color: #ffffff; }
    .btn-blue { background: #2563eb; color: #ffffff; }

    .curtain-feedback {
      margin-top: 13px;
      padding: 11px 13px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      color: #475569;
      font-size: 13px;
      line-height: 1.45;
    }


    .system-popup-backdrop {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: grid;
      place-items: center;
      padding: 18px;
      background: rgba(15, 23, 42, 0.42);
      backdrop-filter: blur(5px);
      animation: systemPopupFadeIn 0.16s ease-out;
    }

    .system-popup-card {
      width: min(480px, 100%);
      border: 1px solid #dbeafe;
      border-radius: 24px;
      padding: 22px;
      background: #ffffff;
      box-shadow: 0 28px 75px rgba(15, 23, 42, 0.28);
      color: #0f172a;
      animation: systemPopupLift 0.20s ease-out;
    }

    .system-popup-icon {
      width: 52px;
      height: 52px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      border-radius: 999px;
      background: #dcfce7;
      color: #166534;
      font-size: 28px;
      font-weight: 950;
    }

    .system-popup-card.error .system-popup-icon {
      background: #fee2e2;
      color: #991b1b;
    }

    .system-popup-title {
      margin: 0 0 8px;
      font-size: 21px;
      font-weight: 950;
    }

    .system-popup-message {
      color: #475569;
      font-size: 14px;
      line-height: 1.65;
      white-space: pre-line;
    }

    .system-popup-actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 18px;
    }

    .system-popup-button {
      border: 0;
      border-radius: 13px;
      padding: 10px 18px;
      background: #2563eb;
      color: #ffffff;
      font-weight: 950;
      cursor: pointer;
    }

    .curtain-config-saved-meta {
      margin-top: 10px;
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      line-height: 1.55;
    }

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

    @keyframes systemPopupLift {
      from { opacity: 0; transform: translateY(10px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .curtain-visual {
      position: relative;
      min-height: 235px;
      border-radius: 22px;
      overflow: hidden;
      background:
        linear-gradient(180deg, rgba(219, 234, 254, 0.85), rgba(255,255,255,0.96)),
        radial-gradient(circle at 50% 10%, rgba(251, 191, 36, 0.25), transparent 35%);
      border: 1px solid #dbeafe;
      margin-bottom: 15px;
    }

    .curtain-sun {
      position: absolute;
      right: 22px;
      top: 20px;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      background: #fbbf24;
      box-shadow: 0 0 42px rgba(251, 191, 36, 0.72);
    }

    .curtain-track {
      position: absolute;
      left: 22px;
      right: 22px;
      top: 42px;
      height: 10px;
      border-radius: 999px;
      background: #334155;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.18);
    }

    .curtain-fabric {
      position: absolute;
      left: 22px;
      top: 52px;
      height: 128px;
      width: var(--curtain-fabric-width, 72%);
      max-width: calc(100% - 44px);
      border-radius: 0 0 18px 18px;
      background:
        repeating-linear-gradient(90deg, rgba(30, 64, 175, 0.92) 0 18px, rgba(37, 99, 235, 0.82) 18px 34px);
      opacity: 0.92;
      transition: width 1.05s linear, opacity 0.35s ease;
      box-shadow: inset 0 -22px 34px rgba(15, 23, 42, 0.18), 0 16px 28px rgba(37, 99, 235, 0.18);
    }

    .curtain-visual[data-state="open"] { --curtain-fabric-width: 22%; }
    .curtain-visual[data-state="closed"] { --curtain-fabric-width: 100%; }
    .curtain-visual[data-state="stopped"] { --curtain-fabric-width: 58%; }
    .curtain-visual[data-state="waiting"] { --curtain-fabric-width: 72%; }
    .curtain-visual[data-state="open"] .curtain-fabric { opacity: 0.68; }
    .curtain-visual[data-state="closed"] .curtain-fabric { opacity: 0.94; }
    .curtain-visual[data-state="opening"] .curtain-fabric,
    .curtain-visual[data-state="closing"] .curtain-fabric { opacity: 0.90; }
    .curtain-visual[data-state="stopped"] .curtain-fabric { opacity: 0.86; }
    .curtain-visual[data-state="waiting"] .curtain-fabric { opacity: 0.55; }

    .curtain-ground {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 62px;
      background: linear-gradient(180deg, rgba(220,252,231,0.60), rgba(134,239,172,0.80));
      border-top: 1px solid rgba(22, 163, 74, 0.18);
    }

    .curtain-visual-label {
      position: absolute;
      left: 22px;
      bottom: 18px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 11px;
      border-radius: 999px;
      background: rgba(255,255,255,0.9);
      border: 1px solid rgba(226,232,240,0.90);
      color: #0f172a;
      font-size: 13px;
      font-weight: 950;
      backdrop-filter: blur(6px);
    }

    .curtain-summary-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 14px;
    }

    .curtain-mini-card {
      border: 1px solid #e2e8f0;
      background: #ffffff;
      border-radius: 18px;
      padding: 15px;
      box-shadow: 0 9px 20px rgba(15,23,42,0.06);
    }

    .curtain-mini-label {
      color: #64748b;
      font-size: 12px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    .curtain-mini-value {
      color: #020617;
      font-size: 26px;
      font-weight: 950;
      letter-spacing: -0.4px;
    }

    .curtain-mini-unit {
      margin-left: 4px;
      color: #64748b;
      font-size: 13px;
      font-weight: 850;
    }

    .curtain-status-board {
      display: grid;
      grid-template-columns: minmax(280px, 0.85fr) minmax(360px, 1.15fr);
      gap: 16px;
      align-items: stretch;
    }

    .curtain-status-board.single-chart {
      grid-template-columns: 1fr;
    }

    .curtain-chart-wrap {
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 14px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(15,23,42,0.06);
      min-width: 0;
    }

    .curtain-chart-wrap canvas {
      width: 100%;
      height: 280px;
      display: block;
    }

    .curtain-history-note {
      margin-top: 8px;
      color: #64748b;
      font-size: 12px;
    }


    .history-table-wrap {
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      padding: 14px;
      background: #ffffff;
      box-shadow: 0 10px 24px rgba(15,23,42,0.06);
      min-width: 0;
      overflow: hidden;
    }

    .history-table-scroll {
      width: 100%;
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid #eef2f7;
    }

    .history-table {
      width: 100%;
      border-collapse: collapse;
      min-width: 620px;
      font-size: 13px;
      background: #ffffff;
    }

    .history-table th,
    .history-table td {
      padding: 10px 11px;
      border-bottom: 1px solid #eef2f7;
      text-align: left;
      white-space: nowrap;
    }

    .history-table th {
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 950;
    }

    .history-table td {
      color: #0f172a;
      font-weight: 750;
    }

    .history-empty {
      padding: 16px;
      text-align: center;
      color: #64748b;
      background: #f8fafc;
      border-radius: 14px;
      border: 1px dashed #cbd5e1;
    }

    .history-pagination {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 12px;
      padding: 10px 2px 0;
    }

    .history-pagination-info {
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
      white-space: nowrap;
    }

    .history-pagination-buttons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px;
    }

    .history-page-btn {
      min-width: 36px;
      min-height: 36px;
      padding: 7px 11px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      color: #334155;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      cursor: pointer;
      transition: background .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
    }

    .history-page-btn:hover:not(:disabled) {
      border-color: #0ea5e9;
      color: #0369a1;
      background: #f0f9ff;
      transform: translateY(-1px);
    }

    .history-page-btn.active {
      border-color: #0284c7;
      color: #ffffff;
      background: #0284c7;
      cursor: default;
    }

    .history-page-btn:disabled {
      opacity: .42;
      cursor: not-allowed;
      transform: none;
    }

    .history-page-ellipsis {
      min-width: 20px;
      color: #64748b;
      text-align: center;
      font-weight: 900;
    }

    @media (max-width: 640px) {
      .history-pagination {
        align-items: stretch;
        flex-direction: column;
      }

      .history-pagination-info {
        text-align: center;
      }

      .history-pagination-buttons {
        justify-content: center;
      }

      .history-page-btn {
        min-width: 34px;
        min-height: 34px;
        padding: 7px 9px;
      }
    }

    .zone-history-panel {
      margin-top: 16px;
    }

    @media (max-width: 1200px) {
      .curtain-shell,
      .curtain-status-board { grid-template-columns: 1fr; }
      .curtain-summary-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    }

    @media (max-width: 700px) {
      .curtain-command-grid,
      .auto-rule-grid,
      .rule-form-grid,
      .curtain-summary-grid { grid-template-columns: 1fr; }
      .curtain-command-btn { min-height: 74px; }
    }




    /* =========================
       Zone Control UI: Outdoor Light + Fertilizer Dosing
    ========================= */
    .zone-shell {
      display: grid;
      grid-template-columns: minmax(360px, 1.1fr) minmax(360px, 0.9fr);
      gap: 18px;
      align-items: start;
    }

    .zone-panel {
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 30%),
        linear-gradient(180deg, #ffffff, #f8fafc);
      border: 1px solid #e2e8f0;
      border-radius: 22px;
      padding: 18px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
      min-width: 0;
    }

    .zone-panel-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 15px;
    }

    .zone-panel-title {
      margin: 0;
      font-size: 20px;
      color: #0f172a;
      font-weight: 950;
    }

    .zone-panel-desc {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 13px;
      line-height: 1.45;
    }

    .zone-mode-tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 6px;
      background: #eef2ff;
      border: 1px solid #dbeafe;
      border-radius: 16px;
      margin-bottom: 16px;
    }

    .zone-mode-tab {
      border: 0;
      cursor: pointer;
      border-radius: 12px;
      padding: 11px 12px;
      font-weight: 950;
      color: #334155;
      background: transparent;
      transition: 0.18s ease;
    }

    .zone-mode-tab.active {
      background: linear-gradient(135deg, #2563eb, #06b6d4);
      color: white;
      box-shadow: 0 10px 22px rgba(37, 99, 235, 0.22);
    }

    .curtain-mode-tab:disabled,
    .zone-mode-tab:disabled {
      cursor: not-allowed;
      opacity: 0.42;
      filter: grayscale(0.35);
    }

    .zone-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(260px, 1fr));
      gap: 12px;
    }

    .zone-card {
      border: 1px solid #e2e8f0;
      border-radius: 18px;
      background: rgba(255, 255, 255, 0.94);
      padding: 14px;
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
    }

    .zone-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .zone-title {
      font-weight: 950;
      color: #0f172a;
      font-size: 16px;
    }

    .zone-manual-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 10px 0;
    }

    .zone-btn {
      border: 0;
      cursor: pointer;
      border-radius: 13px;
      min-height: 48px;
      padding: 10px;
      color: white;
      font-weight: 950;
      box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
      transition: transform 0.18s ease, opacity 0.18s ease;
    }

    .zone-btn:hover { transform: translateY(-1px); opacity: 0.94; }
    .zone-btn-on { background: linear-gradient(135deg, #16a34a, #22c55e); }
    .zone-btn-off { background: linear-gradient(135deg, #dc2626, #f97316); }

    .zone-rule-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-top: 10px;
    }

    .zone-rule-field { min-width: 0; }
    .zone-rule-field.full { grid-column: 1 / -1; }
    .zone-rule-field label {
      display: block;
      margin-bottom: 5px;
      color: #64748b;
      font-size: 12px;
      font-weight: 850;
    }

    .zone-rule-field input,
    .zone-rule-field select {
      width: 100%;
      border: 1px solid #dbe3ef;
      border-radius: 12px;
      padding: 10px 11px;
      background: #ffffff;
      color: #0f172a;
      font-weight: 850;
      outline: none;
    }

    .zone-rule-text {
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px solid #e2e8f0;
      border-radius: 14px;
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      line-height: 1.45;
    }

    .light-dashboard-stack {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .light-animation-panel {
      padding: 22px;
      overflow: hidden;
    }

    .light-settings-panel .zone-card-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .light-animation-panel .zone-status-summary {
      margin-top: 14px;
    }

    .zone-scene {
      position: relative;
      min-height: 360px;
      border-radius: 24px;
      overflow: hidden;
      border: 1px solid #dbeafe;
      background: linear-gradient(180deg, #dbeafe 0%, #f8fafc 54%, #dcfce7 55%, #86efac 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45), 0 14px 28px rgba(15,23,42,0.08);
      margin-bottom: 14px;
    }

    .outdoor-scene {
      min-height: 600px;
      background:
        radial-gradient(circle at 85% 15%, rgba(251,191,36,0.25), transparent 18%),
        linear-gradient(180deg, #dceeff 0%, #eef7ff 26%, #f8fafc 50%, #dcfce7 51%, #86efac 100%);
      border: 1px solid #cfe7ff;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.58), 0 18px 36px rgba(15,23,42,0.09);
    }

    .outdoor-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(rgba(255,255,255,0.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.10) 1px, transparent 1px);
      background-size: 42px 42px;
      opacity: 0.45;
      pointer-events: none;
    }

    .outdoor-scene::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 170px;
      background: linear-gradient(180deg, rgba(187,247,208,0.12), rgba(110,231,183,0.28));
      pointer-events: none;
    }

    .outdoor-scene-sun {
      position: absolute;
      right: 28px;
      top: 22px;
      width: 86px;
      height: 86px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 30%, #fde68a, #fbbf24 60%, #f59e0b 100%);
      box-shadow: 0 0 70px rgba(251,191,36,0.65);
      z-index: 1;
    }

    .outdoor-scene-clouds {
      position: absolute;
      inset: 18px 130px auto 22px;
      height: 70px;
      z-index: 1;
      pointer-events: none;
    }

    .outdoor-scene-clouds::before,
    .outdoor-scene-clouds::after {
      content: "";
      position: absolute;
      height: 30px;
      border-radius: 999px;
      background: rgba(255,255,255,0.70);
      box-shadow: 36px 8px 0 8px rgba(255,255,255,0.62), 86px 3px 0 0 rgba(255,255,255,0.55);
      filter: blur(0.2px);
    }

    .outdoor-scene-clouds::before { left: 14px; top: 12px; width: 88px; }
    .outdoor-scene-clouds::after { right: 60px; top: 30px; width: 108px; }

    .plant-zone-grid {
      position: absolute;
      left: 22px;
      right: 22px;
      bottom: 28px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 16px;
      z-index: 2;
    }

    .plant-zone {
      position: relative;
      min-height: 152px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(236,253,245,0.95));
      border: 1px solid rgba(52,211,153,0.28);
      padding: 14px 12px 12px;
      overflow: hidden;
      box-shadow: 0 14px 24px rgba(15,23,42,0.08);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
    }

    .plant-zone:hover {
      transform: translateY(-2px);
      box-shadow: 0 18px 28px rgba(15,23,42,0.10);
    }

    .plant-zone.on {
      border-color: rgba(250,204,21,0.38);
      box-shadow: 0 0 0 3px rgba(250,204,21,0.12), 0 18px 30px rgba(250,204,21,0.14);
    }

    .zone-scene-index {
      position: absolute;
      left: 10px;
      top: 10px;
      z-index: 4;
      min-width: 40px;
      padding: 5px 10px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.94);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.78);
      box-shadow: 0 8px 18px rgba(15, 23, 42, 0.28);
      text-align: center;
      font-size: 15px;
      line-height: 1;
      font-weight: 950;
      letter-spacing: 0.25px;
    }

    .plant-zone.on .zone-scene-index {
      background: #facc15;
      color: #431407;
      border-color: rgba(120, 53, 15, 0.26);
      box-shadow: 0 0 26px rgba(250, 204, 21, 0.72), 0 8px 18px rgba(15, 23, 42, 0.20);
    }

    .pipe-zone .zone-scene-index {
      position: static;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
      background: rgba(15, 23, 42, 0.94);
      color: #ffffff;
    }

    .pipe-zone.on .zone-scene-index {
      background: #0ea5e9;
      color: #ffffff;
      box-shadow: 0 0 22px rgba(14, 165, 233, 0.70), 0 8px 18px rgba(15, 23, 42, 0.18);
    }

    .plant-zone-status {
      position: absolute;
      right: 12px;
      top: 12px;
      padding: 5px 10px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      font-size: 11px;
      font-weight: 900;
      box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18);
    }

    .plant-zone.on .plant-zone-status {
      background: #fef3c7;
      color: #92400e;
      box-shadow: 0 0 0 1px rgba(250,204,21,0.26);
    }

    .plant-light {
      width: 52px;
      height: 52px;
      margin: 24px auto 20px;
      display: grid;
      place-items: center;
      border-radius: 999px;
      background: #e2e8f0;
      color: #334155;
      font-size: 24px;
      box-shadow: 0 0 0 rgba(250,204,21,0);
      transition: 0.25s ease;
      position: relative;
      z-index: 2;
      flex: 0 0 auto;
    }

    .plant-zone.on .plant-light {
      background: radial-gradient(circle at 35% 35%, #fff7ae, #fde047 65%, #facc15 100%);
      color: #78350f;
      box-shadow: 0 0 36px rgba(250,204,21,0.88), 0 0 0 10px rgba(250,204,21,0.10);
      animation: lightPulse 1.6s ease-in-out infinite;
    }

    .plant-crop {
      width: 100%;
      margin-top: auto;
      margin-bottom: -4px;
      position: relative;
      z-index: 2;
      display: flex;
      justify-content: center;
      gap: 18px;
      align-items: flex-end;
      transform: translateY(8px);
    }

    .crop-root-plant {
      position: relative;
      width: 28px;
      height: 34px;
      display: inline-block;
    }

    .crop-root-plant .stem {
      position: absolute;
      left: 50%;
      top: 12px;
      width: 3px;
      height: 11px;
      background: linear-gradient(180deg, #16a34a, #166534);
      transform: translateX(-50%);
      border-radius: 999px;
      z-index: 2;
    }

    .crop-root-plant .leaf {
      position: absolute;
      top: 7px;
      width: 12px;
      height: 8px;
      background: linear-gradient(180deg, #a3e635, #65a30d);
      border: 1px solid #3f6212;
      box-sizing: border-box;
    }

    .crop-root-plant .leaf.left {
      left: 1px;
      border-radius: 90% 10% 90% 10%;
      transform: rotate(-24deg);
    }

    .crop-root-plant .leaf.right {
      right: 1px;
      border-radius: 10% 90% 10% 90%;
      transform: rotate(24deg);
    }

    .crop-root-plant .leaf.center {
      left: 50%;
      top: 2px;
      width: 11px;
      height: 10px;
      transform: translateX(-50%);
      border-radius: 50% 50% 40% 40%;
      background: linear-gradient(180deg, #84cc16, #4d7c0f);
    }

    .crop-root-plant .root {
      position: absolute;
      left: 50%;
      bottom: 4px;
      width: 2px;
      height: 8px;
      background: linear-gradient(180deg, #f8fafc, #d6d3d1);
      transform: translateX(-50%);
      border-radius: 999px;
      z-index: 2;
    }

    .crop-root-plant .root::before,
    .crop-root-plant .root::after {
      content: "";
      position: absolute;
      bottom: -2px;
      width: 2px;
      height: 7px;
      background: linear-gradient(180deg, #f8fafc, #d6d3d1);
      border-radius: 999px;
    }

    .crop-root-plant .root::before {
      left: -3px;
      transform: rotate(28deg);
    }

    .crop-root-plant .root::after {
      right: -3px;
      transform: rotate(-28deg);
    }

    .plant-bed {
      height: 36px;
      width: 100%;
      border-radius: 999px;
      background: linear-gradient(180deg, #9a3412, #6b210d 56%, #431407 100%);
      margin-top: 0;
      position: relative;
      box-shadow: inset 0 2px 3px rgba(255,255,255,0.16), 0 10px 18px rgba(67,20,7,0.22);
      flex: 0 0 auto;
    }

    .plant-bed::before {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      top: 5px;
      height: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
    }

    .zone-scene-label {
      position: absolute;
      left: 22px;
      top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(226,232,240,0.95);
      color: #0f172a;
      font-size: 13px;
      font-weight: 950;
      backdrop-filter: blur(6px);
      z-index: 3;
      box-shadow: 0 10px 24px rgba(15,23,42,0.08);
    }

    .outdoor-scene-note {
      position: absolute;
      left: 22px;
      top: 78px;
      max-width: 420px;
      padding: 10px 13px;
      border-radius: 16px;
      background: rgba(255,255,255,0.74);
      border: 1px solid rgba(219,234,254,0.95);
      color: #334155;
      font-size: 12px;
      line-height: 1.45;
      z-index: 3;
      box-shadow: 0 12px 24px rgba(15,23,42,0.06);
      backdrop-filter: blur(6px);
    }

    .fert-dashboard-stack {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .fert-animation-panel {
      padding: 22px;
      overflow: hidden;
    }

    .fert-settings-panel .zone-card-grid {
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .fert-animation-panel .zone-status-summary {
      margin-top: 14px;
    }

    .pipe-scene {
      --fert-main-x: 226px;
      --fert-grid-left: 286px;
      --fert-grid-top: 96px;
      --fert-grid-bottom: 46px;
      min-height: 720px;
      padding: 0;
      overflow: hidden;
      position: relative;
      background:
        radial-gradient(circle at 86% 12%, rgba(14,165,233,0.16), transparent 25%),
        linear-gradient(180deg, #dff4ff 0%, #f8fafc 45%, #ecfccb 46%, #bbf7d0 100%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.52), 0 16px 32px rgba(15,23,42,0.08);
    }

    .pipe-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(15, 23, 42, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: 0.45;
      pointer-events: none;
      z-index: 0;
    }

    .fert-machine {
      position: absolute;
      left: 34px;
      top: 50%;
      width: 150px;
      height: 150px;
      transform: translateY(-50%);
      border-radius: 28px;
      background:
        radial-gradient(circle at 28% 18%, rgba(148, 163, 184, 0.18), transparent 30%),
        linear-gradient(180deg, #1e293b, #0f172a);
      box-shadow: 0 20px 34px rgba(15,23,42,0.26), inset 0 0 0 1px rgba(255,255,255,0.08);
      color: white;
      display: grid;
      place-items: center;
      text-align: center;
      font-size: 18px;
      font-weight: 950;
      letter-spacing: 0.8px;
      line-height: 1.55;
      z-index: 5;
    }

    .fert-machine.on {
      box-shadow:
        0 0 0 4px rgba(14,165,233,0.16),
        0 0 34px rgba(14,165,233,0.32),
        0 20px 34px rgba(15,23,42,0.26),
        inset 0 0 0 1px rgba(255,255,255,0.08);
    }

    .fert-machine::after {
      content: "";
      position: absolute;
      right: -54px;
      top: 50%;
      width: 54px;
      height: 16px;
      transform: translateY(-50%);
      background: linear-gradient(180deg, #64748b 0%, #1e293b 62%, #020617 100%);
      border-radius: 999px;
      box-shadow: inset 0 2px 1px rgba(255,255,255,0.18), 0 8px 18px rgba(15,23,42,0.18);
    }

    .fert-main-pipe {
      position: absolute;
      left: var(--fert-main-x);
      top: var(--fert-grid-top);
      bottom: var(--fert-grid-bottom);
      width: 22px;
      border-radius: 999px;
      background: linear-gradient(90deg, #020617 0%, #334155 48%, #020617 100%);
      box-shadow: 0 12px 24px rgba(15,23,42,0.20), inset 0 1px 0 rgba(255,255,255,0.20);
      overflow: hidden;
      z-index: 2;
    }

    .fert-main-pipe::before,
    .fert-main-pipe::after {
      content: "";
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      width: 32px;
      height: 32px;
      border-radius: 10px;
      background: linear-gradient(180deg, #475569, #0f172a);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 8px 16px rgba(15,23,42,0.18);
      z-index: 3;
    }

    .fert-main-pipe::before { top: -8px; }
    .fert-main-pipe::after { bottom: -8px; }

    .fert-main-pipe.on {
      background:
        linear-gradient(90deg, #020617 0%, #334155 48%, #020617 100%),
        repeating-linear-gradient(180deg, rgba(14,165,233,0.98) 0 22px, rgba(186,230,253,0.98) 22px 44px);
      background-blend-mode: normal, screen;
      background-size: auto, 100% 44px;
      animation: mainPipeFlow 0.95s linear infinite;
      box-shadow: 0 0 24px rgba(14,165,233,0.34), 0 12px 24px rgba(15,23,42,0.20), inset 0 1px 0 rgba(255,255,255,0.20);
    }

    .pipe-branch-lines {
      position: absolute;
      left: calc(var(--fert-main-x) + 11px);
      right: 38px;
      top: var(--fert-grid-top);
      bottom: var(--fert-grid-bottom);
      display: grid;
      grid-template-rows: repeat(4, minmax(116px, 1fr));
      gap: 20px;
      z-index: 1;
      pointer-events: none;
    }

    .pipe-branch-lines span {
      align-self: center;
      height: 16px;
      border-radius: 999px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(180deg, #64748b 0%, #1e293b 62%, #020617 100%);
      box-shadow: inset 0 2px 1px rgba(255,255,255,0.18), 0 8px 18px rgba(15,23,42,0.14);
    }

    .pipe-branch-lines span::before {
      content: "";
      position: absolute;
      left: 10px;
      right: 10px;
      top: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(226,232,240,0.22);
    }

    .pipe-branch-lines span.on::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(14,165,233,0.14), rgba(125,211,252,0.90), rgba(14,165,233,0.14)),
        repeating-linear-gradient(90deg, rgba(14,165,233,0.98) 0 24px, rgba(186,230,253,0.98) 24px 44px);
      animation: pipeFlow 0.85s linear infinite;
      box-shadow: 0 0 18px rgba(14,165,233,0.80);
    }

    .pipe-zone-grid {
      position: absolute;
      left: var(--fert-grid-left);
      right: 28px;
      top: var(--fert-grid-top);
      bottom: var(--fert-grid-bottom);
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(4, minmax(116px, 1fr));
      gap: 20px 24px;
      z-index: 4;
    }

    .pipe-zone {
      position: relative;
      border-radius: 22px;
      border: 1px solid rgba(148, 163, 184, 0.28);
      background: rgba(255,255,255,0.94);
      padding: 16px 18px 14px;
      overflow: visible;
      box-shadow: 0 12px 24px rgba(15,23,42,0.07);
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-width: 0;
      isolation: isolate;
    }

    .pipe-zone.on {
      border-color: rgba(14,165,233,0.72);
      background:
        radial-gradient(circle at 92% 18%, rgba(14,165,233,0.14), transparent 26%),
        rgba(255,255,255,0.98);
      box-shadow: 0 0 0 3px rgba(14,165,233,0.12), 0 18px 30px rgba(14,165,233,0.14);
    }

    .pipe-zone::before {
      content: "";
      position: absolute;
      left: -18px;
      top: 50%;
      width: 18px;
      height: 16px;
      transform: translateY(-50%);
      border-radius: 999px 0 0 999px;
      background: linear-gradient(180deg, #64748b 0%, #1e293b 62%, #020617 100%);
      box-shadow: inset 0 2px 1px rgba(255,255,255,0.18), 0 8px 16px rgba(15,23,42,0.12);
      z-index: -1;
    }

    .pipe-zone-head {
      display: flex;
      align-items: center;
      gap: 11px;
      min-width: 0;
      margin-bottom: 11px;
    }

    .pipe-zone-duration {
      color: #334155;
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .pipe-line {
      height: 18px;
      border-radius: 999px;
      background: linear-gradient(180deg, #334155 0%, #0f172a 56%, #020617 100%);
      position: relative;
      overflow: hidden;
      box-shadow:
        inset 0 2px 2px rgba(255,255,255,0.18),
        inset 0 -3px 3px rgba(0,0,0,0.38),
        0 8px 14px rgba(15,23,42,0.12);
    }

    .pipe-line::before {
      content: "";
      position: absolute;
      left: 8px;
      right: 8px;
      top: 4px;
      height: 4px;
      border-radius: 999px;
      background: rgba(226, 232, 240, 0.24);
    }

    .pipe-zone.on .pipe-line::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(14,165,233,0.16), rgba(125,211,252,0.90), rgba(14,165,233,0.16)),
        repeating-linear-gradient(90deg, rgba(14,165,233,0.98) 0 24px, rgba(186,230,253,0.98) 24px 44px);
      animation: pipeFlow 0.85s linear infinite;
      box-shadow: 0 0 18px rgba(14,165,233,0.85);
    }

    .pipe-drop-row {
      margin-top: 11px;
      text-align: center;
      font-size: 20px;
      line-height: 1;
      opacity: 0.18;
      filter: grayscale(1);
    }

    .pipe-zone.on .pipe-drop-row {
      opacity: 1;
      filter: none;
      animation: dropPulse 1.05s ease-in-out infinite;
    }

    .pipe-zone-meta {
      margin-top: 3px;
      color: #64748b;
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .zone-status-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(160px, 1fr));
      gap: 10px;
    }

    .zone-summary-card {
      padding: 13px;
      border-radius: 16px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(15,23,42,0.05);
    }

    .zone-summary-label { color: #64748b; font-size: 12px; font-weight: 850; margin-bottom: 6px; }
    .zone-summary-value { color: #020617; font-size: 24px; font-weight: 950; }

    @keyframes lightPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.07); }
    }

    @keyframes pipeFlow {
      0% { transform: translateX(-40px); }
      100% { transform: translateX(40px); }
    }

    @keyframes mainPipeFlow {
      0% { background-position: 0 0, 0 -44px; }
      100% { background-position: 0 0, 0 44px; }
    }

    @keyframes dropPulse {
      0%, 100% { transform: translateY(0); opacity: 0.85; }
      50% { transform: translateY(4px); opacity: 1; }
    }

    @media (max-width: 1200px) {
      .zone-shell { grid-template-columns: 1fr; }
      .zone-card-grid { grid-template-columns: 1fr; }
      .plant-zone-grid { grid-template-columns: repeat(2, 1fr); }
      .outdoor-scene { min-height: 760px; }
      .fert-settings-panel .zone-card-grid { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
    }

    @media (max-width: 760px) {
      .plant-zone-grid { grid-template-columns: repeat(2, 1fr); }
      .fert-animation-panel { overflow-x: auto; padding: 14px; }
      .pipe-scene { min-width: 760px; min-height: 700px; }
      .fert-settings-panel .zone-card-grid { grid-template-columns: 1fr; }
      .zone-status-summary { grid-template-columns: 1fr; }

      /* Mobile: prevent floating text boxes from covering the lighting-zone cards. */
      .outdoor-scene .zone-scene-label,
      .outdoor-scene .outdoor-scene-note {
        display: none !important;
      }

      .light-animation-panel {
        padding: 14px;
      }

      .outdoor-scene {
        margin-top: 0;
      }
    }

    @media (max-width: 560px) {
      .pipe-scene { min-width: 760px; }
      .fert-machine { width: 140px; height: 140px; }
    }

    /* =========================
       EVAP image map overlay
    ========================= */
    .evap-map-panel {
      margin: 6px 0 20px;
      padding: 14px;
      background: #ffffff;
      border: 1px solid #e5e7eb;
      border-radius: 24px;
      box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
      overflow: hidden;
    }

    .evap-map {
      position: relative;
      width: 100%;
      max-width: 1360px;
      margin: 0 auto;
      border-radius: 18px;
      overflow: hidden;
      background: #ffffff;
    }

    .evap-map-img {
      width: 100%;
      display: block;
      border-radius: 18px;
    }

    /* Live sensor cards are positioned against the image canvas, not the
       page flow. This keeps them aligned when the map scales or scrolls. */
    .sf-map-overlay {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }

    .sf-map-overlay .evap-tag {
      position: absolute !important;
      pointer-events: auto;
    }

    /* Physical positions in the 3D greenhouse image. */
    .sf-map-overlay .evap-tag[data-sensor-no="1"] {
      left: 38% !important;
      top: 49% !important;
    }

    .sf-map-overlay .evap-tag[data-sensor-no="2"] {
      left: 76% !important;
      top: 25% !important;
    }

    .evap-map-leaders {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 1;
    }

    .evap-sensor-marker {
      position: absolute;
      width: 14px;
      height: 14px;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #f8fafc;
      border: 3px solid var(--marker-color, #22d3ee);
      box-shadow: 0 0 0 5px color-mix(in srgb, var(--marker-color, #22d3ee) 25%, transparent), 0 0 22px var(--marker-color, #22d3ee);
      z-index: 2;
    }

    .evap-sensor-marker.no-data {
      border-color: #ef4444;
      box-shadow: 0 0 0 5px rgba(239,68,68,.20), 0 0 18px rgba(239,68,68,.75);
    }

    .evap-map-fan-layer {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
    }

    .evap-map-fan {
      position: absolute;
      width: 8%;
      transform: translate(-50%, -50%);
      gap: 0;
      pointer-events: none;
    }

    .evap-map-fan .evap-fan-housing {
      width: 100%;
      border-width: 4px;
      box-shadow: inset 0 0 0 3px rgba(255,255,255,.55), 0 8px 18px rgba(15,23,42,.30);
    }

    .evap-map-fan .evap-fan-hub {
      border-width: 2px;
    }

    .evap-tag {
      position: absolute;
      min-width: 150px;
      padding: 10px 11px;
      border-radius: 13px;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(226,232,240,0.95);
      color: #0f172a;
      box-shadow: 0 10px 25px rgba(0,0,0,0.30);
      transform: translate(-50%, -50%);
      z-index: 2;
      backdrop-filter: blur(6px);
    }

    .evap-tag.no-data {
      opacity: 0.72;
    }

    .evap-tag-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 900;
    }

    .evap-tag-row {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      font-size: 12px;
      line-height: 1.45;
      white-space: nowrap;
    }

    .evap-tag-label {
      color: #64748b;
    }

    .evap-tag-value {
      color: #020617;
      font-weight: 900;
    }

    .evap-tag-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
    }

    .evap-tag.no-data .evap-tag-dot {
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239,68,68,0.15);
    }

    .compact-sensor-grid {
      margin-top: 18px;
    }

    /* =========================
       Greenhouse Net image map overlay
       24 sensors: S1-S24
    ========================= */
    .net-map-panel {
      background: #ffffff;
    }

    .net-map {
      max-width: 1360px;
    }

    .net-tag {
      position: absolute;
      min-width: 118px;
      padding: 6px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,0.94);
      border: 1px solid rgba(226,232,240,0.95);
      color: #0f172a;
      box-shadow: 0 8px 20px rgba(0,0,0,0.26);
      transform: translate(-50%, -50%);
      z-index: 2;
      backdrop-filter: blur(6px);
    }

    .net-tag.no-data {
      opacity: 0.68;
    }

    .net-tag-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 6px;
      margin-bottom: 4px;
      font-size: 12px;
      font-weight: 900;
    }

    .net-tag-row {
      display: grid;
      grid-template-columns: 68px 1fr;
      column-gap: 12px;
      align-items: center;
      font-size: 10px;
      line-height: 1.35;
      white-space: nowrap;
    }

    .net-tag-label {
      color: #64748b;
      font-weight: 700;
    }

    .net-tag-value {
      color: #020617;
      font-weight: 900;
    }

    .net-tag-dot {
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 3px rgba(34,197,94,0.14);
    }

    .net-tag.no-data .net-tag-dot {
      background: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,0.14);
    }

    @media (max-width: 1200px) {
      .evap-tag {
        min-width: 130px;
        padding: 8px 9px;
      }
      .evap-tag-row {
        font-size: 11px;
      }
    }

    @media (max-width: 760px) {

  /* กรอบแผนผังสามารถเลื่อนซ้าย–ขวาด้วยนิ้ว */
  .evap-map-panel,
  .net-map-panel,
  .nursery-map-panel {
    width: 100%;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  /* EVAP และ Nursery */
  .evap-map {
    width: 980px;
    min-width: 980px;
    max-width: none;
    margin: 0;
  }

  /* Greenhouse Net มี 24 จุด ต้องใช้พื้นที่กว้างกว่า */
  .net-map {
    width: 1360px;
    min-width: 1360px;
    max-width: none;
    margin: 0;
  }

  .evap-map-img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* บังคับให้กล่องข้อมูลแสดงบนมือถือ */
  .net-tag,
  .evap-tag {
    display: block !important;
    visibility: visible !important;
    opacity: 1;
  }

  .net-tag.no-data,
  .evap-tag.no-data {
    opacity: 0.68;
  }

  /* ขนาดกล่อง Greenhouse Net บนมือถือ */
  .net-tag {
    min-width: 140px;
    padding: 8px 9px;
    border-radius: 11px;
  }

  .net-tag-title {
    font-size: 14px;
  }

  .net-tag-row {
    font-size: 11px;
    line-height: 1.35;
  }
}

    .net-wrapper { display: grid; gap: 20px; }
    .greenhouse-block {
      border: 1px solid #dbeafe;
      border-radius: 22px;
      padding: 18px;
      background: linear-gradient(180deg, #ffffff, #f8fbff);
      box-shadow: 0 10px 24px rgba(30,64,175,0.08);
    }
    .greenhouse-header { margin-bottom: 14px; }
    .greenhouse-title { margin: 0; font-size: 20px; color: #0f172a; }
    .greenhouse-subtitle { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
    .row-block { margin-top: 14px; }
    .row-title { margin: 0 0 10px; color: #1e293b; font-weight: 900; }
    .row-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(220px, 1fr)); }

    .empty-state {
      padding: 18px;
      border: 1px dashed #cbd5e1;
      border-radius: 18px;
      background: #f8fafc;
      color: #64748b;
      text-align: center;
    }

    .btn {
      border: 0;
      border-radius: 12px;
      padding: 10px 12px;
      cursor: pointer;
      font-weight: 900;
      color: white;
      background: var(--primary);
    }
    .btn:hover { opacity: 0.92; }

    .lang-toggle {
      border: 1px solid #bfdbfe;
      background: #eff6ff;
      color: #1d4ed8;
      border-radius: 12px;
      padding: 8px 13px;
      font-weight: 900;
      cursor: pointer;
      min-width: 116px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      line-height: 1;
    }

    .lang-toggle:hover {
      background: #dbeafe;
    }

    .lang-toggle-flag {
      width: 28px;
      height: 18px;
      object-fit: cover;
      border-radius: 3px;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
      flex: 0 0 auto;
    }

    .lang-toggle-text {
      display: inline-block;
      min-width: 36px;
      text-align: left;
    }

    footer { padding: 22px; text-align: center; color: #64748b; font-size: 13px; }

    @media (max-width: 1150px) {
      .row-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
      .metric-chart-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 850px) {
      .wifi-widget { width: 100%; min-width: 0; }
      .wifi-detail { max-width: none; }
      .topbar-actions { width: 100%; justify-content: flex-start; }
      .sidebar { position: relative; width: 100%; height: auto; }
      .main { margin-left: 0; width: 100%; }
      .app { display: block; }
      .topbar { position: relative; flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 620px) {
      .content { padding: 16px; }
      .hero { padding: 22px; }
      .hero h2 { font-size: 23px; }
      .section { padding: 16px; }
      .row-grid { grid-template-columns: 1fr; }
    }

    /* Hide API status badges completely */
    #curtain-api-badge,
    #light-api-badge,
    #fert-api-badge {
      display: none !important;
    }
  

    /* Mobile lighting animation: keep Z1-Z8 inside the scene without clipping the first row. */
    @media (max-width: 760px) {
      .outdoor-scene {
        min-height: 0 !important;
        height: auto !important;
        overflow: hidden;
        padding: 28px 10px 24px;
      }

      .outdoor-scene .plant-zone-grid {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        width: 100%;
        margin: 0;
        padding: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(210px, auto);
        gap: 16px 12px;
        z-index: 2;
      }

      .outdoor-scene .plant-zone {
        min-height: 210px;
        width: 100%;
      }

      .outdoor-scene-sun,
      .outdoor-scene-clouds {
        display: none;
      }
    }



    /* iPad only: keep Z1-Z8 in the normal page flow so Z1/Z2 are not clipped. */
    @supports (-webkit-touch-callout: none) {
      @media (min-width: 761px) and (max-width: 1366px) {
        #outdoor-light-status-page .outdoor-scene {
          min-height: 0 !important;
          height: auto !important;
          overflow: hidden;
          padding: 28px 14px 24px;
        }

        #outdoor-light-status-page .outdoor-scene .plant-zone-grid {
          position: relative !important;
          left: auto !important;
          right: auto !important;
          top: auto !important;
          bottom: auto !important;
          width: 100%;
          margin: 0;
          padding: 0;
          grid-auto-rows: minmax(210px, auto);
          gap: 16px 14px;
          z-index: 2;
        }

        #outdoor-light-status-page .outdoor-scene .plant-zone {
          width: 100%;
          min-width: 0;
          min-height: 210px;
        }

        #outdoor-light-status-page .outdoor-scene-sun,
        #outdoor-light-status-page .outdoor-scene-clouds {
          display: none;
        }
      }
    }

    /* =========================
       Fertilizer 12-period schedule table
    ========================= */
    .fert-mode-content {
      margin-top: 14px;
    }

    .fert-manual-toolbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 14px;
      padding: 13px 14px;
      border: 1px solid #dbeafe;
      border-radius: 16px;
      background: linear-gradient(135deg, #eff6ff, #ffffff);
    }

    .fert-manual-toolbar-title {
      color: #0f172a;
      font-size: 14px;
      font-weight: 950;
    }

    .fert-manual-duration-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      color: #475569;
      font-size: 12px;
      font-weight: 900;
    }

    .fert-manual-duration {
      width: 92px;
      border: 1px solid #cbd5e1;
      border-radius: 11px;
      padding: 9px 10px;
      background: #ffffff;
      color: #0f172a;
      font-weight: 900;
      outline: none;
    }

    .fert-manual-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(180px, 1fr));
      gap: 12px;
    }

    .fert-manual-card {
      border: 1px solid #e2e8f0;
      border-radius: 17px;
      padding: 13px;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(15,23,42,0.05);
    }

    .fert-manual-card-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .fert-manual-card-title {
      color: #0f172a;
      font-size: 14px;
      font-weight: 950;
    }

    .fert-manual-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .fert-schedule-note {
      margin-bottom: 12px;
      padding: 11px 13px;
      border: 1px solid #bfdbfe;
      border-radius: 14px;
      background: #eff6ff;
      color: #334155;
      font-size: 12px;
      line-height: 1.5;
    }

    .fert-schedule-table-wrap {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border: 1px solid #dbe3ef;
      border-radius: 18px;
      background: #ffffff;
      box-shadow: 0 8px 18px rgba(15,23,42,0.05);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      touch-action: pan-x pan-y;
      scroll-behavior: auto;
      direction: ltr;
    }

    .fert-schedule-table {
      width: 100%;
      min-width: 760px;
      border-collapse: collapse;
      table-layout: fixed;
    }

    .fert-schedule-table th,
    .fert-schedule-table td {
      padding: 11px 12px;
      border-bottom: 1px solid #eef2f7;
      text-align: center;
      vertical-align: middle;
    }

    .fert-schedule-table th {
      background: #f8fafc;
      color: #475569;
      font-size: 12px;
      font-weight: 950;
    }

    .fert-schedule-table tbody tr:last-child td {
      border-bottom: 0;
    }

    .fert-schedule-table tbody tr:hover {
      background: #f8fbff;
    }

    .fert-schedule-period {
      display: inline-grid;
      place-items: center;
      min-width: 38px;
      height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      background: #dbeafe;
      color: #1d4ed8;
      font-size: 13px;
      font-weight: 950;
    }

    .fert-schedule-table select,
    .fert-schedule-table input {
      width: 100%;
      min-height: 40px;
      border: 1px solid #cbd5e1;
      border-radius: 11px;
      padding: 8px 10px;
      background: #ffffff;
      color: #0f172a;
      font-weight: 850;
      outline: none;
    }

    .fert-schedule-table select:focus,
    .fert-schedule-table input:focus,
    .fert-manual-duration:focus {
      border-color: #2563eb;
      box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    }

    .fert-schedule-row-disabled {
      opacity: 0.58;
      background: #f8fafc;
    }

    @media (max-width: 1180px) {
      .fert-manual-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
    }

    @media (max-width: 620px) {
      .fert-manual-grid { grid-template-columns: 1fr; }
      .fert-manual-toolbar { align-items: flex-start; }
      .fert-manual-duration-wrap { width: 100%; justify-content: space-between; }

      /* Mobile fertilizer table: allow stable horizontal finger scrolling. */
      .fert-settings-panel {
        overflow: hidden;
        padding-left: 12px;
        padding-right: 12px;
      }

      .fert-schedule-table-wrap {
        width: 100%;
        max-width: calc(100vw - 56px);
        margin-inline: auto;
        scrollbar-width: thin;
      }

      .fert-schedule-table {
        width: 760px;
        min-width: 760px;
      }
    }

    /* Fertilizer pump elapsed/remaining timer */
    .fert-run-timer {
      margin-top: 10px;
      padding: 9px 10px;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      background: #f8fafc;
      color: #64748b;
      opacity: 0.72;
    }

    .fert-run-timer.running {
      border-color: #7dd3fc;
      background: linear-gradient(135deg, #eff6ff, #ecfeff);
      color: #075985;
      opacity: 1;
      box-shadow: 0 6px 16px rgba(14,165,233,0.10);
    }

    .fert-run-timer-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      font-weight: 850;
      white-space: nowrap;
    }

    .fert-run-timer-row strong {
      color: #0f172a;
      font-size: 13px;
      font-variant-numeric: tabular-nums;
    }

    .fert-run-progress-track {
      height: 8px;
      margin-top: 8px;
      overflow: hidden;
      border-radius: 999px;
      background: #dbeafe;
      box-shadow: inset 0 1px 2px rgba(15,23,42,0.10);
    }

    .fert-run-progress-track > span {
      display: block;
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #0ea5e9, #22c55e);
      transition: width 0.35s linear;
    }

    html[data-theme="dark"] .fert-run-timer {
      border-color: rgba(71,85,105,0.78);
      background: rgba(15,23,42,0.72);
      color: #94a3b8;
    }

    html[data-theme="dark"] .fert-run-timer.running {
      border-color: rgba(56,189,248,0.58);
      background: linear-gradient(135deg, rgba(7,89,133,0.34), rgba(6,78,59,0.34));
      color: #bae6fd;
    }

    html[data-theme="dark"] .fert-run-timer-row strong {
      color: #f8fafc;
    }

    html[data-theme="dark"] .fert-run-progress-track {
      background: rgba(30,41,59,0.92);
    }

    /* =========================
       Data Export / Excel UI
    ========================= */
    .export-layout {
      display: grid;
      grid-template-columns: minmax(320px, 0.85fr) minmax(360px, 1.15fr);
      gap: 18px;
      align-items: start;
    }
    .export-card {
      background: linear-gradient(180deg, #ffffff, #f8fafc);
      border: 1px solid #e2e8f0;
      border-radius: 22px;
      padding: 20px;
      box-shadow: 0 12px 28px rgba(15,23,42,0.08);
      min-width: 0;
    }
    .export-card h3 { margin: 0 0 6px; color: #0f172a; font-size: 20px; }
    .export-card p { margin: 0 0 18px; color: #64748b; font-size: 13px; line-height: 1.55; }
    .export-field { margin-bottom: 14px; }
    .export-field label { display: block; margin-bottom: 6px; color: #334155; font-size: 13px; font-weight: 900; }
    .export-field input[type="date"] {
      width: 100%; border: 1px solid #cbd5e1; border-radius: 13px; padding: 11px 12px;
      background: #fff; color: #0f172a; font: inherit; font-weight: 800; outline: none;
    }
    .export-field input[type="date"]:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.12); }
    .export-check { display: flex; align-items: flex-start; gap: 9px; color: #475569; font-size: 13px; line-height: 1.4; }
    .export-check input { width: 17px; height: 17px; margin-top: 1px; }
    .export-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
    .export-btn {
      border: 0; border-radius: 13px; padding: 11px 15px; cursor: pointer; font-weight: 950;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    }
    .export-btn-primary { color: #fff; background: linear-gradient(135deg,#2563eb,#06b6d4); box-shadow: 0 10px 22px rgba(37,99,235,0.20); }
    .export-btn-secondary { color: #0f172a; background: #e2e8f0; }
    .export-btn:disabled { opacity: .55; cursor: not-allowed; }
    .export-status {
      margin-top: 16px; border-radius: 16px; padding: 13px 14px; border: 1px solid #e2e8f0;
      background: #f8fafc; color: #475569; font-size: 13px; line-height: 1.55; word-break: break-word;
    }
    .export-status.success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
    .export-status.error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
    .export-sheet-list { display: grid; gap: 9px; }
    .export-sheet-item {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      padding: 11px 12px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff;
    }
    .export-sheet-name { color: #0f172a; font-weight: 900; font-size: 13px; }
    .export-sheet-badge { padding: 5px 9px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 11px; font-weight: 900; }
    .export-file-link { display: inline-flex; margin-top: 10px; color: #1d4ed8; font-weight: 900; text-decoration: none; }
    @media (max-width: 900px) { .export-layout { grid-template-columns: 1fr; } }
    @media (max-width: 620px) { .export-card { padding: 16px; } .export-actions { display: grid; grid-template-columns: 1fr; } .export-btn { width: 100%; } }


    /* Continuous Excel recording */
    .recording-grid {
      display: grid;
      grid-template-columns: minmax(330px, .85fr) minmax(520px, 1.15fr);
      gap: 18px;
    }
    .recording-card {
      border: 1px solid #dbe3ef;
      border-radius: 22px;
      background: #fff;
      padding: 20px;
      box-shadow: 0 12px 28px rgba(15,23,42,.07);
      min-width: 0;
    }
    .recording-card h3 { margin: 0 0 6px; font-size: 20px; color: #0f172a; }
    .recording-card p { margin: 0 0 16px; color: #64748b; line-height: 1.5; font-size: 13px; }
    .recording-indicator {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 15px;
      border: 1px solid #e2e8f0;
      border-radius: 17px;
      background: #f8fafc;
      margin-bottom: 14px;
    }
    .recording-dot {
      width: 14px; height: 14px; border-radius: 50%;
      background: #94a3b8;
      box-shadow: 0 0 0 6px rgba(148,163,184,.12);
      flex: 0 0 auto;
    }
    .recording-indicator.active .recording-dot {
      background: #ef4444;
      box-shadow: 0 0 0 6px rgba(239,68,68,.13);
      animation: recordingPulse 1.2s infinite;
    }
    @keyframes recordingPulse { 50% { opacity: .45; transform: scale(.82); } }
    .recording-state-title { font-weight: 950; color: #0f172a; }
    .recording-state-sub { margin-top: 3px; color: #64748b; font-size: 12px; word-break: break-word; }
    .recording-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .recording-btn {
      border: 0; border-radius: 15px; padding: 13px 15px; cursor: pointer;
      font-weight: 950; min-height: 54px; transition: .18s ease;
    }
    .recording-btn:disabled { opacity: .5; cursor: not-allowed; }
    .recording-start { color: #fff; background: linear-gradient(135deg,#16a34a,#22c55e); }
    .recording-stop {
      position: relative; overflow: hidden; color: #fff;
      background: linear-gradient(135deg,#dc2626,#f97316);
      user-select: none; -webkit-user-select: none; touch-action: none;
    }
    .recording-stop-progress {
      position: absolute; inset: 0 auto 0 0; width: 0%;
      background: rgba(255,255,255,.24); pointer-events: none;
    }
    .recording-stop-text { position: relative; z-index: 1; }
    .recording-meta {
      margin-top: 14px; padding: 13px; border-radius: 15px;
      border: 1px solid #e2e8f0; background: #f8fafc;
      color: #475569; font-size: 13px; line-height: 1.65;
    }
    .recording-storage {
      margin-top: 14px; padding: 14px; border-radius: 17px;
      border: 1px solid #dbeafe; background: linear-gradient(145deg,#f8fbff,#eff6ff);
    }
    .recording-storage.warning { border-color: #fbbf24; background: linear-gradient(145deg,#fffbeb,#fef3c7); }
    .recording-storage.critical { border-color: #f87171; background: linear-gradient(145deg,#fef2f2,#fee2e2); }
    .recording-storage.unavailable { border-color: #cbd5e1; background: #f8fafc; }
    .recording-storage-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .recording-storage-title { color: #0f172a; font-size: 14px; font-weight: 950; }
    .recording-storage-badge {
      flex: 0 0 auto; padding: 5px 9px; border-radius: 999px;
      color: #166534; background: #dcfce7; font-size: 11px; font-weight: 950;
    }
    .recording-storage.warning .recording-storage-badge { color: #92400e; background: #fde68a; }
    .recording-storage.critical .recording-storage-badge { color: #991b1b; background: #fecaca; }
    .recording-storage.unavailable .recording-storage-badge { color: #475569; background: #e2e8f0; }
    .recording-storage-track {
      height: 12px; margin-top: 11px; overflow: hidden; border-radius: 999px;
      background: rgba(148,163,184,.28); box-shadow: inset 0 1px 2px rgba(15,23,42,.08);
    }
    .recording-storage-fill {
      width: 0%; height: 100%; border-radius: inherit;
      background: linear-gradient(90deg,#22c55e,#16a34a); transition: width .28s ease;
    }
    .recording-storage.warning .recording-storage-fill { background: linear-gradient(90deg,#fbbf24,#f59e0b); }
    .recording-storage.critical .recording-storage-fill { background: linear-gradient(90deg,#fb7185,#dc2626); }
    .recording-storage-stats {
      display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 12px;
      margin-top: 10px; color: #475569; font-size: 12px; line-height: 1.45;
    }
    .recording-storage-stats strong { color: #0f172a; }
    .recording-storage-message { margin-top: 9px; color: #475569; font-size: 12px; line-height: 1.55; }
    .recording-storage-cleanup {
      display: none; width: 100%; margin-top: 10px; border: 0; border-radius: 12px;
      padding: 10px 12px; color: #fff; background: #dc2626; font: inherit; font-weight: 950; cursor: pointer;
    }
    .recording-storage.warning .recording-storage-cleanup,
    .recording-storage.critical .recording-storage-cleanup { display: block; }
    .recording-storage-cleanup:disabled { opacity: .55; cursor: wait; }

    .recording-storage-popup-card { width: min(620px,100%); }
    .recording-storage-popup-card.warning .system-popup-icon { background: #fef3c7; color: #92400e; }
    .recording-storage-popup-card.critical .system-popup-icon { background: #fee2e2; color: #991b1b; }
    .recording-storage-popup-details {
      margin-top: 12px; padding: 12px; border-radius: 14px;
      background: #f8fafc; border: 1px solid #e2e8f0; color: #475569;
      font-size: 13px; line-height: 1.6;
    }
    .recording-storage-popup-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
    .recording-storage-popup-actions button,
    .recording-storage-popup-actions a {
      min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: 12px; padding: 9px 13px; text-decoration: none;
      font: inherit; font-weight: 950; cursor: pointer;
    }
    .storage-popup-download { color: #1d4ed8; background: #dbeafe; }
    .storage-popup-stop { color: #92400e; background: #fef3c7; }
    .storage-popup-delete { color: #fff; background: #dc2626; }
    .storage-popup-close { color: #0f172a; background: #e2e8f0; }
    .recording-table-wrap { overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 16px; }
    .recording-table { width: 100%; border-collapse: collapse; min-width: 690px; }
    .recording-table th, .recording-table td {
      padding: 11px 12px; border-bottom: 1px solid #eef2f7;
      text-align: left; font-size: 13px; white-space: nowrap;
    }
    .recording-table th { background: #f8fafc; color: #475569; font-weight: 950; }
    .recording-file-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .recording-download,
    .recording-delete {
      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
      min-height: 34px; padding: 8px 11px; border-radius: 11px;
      font: inherit; font-weight: 900; cursor: pointer;
    }
    .recording-download {
      text-decoration: none;
      background: #dbeafe; color: #1d4ed8;
    }
    .recording-delete {
      border: 1px solid #fecaca;
      background: #fee2e2; color: #b91c1c;
    }
    .recording-delete:hover { background: #fecaca; }
    .recording-delete:disabled { opacity: .45; cursor: not-allowed; }
    @media (max-width: 1000px) { .recording-grid { grid-template-columns: 1fr; } }
    @media (max-width: 620px) {
      .recording-card { padding: 16px; }
      .recording-actions { grid-template-columns: 1fr; }
      .recording-storage-stats { grid-template-columns: 1fr; }
      .recording-storage-popup-actions > * { width: 100%; }
    }


    /* =========================
       Page-specific Internet / Board Status cards
       API speed is global; board cards change by current page
    ========================= */
    .topbar-system-status {
      display: flex;
      align-items: stretch;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .quick-status-card {
      min-width: 155px;
      min-height: 70px;
      border: 1px solid #dbe3ef;
      border-radius: 13px;
      background: #ffffff;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
      padding: 9px 11px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      line-height: 1.25;
    }

    .quick-status-title {
      color: #64748b;
      font-size: 10px;
      font-weight: 950;
      letter-spacing: 0.1px;
      margin-bottom: 4px;
      white-space: nowrap;
    }

    .quick-status-main {
      display: flex;
      align-items: center;
      gap: 7px;
      color: #0f172a;
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
    }

    .quick-status-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      flex: 0 0 auto;
      background: #94a3b8;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
    }

    .quick-status-sub {
      margin-top: 6px;
      color: #64748b;
      font-size: 10px;
      font-weight: 800;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 210px;
    }

    .quick-status-card.good .quick-status-dot {
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15);
    }

    .quick-status-card.warn .quick-status-dot {
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
    }

    .quick-status-card.bad .quick-status-dot {
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
    }

    .quick-status-card.checking .quick-status-dot {
      background: #94a3b8;
      box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
    }

    @media (max-width: 1250px) {
      .quick-status-card { min-width: 140px; }
      .quick-status-main { font-size: 13px; }
      .quick-status-sub { max-width: 180px; }
    }

    @media (max-width: 850px) {
      .topbar-system-status { width: 100%; justify-content: flex-start; }
      .quick-status-card { flex: 1 1 150px; min-width: 0; }
    }

    @media (max-width: 620px) {
      .topbar-system-status { display: grid; grid-template-columns: 1fr; width: 100%; }
      .quick-status-card { width: 100%; }
      .quick-status-sub { max-width: none; }
    }



    /* =========================
       Collapsible sidebar
       Desktop: compact icon rail
       Mobile: off-canvas drawer
    ========================= */
    :root {
      --sidebar-expanded-width: 292px;
      --sidebar-collapsed-width: 84px;
    }

    .sidebar {
      width: var(--sidebar-expanded-width);
      transition: width 0.26s ease, transform 0.26s ease, box-shadow 0.26s ease;
      overflow-x: hidden;
    }

    .main {
      margin-left: var(--sidebar-expanded-width);
      width: calc(100% - var(--sidebar-expanded-width));
      transition: margin-left 0.26s ease, width 0.26s ease;
    }

    .topbar-heading {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .topbar-title-wrap {
      min-width: 0;
    }

    .sidebar-toggle {
      width: 44px;
      height: 44px;
      flex: 0 0 44px;
      border: 1px solid #dbe3ef;
      border-radius: 14px;
      display: grid;
      place-items: center;
      background: #ffffff;
      color: #0f172a;
      box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
      cursor: pointer;
      font-size: 30px;
      font-weight: 900;
      line-height: 1;
      transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .sidebar-toggle:hover {
      transform: translateY(-1px);
      color: #1d4ed8;
      border-color: #93c5fd;
      background: #eff6ff;
    }

    .sidebar-toggle:focus-visible {
      outline: 3px solid rgba(37, 99, 235, 0.22);
      outline-offset: 2px;
    }

    .sidebar-overlay {
      display: none;
    }

    body.sidebar-collapsed .sidebar {
      width: var(--sidebar-collapsed-width);
    }

    body.sidebar-collapsed .main {
      margin-left: var(--sidebar-collapsed-width);
      width: calc(100% - var(--sidebar-collapsed-width));
    }

    body.sidebar-collapsed .brand {
      padding: 18px 8px 14px;
    }

    body.sidebar-collapsed .logo-box {
      width: 52px;
      height: 52px;
      margin-bottom: 0;
      padding: 5px;
      border-radius: 16px;
    }

    body.sidebar-collapsed .brand-title,
    body.sidebar-collapsed .brand-subtitle,
    body.sidebar-collapsed .brand-chip,
    body.sidebar-collapsed .nav-title,
    body.sidebar-collapsed .nav-button > span:not(.nav-icon) {
      display: none !important;
    }

    body.sidebar-collapsed .nav {
      padding: 14px 10px 24px;
    }

    body.sidebar-collapsed .nav-button {
      justify-content: center;
      padding: 12px 8px;
      gap: 0;
    }

    body.sidebar-collapsed .nav-button:hover {
      transform: none;
    }

    body.sidebar-collapsed .nav-icon {
      width: 30px;
      height: 30px;
      flex: 0 0 30px;
      font-size: 17px;
    }

    body.sidebar-collapsed .nav-icon.nav-icon-greenhouse {
      width: 42px;
      height: 42px;
      flex: 0 0 42px;
      border-radius: 13px;
    }

    body.sidebar-collapsed .nav-icon.nav-icon-greenhouse svg {
      width: 35px;
      height: 35px;
    }

    @media (max-width: 850px) {
      body {
        overflow-x: hidden;
      }

      .app {
        display: block;
      }

      .sidebar,
      body.sidebar-collapsed .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(292px, 86vw);
        height: 100vh;
        transform: translateX(-105%);
        z-index: 1002;
        box-shadow: 14px 0 34px rgba(15, 23, 42, 0.30);
      }

      body.sidebar-mobile-open .sidebar {
        transform: translateX(0);
      }

      .main,
      body.sidebar-collapsed .main {
        margin-left: 0;
        width: 100%;
      }

      /* Restore full sidebar contents in the mobile drawer. */
      body.sidebar-collapsed .brand {
        padding: 24px 18px 20px;
      }

      body.sidebar-collapsed .logo-box {
        width: 112px;
        height: 112px;
        margin: 0 auto 14px;
        padding: 9px;
        border-radius: 24px;
      }

      body.sidebar-collapsed .brand-title,
      body.sidebar-collapsed .brand-subtitle,
      body.sidebar-collapsed .brand-chip,
      body.sidebar-collapsed .nav-title,
      body.sidebar-collapsed .nav-button > span:not(.nav-icon) {
        display: initial !important;
      }

      body.sidebar-collapsed .brand-chip {
        display: inline-flex !important;
      }

      body.sidebar-collapsed .nav {
        padding: 16px 14px 24px;
      }

      body.sidebar-collapsed .nav-button {
        justify-content: flex-start;
        padding: 12px;
        gap: 10px;
      }

      body.sidebar-collapsed .nav-icon {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
        font-size: inherit;
      }

      body.sidebar-collapsed .nav-icon.nav-icon-greenhouse {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 12px;
      }

      body.sidebar-collapsed .nav-icon.nav-icon-greenhouse svg {
        width: 32px;
        height: 32px;
      }

      .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(2, 6, 23, 0.55);
        backdrop-filter: blur(2px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s ease;
      }

      body.sidebar-mobile-open .sidebar-overlay {
        opacity: 1;
        pointer-events: auto;
      }

      body.sidebar-mobile-open {
        overflow: hidden;
      }

      .topbar {
        position: sticky;
        top: 0;
        flex-direction: column;
        align-items: flex-start;
      }

      .topbar-heading {
        width: 100%;
      }

      .topbar-title-wrap {
        flex: 1;
      }
    }

    @media (max-width: 620px) {
      .topbar {
        padding: 14px 16px;
      }

      .topbar-heading {
        gap: 10px;
      }

      .sidebar-toggle {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
        border-radius: 12px;
        font-size: 25px;
      }

      .topbar h1 {
        font-size: 22px;
      }

      .topbar p {
        font-size: 12px;
      }
    }



    /* =========================================================
       Responsive layout tuning: Desktop / Notebook / iPad / Phone
       Prevents the 24 Greenhouse Net sensor cards from overlapping.
    ========================================================= */

    /* Make every visual map independently scrollable when its natural
       design width is wider than the available content area. */
    .evap-map-panel,
    .net-map-panel,
    .nursery-map-panel {
      max-width: 100%;
      min-width: 0;
      overscroll-behavior-x: contain;
    }

    /* Notebook: preserve approximately 90% of the original 1360 px map.
       The map scrolls inside its own card instead of compressing the
       absolute-positioned sensor labels until they overlap. */
    @media (min-width: 1201px) and (max-width: 1500px) {
      .content {
        padding: 21px 24px 30px;
      }

      .topbar {
        padding: 17px 23px;
      }

      .topbar h1 {
        font-size: 25px;
      }

      .net-map-panel {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
      }

      .net-map {
        width: 1224px;
        min-width: 1224px;
        max-width: none;
        margin: 0;
      }

      .net-tag {
        min-width: 108px;
        padding: 5px 6px;
      }

      .net-tag-title {
        font-size: 11px;
      }

      .net-tag-row {
        grid-template-columns: 61px 1fr;
        column-gap: 9px;
        font-size: 9px;
      }
    }

    /* iPad landscape and compact tablets/notebooks.
       Keep the Greenhouse Net drawing at its native design width and
       allow horizontal panning. This is the key overlap fix. */
    @media (min-width: 851px) and (max-width: 1200px) {
      .content {
        padding: 18px 18px 28px;
      }

      .section {
        padding: 18px;
      }

      .topbar {
        position: relative;
        padding: 16px 18px;
        flex-direction: column;
        align-items: stretch;
      }

      .topbar-heading {
        width: 100%;
      }

      .topbar-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .topbar-system-status {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .quick-status-card {
        width: 100%;
        min-width: 0;
      }

      .metric-chart-grid {
        grid-template-columns: 1fr;
      }

      .net-map-panel,
      .evap-map-panel,
      .nursery-map-panel {
        width: 100%;
        padding: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        scroll-behavior: auto;
      }

      .net-map {
        width: 1360px;
        min-width: 1360px;
        max-width: none;
        margin: 0;
      }

      .evap-map:not(.net-map) {
        width: 980px;
        min-width: 980px;
        max-width: none;
        margin: 0;
      }

      .net-tag {
        display: block !important;
        visibility: visible !important;
        min-width: 118px;
        padding: 6px 7px;
      }

      .net-tag.no-data {
        opacity: 0.68;
      }

      .row-grid {
        grid-template-columns: repeat(2, minmax(190px, 1fr));
      }
    }

    /* iPad portrait and large phones: same non-overlapping map, with a
       simpler stacked header and two-column content where practical. */
    @media (min-width: 621px) and (max-width: 850px) {
      .content {
        padding: 16px;
      }

      .topbar {
        padding: 16px;
      }

      .topbar h1 {
        font-size: 26px;
      }

      .topbar-system-status {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
      }

      .quick-status-card:last-child {
        grid-column: 1 / -1;
      }

      .net-map-panel,
      .evap-map-panel,
      .nursery-map-panel {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
      }

      .net-map {
        width: 1360px;
        min-width: 1360px;
        max-width: none;
        margin: 0;
      }

      .evap-map:not(.net-map) {
        width: 980px;
        min-width: 980px;
        max-width: none;
        margin: 0;
      }

      .sensor-grid,
      .status-grid,
      .control-grid,
      .summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .row-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    /* Phone: fully stacked cards and independently scrollable wide tables/maps. */
    @media (max-width: 620px) {
      .topbar-heading {
        align-items: flex-start;
      }

      .sidebar-toggle {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
      }

      .topbar h1 {
        font-size: 25px;
        line-height: 1.2;
      }

      .topbar p {
        font-size: 13px;
        line-height: 1.45;
      }

      .summary-grid,
      .sensor-grid,
      .status-grid,
      .control-grid,
      .row-grid,
      .metric-chart-grid {
        grid-template-columns: 1fr !important;
      }

      .net-map-panel,
      .evap-map-panel,
      .nursery-map-panel,
      .fert-schedule-table-wrap,
      .history-table-scroll,
      .recording-table-wrap {
        max-width: 100%;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
      }

      .net-map {
        width: 1360px;
        min-width: 1360px;
        max-width: none;
        margin: 0;
      }

      .evap-map:not(.net-map) {
        width: 980px;
        min-width: 980px;
        max-width: none;
        margin: 0;
      }

      .fert-schedule-table {
        min-width: 760px;
      }
    }


    /* =========================================================
       Normalize all sidebar menu icon sizes
       Same compact size for every menu on desktop, collapsed mode,
       iPad and mobile drawer.
    ========================================================= */
    .nav-icon,
    .nav-icon.nav-icon-greenhouse,
    body.sidebar-collapsed .nav-icon,
    body.sidebar-collapsed .nav-icon.nav-icon-greenhouse {
      width: 30px !important;
      height: 30px !important;
      flex: 0 0 30px !important;
      min-width: 30px;
      min-height: 30px;
      padding: 0 !important;
      border-radius: 10px;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(239,246,255,0.96)) !important;
      border: 1px solid rgba(191,219,254,0.85) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.98),
        0 4px 12px rgba(15,23,42,0.12) !important;
    }

    .nav-button:hover .nav-icon,
    .nav-button:hover .nav-icon.nav-icon-greenhouse,
    .nav-button.active .nav-icon,
    .nav-button.active .nav-icon.nav-icon-greenhouse,
    body.sidebar-collapsed .nav-button:hover .nav-icon,
    body.sidebar-collapsed .nav-button:hover .nav-icon.nav-icon-greenhouse,
    body.sidebar-collapsed .nav-button.active .nav-icon,
    body.sidebar-collapsed .nav-button.active .nav-icon.nav-icon-greenhouse {
      background: linear-gradient(145deg, #ffffff, #eff6ff) !important;
      border-color: rgba(219,234,254,0.95) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 6px 14px rgba(37,99,235,0.16) !important;
      transform: none !important;
    }

    .nav-icon svg,
    .nav-icon.nav-icon-greenhouse svg,
    body.sidebar-collapsed .nav-icon svg,
    body.sidebar-collapsed .nav-icon.nav-icon-greenhouse svg {
      width: 24px !important;
      height: 24px !important;
      max-width: 24px;
      max-height: 24px;
      display: block;
      margin: 0;
    }

    .nav-button {
      min-height: 46px;
    }

    /* =========================================================
       Canvas chart zoom controls
       Buttons work on desktop, iPad and mobile. Ctrl/⌘ + mouse
       wheel and two-finger pinch are also supported.
    ========================================================= */
    .chart-canvas-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      border-radius: 14px;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
    }

    .zoomable-chart-canvas {
      min-width: 100%;
      max-width: none !important;
      transform-origin: left top;
      touch-action: pan-x pan-y;
    }

    .chart-zoom-controls {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
      min-height: 32px;
      padding: 3px;
      border: 1px solid #dbe3ef;
      border-radius: 11px;
      background: rgba(255,255,255,0.96);
      box-shadow: 0 5px 14px rgba(15,23,42,0.08);
    }

    .chart-title .chart-zoom-controls {
      margin-left: auto;
    }

    .chart-zoom-btn {
      width: 28px;
      height: 26px;
      border: 0;
      border-radius: 8px;
      display: grid;
      place-items: center;
      padding: 0;
      background: #eff6ff;
      color: #1d4ed8;
      cursor: pointer;
      font-size: 16px;
      line-height: 1;
      font-weight: 950;
      user-select: none;
      -webkit-user-select: none;
    }

    .chart-zoom-btn:hover:not(:disabled) {
      background: #dbeafe;
      color: #1e40af;
    }

    .chart-zoom-btn:active:not(:disabled) {
      transform: translateY(1px);
    }

    .chart-zoom-btn:disabled {
      opacity: 0.38;
      cursor: default;
    }

    .chart-zoom-value {
      min-width: 48px;
      padding: 0 4px;
      text-align: center;
      color: #334155;
      font-size: 11px;
      line-height: 26px;
      font-weight: 950;
      white-space: nowrap;
    }

    @media (max-width: 760px) {
      .chart-zoom-controls {
        min-height: 34px;
      }

      .chart-zoom-btn {
        width: 31px;
        height: 28px;
        font-size: 17px;
      }

      .chart-zoom-value {
        min-width: 50px;
        line-height: 28px;
      }
    }



    /* Top bar scrolls with the page instead of staying fixed/sticky. */
    .topbar {
      position: relative !important;
      top: auto !important;
    }


    /* 24-hour history date selector: displayed with the historical graphs */
    .history-period-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin: 16px 0 0;
      padding: 14px 16px;
      border: 1px solid #bfdbfe;
      border-radius: 18px;
      background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(135deg, #eff6ff, #ffffff);
      box-shadow: 0 9px 22px rgba(37, 99, 235, 0.08);
    }

    .history-period-copy {
      min-width: 0;
    }

    .history-period-title {
      margin: 0;
      color: #0f172a;
      font-size: 16px;
      font-weight: 950;
    }

    .history-period-desc {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }

    .history-period-toolbar .history-day-filter {
      margin-left: 0;
      flex: 0 0 auto;
    }

    /* Full-day history date filter: 00:00-24:00 of the selected date */
    .history-day-filter {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-left: auto;
    }

    .history-day-label {
      font-size: 12px;
      font-weight: 800;
      color: #475569;
      white-space: nowrap;
    }

    .history-day-input {
      height: 36px;
      min-width: 148px;
      padding: 0 10px;
      border: 1px solid #cbd5e1;
      border-radius: 10px;
      background: #ffffff;
      color: #0f172a;
      font: inherit;
      font-size: 13px;
      font-weight: 700;
      outline: none;
    }

    .history-day-input:focus {
      border-color: #38bdf8;
      box-shadow: 0 0 0 3px rgba(56,189,248,.15);
    }

    .history-day-button {
      height: 36px;
      padding: 0 14px;
      border: 1px solid #2563eb;
      border-radius: 10px;
      background: linear-gradient(135deg, #2563eb, #06b6d4);
      color: #ffffff;
      font: inherit;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
      box-shadow: 0 5px 14px rgba(37,99,235,.18);
    }

    .history-day-button:active { transform: translateY(1px); }

    @media (max-width: 700px) {
      .history-period-toolbar {
        align-items: stretch;
        flex-direction: column;
        padding: 13px;
      }

      .history-day-filter {
        width: 100%;
        margin-left: 0;
      }
      .history-day-input { flex: 1 1 150px; min-width: 0; }
      .history-day-button { flex: 0 0 auto; }
    }



    /* =========================
       Authentication / User administration
    ========================= */
    .manager-only.auth-hidden,
    [data-auth-page].auth-hidden,
    [data-auth-group].auth-hidden { display: none !important; }

    .auth-user-card {
      min-height: 46px;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 10px;
      border: 1px solid #dbe3ef;
      border-radius: 14px;
      background: #ffffff;
      box-shadow: 0 7px 18px rgba(15,23,42,.07);
    }
    
    .auth-user-avatar {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #fff;
      background: linear-gradient(135deg,#2563eb,#06b6d4);
      font-weight: 950;
      flex: 0 0 auto;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.65);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
    }
    .auth-user-avatar svg {
      width: 20px;
      height: 20px;
      display: block;
    }
    .auth-user-avatar.role-manager {
      background: linear-gradient(135deg,#f59e0b,#ef4444);
    }
    .auth-user-avatar.role-member {
      background: linear-gradient(135deg,#2563eb,#06b6d4);
    }
    .auth-user-meta { min-width: 0; }
    .auth-user-name { color:#0f172a; font-size:12px; font-weight:950; white-space:nowrap; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
    .auth-user-role { margin-top:2px; color:#64748b; font-size:10px; font-weight:850; text-transform:uppercase; }
    .auth-logout-btn {
      border:0;
      border-radius:10px;
      padding:8px 10px;
      cursor:pointer;
      color:#991b1b;
      background:#fee2e2;
      font-weight:950;
    }

    .user-admin-grid { display:grid; grid-template-columns:minmax(330px,.62fr) minmax(800px,1.55fr); gap:18px; align-items:start; }
    .user-admin-card { border:1px solid #e2e8f0; border-radius:20px; padding:18px; background:#fff; box-shadow:0 10px 24px rgba(15,23,42,.06); min-width:0; }
    .user-admin-card h3 { margin:0 0 6px; color:#0f172a; }
    .user-admin-card p { margin:0 0 16px; color:#64748b; font-size:13px; line-height:1.5; }
    .user-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .user-field.full { grid-column:1/-1; }
    .user-field label { display:block; margin-bottom:5px; color:#475569; font-size:12px; font-weight:900; }
    .user-field input,.user-field select { width:100%; min-height:42px; border:1px solid #cbd5e1; border-radius:11px; padding:9px 10px; background:#fff; color:#0f172a; font:inherit; font-weight:800; }
    .user-permission-box { display:flex; gap:12px; flex-wrap:wrap; padding:11px; border:1px solid #e2e8f0; border-radius:13px; background:#f8fafc; }
    .user-permission-box label { display:flex; align-items:center; gap:6px; color:#334155; font-size:12px; font-weight:900; }
    .user-permission-group + .user-permission-group { margin-top:12px; }
    .user-permission-group .user-permission-heading { display:block; margin-bottom:6px; }
    .user-admin-actions { display:flex; gap:9px; flex-wrap:wrap; margin-top:13px; }
    .user-admin-btn { border:0; border-radius:11px; padding:10px 13px; cursor:pointer; font-weight:950; }
    .user-admin-primary { background:linear-gradient(135deg,#2563eb,#06b6d4); color:#fff; }
    .user-admin-secondary { background:#e2e8f0; color:#0f172a; }
    .user-admin-danger { background:#fee2e2; color:#991b1b; }
    .user-admin-status { margin-top:12px; padding:11px 12px; border-radius:12px; background:#f8fafc; color:#475569; border:1px solid #e2e8f0; font-size:12px; }
    .user-admin-status.success { color:#166534; background:#f0fdf4; border-color:#bbf7d0; }
    .user-admin-status.error { color:#991b1b; background:#fef2f2; border-color:#fecaca; }
    .user-table-scroll { width:100%; overflow-x:auto; border:1px solid #e2e8f0; border-radius:14px; }
    .user-table { width:100%; min-width:1040px; border-collapse:collapse; background:#fff; }
    .user-table th,.user-table td { padding:10px; border-bottom:1px solid #eef2f7; text-align:left; vertical-align:middle; font-size:12px; }
    .user-table th { color:#475569; background:#f8fafc; font-weight:950; }
    .user-table input[type="text"],.user-table select { min-height:34px; border:1px solid #cbd5e1; border-radius:9px; padding:6px 8px; font:inherit; font-weight:800; }
    .user-table .permission-cell { white-space:nowrap; }
    .user-table .permission-cell label { margin-right:7px; font-weight:850; }
    .user-status-pill { display:inline-flex; padding:5px 8px; border-radius:999px; font-size:10px; font-weight:950; }
    .user-status-pending { color:#92400e; background:#fef3c7; }
    .user-status-active { color:#166534; background:#dcfce7; }
    .user-status-disabled { color:#991b1b; background:#fee2e2; }

    @media (max-width:1500px) { .user-admin-grid { grid-template-columns:1fr; } }
    @media (max-width:620px) {
      .auth-user-card { width:100%; }
      .auth-user-meta { flex:1; }
      .user-form-grid { grid-template-columns:1fr; }
    }


    /* =========================================================
       Top bar and Member-permission symmetry
       Keeps status cards, language selector and account card aligned.
    ========================================================= */
    .topbar-actions {
      align-items: stretch;
    }

    .quick-status-card,
    .lang-toggle,
    .auth-user-card {
      height: 72px;
      min-height: 72px;
      box-sizing: border-box;
    }

    .quick-status-card {
      justify-content: center;
    }

    .lang-toggle {
      width: 116px;
      min-width: 116px;
      padding: 0 13px;
      border-radius: 14px;
      align-self: stretch;
    }

    .lang-toggle-flag {
      width: 30px;
      height: 20px;
    }

    .lang-toggle-text {
      min-width: 38px;
      text-align: center;
      font-size: 14px;
    }

    .auth-user-card {
      min-width: 310px;
      padding: 8px 10px;
      border-radius: 14px;
    }

    .auth-user-meta {
      flex: 1 1 auto;
    }

    .auth-user-name {
      max-width: 175px;
      font-size: 13px;
    }

    .auth-user-role {
      font-size: 10px;
      line-height: 1.25;
    }

    .auth-logout-btn {
      min-width: 104px;
      height: 40px;
      padding: 0 11px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
      flex: 0 0 auto;
    }

    /* Equal cards in the Member permission selector. */
    .user-permission-box {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      padding: 8px;
      align-items: stretch;
    }

    .user-permission-box label {
      min-width: 0;
      min-height: 52px;
      margin: 0;
      padding: 8px 9px;
      border: 1px solid #dbe3ef;
      border-radius: 11px;
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      line-height: 1.3;
      overflow-wrap: anywhere;
    }

    /* Prevent generic form-input rules from enlarging checkboxes. */
    .user-permission-box input[type="checkbox"],
    .user-table input[type="checkbox"] {
      appearance: auto;
      -webkit-appearance: checkbox;
      width: 18px !important;
      height: 18px !important;
      min-width: 18px !important;
      min-height: 18px !important;
      max-width: 18px !important;
      max-height: 18px !important;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 4px;
      box-shadow: none;
      accent-color: #2563eb;
      flex: 0 0 18px;
    }

    .user-table .permission-cell label {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-right: 10px;
    }

    /* Wide desktop: one balanced row. */
    @media (min-width: 1501px) {
      .topbar {
        padding-top: 14px;
        padding-bottom: 14px;
      }

      .topbar-heading {
        flex: 1 1 auto;
      }

      .topbar-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
      }

      .topbar-system-status {
        flex-wrap: nowrap;
      }

      .quick-status-card {
        width: 205px;
        min-width: 205px;
      }
    }

    /* Notebook and iPad landscape: title above, controls in a balanced row. */
    @media (min-width: 851px) and (max-width: 1500px) {
      .topbar {
        flex-direction: column;
        align-items: stretch;
      }

      .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 116px minmax(300px, auto);
        gap: 10px;
      }

      .topbar-system-status {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .quick-status-card {
        width: 100%;
        min-width: 0;
      }
    }

    /* iPad portrait and large phones. */
    @media (min-width: 621px) and (max-width: 850px) {
      .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: minmax(120px, .42fr) minmax(300px, 1fr);
        gap: 10px;
      }

      .topbar-system-status {
        grid-column: 1 / -1;
      }

      .lang-toggle,
      .auth-user-card {
        width: 100%;
        min-width: 0;
      }
    }

    /* Phone: one control per row with equal widths. */
    @media (max-width: 620px) {
      .topbar-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
      }

      .topbar-system-status {
        grid-column: auto;
      }

      .lang-toggle,
      .auth-user-card {
        width: 100%;
        min-width: 0;
      }

      .auth-user-meta {
        flex: 1;
      }

      .user-permission-box {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      .user-permission-box label {
        min-height: 58px;
        padding: 7px;
        font-size: 11px;
      }
    }



    /* =========================================================
       User-management table: keep every permission column intact
       and contain horizontal scrolling inside the table card.
    ========================================================= */
    #user-management-page .user-table-scroll {
      width: 100%;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: visible;
    }

    #user-management-page .user-table {
      width: 100%;
      min-width: 1040px !important;
      table-layout: fixed;
    }

    #user-management-page .user-table th,
    #user-management-page .user-table td {
      padding: 9px 7px;
      font-size: 11px;
      line-height: 1.35;
      overflow-wrap: anywhere;
      word-break: normal;
    }

    #user-management-page .user-table th:nth-child(1),
    #user-management-page .user-table td:nth-child(1) { width: 8%; }

    #user-management-page .user-table th:nth-child(2),
    #user-management-page .user-table td:nth-child(2) { width: 13%; }

    #user-management-page .user-table th:nth-child(3),
    #user-management-page .user-table td:nth-child(3) { width: 8%; }

    #user-management-page .user-table th:nth-child(4),
    #user-management-page .user-table td:nth-child(4) { width: 8%; }

    #user-management-page .user-table th:nth-child(5),
    #user-management-page .user-table td:nth-child(5) { width: 18%; }

    #user-management-page .user-table th:nth-child(6),
    #user-management-page .user-table td:nth-child(6) { width: 25%; }

    #user-management-page .user-table th:nth-child(7),
    #user-management-page .user-table td:nth-child(7) { width: 10%; }

    #user-management-page .user-table th:nth-child(8),
    #user-management-page .user-table td:nth-child(8) { width: 10%; }

    #user-management-page .user-table input[type="text"],
    #user-management-page .user-table select {
      width: 100%;
      min-width: 0;
      min-height: 34px;
      padding: 6px 7px;
      font-size: 11px;
      box-sizing: border-box;
    }

    #user-management-page .permission-cell {
      white-space: normal !important;
    }

    #user-management-page .permission-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
      align-items: center;
    }

    #user-management-page .control-permission-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #user-management-page .permission-grid label {
      min-width: 0;
      margin: 0 !important;
      padding: 5px 6px;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      background: #f8fafc;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
      line-height: 1.15;
      white-space: nowrap;
    }

    #user-management-page .user-last-login {
      color: #334155;
      font-size: 10px;
      line-height: 1.35;
    }

    #user-management-page .user-last-login small {
      display: block;
      margin-top: 4px;
      color: #64748b;
      font-size: 9px;
      line-height: 1.3;
      white-space: normal;
    }

    #user-management-page .user-action-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
    }

    #user-management-page .user-action-grid .user-admin-btn {
      width: 100%;
      min-width: 0;
      min-height: 32px;
      padding: 6px 5px;
      border-radius: 9px;
      font-size: 10px;
      line-height: 1.15;
      white-space: normal;
    }

    /* Compact notebook widths while retaining the normal table layout. */
    @media (max-width: 1200px) and (min-width: 761px) {
      #user-management-page .user-admin-card {
        padding: 14px;
      }

      #user-management-page .user-table th,
      #user-management-page .user-table td {
        padding: 8px 5px;
        font-size: 10px;
      }

      #user-management-page .permission-grid label,
      #user-management-page .user-action-grid .user-admin-btn {
        font-size: 9px;
      }
    }

    /* Phone: convert each account row into a readable card. */
    @media (max-width: 760px) {
      #user-management-page .user-table-scroll {
        border: 0;
        overflow: visible;
      }

      #user-management-page .user-table,
      #user-management-page .user-table tbody,
      #user-management-page .user-table tr,
      #user-management-page .user-table td {
        display: block;
        width: 100% !important;
      }

      #user-management-page .user-table {
        min-width: 0 !important;
      }

      #user-management-page .user-table thead {
        display: none;
      }

      #user-management-page .user-table tbody {
        display: grid;
        gap: 12px;
      }

      #user-management-page .user-table tr {
        padding: 12px;
        border: 1px solid #dbe3ef;
        border-radius: 14px;
        background: #ffffff;
        box-shadow: 0 7px 18px rgba(15,23,42,.05);
      }

      #user-management-page .user-table td {
        display: grid;
        grid-template-columns: minmax(92px, .42fr) minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #eef2f7;
      }

      #user-management-page .user-table td:last-child {
        border-bottom: 0;
      }

      #user-management-page .user-table td::before {
        color: #64748b;
        font-size: 10px;
        font-weight: 950;
      }

      #user-management-page .user-table td:nth-child(1)::before { content: none !important; display: none !important; }
      #user-management-page .user-table td:nth-child(2)::before { content: "ชื่อที่แสดง"; }
      #user-management-page .user-table td:nth-child(3)::before { content: "ระดับ"; }
      #user-management-page .user-table td:nth-child(4)::before { content: "สถานะ"; }
      #user-management-page .user-table td:nth-child(5)::before { content: "สิทธิ์ดูข้อมูล"; }
      #user-management-page .user-table td:nth-child(6)::before { content: "สิทธิ์การควบคุม"; }
      #user-management-page .user-table td:nth-child(7)::before { content: "เข้าใช้ล่าสุด"; }
      #user-management-page .user-table td:nth-child(8)::before { content: "จัดการ"; }

      #user-management-page .permission-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }

      #user-management-page .control-permission-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #user-management-page .user-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }



    /* =========================================================
       Collapsible network-status popover
       Compact ping icon in the top bar; click to expand/collapse.
    ========================================================= */
    .topbar-actions {
      display: flex !important;
      align-items: stretch !important;
      justify-content: flex-end !important;
      flex-wrap: wrap !important;
      gap: 10px !important;
      min-width: 0;
    }

    .topbar-status-cluster {
      position: relative;
      width: 72px;
      height: 72px;
      flex: 0 0 72px;
      z-index: 80;
    }

    .status-toggle-btn {
      position: relative;
      width: 72px;
      height: 72px;
      min-width: 72px;
      min-height: 72px;
      padding: 0;
      border: 1px solid #dbe3ef;
      border-radius: 16px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(145deg, #eff6ff, #ffffff);
      color: #2563eb;
      box-shadow: 0 8px 20px rgba(15,23,42,.08);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
      overflow: hidden;
    }

    .status-toggle-btn:hover {
      transform: translateY(-1px);
      border-color: #93c5fd;
      box-shadow: 0 12px 24px rgba(37,99,235,.14);
      background: linear-gradient(145deg, #dbeafe, #ffffff);
    }

    .status-toggle-btn:focus-visible {
      outline: 3px solid rgba(37,99,235,.22);
      outline-offset: 2px;
    }

    .status-toggle-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
    }

    .status-toggle-icon svg {
      width: 38px;
      height: 38px;
      display: block;
    }

    .status-toggle-state-dot {
      position: absolute;
      right: 9px;
      top: 9px;
      width: 11px;
      height: 11px;
      border-radius: 999px;
      background: #94a3b8;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 4px rgba(148,163,184,.14);
      transition: background .18s ease, box-shadow .18s ease;
    }

    .status-toggle-btn.good .status-toggle-state-dot {
      background: #22c55e;
      box-shadow: 0 0 0 4px rgba(34,197,94,.15);
    }

    .status-toggle-btn.warn .status-toggle-state-dot {
      background: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245,158,11,.15);
    }

    .status-toggle-btn.bad .status-toggle-state-dot {
      background: #ef4444;
      box-shadow: 0 0 0 4px rgba(239,68,68,.15);
    }

    .status-toggle-chevron {
      position: absolute;
      left: 50%;
      bottom: 5px;
      transform: translateX(-50%) rotate(0deg);
      color: #64748b;
      font-size: 13px;
      line-height: 1;
      transition: transform .2s ease;
    }

    .topbar-status-cluster.expanded .status-toggle-chevron {
      transform: translateX(-50%) rotate(180deg);
    }

    /* The status cards open as a floating panel and no longer consume
       horizontal top-bar space, so they cannot push or clip other controls. */
    .topbar-status-cluster .topbar-system-status {
      position: absolute !important;
      top: calc(100% + 10px) !important;
      right: 0 !important;
      left: auto !important;
      width: min(660px, calc(100vw - 32px)) !important;
      min-width: 0 !important;
      max-width: calc(100vw - 32px) !important;
      padding: 10px !important;
      margin: 0 !important;
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 8px !important;
      background: rgba(255,255,255,.98);
      border: 1px solid #dbe3ef;
      border-radius: 18px;
      box-shadow: 0 18px 44px rgba(15,23,42,.18);
      backdrop-filter: blur(14px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(-7px) scale(.985);
      transform-origin: top right;
      transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
      z-index: 90;
    }

    .topbar-status-cluster.expanded .topbar-system-status {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateY(0) scale(1);
    }

    .topbar-status-cluster .quick-status-card {
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
      height: 72px !important;
      min-height: 72px !important;
      padding: 8px 10px !important;
      overflow: hidden;
    }

    .topbar-status-cluster .quick-status-main {
      min-width: 0;
      font-size: 13px;
      line-height: 1.22;
    }

    .topbar-status-cluster .quick-status-main > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topbar-status-cluster .quick-status-sub {
      max-width: 100% !important;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    @media (min-width: 621px) and (max-width: 850px) {
      .topbar-actions {
        display: flex !important;
        justify-content: flex-start !important;
      }

      .lang-toggle {
        width: 116px !important;
        min-width: 116px !important;
      }

      .auth-user-card {
        width: auto !important;
        min-width: 300px !important;
        flex: 1 1 300px;
      }
    }

    @media (max-width: 620px) {
      .topbar-actions {
        width: 100%;
        display: grid !important;
        grid-template-columns: 64px minmax(0, 1fr) !important;
        align-items: stretch !important;
        justify-content: stretch !important;
      }

      .topbar-status-cluster {
        width: 64px;
        height: 64px;
        flex-basis: 64px;
        grid-column: 1;
      }

      .status-toggle-btn {
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        border-radius: 14px;
      }

      .status-toggle-icon,
      .status-toggle-icon svg {
        width: 34px;
        height: 34px;
      }

      .lang-toggle {
        grid-column: 2;
        width: 100% !important;
        min-width: 0 !important;
        height: 64px !important;
        min-height: 64px !important;
      }

      .auth-user-card {
        grid-column: 1 / -1;
        width: 100% !important;
        min-width: 0 !important;
      }

      .topbar-status-cluster .topbar-system-status {
        left: 0 !important;
        right: auto !important;
        width: calc(100vw - 32px) !important;
        grid-template-columns: 1fr !important;
        transform-origin: top left;
        max-height: min(420px, calc(100vh - 150px));
        overflow-y: auto;
      }

      .topbar-status-cluster .quick-status-card {
        height: 70px !important;
        min-height: 70px !important;
      }
    }


    /* =========================================================
       iPad / tablet fix for the collapsible status panel
       Keep the popover inside the visible page and avoid the
       three-card row overflowing over the dashboard content.
    ========================================================= */
    @media (min-width: 621px) and (max-width: 1366px) {
      .topbar-actions {
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
      }

      .topbar-status-cluster {
        flex: 0 0 64px !important;
        width: 64px !important;
        height: 64px !important;
      }

      .status-toggle-btn {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
      }

      .topbar-status-cluster .topbar-system-status {
        top: calc(100% + 8px) !important;
        right: 0 !important;
        left: auto !important;
        width: min(380px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        padding: 9px !important;
        max-height: min(330px, calc(100vh - 140px));
        overflow-y: auto;
        overflow-x: hidden;
        transform-origin: top right;
      }

      .topbar-status-cluster .quick-status-card {
        height: auto !important;
        min-height: 66px !important;
        padding: 9px 11px !important;
      }

      .topbar-status-cluster .quick-status-main,
      .topbar-status-cluster .quick-status-sub {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
      }

      .lang-toggle {
        flex: 0 0 116px !important;
        width: 116px !important;
        min-width: 116px !important;
        height: 64px !important;
      }

      .auth-user-card {
        flex: 1 1 280px !important;
        min-width: 0 !important;
        max-width: 390px !important;
      }
    }

    @media (min-width: 621px) and (max-width: 900px) {
      .topbar-actions {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
      }

      .auth-user-card {
        flex: 1 1 100% !important;
        max-width: none !important;
      }
    }



    /* 24-hour history: follow-latest control */
    .history-follow-btn {
      min-height: 32px;
      border: 1px solid #93c5fd;
      border-radius: 10px;
      padding: 7px 11px;
      background: #eff6ff;
      color: #1d4ed8;
      cursor: pointer;
      font-size: 11px;
      font-weight: 950;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }
    .history-follow-btn::before {
      content: "●";
      font-size: 10px;
      color: #94a3b8;
    }
    .history-follow-btn.active {
      border-color: #22c55e;
      background: #f0fdf4;
      color: #166534;
      box-shadow: 0 0 0 3px rgba(34,197,94,.10);
    }
    .history-follow-btn.active::before {
      color: #22c55e;
      animation: historyFollowPulse 1.2s ease-in-out infinite;
    }
    @keyframes historyFollowPulse {
      50% { opacity: .35; transform: scale(.78); }
    }
    @media (max-width: 760px) {
      .history-follow-btn { min-height: 34px; padding-inline: 10px; }
    }


    /* =========================================================
       Sensor map cards — smooth whole-card hover zoom
       Base and hover use the same transform chain to prevent jumping.
    ========================================================= */
    .evap-tag,
    .net-tag {
      cursor: zoom-in;
      transform-origin: center center;
      transform: translate3d(-50%, -50%, 0) scale(1);
      transition:
        transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.20s ease,
        border-color 0.20s ease,
        background-color 0.20s ease,
        opacity 0.20s ease;
      will-change: transform;
      backface-visibility: hidden;
      -webkit-font-smoothing: antialiased;
    }

    /* The Net map is only slightly wider than before. This creates enough
       room for fixed 160 px cards while preserving every connector point. */
    .net-map-panel {
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
    }

    .net-map {
      width: 1400px;
      min-width: 1400px;
      max-width: none;
    }

    .net-tag {
      width: 160px;
      min-width: 160px;
      max-width: none;
      box-sizing: border-box;
    }

    /* Mouse only: enlarge the complete card, text and parameters together.
       The matching base/hover transform keeps its centre fixed and smooth. */
    @media (hover: hover) and (pointer: fine) {
      .evap-tag:hover,
      .net-tag:hover {
        z-index: 1000 !important;
        opacity: 1 !important;
        transform: translate3d(-50%, -50%, 0) scale(1.38);
        border-color: rgba(37, 99, 235, 0.48);
        background: rgba(255, 255, 255, 0.99);
        box-shadow:
          0 18px 40px rgba(15, 23, 42, 0.26),
          0 0 0 3px rgba(59, 130, 246, 0.10);
      }
    }


/* =========================================================
   Strong ON/OFF appearance for Follow Latest
========================================================= */
.history-follow-btn {
  min-width: 184px;
  min-height: 36px;
  justify-content: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid #cbd5e1;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #475569;
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

.history-follow-btn::before {
  content: none !important;
}

.history-follow-btn:hover {
  transform: translateY(-1px);
  border-color: #60a5fa;
  background: #eff6ff;
  color: #1d4ed8;
}

.history-follow-indicator {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 999px;
  background: #94a3b8;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.14);
}

.history-follow-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-follow-state {
  min-width: 36px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e2e8f0;
  color: #475569;
  font-size: 10px;
  font-weight: 950;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.12);
}

.history-follow-btn.active {
  border-color: #16a34a;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #ffffff;
  box-shadow:
    0 0 0 4px rgba(34, 197, 94, 0.13),
    0 10px 22px rgba(22, 163, 74, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.history-follow-btn.active:hover {
  border-color: #15803d;
  background: linear-gradient(135deg, #15803d, #16a34a);
  color: #ffffff;
}

.history-follow-btn.active .history-follow-indicator {
  background: #ffffff;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.20),
    0 0 16px rgba(255, 255, 255, 0.72);
  animation: unifiedHistoryFollowPulse 1.1s ease-in-out infinite;
}

.history-follow-btn.active .history-follow-state {
  background: rgba(255, 255, 255, 0.95);
  color: #166534;
  box-shadow: none;
}

@keyframes unifiedHistoryFollowPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.48;
    transform: scale(0.72);
  }
}

@media (max-width: 760px) {
  .history-follow-btn {
    min-width: 166px;
    max-width: 100%;
  }
}


    .zoomable-chart-canvas {
      cursor: crosshair;
    }

    .zoomable-chart-canvas[data-point-hover="true"] {
      cursor: pointer;
    }


    /* ปิดระบบติดตามข้อมูลล่าสุด */
    .history-follow-btn {
      display: none !important;
    }



    /* =========================================================
       Fertilizer root-zone animation
       Short plants + soil cross-section + animated water/fertilizer flow
    ========================================================= */
    .fert-root-scene {
      position: relative;
      width: 100%;
      min-width: 0;
      padding: 18px;
      border: 1px solid #cfe7ff;
      border-radius: 24px;
      overflow: hidden;
      background:
        radial-gradient(circle at 88% 8%, rgba(250, 204, 21, 0.18), transparent 17%),
        linear-gradient(180deg, #dff3ff 0%, #f8fbff 22%, #ecfccb 23%, #bbf7d0 100%);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.62),
        0 16px 32px rgba(15,23,42,0.08);
      isolation: isolate;
    }

    .fert-root-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.17) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.17) 1px, transparent 1px);
      background-size: 38px 38px;
      opacity: 0.45;
      pointer-events: none;
      z-index: -1;
    }

    .fert-root-scene-toolbar {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .fert-root-active-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 36px;
      padding: 8px 12px;
      border: 1px solid rgba(226,232,240,0.96);
      border-radius: 999px;
      background: rgba(255,255,255,0.93);
      color: #0f172a;
      font-size: 12px;
      font-weight: 950;
      box-shadow: 0 9px 20px rgba(15,23,42,0.08);
      backdrop-filter: blur(6px);
    }

    .fert-root-active-label::before {
      content: "💧";
      font-size: 15px;
    }

    .fert-root-hint {
      color: #475569;
      font-size: 11px;
      font-weight: 850;
      text-align: right;
    }

    .fert-root-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(4, minmax(210px, 1fr));
      gap: 16px;
      align-items: stretch;
    }

    .fert-root-zone {
      position: relative;
      min-width: 0;
      min-height: 310px;
      padding: 13px;
      border: 1px solid rgba(148,163,184,0.30);
      border-radius: 22px;
      overflow: hidden;
      background:
        radial-gradient(circle at 92% 8%, rgba(255,255,255,0.84), transparent 28%),
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(240,253,244,0.96));
      box-shadow: 0 12px 24px rgba(15,23,42,0.08);
      transition:
        transform 0.20s ease,
        border-color 0.20s ease,
        box-shadow 0.20s ease,
        background 0.20s ease;
    }

    .fert-root-zone:hover {
      transform: translateY(-2px);
    }

    .fert-root-zone.on {
      border-color: rgba(14,165,233,0.70);
      background:
        radial-gradient(circle at 92% 8%, rgba(186,230,253,0.44), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(236,254,255,0.98));
      box-shadow:
        0 0 0 3px rgba(14,165,233,0.12),
        0 18px 32px rgba(14,165,233,0.17);
    }

    .fert-root-zone-head {
      position: relative;
      z-index: 5;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
    }

    .fert-root-zone-index {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 44px;
      height: 32px;
      padding: 0 11px;
      border: 1px solid rgba(255,255,255,0.72);
      border-radius: 999px;
      background: #0f172a;
      color: #ffffff;
      font-size: 13px;
      font-weight: 950;
      letter-spacing: 0.2px;
      box-shadow: 0 8px 18px rgba(15,23,42,0.20);
    }

    .fert-root-zone.on .fert-root-zone-index {
      background: #0284c7;
      box-shadow:
        0 0 24px rgba(14,165,233,0.46),
        0 8px 18px rgba(15,23,42,0.16);
    }

    .fert-root-zone-state {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 28px;
      padding: 6px 10px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      font-size: 10px;
      font-weight: 950;
      white-space: nowrap;
    }

    .fert-root-zone.on .fert-root-zone-state {
      background: #dbeafe;
      color: #1d4ed8;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.12);
    }

    .fert-short-plant {
      position: relative;
      height: 92px;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      margin-top: 1px;
      z-index: 3;
    }

    .fert-short-plant-trunk {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 9px;
      height: 34px;
      transform: translateX(-50%);
      border-radius: 999px 999px 4px 4px;
      background: linear-gradient(90deg, #713f12, #a16207 45%, #78350f);
      box-shadow: inset 2px 0 2px rgba(255,255,255,0.18);
      z-index: 1;
    }

    .fert-short-plant-canopy {
      position: absolute;
      left: 50%;
      bottom: 22px;
      width: 112px;
      height: 60px;
      transform: translateX(-50%);
      z-index: 2;
    }

    .fert-short-plant-leaf {
      position: absolute;
      border-radius: 50%;
      background:
        radial-gradient(circle at 34% 26%, #86efac 0%, #22c55e 46%, #15803d 78%, #166534 100%);
      box-shadow:
        inset -7px -8px 12px rgba(0,0,0,0.12),
        0 7px 12px rgba(21,128,61,0.16);
    }

    .fert-short-plant-leaf.l1 { left: 3px; top: 20px; width: 52px; height: 39px; }
    .fert-short-plant-leaf.l2 { left: 27px; top: 2px; width: 60px; height: 49px; }
    .fert-short-plant-leaf.l3 { right: 3px; top: 20px; width: 52px; height: 39px; }
    .fert-short-plant-leaf.l4 { left: 36px; top: 24px; width: 42px; height: 34px; }

    .fert-short-plant-fruit {
      position: absolute;
      width: 7px;
      height: 7px;
      border-radius: 999px;
      background: #f59e0b;
      box-shadow: inset 1px 1px 0 rgba(255,255,255,0.52), 0 2px 4px rgba(120,53,15,0.20);
      z-index: 3;
    }

    .fert-short-plant-fruit.f1 { left: 26px; top: 27px; }
    .fert-short-plant-fruit.f2 { left: 54px; top: 13px; }
    .fert-short-plant-fruit.f3 { right: 24px; top: 30px; }

    .fert-root-soil {
      position: relative;
      height: 142px;
      overflow: hidden;
      border: 1px solid rgba(120,53,15,0.30);
      border-radius: 17px;
      background:
        radial-gradient(circle at 18% 22%, rgba(253,186,116,0.28) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 34%, rgba(253,186,116,0.22) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 66%, rgba(254,215,170,0.18) 0 3px, transparent 4px),
        linear-gradient(180deg, #b45309 0%, #92400e 24%, #7c2d12 52%, #4a2411 100%);
      box-shadow:
        inset 0 3px 0 rgba(255,255,255,0.13),
        0 10px 18px rgba(67,20,7,0.17);
    }

    .fert-root-soil::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 12px;
      background:
        radial-gradient(ellipse at center, rgba(251,191,36,0.24), transparent 67%),
        linear-gradient(180deg, rgba(67,20,7,0.22), rgba(120,53,15,0.02));
      border-bottom: 1px solid rgba(67,20,7,0.20);
      z-index: 1;
    }

    .fert-root-drip-pipe {
      position: absolute;
      left: 13px;
      right: 13px;
      top: 11px;
      height: 9px;
      border-radius: 999px;
      background: linear-gradient(180deg, #475569, #0f172a);
      box-shadow: inset 0 2px 1px rgba(255,255,255,0.18), 0 5px 10px rgba(15,23,42,0.18);
      z-index: 4;
    }

    .fert-root-drip-emitter {
      position: absolute;
      left: 50%;
      top: 14px;
      width: 22px;
      height: 13px;
      transform: translateX(-50%);
      border-radius: 3px 3px 10px 10px;
      background: linear-gradient(180deg, #64748b, #1e293b);
      box-shadow: 0 4px 9px rgba(15,23,42,0.20);
      z-index: 5;
    }

    .fert-root-stream {
      position: absolute;
      left: 50%;
      top: 25px;
      width: 8px;
      height: 63px;
      transform: translateX(-50%);
      border-radius: 999px;
      opacity: 0;
      overflow: visible;
      background:
        repeating-linear-gradient(
          180deg,
          rgba(186,230,253,0.98) 0 10px,
          rgba(14,165,233,0.98) 10px 20px
        );
      background-size: 100% 20px;
      box-shadow: 0 0 14px rgba(14,165,233,0.48);
      z-index: 4;
    }

    .fert-root-zone.on .fert-root-stream {
      opacity: 1;
      animation: fertRootStream 0.60s linear infinite;
    }

    .fert-root-drop {
      position: absolute;
      left: 50%;
      top: 24px;
      width: 9px;
      height: 12px;
      margin-left: -4.5px;
      border-radius: 55% 55% 62% 62% / 42% 42% 72% 72%;
      background: linear-gradient(180deg, #e0f2fe, #0ea5e9);
      opacity: 0;
      filter: drop-shadow(0 0 5px rgba(14,165,233,0.52));
      z-index: 6;
    }

    .fert-root-zone.on .fert-root-drop.d1 { animation: fertRootDrop 1.00s linear infinite; }
    .fert-root-zone.on .fert-root-drop.d2 { animation: fertRootDrop 1.00s linear infinite 0.30s; }
    .fert-root-zone.on .fert-root-drop.d3 { animation: fertRootDrop 1.00s linear infinite 0.60s; }

    .fert-root-network {
      position: absolute;
      left: 50%;
      top: 36px;
      width: 128px;
      height: 96px;
      transform: translateX(-50%);
      z-index: 2;
      overflow: visible;
    }

    .fert-root-network path {
      fill: none;
      stroke: rgba(241,245,249,0.92);
      stroke-width: 2.3;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 1px 1px rgba(67,20,7,0.22));
      transition: stroke 0.20s ease, filter 0.20s ease;
    }

    .fert-root-zone.on .fert-root-network path {
      stroke: #bae6fd;
      filter:
        drop-shadow(0 0 3px rgba(14,165,233,0.60))
        drop-shadow(0 1px 1px rgba(67,20,7,0.18));
      animation: fertRootPulse 1.25s ease-in-out infinite;
    }

    .fert-root-wet-area {
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 148px;
      height: 94px;
      transform: translateX(-50%);
      border-radius: 50% 50% 46% 46%;
      background:
        radial-gradient(ellipse at center,
          rgba(56,189,248,0.38) 0%,
          rgba(14,165,233,0.20) 42%,
          rgba(14,165,233,0.06) 64%,
          transparent 76%);
      opacity: 0;
      transition: opacity 0.26s ease;
      z-index: 1;
    }

    .fert-root-zone.on .fert-root-wet-area {
      opacity: 1;
      animation: fertWetArea 1.8s ease-in-out infinite;
    }

    .fert-root-zone-footer {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 7px;
      align-items: center;
      margin-top: 9px;
    }

    .fert-root-zone-message,
    .fert-root-zone-duration {
      min-width: 0;
      min-height: 34px;
      display: flex;
      align-items: center;
      border: 1px solid #e2e8f0;
      border-radius: 11px;
      background: #f8fafc;
      color: #475569;
      font-size: 11px;
      font-weight: 900;
    }

    .fert-root-zone-message {
      padding: 8px 9px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .fert-root-zone-duration {
      justify-content: center;
      padding: 8px 10px;
      color: #334155;
      white-space: nowrap;
    }

    .fert-root-zone.on .fert-root-zone-message {
      border-color: #bae6fd;
      background: #f0f9ff;
      color: #0369a1;
    }

    .fert-root-zone.on .fert-root-zone-duration {
      border-color: #a5f3fc;
      background: #ecfeff;
      color: #0f766e;
    }

    @keyframes fertRootStream {
      from { background-position: 0 -20px; }
      to { background-position: 0 20px; }
    }

    @keyframes fertRootDrop {
      0% { top: 24px; opacity: 0; transform: scale(0.72); }
      14% { opacity: 1; }
      82% { opacity: 1; }
      100% { top: 84px; opacity: 0; transform: scale(1.05); }
    }

    @keyframes fertRootPulse {
      0%, 100% { opacity: 0.74; }
      50% { opacity: 1; }
    }

    @keyframes fertWetArea {
      0%, 100% { transform: translateX(-50%) scale(0.96); opacity: 0.76; }
      50% { transform: translateX(-50%) scale(1.04); opacity: 1; }
    }

    @media (max-width: 1280px) {
      .fert-root-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr));
      }
    }

    @media (max-width: 760px) {
      .fert-animation-panel {
        overflow: hidden;
      }

      .fert-root-scene {
        padding: 12px;
      }

      .fert-root-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }

      .fert-root-zone {
        min-height: 296px;
        padding: 10px;
        border-radius: 18px;
      }

      .fert-root-zone-footer {
        grid-template-columns: 1fr;
      }

      .fert-root-hint {
        width: 100%;
        text-align: left;
      }
    }

    @media (max-width: 520px) {
      .fert-root-grid {
        grid-template-columns: 1fr;
      }

      .fert-root-zone {
        min-height: 304px;
      }
    }

  

    /* =========================================================
       Outdoor lighting — dimensional field scene
       Pure CSS/SVG-free artwork: lightweight and responsive.
    ========================================================= */
    #outdoor-light-dashboard .light-animation-panel {
      position: relative;
      overflow: hidden;
      padding: 24px;
      background:
        radial-gradient(circle at 94% 0%, rgba(56, 189, 248, 0.13), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.99), rgba(248,250,252,0.97));
    }

    #outdoor-light-dashboard .outdoor-scene {
      --scene-edge: rgba(125, 211, 252, 0.55);
      min-height: 720px;
      isolation: isolate;
      perspective: 1250px;
      overflow: hidden;
      border: 1px solid var(--scene-edge);
      border-radius: 30px;
      background:
        radial-gradient(circle at 88% 13%, rgba(253, 224, 71, 0.36) 0 6%, transparent 22%),
        linear-gradient(180deg, #cfeaff 0%, #eaf6ff 31%, #f7fbff 48%, #d9f7dc 49%, #8fe5a8 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -26px 60px rgba(22,163,74,0.08),
        0 24px 55px rgba(15,23,42,0.13);
    }

    #outdoor-light-dashboard .outdoor-scene::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 50% 56%, rgba(255,255,255,0.80), transparent 42%),
        repeating-linear-gradient(116deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 54px);
      opacity: 0.72;
    }

    #outdoor-light-dashboard .outdoor-scene::after {
      content: "";
      position: absolute;
      z-index: 0;
      left: -8%;
      right: -8%;
      bottom: -95px;
      height: 330px;
      transform: rotateX(58deg) translateZ(-16px);
      transform-origin: bottom center;
      border-radius: 48% 48% 0 0;
      background:
        repeating-linear-gradient(90deg, rgba(22,101,52,0.09) 0 1px, transparent 1px 78px),
        repeating-linear-gradient(0deg, rgba(22,101,52,0.06) 0 1px, transparent 1px 46px),
        linear-gradient(180deg, #7be09a, #41c876 52%, #16a34a 100%);
      box-shadow: inset 0 20px 35px rgba(255,255,255,0.18);
      pointer-events: none;
    }

    #outdoor-light-dashboard .outdoor-scene-sun {
      z-index: 1;
      right: 32px;
      top: 24px;
      width: 92px;
      height: 92px;
      background: radial-gradient(circle at 32% 28%, #fff8c8 0 8%, #fde047 35%, #fbbf24 67%, #f59e0b 100%);
      box-shadow:
        0 0 0 12px rgba(254,240,138,0.17),
        0 0 65px 24px rgba(251,191,36,0.43),
        inset -12px -12px 20px rgba(180,83,9,0.12);
      animation: outdoorSunFloat 5.2s ease-in-out infinite;
    }

    #outdoor-light-dashboard .outdoor-scene-sun::after {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: inherit;
      border: 1px solid rgba(255,255,255,0.50);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night {
      --scene-edge: rgba(148, 163, 184, 0.45);
      background:
        radial-gradient(circle at 84% 16%, rgba(255,255,255,0.16) 0 1.2%, transparent 1.4%),
        radial-gradient(circle at 76% 9%, rgba(255,255,255,0.14) 0 1%, transparent 1.2%),
        radial-gradient(circle at 64% 15%, rgba(255,255,255,0.15) 0 1.1%, transparent 1.3%),
        radial-gradient(circle at 18% 12%, rgba(255,255,255,0.12) 0 0.9%, transparent 1.1%),
        radial-gradient(circle at 28% 20%, rgba(255,255,255,0.10) 0 0.8%, transparent 1%),
        linear-gradient(180deg, #0f172a 0%, #172554 34%, #1e3a8a 55%, #0f766e 56%, #16a34a 100%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -26px 60px rgba(2, 44, 34, 0.22),
        0 24px 55px rgba(15,23,42,0.18);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night::before {
      background:
        radial-gradient(ellipse at 50% 56%, rgba(255,255,255,0.14), transparent 42%),
        repeating-linear-gradient(116deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 54px);
      opacity: 0.52;
    }

    #outdoor-light-dashboard .outdoor-scene.is-night::after {
      background:
        repeating-linear-gradient(90deg, rgba(240,253,244,0.06) 0 1px, transparent 1px 78px),
        repeating-linear-gradient(0deg, rgba(240,253,244,0.04) 0 1px, transparent 1px 46px),
        linear-gradient(180deg, #34d399, #22c55e 52%, #15803d 100%);
      box-shadow: inset 0 20px 35px rgba(255,255,255,0.07);
      opacity: 0.82;
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-sun {
      background: radial-gradient(circle at 34% 28%, #ffffff 0 10%, #f8fafc 38%, #cbd5e1 68%, #94a3b8 100%);
      box-shadow:
        0 0 0 12px rgba(255,255,255,0.08),
        0 0 45px 18px rgba(148,163,184,0.18),
        inset -10px -10px 18px rgba(71,85,105,0.20);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-sun::after {
      inset: 16px;
      border: 1px solid rgba(255,255,255,0.24);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-clouds {
      opacity: 0.34;
      filter: brightness(0.82);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-horizon {
      opacity: 0.34;
      filter: blur(0.2px) brightness(0.72) drop-shadow(0 10px 10px rgba(15,23,42,0.16));
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-caption {
      background: rgba(15,23,42,0.58);
      color: #f8fafc;
      border-color: rgba(148,163,184,0.38);
      box-shadow: 0 12px 28px rgba(2,6,23,0.26);
    }

    #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-caption::before {
      background: #cbd5e1;
      box-shadow: 0 0 0 5px rgba(203,213,225,0.16);
    }

    #outdoor-light-dashboard .outdoor-scene-clouds {
      z-index: 1;
      opacity: 0.92;
      animation: outdoorCloudDrift 12s ease-in-out infinite alternate;
    }

    #outdoor-light-dashboard .outdoor-scene-clouds::before,
    #outdoor-light-dashboard .outdoor-scene-clouds::after {
      background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(226,240,252,0.78));
      box-shadow:
        36px 8px 0 8px rgba(255,255,255,0.86),
        86px 3px 0 0 rgba(255,255,255,0.76),
        0 12px 20px rgba(51,65,85,0.08);
    }

    #outdoor-light-dashboard .outdoor-horizon {
      position: absolute;
      z-index: 0;
      left: -4%;
      right: -4%;
      top: 39%;
      height: 140px;
      pointer-events: none;
      opacity: 0.66;
      background:
        radial-gradient(ellipse at 10% 100%, #4ade80 0 27%, transparent 28%),
        radial-gradient(ellipse at 31% 100%, #22c55e 0 35%, transparent 36%),
        radial-gradient(ellipse at 57% 100%, #4ade80 0 31%, transparent 32%),
        radial-gradient(ellipse at 82% 100%, #16a34a 0 38%, transparent 39%),
        radial-gradient(ellipse at 98% 100%, #22c55e 0 28%, transparent 29%);
      filter: blur(0.2px) drop-shadow(0 10px 10px rgba(22,101,52,0.08));
    }

    #outdoor-light-dashboard .outdoor-scene-caption {
      position: absolute;
      z-index: 5;
      left: 22px;
      top: 20px;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      padding: 10px 14px;
      border: 1px solid rgba(255,255,255,0.92);
      border-radius: 999px;
      background: rgba(255,255,255,0.72);
      color: #0f172a;
      box-shadow: 0 12px 28px rgba(15,23,42,0.10);
      backdrop-filter: blur(12px);
      font-size: 12px;
      font-weight: 950;
      letter-spacing: 0.15px;
    }

    #outdoor-light-dashboard .outdoor-scene-caption::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 999px;
      background: #22c55e;
      box-shadow: 0 0 0 5px rgba(34,197,94,0.14);
    }

    #outdoor-light-dashboard .outdoor-field-lines {
      position: absolute;
      z-index: 1;
      left: 2%;
      right: 2%;
      bottom: 10px;
      height: 250px;
      pointer-events: none;
      opacity: 0.42;
      transform: perspective(600px) rotateX(63deg);
      transform-origin: bottom center;
      background: repeating-linear-gradient(90deg, transparent 0 78px, rgba(255,255,255,0.34) 79px 81px);
      mask-image: linear-gradient(180deg, transparent 0%, #000 38%, #000 100%);
    }

    #outdoor-light-dashboard .plant-zone-grid {
      z-index: 3;
      left: 24px;
      right: 24px;
      bottom: 30px;
      gap: 20px;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      transform-style: preserve-3d;
    }

    #outdoor-light-dashboard .plant-zone {
      min-height: 248px;
      padding: 14px 14px 16px;
      overflow: visible;
      border: 1px solid rgba(255,255,255,0.78);
      border-radius: 25px;
      transform-style: preserve-3d;
      transform: translateZ(0) rotateX(0.6deg);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(240,253,244,0.83)),
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.92), transparent 56%);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.96),
        inset 0 -18px 30px rgba(22,163,74,0.05),
        0 20px 30px rgba(15,23,42,0.14),
        0 5px 0 rgba(22,101,52,0.14);
      backdrop-filter: blur(12px);
      transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease;
    }

    #outdoor-light-dashboard .plant-zone::before {
      content: "";
      position: absolute;
      inset: 1px;
      z-index: -1;
      border-radius: 24px;
      pointer-events: none;
      background:
        linear-gradient(125deg, rgba(255,255,255,0.54), transparent 32%),
        radial-gradient(circle at 50% 28%, rgba(255,255,255,0.38), transparent 46%);
    }

    #outdoor-light-dashboard .plant-zone::after {
      content: "";
      position: absolute;
      z-index: -2;
      left: 14px;
      right: 14px;
      bottom: -13px;
      height: 28px;
      border-radius: 50%;
      background: rgba(15,23,42,0.18);
      filter: blur(10px);
      transform: translateZ(-20px);
      opacity: 0.72;
    }

    #outdoor-light-dashboard .plant-zone:hover {
      transform: translateY(-7px) rotateX(1.5deg) rotateY(-0.7deg);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -18px 32px rgba(22,163,74,0.07),
        0 30px 42px rgba(15,23,42,0.18),
        0 6px 0 rgba(22,101,52,0.14);
    }

    #outdoor-light-dashboard .plant-zone.on {
      border-color: rgba(250,204,21,0.82);
      background:
        radial-gradient(circle at 50% 24%, rgba(254,240,138,0.46), transparent 38%),
        linear-gradient(180deg, rgba(255,254,235,0.93), rgba(240,253,244,0.88));
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        inset 0 -20px 34px rgba(250,204,21,0.05),
        0 0 0 3px rgba(250,204,21,0.15),
        0 28px 44px rgba(146,64,14,0.17),
        0 6px 0 rgba(161,98,7,0.18);
    }

    #outdoor-light-dashboard .zone-scene-index {
      left: 12px;
      top: 12px;
      min-width: 46px;
      padding: 7px 12px;
      border: 1px solid rgba(255,255,255,0.70);
      background: linear-gradient(145deg, #1e293b, #020617);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 9px 16px rgba(15,23,42,0.30),
        0 2px 0 rgba(2,6,23,0.82);
      font-size: 14px;
    }

    #outdoor-light-dashboard .plant-zone.on .zone-scene-index {
      background: linear-gradient(145deg, #fde047, #f59e0b);
      color: #422006;
      border-color: rgba(255,247,170,0.90);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.58),
        0 0 26px rgba(250,204,21,0.72),
        0 8px 16px rgba(120,53,15,0.26),
        0 2px 0 rgba(146,64,14,0.65);
    }

    #outdoor-light-dashboard .plant-zone-status {
      right: 12px;
      top: 12px;
      min-width: 60px;
      padding: 6px 10px;
      border: 1px solid rgba(148,163,184,0.20);
      background: linear-gradient(180deg, rgba(248,250,252,0.95), rgba(226,232,240,0.92));
      color: #475569;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.92), 0 6px 12px rgba(15,23,42,0.08);
      text-align: center;
    }

    #outdoor-light-dashboard .plant-zone.on .plant-zone-status {
      border-color: rgba(250,204,21,0.42);
      background: linear-gradient(180deg, #fff9cf, #fef3c7);
      color: #92400e;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.94), 0 0 16px rgba(250,204,21,0.24);
    }

    #outdoor-light-dashboard .zone-light-system {
  position: relative;
  width: 112px;
  height: 130px;
  margin: 26px auto -22px;
  z-index: 3;
  flex: 0 0 auto;
  transform-style: preserve-3d;
  overflow: visible;
  transform: translateY(18px);
}

    #outdoor-light-dashboard .zone-light-system::before {
      content: "";
      position: absolute;
      z-index: 1;
      left: 50%;
      bottom: -30px;
      width: 6px;
      height: 34px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, #334155 0%, #cbd5e1 42%, #64748b 66%, #1e293b 100%);
      box-shadow: 3px 5px 7px rgba(15,23,42,0.18);
    }

    #outdoor-light-dashboard .zone-light-system::after {
      content: "";
      position: absolute;
      z-index: 2;
      left: 50%;
      bottom: -33px;
      width: 20px;
      height: 7px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(180deg, #64748b, #0f172a);
      box-shadow: 0 4px 7px rgba(15,23,42,0.22);
    }

    #outdoor-light-dashboard .light-cone {
      position: absolute;
      z-index: 0;
      left: 50%;
      top: 35px;
      width: 154px;
      height: 112px;
      transform: translateX(-50%);
      clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
      background: linear-gradient(180deg, rgba(254,240,138,0.54), rgba(253,224,71,0.10) 68%, transparent 100%);
      filter: blur(1px);
      opacity: 0;
      pointer-events: none;
      transform-origin: top center;
    }

    #outdoor-light-dashboard .plant-zone.on .light-cone {
      opacity: 1;
      animation: outdoorConePulse 2.2s ease-in-out infinite;
    }

    #outdoor-light-dashboard .lamp-head {
      position: absolute;
      z-index: 4;
      left: 50%;
      top: 4px;
      width: 62px;
      height: 34px;
      transform: translateX(-50%) rotateX(9deg);
      border-radius: 50% 50% 38% 38% / 65% 65% 35% 35%;
      background: linear-gradient(180deg, #64748b 0%, #334155 48%, #0f172a 100%);
      box-shadow:
        inset 0 3px 4px rgba(255,255,255,0.32),
        inset 0 -5px 7px rgba(2,6,23,0.42),
        0 9px 16px rgba(15,23,42,0.25);
    }

    #outdoor-light-dashboard .lamp-head::before {
      content: "";
      position: absolute;
      left: 9px;
      right: 9px;
      bottom: -7px;
      height: 15px;
      border-radius: 50%;
      background: radial-gradient(circle, #cbd5e1 0 30%, #94a3b8 58%, #475569 100%);
      box-shadow: inset 0 1px 2px rgba(255,255,255,0.64);
    }

    #outdoor-light-dashboard .plant-zone.on .lamp-head::before {
      background: radial-gradient(circle, #fffde7 0 18%, #fef08a 36%, #fde047 65%, #f59e0b 100%);
      box-shadow:
        0 0 16px rgba(253,224,71,0.95),
        0 0 34px rgba(250,204,21,0.72),
        inset 0 1px 3px rgba(255,255,255,0.90);
    }

    #outdoor-light-dashboard .lamp-cap {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 33px;
      width: 12px;
      height: 12px;
      transform: translateX(-50%);
      border-radius: 3px;
      background: linear-gradient(90deg, #475569, #cbd5e1 48%, #334155);
    }

    #outdoor-light-dashboard .lamp-pole {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 42px;
      width: 8px;
      height: 78px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, #334155 0%, #cbd5e1 42%, #64748b 66%, #1e293b 100%);
      box-shadow: 4px 7px 8px rgba(15,23,42,0.20);
    }

    #outdoor-light-dashboard .lamp-base {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: 4px;
      width: 30px;
      height: 10px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: linear-gradient(180deg, #64748b, #0f172a);
      box-shadow: 0 5px 8px rgba(15,23,42,0.28);
    }

    #outdoor-light-dashboard .zone-crop-row {
      position: relative;
      z-index: 4;
      width: calc(100% - 28px);
      height: 58px;
      margin: 6px auto 0;
      display: grid;
      grid-template-columns: 1fr 1fr 74px 1fr 1fr;
      justify-items: center;
      align-items: end;
      column-gap: 4px;
      transform: translateZ(16px);
    }

    #outdoor-light-dashboard .crop-gap {
      width: 74px;
      height: 100%;
      pointer-events: none;
    }

    #outdoor-light-dashboard .mini-plant {
      position: relative;
      width: 34px;
      height: 54px;
      transform-origin: 50% 100%;
      filter: drop-shadow(0 5px 4px rgba(22,101,52,0.18));
      animation: outdoorPlantSway 3.6s ease-in-out infinite alternate;
    }

    #outdoor-light-dashboard .mini-plant:nth-child(2) { animation-delay: -1.2s; transform: scale(1.08); }
    #outdoor-light-dashboard .mini-plant:nth-child(3) { animation-delay: -2.1s; transform: scale(0.96); }
    #outdoor-light-dashboard .mini-plant:nth-child(4) { animation-delay: -0.5s; transform: scale(1.04); }
    #outdoor-light-dashboard .mini-plant:nth-child(5) { animation-delay: -2.7s; transform: scale(0.92); }

    #outdoor-light-dashboard .mini-plant-stem {
      position: absolute;
      left: 50%;
      bottom: 12px;
      width: 4px;
      height: 23px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: linear-gradient(90deg, #166534, #4ade80 48%, #15803d);
      z-index: 2;
    }

    #outdoor-light-dashboard .mini-leaf {
      position: absolute;
      width: 17px;
      height: 11px;
      border: 1px solid rgba(20,83,45,0.42);
      background: linear-gradient(145deg, #bef264 0%, #65a30d 68%, #3f6212 100%);
      box-shadow: inset 2px 2px 3px rgba(255,255,255,0.26);
      z-index: 3;
    }

    #outdoor-light-dashboard .mini-leaf.left {
      left: 1px;
      top: 15px;
      border-radius: 100% 12% 100% 12%;
      transform: rotate(-24deg);
    }

    #outdoor-light-dashboard .mini-leaf.right {
      right: 1px;
      top: 13px;
      border-radius: 12% 100% 12% 100%;
      transform: rotate(24deg);
    }

    #outdoor-light-dashboard .mini-leaf.top {
      left: 50%;
      top: 4px;
      width: 15px;
      height: 15px;
      transform: translateX(-50%) rotate(45deg);
      border-radius: 78% 22% 78% 22%;
      background: linear-gradient(145deg, #d9f99d, #84cc16 65%, #4d7c0f);
    }

    #outdoor-light-dashboard .mini-pot {
      position: absolute;
      left: 50%;
      bottom: -8px;
      width: 24px;
      height: 14px;
      transform: translateX(-50%);
      border-radius: 4px 4px 9px 9px;
      background: linear-gradient(180deg, #d97706 0%, #b45309 54%, #7c2d12 100%);
      box-shadow: inset 0 2px 2px rgba(255,255,255,0.20), 0 3px 6px rgba(67,20,7,0.26);
      z-index: 1;
    }

    #outdoor-light-dashboard .mini-pot::before {
      content: "";
      position: absolute;
      left: -2px;
      right: -2px;
      top: -4px;
      height: 6px;
      border-radius: 999px;
      background: linear-gradient(180deg, #f59e0b, #c2410c);
      box-shadow: inset 0 1px 1px rgba(255,255,255,0.20);
    }

    #outdoor-light-dashboard .mini-pot::after {
      content: "";
      position: absolute;
      left: 3px;
      right: 3px;
      top: 1px;
      height: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, #6b3f24, #3f1f10);
      opacity: 0.8;
    }

    #outdoor-light-dashboard .plant-zone.on .mini-leaf {
      filter: saturate(1.14) brightness(1.08);
    }

    #outdoor-light-dashboard .plant-bed {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 42px;
      margin: 0;
      overflow: visible;
      border-radius: 15px 15px 20px 20px;
      transform: perspective(270px) rotateX(16deg) translateZ(8px);
      transform-origin: center bottom;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 2px, transparent 2px 34px),
        linear-gradient(180deg, #9a3412 0%, #7c2d12 44%, #431407 100%);
      box-shadow:
        inset 0 4px 5px rgba(255,255,255,0.18),
        inset 0 -7px 10px rgba(67,20,7,0.46),
        0 11px 14px rgba(67,20,7,0.30),
        0 4px 0 #3f1608;
    }

    #outdoor-light-dashboard .plant-bed::before {
      left: 10px;
      right: 10px;
      top: 6px;
      height: 8px;
      background: linear-gradient(180deg, rgba(254,215,170,0.35), rgba(154,52,18,0.10));
      box-shadow: 0 8px 0 rgba(67,20,7,0.13), 0 16px 0 rgba(67,20,7,0.11);
    }

    #outdoor-light-dashboard .plant-bed::after {
      content: "";
      position: absolute;
      left: 8%;
      right: 8%;
      bottom: -11px;
      height: 16px;
      border-radius: 0 0 45% 45%;
      background: linear-gradient(180deg, #5b210b, #2b1006);
      box-shadow: 0 7px 12px rgba(67,20,7,0.26);
      transform: translateZ(-5px);
    }

    #outdoor-light-dashboard .plant-zone.on .plant-bed {
      box-shadow:
        inset 0 4px 5px rgba(255,255,255,0.20),
        inset 0 -7px 10px rgba(67,20,7,0.46),
        0 0 22px rgba(250,204,21,0.20),
        0 11px 14px rgba(67,20,7,0.30),
        0 4px 0 #3f1608;
    }

    #outdoor-light-dashboard .zone-status-summary {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      margin-top: 18px;
    }

    #outdoor-light-dashboard .zone-summary-card {
      position: relative;
      overflow: hidden;
      min-height: 104px;
      padding: 18px 20px;
      border: 1px solid rgba(203,213,225,0.80);
      border-radius: 21px;
      background:
        radial-gradient(circle at 90% 12%, rgba(59,130,246,0.16), transparent 34%),
        linear-gradient(145deg, #ffffff, #f8fafc);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,1),
        0 13px 26px rgba(15,23,42,0.09),
        0 3px 0 rgba(148,163,184,0.15);
    }

    #outdoor-light-dashboard .zone-summary-card::after {
      content: "";
      position: absolute;
      right: -20px;
      bottom: -32px;
      width: 116px;
      height: 116px;
      border-radius: 50%;
      background: rgba(37,99,235,0.07);
    }

    #outdoor-light-dashboard .zone-summary-card:first-child {
      background:
        radial-gradient(circle at 90% 12%, rgba(34,197,94,0.20), transparent 36%),
        linear-gradient(145deg, #ffffff, #f0fdf4);
      border-color: rgba(134,239,172,0.72);
    }

    #outdoor-light-dashboard .zone-summary-card:last-child {
      background:
        radial-gradient(circle at 90% 12%, rgba(148,163,184,0.18), transparent 36%),
        linear-gradient(145deg, #ffffff, #f8fafc);
    }

    #outdoor-light-dashboard .zone-summary-label {
      position: relative;
      z-index: 1;
      color: #64748b;
      font-size: 12px;
      font-weight: 950;
    }

    #outdoor-light-dashboard .zone-summary-value {
      position: relative;
      z-index: 1;
      margin-top: 7px;
      font-size: 36px;
      line-height: 1;
      letter-spacing: -1px;
      text-shadow: 0 2px 0 rgba(255,255,255,0.74);
    }

    @keyframes outdoorSunFloat {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(5px) scale(1.025); }
    }

    @keyframes outdoorCloudDrift {
      0% { transform: translateX(-8px); }
      100% { transform: translateX(24px); }
    }

    @keyframes outdoorConePulse {
      0%, 100% { opacity: 0.70; transform: translateX(-50%) scaleX(0.94); }
      50% { opacity: 1; transform: translateX(-50%) scaleX(1.04); }
    }

    @keyframes outdoorPlantSway {
      0% { rotate: -1.5deg; }
      100% { rotate: 1.5deg; }
    }

    @media (max-width: 1200px) {
      #outdoor-light-dashboard .outdoor-scene {
        min-height: 850px;
      }

      #outdoor-light-dashboard .plant-zone-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 760px) {
      #outdoor-light-dashboard .light-animation-panel {
        padding: 14px;
      }

      #outdoor-light-dashboard .outdoor-scene {
        min-height: 0 !important;
        height: auto !important;
        padding: 78px 12px 24px !important;
        overflow: hidden;
        border-radius: 23px;
      }

      #outdoor-light-dashboard .outdoor-scene-sun {
        display: block !important;
        width: 62px;
        height: 62px;
        right: 16px;
        top: 13px;
      }

      #outdoor-light-dashboard .outdoor-scene-clouds {
        display: block !important;
        transform: scale(0.66);
        transform-origin: left top;
        left: 4px;
        top: 5px;
        right: auto;
        width: 300px;
      }

      #outdoor-light-dashboard .outdoor-scene-caption {
        left: 14px;
        top: 15px;
        max-width: calc(100% - 100px);
        padding: 8px 11px;
        font-size: 10px;
      }

      #outdoor-light-dashboard .outdoor-horizon,
      #outdoor-light-dashboard .outdoor-field-lines {
        opacity: 0.24;
      }

      #outdoor-light-dashboard .plant-zone-grid {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: auto !important;
        gap: 15px 11px !important;
      }

      #outdoor-light-dashboard .plant-zone {
        min-height: 226px !important;
        padding: 12px 10px 14px;
        border-radius: 20px;
      }

      #outdoor-light-dashboard .zone-light-system {
        transform: scale(0.88);
        margin-top: 26px;
        margin-bottom: -9px;
      }

      #outdoor-light-dashboard .zone-crop-row {
        width: calc(100% - 8px);
      }


      #outdoor-light-dashboard .zone-summary-value {
        font-size: 31px;
      }
    }

    @media (max-width: 520px) {
      #outdoor-light-dashboard .plant-zone-grid {
        grid-template-columns: 1fr !important;
      }

      #outdoor-light-dashboard .plant-zone {
        min-height: 238px !important;
      }

      #outdoor-light-dashboard .zone-status-summary {
        grid-template-columns: 1fr;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #outdoor-light-dashboard .outdoor-scene-sun,
      #outdoor-light-dashboard .outdoor-scene-clouds,
      #outdoor-light-dashboard .plant-zone.on .light-cone,
      #outdoor-light-dashboard .mini-plant {
        animation: none !important;
      }
    }

  
    /* =========================================================
       Sidebar behavior update
       Desktop with mouse: collapsed rail, expands while hovered.
       iPad: floating toggle remains visible while page scrolls.
    ========================================================= */

    /* Desktop / notebook with a real mouse: the menu stays as a compact
       icon rail and opens over the page when the pointer enters it. */
    @media (min-width: 851px) and (hover: hover) and (pointer: fine) {
      .sidebar-toggle {
        display: none !important;
      }

      body.sidebar-collapsed.sidebar-hover-open .sidebar {
        width: var(--sidebar-expanded-width);
        box-shadow: 14px 0 38px rgba(15, 23, 42, 0.30);
      }

      /* Keep the page at the compact-rail offset while the menu floats open. */
      body.sidebar-collapsed.sidebar-hover-open .main {
        margin-left: var(--sidebar-collapsed-width);
        width: calc(100% - var(--sidebar-collapsed-width));
      }

      body.sidebar-collapsed.sidebar-hover-open .brand {
        padding: 24px 18px 20px;
      }

      body.sidebar-collapsed.sidebar-hover-open .logo-box {
        width: 112px;
        height: 112px;
        margin: 0 auto 14px;
        padding: 9px;
        border-radius: 24px;
      }

      body.sidebar-collapsed.sidebar-hover-open .brand-title,
      body.sidebar-collapsed.sidebar-hover-open .brand-subtitle,
      body.sidebar-collapsed.sidebar-hover-open .nav-title,
      body.sidebar-collapsed.sidebar-hover-open .nav-button > span:not(.nav-icon) {
        display: initial !important;
      }

      body.sidebar-collapsed.sidebar-hover-open .brand-chip {
        display: inline-flex !important;
      }

      body.sidebar-collapsed.sidebar-hover-open .nav {
        padding: 16px 14px 24px;
      }

      body.sidebar-collapsed.sidebar-hover-open .nav-button {
        justify-content: flex-start;
        padding: 12px;
        gap: 10px;
      }

      body.sidebar-collapsed.sidebar-hover-open .nav-button:hover {
        transform: translateX(2px);
      }
    }

    /* iPad / touch tablet: floating collapse/expand arrow */
@supports (-webkit-touch-callout: none) {
  @media (min-width: 621px) and (max-width: 1366px) {
    .topbar-heading {
      padding-left: 0;
    }

    body.ipad-sidebar-toggle-floating .sidebar-toggle {
      position: fixed !important;
      top: calc(108px + env(safe-area-inset-top, 0px)) !important;
      right: auto !important;
      z-index: 1105 !important;
      margin: 0 !important;
      transform: none !important;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18) !important;
      transition:
        left 0.26s ease,
        transform 0.18s ease,
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease !important;
    }
  }

  /* iPad portrait */
  @media (min-width: 621px) and (max-width: 850px) {
    body.ipad-sidebar-toggle-floating .sidebar-toggle {
      left: 104px !important;
    }

    body.sidebar-mobile-open.ipad-sidebar-toggle-floating .sidebar-toggle {
      left: calc(min(292px, 86vw) - 24px) !important;
      color: #ffffff;
      background: rgba(15, 23, 42, 0.92);
      border-color: rgba(255,255,255,0.24);
    }
  }

  /* iPad landscape */
  @media (min-width: 851px) and (max-width: 1366px) {
    body.ipad-sidebar-toggle-floating .sidebar-toggle {
      left: calc(var(--sidebar-expanded-width) - 8px) !important;
    }

    body.sidebar-collapsed.ipad-sidebar-toggle-floating .sidebar-toggle {
      left: calc(var(--sidebar-collapsed-width) + 8px) !important;
    }
  }
}

  

    /* Current EVAP environment shown directly below 2) Live Status. */
    .curtain-env-live-block {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #e2e8f0;
    }

    .curtain-env-live-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }

    .curtain-env-live-title {
      margin: 0;
      color: #0f172a;
      font-size: 17px;
      font-weight: 950;
    }

    .curtain-env-live-desc {
      margin: 5px 0 0;
      color: #64748b;
      font-size: 12px;
      line-height: 1.45;
    }

    .curtain-env-live-block .curtain-summary-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .curtain-env-live-block .curtain-mini-card {
      padding: 13px;
      min-width: 0;
    }

    .curtain-env-live-block .curtain-mini-value {
      font-size: 24px;
    }

    @media (max-width: 700px) {
      .curtain-env-live-head {
        flex-direction: column;
      }

      .curtain-env-live-block .curtain-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      }
    }

    @media (max-width: 430px) {
      .curtain-env-live-block .curtain-summary-grid {
        grid-template-columns: 1fr !important;
      }
    }


    /* =========================================================
       Floating System Activity & Notification Center
       - Collapsed launcher similar to a social notification button
       - Expanded panel shows equipment currently running and upcoming schedules
    ========================================================= */
    .system-activity-center {
      position: fixed;
      right: 20px;
      bottom: 22px;
      z-index: 60;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 12px;
      pointer-events: none;
    }

    .system-activity-launcher,
    .system-activity-panel {
      pointer-events: auto;
    }

    .system-activity-launcher {
      position: relative;
      width: 66px;
      height: 66px;
      border: 1px solid rgba(191, 219, 254, 0.92);
      border-radius: 21px;
      background:
        radial-gradient(circle at 78% 18%, rgba(34,197,94,0.16), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,0.99), rgba(239,246,255,0.97));
      color: #2563eb;
      box-shadow:
        0 18px 38px rgba(15,23,42,0.18),
        inset 0 1px 0 rgba(255,255,255,0.96);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }

    .system-activity-launcher:hover {
      transform: translateY(-2px);
      border-color: #60a5fa;
      box-shadow: 0 22px 46px rgba(37,99,235,0.22), inset 0 1px 0 rgba(255,255,255,1);
    }

    .system-activity-launcher:active { transform: translateY(0) scale(.98); }

    .system-activity-launcher svg {
      width: 34px;
      height: 34px;
      display: block;
      overflow: visible;
    }

    .system-activity-live-dot {
      position: absolute;
      right: 7px;
      top: 7px;
      width: 12px;
      height: 12px;
      border-radius: 999px;
      background: #22c55e;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 4px rgba(34,197,94,0.15);
    }

    .system-activity-center.has-running .system-activity-live-dot {
      animation: systemActivityPulse 1.45s ease-in-out infinite;
    }

    .system-activity-center.is-offline .system-activity-live-dot {
      background: #94a3b8;
      box-shadow: 0 0 0 4px rgba(148,163,184,0.15);
      animation: none;
    }

    .system-activity-count {
      position: absolute;
      left: -7px;
      top: -7px;
      min-width: 24px;
      height: 24px;
      padding: 0 7px;
      border-radius: 999px;
      display: none;
      place-items: center;
      background: #ef4444;
      color: #ffffff;
      border: 2px solid #ffffff;
      box-shadow: 0 8px 18px rgba(239,68,68,0.28);
      font-size: 11px;
      line-height: 1;
      font-weight: 950;
    }

    .system-activity-count.visible { display: grid; }

    .system-activity-chevron {
      position: absolute;
      bottom: 3px;
      left: 50%;
      transform: translateX(-50%);
      color: #64748b;
      font-size: 10px;
      font-weight: 950;
      transition: transform .2s ease;
    }

    .system-activity-center.open .system-activity-chevron {
      transform: translateX(-50%) rotate(180deg);
    }

    .system-activity-panel {
      width: min(410px, calc(100vw - 30px));
      max-height: min(680px, calc(100vh - 120px));
      overflow: hidden;
      border: 1px solid rgba(203,213,225,0.92);
      border-radius: 26px;
      background: rgba(255,255,255,0.97);
      backdrop-filter: blur(18px);
      box-shadow:
        0 28px 72px rgba(15,23,42,0.24),
        inset 0 1px 0 rgba(255,255,255,0.98);
      transform-origin: bottom right;
      transform: translateY(12px) scale(.96);
      opacity: 0;
      visibility: hidden;
      transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    }

    .system-activity-center.open .system-activity-panel {
      transform: translateY(0) scale(1);
      opacity: 1;
      visibility: visible;
    }

    .system-activity-head {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      padding: 18px 18px 15px;
      background:
        radial-gradient(circle at 92% 0%, rgba(37,99,235,0.16), transparent 40%),
        linear-gradient(180deg, rgba(248,250,252,0.99), rgba(255,255,255,0.96));
      border-bottom: 1px solid #e2e8f0;
    }

    .system-activity-title-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .system-activity-head-icon {
      width: 38px;
      height: 38px;
      border-radius: 14px;
      display: grid;
      place-items: center;
      color: #1d4ed8;
      background: #dbeafe;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.12);
      font-size: 19px;
    }

    .system-activity-title {
      margin: 0;
      color: #0f172a;
      font-size: 17px;
      font-weight: 950;
      letter-spacing: -.2px;
    }

    .system-activity-subtitle {
      margin-top: 4px;
      color: #64748b;
      font-size: 11px;
      font-weight: 750;
    }

    .system-activity-collapse-btn {
      width: 34px;
      height: 34px;
      border: 1px solid #dbe3ef;
      border-radius: 12px;
      background: #ffffff;
      color: #475569;
      cursor: pointer;
      display: grid;
      place-items: center;
      font-size: 17px;
      font-weight: 950;
    }

    .system-activity-summary {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 9px;
      padding: 13px 16px 4px;
    }

    .system-activity-summary-card {
      border: 1px solid #e2e8f0;
      border-radius: 15px;
      background: #f8fafc;
      padding: 10px 11px;
    }

    .system-activity-summary-card.running {
      border-color: #bbf7d0;
      background: #f0fdf4;
    }

    .system-activity-summary-card.upcoming {
      border-color: #bfdbfe;
      background: #eff6ff;
    }

    .system-activity-summary-label {
      color: #64748b;
      font-size: 10px;
      font-weight: 900;
      margin-bottom: 3px;
    }

    .system-activity-summary-value {
      color: #0f172a;
      font-size: 21px;
      line-height: 1;
      font-weight: 950;
    }

    .system-activity-scroll {
      max-height: calc(min(680px, 100vh - 120px) - 150px);
      overflow-y: auto;
      padding: 9px 12px 15px;
      scrollbar-width: thin;
    }

    .system-activity-section { margin-top: 9px; }

    .system-activity-section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 4px 5px 8px;
      color: #334155;
      font-size: 12px;
      font-weight: 950;
    }

    .system-activity-section-count {
      min-width: 24px;
      padding: 4px 7px;
      border-radius: 999px;
      background: #e2e8f0;
      color: #475569;
      text-align: center;
      font-size: 10px;
      font-weight: 950;
    }

    .system-activity-list { display: grid; gap: 8px; }

    .system-activity-item {
      width: 100%;
      border: 1px solid #e2e8f0;
      border-radius: 17px;
      padding: 11px;
      background: #ffffff;
      display: grid;
      grid-template-columns: 38px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      text-align: left;
      cursor: pointer;
      box-shadow: 0 7px 18px rgba(15,23,42,0.05);
      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
    }

    .system-activity-item:hover {
      transform: translateY(-1px);
      border-color: #93c5fd;
      box-shadow: 0 10px 24px rgba(37,99,235,0.10);
    }

    .system-activity-item.running {
      border-color: #bbf7d0;
      background: linear-gradient(135deg, #f0fdf4, #ffffff 64%);
    }

    .system-activity-item.soon {
      border-color: #fde68a;
      background: linear-gradient(135deg, #fffbeb, #ffffff 66%);
    }

    .system-activity-item-icon {
      width: 38px;
      height: 38px;
      border-radius: 13px;
      display: grid;
      place-items: center;
      background: #eff6ff;
      color: #2563eb;
      font-size: 19px;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,0.10);
    }

    .system-activity-item.running .system-activity-item-icon {
      background: #dcfce7;
      color: #15803d;
    }

    .system-activity-item.soon .system-activity-item-icon {
      background: #fef3c7;
      color: #b45309;
    }

    .system-activity-item-main { min-width: 0; }

    .system-activity-item-title {
      color: #0f172a;
      font-size: 12px;
      line-height: 1.35;
      font-weight: 950;
    }

    .system-activity-item-detail {
      margin-top: 3px;
      color: #64748b;
      font-size: 10px;
      line-height: 1.45;
      font-weight: 700;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .system-activity-item-time {
      min-width: 68px;
      color: #334155;
      text-align: right;
      font-size: 10px;
      line-height: 1.35;
      font-weight: 950;
      white-space: nowrap;
    }

    .system-activity-item-time strong {
      display: block;
      color: #1d4ed8;
      font-size: 11px;
    }

    .system-activity-empty {
      border: 1px dashed #cbd5e1;
      border-radius: 16px;
      padding: 15px;
      background: #f8fafc;
      color: #64748b;
      text-align: center;
      font-size: 11px;
      line-height: 1.5;
      font-weight: 750;
    }

    .system-activity-footer {
      margin-top: 10px;
      padding: 9px 10px;
      border-radius: 14px;
      background: #f1f5f9;
      color: #64748b;
      font-size: 10px;
      line-height: 1.45;
      text-align: center;
      font-weight: 750;
    }

    @keyframes systemActivityPulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(.78); opacity: .62; }
    }

    @media (max-width: 620px) {
      .system-activity-center {
        right: 12px;
        bottom: 12px;
      }
      .system-activity-launcher {
        width: 60px;
        height: 60px;
        border-radius: 19px;
      }
      .system-activity-panel {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 92px);
        border-radius: 22px;
      }
      .system-activity-scroll {
        max-height: calc(100vh - 245px);
      }
    }

  

    /* =========================================================
       Light / Dark website theme toggle
       The choice is saved in localStorage per browser/device.
    ========================================================= */
    .theme-toggle-btn {
      position: relative;
      width: 72px;
      height: 72px;
      min-width: 72px;
      min-height: 72px;
      padding: 0;
      border: 1px solid #dbe3ef;
      border-radius: 16px;
      background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.96), transparent 34%),
        linear-gradient(145deg, #fff7ed, #ffffff);
      color: #d97706;
      box-shadow: 0 8px 20px rgba(15,23,42,.08);
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
      overflow: hidden;
      flex: 0 0 72px;
    }

    .theme-toggle-btn:hover {
      transform: translateY(-1px);
      border-color: #fbbf24;
      box-shadow: 0 12px 24px rgba(217,119,6,.16);
      background: linear-gradient(145deg, #ffedd5, #ffffff);
    }

    .theme-toggle-btn:focus-visible {
      outline: 3px solid rgba(245,158,11,.24);
      outline-offset: 2px;
    }

    .theme-toggle-icon {
      width: 35px;
      height: 35px;
      display: grid;
      place-items: center;
      transform: translateY(-4px);
    }

    .theme-toggle-icon svg {
      width: 35px;
      height: 35px;
      display: block;
    }

    .theme-icon-sun,
    .theme-icon-moon {
      grid-area: 1 / 1;
      transition: opacity .2s ease, transform .25s ease;
    }

    html[data-theme="light"] .theme-icon-sun {
      opacity: 0;
      transform: scale(.65) rotate(-25deg);
    }

    html[data-theme="light"] .theme-icon-moon {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    html[data-theme="dark"] .theme-icon-sun {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }

    html[data-theme="dark"] .theme-icon-moon {
      opacity: 0;
      transform: scale(.65) rotate(25deg);
    }

    .theme-toggle-label {
      position: absolute;
      left: 6px;
      right: 6px;
      bottom: 6px;
      color: #92400e;
      font-size: 10px;
      font-weight: 950;
      line-height: 1;
      text-align: center;
      white-space: nowrap;
    }

    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #07111f;
      --panel: #0f172a;
      --line: #253247;
      --text: #e5eefb;
      --muted: #94a3b8;
      --card-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
    }

    html[data-theme="dark"] body {
      background:
        radial-gradient(circle at top left, rgba(30,64,175,.22) 0, transparent 29%),
        radial-gradient(circle at 82% 8%, rgba(8,145,178,.13) 0, transparent 26%),
        #07111f;
      color: #e5eefb;
    }

    html[data-theme="dark"] .topbar {
      background: rgba(8, 15, 28, .90);
      border-bottom-color: #243247;
      box-shadow: 0 8px 28px rgba(0,0,0,.18);
    }

    html[data-theme="dark"] .topbar h1,
    html[data-theme="dark"] .section h2,
    html[data-theme="dark"] .section h3,
    html[data-theme="dark"] .section h4,
    html[data-theme="dark"] .sensor-chart-head h3,
    html[data-theme="dark"] .chart-title,
    html[data-theme="dark"] .summary-value,
    html[data-theme="dark"] .sensor-title,
    html[data-theme="dark"] .sensor-value,
    html[data-theme="dark"] .status-value,
    html[data-theme="dark"] .curtain-panel-title,
    html[data-theme="dark"] .curtain-mini-value,
    html[data-theme="dark"] .zone-panel-title,
    html[data-theme="dark"] .zone-title,
    html[data-theme="dark"] .zone-summary-value,
    html[data-theme="dark"] .export-card h3,
    html[data-theme="dark"] .recording-card h3,
    html[data-theme="dark"] .system-activity-title,
    html[data-theme="dark"] .auth-user-name {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] .topbar p,
    html[data-theme="dark"] .section-desc,
    html[data-theme="dark"] .summary-title,
    html[data-theme="dark"] .summary-sub,
    html[data-theme="dark"] .sensor-label,
    html[data-theme="dark"] .status-label,
    html[data-theme="dark"] .curtain-panel-desc,
    html[data-theme="dark"] .curtain-mini-label,
    html[data-theme="dark"] .zone-panel-desc,
    html[data-theme="dark"] .zone-summary-label,
    html[data-theme="dark"] .export-card p,
    html[data-theme="dark"] .recording-card p,
    html[data-theme="dark"] .system-activity-subtitle,
    html[data-theme="dark"] .auth-user-role,
    html[data-theme="dark"] footer {
      color: #94a3b8 !important;
    }

    html[data-theme="dark"] :is(
      .section,
      .summary-card,
      .sensor-card,
      .status-card,
      .control-card,
      .sensor-chart-board,
      .chart-card,
      .light-history-strip,
      .curtain-panel,
      .curtain-mini-card,
      .curtain-chart-wrap,
      .history-table-wrap,
      .zone-panel,
      .zone-card,
      .zone-summary-card,
      .fert-manual-card,
      .export-card,
      .recording-card,
      .recording-indicator,
      .evap-map-panel,
      .net-map-panel,
      .nursery-map-panel,
      .greenhouse-block,
      .system-activity-panel,
      .auth-user-card,
      .export-sheet-item,
      .history-empty,
      .empty-state
    ) {
      background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(10,20,36,.97)) !important;
      border-color: #26354a !important;
      box-shadow: 0 14px 32px rgba(0,0,0,.24) !important;
    }

    html[data-theme="dark"] :is(
      .sensor-item,
      .status-row,
      .curtain-feedback,
      .zone-rule-text,
      .fert-schedule-note,
      .recording-meta,
      .export-status,
      .system-activity-empty,
      .quick-status-card
    ) {
      background: #111d30 !important;
      border-color: #2a3a50 !important;
      color: #cbd5e1 !important;
    }

    html[data-theme="dark"] :is(
      input,
      select,
      textarea,
      .rule-field input,
      .rule-field select,
      .zone-rule-field input,
      .zone-rule-field select,
      .fert-schedule-table input,
      .fert-schedule-table select,
      .export-field input[type="date"],
      .fert-manual-duration
    ) {
      background: #0b1526 !important;
      color: #f8fafc !important;
      border-color: #33465f !important;
    }

    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
      color: #64748b;
    }

    html[data-theme="dark"] :is(
      .history-table,
      .fert-schedule-table,
      .recording-table,
      .user-table
    ) {
      background: #0b1526 !important;
      color: #e2e8f0 !important;
    }

    html[data-theme="dark"] :is(
      .history-table th,
      .fert-schedule-table th,
      .recording-table th,
      .user-table th
    ) {
      background: #162238 !important;
      color: #cbd5e1 !important;
      border-bottom-color: #2a3a50 !important;
    }

    html[data-theme="dark"] :is(
      .history-table td,
      .fert-schedule-table td,
      .recording-table td,
      .user-table td
    ) {
      color: #e2e8f0 !important;
      border-bottom-color: #223147 !important;
    }

    html[data-theme="dark"] .fert-schedule-table tbody tr:hover,
    html[data-theme="dark"] .history-table tbody tr:hover {
      background: #132038 !important;
    }

    html[data-theme="dark"] .history-pagination-info,
    html[data-theme="dark"] .history-page-ellipsis {
      color: #94a3b8;
    }

    html[data-theme="dark"] .history-page-btn {
      background: #0b1526;
      color: #cbd5e1;
      border-color: #33465f;
    }

    html[data-theme="dark"] .history-page-btn:hover:not(:disabled) {
      background: #132038;
      color: #7dd3fc;
      border-color: #38bdf8;
    }

    html[data-theme="dark"] .history-page-btn.active {
      background: #0284c7;
      color: #ffffff;
      border-color: #38bdf8;
    }

    html[data-theme="dark"] .status-toggle-btn {
      background:
        radial-gradient(circle at 30% 24%, rgba(51,65,85,.72), transparent 34%),
        linear-gradient(145deg, #172554, #0f172a);
      border-color: #33465f;
      color: #60a5fa;
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }

    html[data-theme="dark"] .status-toggle-btn:hover {
      background: linear-gradient(145deg, #1e3a8a, #111827);
      border-color: #60a5fa;
    }

    html[data-theme="dark"] .status-toggle-state-dot {
      border-color: #0f172a;
    }

    html[data-theme="dark"] .theme-toggle-btn {
      background:
        radial-gradient(circle at 30% 24%, rgba(71,85,105,.72), transparent 34%),
        linear-gradient(145deg, #3b2f0f, #111827);
      border-color: #475569;
      color: #fbbf24;
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }

    html[data-theme="dark"] .theme-toggle-btn:hover {
      background: linear-gradient(145deg, #513f10, #172033);
      border-color: #fbbf24;
    }

    html[data-theme="dark"] .theme-toggle-label {
      color: #fde68a;
    }

    html[data-theme="dark"] .lang-toggle,
    html[data-theme="dark"] .btn-secondary,
    html[data-theme="dark"] .light-history-action-btn,
    html[data-theme="dark"] .history-follow-btn {
      background: #13213a !important;
      color: #bfdbfe !important;
      border-color: #334a68 !important;
    }

    html[data-theme="dark"] .topbar-status-cluster .topbar-system-status {
      background: rgba(8,15,28,.98) !important;
      border-color: #2b3b52 !important;
      box-shadow: 0 22px 52px rgba(0,0,0,.38) !important;
    }

    html[data-theme="dark"] .quick-status-title,
    html[data-theme="dark"] .quick-status-main,
    html[data-theme="dark"] .quick-status-sub {
      color: #cbd5e1 !important;
    }

    html[data-theme="dark"] .light-history-scroll,
    html[data-theme="dark"] .fert-schedule-table-wrap,
    html[data-theme="dark"] .history-table-scroll,
    html[data-theme="dark"] .recording-table-wrap {
      background: #0b1526 !important;
      border-color: #26364d !important;
    }

    html[data-theme="dark"] .light-history-legend-btn {
      background: #111d30 !important;
      color: #e2e8f0 !important;
      border-color: #2a3a50 !important;
    }

    html[data-theme="dark"] .curtain-mode-tabs,
    html[data-theme="dark"] .zone-mode-tabs {
      background: #101c33 !important;
      border-color: #294365 !important;
    }

    html[data-theme="dark"] .system-activity-launcher {
      background: linear-gradient(145deg, #172554, #0f172a) !important;
      border-color: #33465f !important;
      color: #93c5fd !important;
    }

    html[data-theme="dark"] .system-activity-head,
    html[data-theme="dark"] .system-activity-footer {
      border-color: #27364c !important;
    }

    html[data-theme="dark"] .system-activity-item {
      background: #111d30 !important;
      border-color: #2a3a50 !important;
      color: #e2e8f0 !important;
    }

    html[data-theme="dark"] .system-activity-item-title {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] .system-activity-item-detail,
    html[data-theme="dark"] .system-activity-item-time {
      color: #94a3b8 !important;
    }

    html[data-theme="dark"] .pill,
    html[data-theme="dark"] .badge-neutral {
      background: #1e293b !important;
      color: #cbd5e1 !important;
      border-color: #334155 !important;
    }

    @media (min-width: 621px) and (max-width: 1366px) {
      .theme-toggle-btn {
        width: 64px !important;
        height: 64px !important;
        min-width: 64px !important;
        min-height: 64px !important;
        flex: 0 0 64px !important;
      }

      .theme-toggle-icon,
      .theme-toggle-icon svg {
        width: 32px;
        height: 32px;
      }
    }

    @media (max-width: 620px) {
      .topbar-actions {
        grid-template-columns: 64px 64px minmax(0, 1fr) !important;
      }

      .theme-toggle-btn {
        grid-column: 2;
        width: 64px;
        height: 64px;
        min-width: 64px;
        min-height: 64px;
        border-radius: 14px;
      }

      .theme-toggle-icon,
      .theme-toggle-icon svg {
        width: 31px;
        height: 31px;
      }

      .lang-toggle {
        grid-column: 3 !important;
      }

      .auth-user-card {
        grid-column: 1 / -1 !important;
      }
    }



    /* =========================================================
       Refined dark theme — neutral slate palette
       Keeps system state colors, but removes harsh primary-color blocks.
    ========================================================= */
    html[data-theme="dark"] {
      color-scheme: dark;
      --bg: #080d16;
      --panel: #101827;
      --line: #29384d;
      --text: #e7edf6;
      --muted: #9aa8bb;
      --primary: #5b9df9;
      --primary-dark: #3f7ed8;
      --green: #4ade80;
      --red: #fb7185;
      --amber: #f6c453;
      --purple: #a78bfa;
      --cyan: #42c4d9;
      --card-shadow: 0 16px 38px rgba(0, 0, 0, 0.26);
      --dark-surface-0: #080d16;
      --dark-surface-1: #0d1523;
      --dark-surface-2: #111b2b;
      --dark-surface-3: #162235;
      --dark-border: #29384d;
      --dark-border-soft: #202d3f;
      --dark-text: #e7edf6;
      --dark-muted: #9aa8bb;
      --dark-subtle: #738197;
      --dark-accent: #5b9df9;
      --dark-accent-soft: rgba(91, 157, 249, 0.15);
    }

    html[data-theme="dark"] body {
      background:
        radial-gradient(circle at 8% 0%, rgba(59, 130, 246, 0.12), transparent 30%),
        radial-gradient(circle at 90% 8%, rgba(20, 184, 166, 0.07), transparent 28%),
        linear-gradient(180deg, #080d16 0%, #0a111d 100%) !important;
      color: var(--dark-text) !important;
    }

    html[data-theme="dark"] .main,
    html[data-theme="dark"] .content {
      background: transparent !important;
    }

    html[data-theme="dark"] .topbar {
      background: rgba(9, 15, 25, 0.94) !important;
      border-bottom-color: var(--dark-border-soft) !important;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.20) !important;
      backdrop-filter: blur(16px);
    }

    html[data-theme="dark"] :is(
      .section,
      .sensor-chart-board,
      .curtain-panel,
      .zone-panel,
      .export-card,
      .recording-card,
      .system-activity-panel,
      .history-table-wrap
    ) {
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 157, 249, 0.045), transparent 34%),
        linear-gradient(180deg, #0f1827 0%, #0c1421 100%) !important;
      border-color: var(--dark-border) !important;
      box-shadow: 0 16px 38px rgba(0, 0, 0, 0.24) !important;
    }

    html[data-theme="dark"] :is(
      .summary-card,
      .sensor-card,
      .status-card,
      .control-card,
      .chart-card,
      .curtain-mini-card,
      .curtain-chart-wrap,
      .zone-card,
      .zone-summary-card,
      .fert-manual-card,
      .recording-indicator,
      .export-sheet-item,
      .auth-user-card,
      .greenhouse-block
    ) {
      background: linear-gradient(180deg, #131e2f 0%, #101a2a 100%) !important;
      border-color: var(--dark-border) !important;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20) !important;
    }

    html[data-theme="dark"] .chart-card {
      background:
        linear-gradient(180deg, rgba(19, 30, 47, 0.98), rgba(14, 24, 39, 0.98)) !important;
      border-color: #2b3b51 !important;
    }

    html[data-theme="dark"] :is(
      .sensor-item,
      .status-row,
      .curtain-feedback,
      .zone-rule-text,
      .fert-schedule-note,
      .recording-meta,
      .export-status,
      .quick-status-card,
      .system-activity-empty,
      .empty-state,
      .history-empty
    ) {
      background: #121d2d !important;
      border-color: #29384c !important;
      color: #c7d1df !important;
    }

    html[data-theme="dark"] :is(
      .topbar h1,
      .section h2,
      .section h3,
      .section h4,
      .sensor-chart-head h3,
      .chart-title,
      .light-history-title-wrap h4,
      .history-period-title,
      .summary-value,
      .sensor-title,
      .sensor-value,
      .status-value,
      .curtain-panel-title,
      .curtain-mini-value,
      .zone-panel-title,
      .zone-title,
      .zone-summary-value,
      .export-card h3,
      .recording-card h3,
      .system-activity-title,
      .auth-user-name
    ) {
      color: var(--dark-text) !important;
    }

    html[data-theme="dark"] :is(
      .topbar p,
      .section-desc,
      .sensor-chart-head p,
      .light-history-title-wrap p,
      .history-period-desc,
      .summary-title,
      .summary-sub,
      .summary-unit,
      .sensor-label,
      .status-label,
      .curtain-panel-desc,
      .curtain-mini-label,
      .zone-panel-desc,
      .zone-summary-label,
      .export-card p,
      .recording-card p,
      .system-activity-subtitle,
      .auth-user-role,
      .history-day-label,
      footer
    ) {
      color: var(--dark-muted) !important;
    }

    html[data-theme="dark"] .history-period-toolbar {
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 157, 249, 0.10), transparent 36%),
        linear-gradient(135deg, #151f31 0%, #111a29 100%) !important;
      border-color: #30445f !important;
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
    }

    html[data-theme="dark"] .history-period-title {
      color: #eef3fa !important;
    }

    html[data-theme="dark"] :is(
      input,
      select,
      textarea,
      .history-day-input,
      .rule-field input,
      .rule-field select,
      .zone-rule-field input,
      .zone-rule-field select,
      .fert-schedule-table input,
      .fert-schedule-table select,
      .export-field input[type="date"],
      .fert-manual-duration
    ) {
      background: #0c1523 !important;
      color: #e8eef7 !important;
      border-color: #34465f !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
    }

    html[data-theme="dark"] :is(input, select, textarea):focus {
      border-color: #6aa7f7 !important;
      box-shadow: 0 0 0 3px rgba(91, 157, 249, 0.16) !important;
    }

    html[data-theme="dark"] .history-day-button {
      background: linear-gradient(135deg, #4f8ee8, #2f9eb5) !important;
      border-color: #68a7ef !important;
      color: #ffffff !important;
      box-shadow: 0 7px 18px rgba(39, 107, 185, 0.24) !important;
    }

    html[data-theme="dark"] .history-day-button:hover {
      filter: brightness(1.07);
    }

    html[data-theme="dark"] .history-metric-tabs {
      gap: 8px;
    }

    html[data-theme="dark"] .history-metric-tab {
      background: #121d2d !important;
      color: #b8c5d6 !important;
      border-color: #304158 !important;
      box-shadow: none !important;
    }

    html[data-theme="dark"] .history-metric-tab:hover {
      background: #17263a !important;
      color: #dbeafe !important;
      border-color: #4f78a8 !important;
    }

    html[data-theme="dark"] .history-metric-tab.active {
      background: linear-gradient(135deg, #356fbd, #278da7) !important;
      color: #ffffff !important;
      border-color: #6ba6e8 !important;
      box-shadow: 0 7px 18px rgba(36, 104, 181, 0.23) !important;
    }

    html[data-theme="dark"] .light-history-strip {
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 157, 249, 0.06), transparent 34%),
        linear-gradient(180deg, #111b2b 0%, #0e1725 100%) !important;
      border-color: #2c3c52 !important;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.20) !important;
    }

    html[data-theme="dark"] .vpd-history-strip {
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 157, 249, 0.09), transparent 34%),
        linear-gradient(180deg, #111b2b 0%, #0e1725 100%) !important;
    }

    html[data-theme="dark"] .light-history-scroll,
    html[data-theme="dark"] .light-history-canvas-wrap {
      background: #0b1421 !important;
      border-color: #26364a !important;
    }

    html[data-theme="dark"] .light-history-status {
      background: #182438 !important;
      color: #aebdd0 !important;
      border-color: #304158 !important;
    }

    html[data-theme="dark"] .light-history-status.loading {
      background: rgba(59, 130, 246, 0.11) !important;
      color: #9fc5f8 !important;
      border-color: rgba(96, 165, 250, 0.32) !important;
    }

    html[data-theme="dark"] .light-history-status.success {
      background: rgba(34, 197, 94, 0.10) !important;
      color: #8ee6aa !important;
      border-color: rgba(74, 222, 128, 0.28) !important;
    }

    html[data-theme="dark"] .light-history-status.error {
      background: rgba(244, 63, 94, 0.10) !important;
      color: #fda4af !important;
      border-color: rgba(251, 113, 133, 0.30) !important;
    }

    html[data-theme="dark"] :is(
      .light-history-action-btn,
      .history-follow-btn,
      .chart-zoom-controls,
      .chart-zoom-btn,
      .chart-zoom-value
    ) {
      background: #152135 !important;
      color: #b9c8db !important;
      border-color: #304158 !important;
    }

    html[data-theme="dark"] .chart-zoom-controls {
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
    }

    html[data-theme="dark"] :is(.chart-zoom-btn, .light-history-action-btn, .history-follow-btn):hover:not(:disabled) {
      background: #1b2b42 !important;
      color: #dbeafe !important;
      border-color: #4b6f9a !important;
    }

    html[data-theme="dark"] .chart-zoom-value {
      color: #d1dbea !important;
    }

    html[data-theme="dark"] .light-history-legend-btn {
      background: #121d2d !important;
      color: #d5deea !important;
      border-color: #304158 !important;
    }

    html[data-theme="dark"] .badge-info {
      background: rgba(59, 130, 246, 0.16) !important;
      color: #a9cdfb !important;
    }

    html[data-theme="dark"] .badge-online,
    html[data-theme="dark"] .badge-on {
      background: rgba(34, 197, 94, 0.14) !important;
      color: #93e8ad !important;
    }

    html[data-theme="dark"] .badge-warning {
      background: rgba(245, 158, 11, 0.14) !important;
      color: #f7d486 !important;
    }

    html[data-theme="dark"] .badge-offline,
    html[data-theme="dark"] .badge-off {
      background: rgba(244, 63, 94, 0.13) !important;
      color: #fda4af !important;
    }

    html[data-theme="dark"] .chart-vpd-dot {
      background: #60a5fa !important;
      box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.12) !important;
    }

    html[data-theme="dark"] .chart-temp-dot {
      background: #fb923c !important;
      box-shadow: 0 0 0 4px rgba(251, 146, 60, 0.12) !important;
    }

    html[data-theme="dark"] .chart-humidity-dot {
      background: #22c7d9 !important;
      box-shadow: 0 0 0 4px rgba(34, 199, 217, 0.12) !important;
    }

    html[data-theme="dark"] .chart-light-dot {
      background: #eabf3a !important;
      box-shadow: 0 0 0 4px rgba(234, 191, 58, 0.12) !important;
    }

    html[data-theme="dark"] .summary-card::before {
      opacity: 0.42;
    }

    html[data-theme="dark"] .summary-card::after {
      opacity: 0.62;
    }

    html[data-theme="dark"] .summary-sub::before {
      box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.10) !important;
    }

    html[data-theme="dark"] :is(
      .history-table,
      .fert-schedule-table,
      .recording-table,
      .user-table
    ) {
      background: #0c1523 !important;
      color: #dce5f0 !important;
    }

    html[data-theme="dark"] :is(
      .history-table th,
      .fert-schedule-table th,
      .recording-table th,
      .user-table th
    ) {
      background: #172235 !important;
      color: #b9c6d7 !important;
      border-bottom-color: #2c3b50 !important;
    }

    html[data-theme="dark"] :is(
      .history-table td,
      .fert-schedule-table td,
      .recording-table td,
      .user-table td
    ) {
      color: #dce5f0 !important;
      border-bottom-color: #223044 !important;
    }

    html[data-theme="dark"] :is(.fert-schedule-table tbody tr:hover, .history-table tbody tr:hover) {
      background: #142136 !important;
    }

    html[data-theme="dark"] ::-webkit-scrollbar {
      width: 11px;
      height: 11px;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-track {
      background: #0a121e;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb {
      background: #33445a;
      border: 3px solid #0a121e;
      border-radius: 999px;
    }

    html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
      background: #425873;
    }

  

    /* =========================================================
       Dark theme — greenhouse sensor map
       The original map artwork contains a baked white background.
       In dark mode, invert the monochrome artwork and blend it over
       a dark surface so the map follows the selected website theme.
    ========================================================= */
    html[data-theme="dark"] :is(
      .evap-map,
      .net-map,
      #nursery-map
    ) {
      background:
        radial-gradient(circle at 50% 38%, rgba(91, 157, 249, 0.07), transparent 43%),
        linear-gradient(180deg, #111b2b 0%, #0b1320 100%) !important;
      border: 1px solid #2a3a50 !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 12px 30px rgba(0, 0, 0, 0.18) !important;
    }

    html[data-theme="dark"] :is(
      .evap-map,
      .net-map,
      #nursery-map
    ) > img,
    html[data-theme="dark"] .evap-map-img {
      filter: invert(1) hue-rotate(180deg) brightness(0.88) contrast(1.08) !important;
      mix-blend-mode: screen;
      opacity: 0.92;
    }

    /* The replacement asset is already dark-themed; do not invert the 3D
       render or the live sensor markers will appear in the wrong positions. */
    html[data-theme="dark"] .evap-map-img {
      filter: none !important;
      mix-blend-mode: normal !important;
      opacity: 1 !important;
    }

    html[data-theme="dark"] :is(.evap-tag, .net-tag) {
      background: rgba(17, 27, 43, 0.94) !important;
      border-color: #34465f !important;
      color: #e7edf6 !important;
      box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
      backdrop-filter: blur(10px);
    }

    html[data-theme="dark"] :is(.evap-tag-label, .net-tag-label) {
      color: #91a0b5 !important;
    }

    html[data-theme="dark"] :is(.evap-tag-value, .net-tag-value),
    html[data-theme="dark"] :is(.evap-tag-title, .net-tag-title) {
      color: #eef3fa !important;
    }

    @media (hover: hover) and (pointer: fine) {
      html[data-theme="dark"] :is(.evap-tag:hover, .net-tag:hover) {
        background: rgba(22, 34, 53, 0.985) !important;
        border-color: #5f88bb !important;
        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.42),
          0 0 0 4px rgba(91, 157, 249, 0.10) !important;
      }
    }


    /* =========================================================
       Dark theme readability pass
       - Auto configuration cards follow the dark palette
       - User Management no longer keeps white surfaces
       - Sensor-map labels use high-contrast light text
    ========================================================= */
    html[data-theme="dark"] .auto-rule-card {
      background:
        radial-gradient(circle at 100% 0%, rgba(91, 157, 249, 0.055), transparent 38%),
        linear-gradient(180deg, #131e2f 0%, #0f1929 100%) !important;
      border-color: #31435b !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.025),
        0 10px 24px rgba(0,0,0,0.20) !important;
    }

    html[data-theme="dark"] .auto-rule-card:has(.auto-rule-title input[type="checkbox"]:checked) {
      background:
        radial-gradient(circle at 100% 0%, rgba(96, 165, 250, 0.105), transparent 42%),
        linear-gradient(180deg, #15243a 0%, #101c2e 100%) !important;
      border-color: #537aa6 !important;
      box-shadow:
        inset 3px 0 0 rgba(96,165,250,0.74),
        inset 0 1px 0 rgba(255,255,255,0.03),
        0 12px 28px rgba(0,0,0,0.23) !important;
    }

    html[data-theme="dark"] :is(
      .auto-rule-title,
      .auto-rule-title span,
      .rule-field label,
      .curtain-panel-desc,
      .curtain-panel-desc b
    ) {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] .auto-rule-title {
      letter-spacing: 0.01em;
    }

    html[data-theme="dark"] .auto-rule-title input[type="checkbox"],
    html[data-theme="dark"] .zone-auto-checkbox,
    html[data-theme="dark"] #user-management-page input[type="checkbox"] {
      accent-color: #6f9fd6;
    }

    html[data-theme="dark"] .auto-rule-card .curtain-feedback {
      background: #0d1726 !important;
      border-color: #2d4058 !important;
      color: #e8eef7 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.018) !important;
    }

    html[data-theme="dark"] .auto-rule-card :is(input, select) {
      background: #0a1422 !important;
      color: #ffffff !important;
      border-color: #38506d !important;
    }

    html[data-theme="dark"] .auto-rule-card :is(input, select):focus {
      border-color: #6f9fd6 !important;
      box-shadow: 0 0 0 3px rgba(111,159,214,0.15) !important;
    }

    html[data-theme="dark"] .curtain-config-saved-meta {
      color: #cbd5e1 !important;
      background: #101b2b !important;
      border-color: #2c3e55 !important;
    }

    /* Sensor cards on greenhouse maps: high-contrast typography. */
    html[data-theme="dark"] :is(
      .evap-tag-title,
      .net-tag-title,
      .evap-tag-value,
      .net-tag-value
    ) {
      color: #ffffff !important;
      text-shadow: 0 1px 0 rgba(0,0,0,0.28);
    }

    html[data-theme="dark"] :is(.evap-tag-label, .net-tag-label) {
      color: #e2e8f0 !important;
    }

    /* User Management: remove remaining white cards and labels. */
    html[data-theme="dark"] #user-management-page .user-admin-card {
      background:
        radial-gradient(circle at 100% 0%, rgba(91,157,249,0.045), transparent 36%),
        linear-gradient(180deg, #131e2f 0%, #0f1929 100%) !important;
      border-color: #304258 !important;
      box-shadow: 0 12px 28px rgba(0,0,0,0.22) !important;
    }

    html[data-theme="dark"] #user-management-page :is(
      .user-admin-card h3,
      .user-field label,
      .user-table td,
      .user-table td strong,
      .permission-grid label,
      .user-permission-box label,
      .user-last-login
    ) {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-card p,
    html[data-theme="dark"] #user-management-page .user-last-login small {
      color: #a8b5c7 !important;
    }

    html[data-theme="dark"] #user-management-page :is(
      .user-permission-box,
      .user-table-scroll
    ) {
      background: #0c1523 !important;
      border-color: #2c3e55 !important;
    }

    html[data-theme="dark"] #user-management-page :is(
      .user-permission-box label,
      .permission-grid label
    ) {
      background: #111d2e !important;
      border-color: #30435b !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.018) !important;
    }

    html[data-theme="dark"] #user-management-page .user-table {
      background: #0b1421 !important;
    }

    html[data-theme="dark"] #user-management-page .user-table th {
      background: #172438 !important;
      color: #f1f5f9 !important;
      border-bottom-color: #304158 !important;
    }

    html[data-theme="dark"] #user-management-page .user-table td {
      background: #0d1726 !important;
      border-bottom-color: #223248 !important;
    }

    html[data-theme="dark"] #user-management-page .user-table tbody tr:nth-child(even) td {
      background: #101b2b !important;
    }

    html[data-theme="dark"] #user-management-page .user-table tbody tr:hover td {
      background: #15243a !important;
    }

    html[data-theme="dark"] #user-management-page :is(
      input[type="text"],
      input[type="password"],
      select
    ) {
      background: #0a1422 !important;
      color: #ffffff !important;
      border-color: #38506d !important;
    }

    html[data-theme="dark"] #user-management-page :is(
      input[type="text"],
      input[type="password"],
      select
    ):disabled {
      background: #121c2b !important;
      color: #9aa8bb !important;
      border-color: #2b3b50 !important;
      opacity: 1 !important;
    }

    html[data-theme="dark"] #user-management-page input::placeholder {
      color: #7f8ea3 !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-secondary {
      background: #1a293d !important;
      color: #e5edf7 !important;
      border: 1px solid #3a4e68 !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-secondary:hover {
      background: #22354e !important;
      border-color: #58779e !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-status {
      background: #111d2d !important;
      border-color: #304158 !important;
      color: #d7e0ec !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-status.success {
      background: rgba(34,197,94,0.10) !important;
      border-color: rgba(74,222,128,0.28) !important;
      color: #a7efbd !important;
    }

    html[data-theme="dark"] #user-management-page .user-admin-status.error {
      background: rgba(244,63,94,0.10) !important;
      border-color: rgba(251,113,133,0.30) !important;
      color: #fec0c8 !important;
    }

    html[data-theme="dark"] #user-management-page .user-status-active {
      background: rgba(34,197,94,0.14) !important;
      color: #b7f5ca !important;
    }

    html[data-theme="dark"] #user-management-page .user-status-pending {
      background: rgba(245,158,11,0.14) !important;
      color: #f8d996 !important;
    }

    html[data-theme="dark"] #user-management-page .user-status-disabled {
      background: rgba(244,63,94,0.13) !important;
      color: #fec0c8 !important;
    }

    @media (max-width: 760px) {
      html[data-theme="dark"] #user-management-page .user-table tr {
        background: #101b2b !important;
        border-color: #304158 !important;
      }

      html[data-theme="dark"] #user-management-page .user-table td::before {
        color: #aebbd0 !important;
      }
    }



    /* =========================================================
       Outdoor lighting dark-theme + performance refinement
       - Replaces the bright day artwork with a subdued dark scene
       - Improves contrast in the floating activity center
       - Removes expensive continuous effects on touch devices
    ========================================================= */
    #outdoor-light-dashboard .plant-zone {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    #outdoor-light-dashboard .light-cone {
      filter: none !important;
      transform: translate3d(-50%, 0, 0);
      backface-visibility: hidden;
    }

    #outdoor-light-dashboard .plant-zone.on .light-cone {
      animation: outdoorConePulseSmooth 3.2s ease-in-out infinite !important;
      will-change: transform, opacity;
    }

    #outdoor-light-dashboard .outdoor-scene-sun,
    #outdoor-light-dashboard .outdoor-scene-clouds {
      backface-visibility: hidden;
      will-change: transform;
    }

    /* The plants remain dimensional but no longer animate 32 separate layers. */
    #outdoor-light-dashboard .mini-plant {
      animation: none !important;
      filter: none !important;
    }

    @keyframes outdoorConePulseSmooth {
      0%, 100% {
        opacity: 0.66;
        transform: translate3d(-50%, 0, 0) scaleX(0.97);
      }
      50% {
        opacity: 0.88;
        transform: translate3d(-50%, 0, 0) scaleX(1.015);
      }
    }

    /* Touch tablets/phones: keep the lighting state visible, but use static artwork. */
    @media (hover: none), (pointer: coarse) {
      #outdoor-light-dashboard .outdoor-scene-sun,
      #outdoor-light-dashboard .outdoor-scene-clouds,
      #outdoor-light-dashboard .plant-zone.on .light-cone,
      #outdoor-light-dashboard .mini-plant {
        animation: none !important;
        will-change: auto !important;
      }

      #outdoor-light-dashboard .plant-zone.on .light-cone {
        opacity: 0.78 !important;
        transform: translate3d(-50%, 0, 0) scaleX(1) !important;
      }
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-animation-panel {
      background:
        radial-gradient(circle at 96% 0%, rgba(96, 165, 250, 0.055), transparent 34%),
        linear-gradient(180deg, #101927 0%, #0c1421 100%) !important;
      border-color: #2c3a4d !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard :is(
      .outdoor-scene,
      .outdoor-scene.is-day,
      .outdoor-scene.is-night
    ) {
      --scene-edge: rgba(100, 116, 139, 0.48);
      background:
        radial-gradient(circle at 86% 13%, rgba(203, 213, 225, 0.10) 0 5%, transparent 18%),
        radial-gradient(circle at 20% 15%, rgba(96, 165, 250, 0.07), transparent 24%),
        linear-gradient(180deg, #111a2b 0%, #172237 35%, #1b2a3d 50%, #132d2d 51%, #153b31 100%) !important;
      border-color: #33445a !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        inset 0 -24px 58px rgba(2, 44, 34, 0.18),
        0 18px 42px rgba(0,0,0,0.30) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene::before,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-day::before,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-night::before {
      background:
        radial-gradient(ellipse at 50% 56%, rgba(226,232,240,0.055), transparent 43%),
        repeating-linear-gradient(116deg, rgba(226,232,240,0.025) 0 2px, transparent 2px 58px) !important;
      opacity: 0.54 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene::after,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-day::after,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-night::after {
      background:
        repeating-linear-gradient(90deg, rgba(167,243,208,0.035) 0 1px, transparent 1px 78px),
        repeating-linear-gradient(0deg, rgba(167,243,208,0.025) 0 1px, transparent 1px 46px),
        linear-gradient(180deg, #245743, #1d4939 52%, #143d31 100%) !important;
      box-shadow: inset 0 18px 30px rgba(255,255,255,0.025) !important;
      opacity: 0.88 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene-sun,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-day .outdoor-scene-sun,
    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene.is-night .outdoor-scene-sun {
      background: radial-gradient(circle at 34% 28%, #f8fafc 0 9%, #dbe5ef 38%, #9aa9ba 70%, #64748b 100%) !important;
      box-shadow:
        0 0 0 9px rgba(203,213,225,0.055),
        0 0 34px 12px rgba(148,163,184,0.11),
        inset -10px -10px 18px rgba(51,65,85,0.24) !important;
      animation-duration: 9s !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene-clouds {
      opacity: 0.24 !important;
      filter: brightness(0.68) saturate(0.55) !important;
      animation-duration: 24s !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-horizon {
      opacity: 0.24 !important;
      filter: brightness(0.56) saturate(0.72) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-field-lines {
      opacity: 0.16 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene-caption {
      background: rgba(12, 20, 33, 0.86) !important;
      color: #e7edf6 !important;
      border-color: #3a4b61 !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.24) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-scene-caption::before {
      background: #56c98a !important;
      box-shadow: 0 0 0 4px rgba(86,201,138,0.11) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone {
      background:
        linear-gradient(180deg, rgba(25, 37, 54, 0.96), rgba(17, 30, 43, 0.97)) !important;
      border-color: #3a4a5f !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.035),
        inset 0 -14px 24px rgba(10, 41, 31, 0.08),
        0 15px 26px rgba(0,0,0,0.24),
        0 3px 0 rgba(2,6,23,0.50) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone::before {
      background:
        linear-gradient(125deg, rgba(255,255,255,0.045), transparent 34%),
        radial-gradient(circle at 50% 28%, rgba(148,163,184,0.045), transparent 47%) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone::after {
      background: rgba(0,0,0,0.34) !important;
      opacity: 0.56 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone:hover {
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.05),
        0 20px 34px rgba(0,0,0,0.28),
        0 4px 0 rgba(2,6,23,0.56) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone.on {
      background:
        radial-gradient(circle at 50% 24%, rgba(217, 176, 74, 0.13), transparent 40%),
        linear-gradient(180deg, #20283a 0%, #172833 100%) !important;
      border-color: rgba(206, 164, 68, 0.68) !important;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.045),
        inset 0 -16px 28px rgba(176, 126, 28, 0.035),
        0 0 0 2px rgba(206,164,68,0.075),
        0 18px 31px rgba(0,0,0,0.27) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .zone-scene-index {
      background: linear-gradient(145deg, #263449, #111827) !important;
      color: #edf3fa !important;
      border-color: #4a5d74 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 7px 13px rgba(0,0,0,0.30) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone.on .zone-scene-index {
      background: linear-gradient(145deg, #d0a53e, #a8741c) !important;
      color: #17130b !important;
      border-color: #e2c169 !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.20), 0 0 14px rgba(206,164,68,0.22), 0 7px 13px rgba(0,0,0,0.28) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone-status {
      background: #172235 !important;
      color: #aebccd !important;
      border-color: #34465c !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone.on .plant-zone-status {
      background: rgba(176, 126, 28, 0.15) !important;
      color: #f0cf7a !important;
      border-color: rgba(206,164,68,0.34) !important;
      box-shadow: none !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-cone {
      background: linear-gradient(180deg, rgba(240, 207, 119, 0.32), rgba(217, 176, 74, 0.055) 70%, transparent 100%) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-zone.on .lamp-head::before {
      background: radial-gradient(circle, #fff8dc 0 16%, #eedb9d 38%, #d0a53e 69%, #9b6819 100%) !important;
      box-shadow: 0 0 10px rgba(224, 190, 102, 0.52), 0 0 20px rgba(206,164,68,0.25), inset 0 1px 2px rgba(255,255,255,0.70) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .mini-leaf {
      filter: brightness(0.78) saturate(0.78);
    }

    html[data-theme="dark"] #outdoor-light-dashboard .plant-bed {
      filter: brightness(0.72) saturate(0.72);
      box-shadow: inset 0 2px 3px rgba(255,255,255,0.08), 0 8px 14px rgba(0,0,0,0.28) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .zone-summary-card {
      background: linear-gradient(180deg, #162236 0%, #111b2b 100%) !important;
      border-color: #304158 !important;
      box-shadow: 0 9px 20px rgba(0,0,0,0.20) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .zone-summary-card::after {
      opacity: 0.10 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .zone-summary-value {
      color: #f1f5f9 !important;
      text-shadow: none !important;
    }

    /* Floating activity center: high-contrast dark surfaces. */
    html[data-theme="dark"] .system-activity-panel {
      background: #0d1624 !important;
      border-color: #314158 !important;
      box-shadow: 0 24px 60px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.025) !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    html[data-theme="dark"] .system-activity-head {
      background:
        radial-gradient(circle at 92% 0%, rgba(91,157,249,0.075), transparent 40%),
        linear-gradient(180deg, #151f30 0%, #111a29 100%) !important;
      border-bottom-color: #2b3a50 !important;
    }

    html[data-theme="dark"] .system-activity-head-icon {
      background: rgba(91,157,249,0.13) !important;
      color: #9fc5f8 !important;
      box-shadow: inset 0 0 0 1px rgba(96,165,250,0.16) !important;
    }

    html[data-theme="dark"] .system-activity-collapse-btn {
      background: #172235 !important;
      color: #d7e0ec !important;
      border-color: #35465d !important;
    }

    html[data-theme="dark"] .system-activity-summary-card {
      background: #121d2d !important;
      border-color: #2e3e54 !important;
    }

    html[data-theme="dark"] .system-activity-summary-card.running {
      background: rgba(34,197,94,0.085) !important;
      border-color: rgba(74,222,128,0.26) !important;
    }

    html[data-theme="dark"] .system-activity-summary-card.upcoming {
      background: rgba(59,130,246,0.085) !important;
      border-color: rgba(96,165,250,0.27) !important;
    }

    html[data-theme="dark"] .system-activity-summary-label {
      color: #a9b6c8 !important;
    }

    html[data-theme="dark"] .system-activity-summary-value,
    html[data-theme="dark"] .system-activity-section-title {
      color: #f1f5f9 !important;
    }

    html[data-theme="dark"] .system-activity-section-count {
      background: #1b293d !important;
      color: #c8d3e1 !important;
      border: 1px solid #34465d !important;
    }

    html[data-theme="dark"] .system-activity-item {
      background: #121d2d !important;
      border-color: #2d3d53 !important;
      box-shadow: 0 7px 18px rgba(0,0,0,0.20) !important;
    }

    html[data-theme="dark"] .system-activity-item.running {
      background: linear-gradient(135deg, rgba(34,197,94,0.09), #121d2d 66%) !important;
      border-color: rgba(74,222,128,0.27) !important;
    }

    html[data-theme="dark"] .system-activity-item.soon {
      background: linear-gradient(135deg, rgba(245,158,11,0.085), #121d2d 68%) !important;
      border-color: rgba(246,196,83,0.28) !important;
    }

    html[data-theme="dark"] .system-activity-item:hover {
      background: #17263a !important;
      border-color: #4d6f98 !important;
      box-shadow: 0 10px 24px rgba(0,0,0,0.26) !important;
    }

    html[data-theme="dark"] .system-activity-item-icon {
      background: rgba(91,157,249,0.12) !important;
      color: #9fc5f8 !important;
      box-shadow: inset 0 0 0 1px rgba(96,165,250,0.13) !important;
    }

    html[data-theme="dark"] .system-activity-item.running .system-activity-item-icon {
      background: rgba(34,197,94,0.12) !important;
      color: #8fe3aa !important;
    }

    html[data-theme="dark"] .system-activity-item.soon .system-activity-item-icon {
      background: rgba(245,158,11,0.12) !important;
      color: #f2cf79 !important;
    }

    html[data-theme="dark"] .system-activity-item-title {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] .system-activity-item-detail,
    html[data-theme="dark"] .system-activity-item-time {
      color: #a9b6c8 !important;
    }

    html[data-theme="dark"] .system-activity-item-time strong {
      color: #8dbcf4 !important;
    }

    html[data-theme="dark"] .system-activity-empty,
    html[data-theme="dark"] .system-activity-footer {
      background: #111c2b !important;
      color: #a9b6c8 !important;
      border-color: #2d3d53 !important;
    }

    html[data-theme="dark"] .system-activity-live-dot {
      border-color: #111a29 !important;
    }

    html[data-theme="dark"] .system-activity-count {
      border-color: #111a29 !important;
    }



    /* =========================================================
       Performance patch: Outdoor lighting + Fertilizer dosing
       Keeps the current artwork, but removes expensive continuous paints.
    ========================================================= */
    #outdoor-light-dashboard .outdoor-scene,
    #fertilizer-dashboard .fert-root-scene {
      contain: layout paint style;
    }

    #outdoor-light-dashboard .plant-zone,
    #fertilizer-dashboard .fert-root-zone {
      contain: layout paint style;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }

    /* Panels below the fold are not painted until they are needed. */
    #outdoor-light-dashboard .light-settings-panel,
    #outdoor-light-dashboard .zone-history-panel,
    #fertilizer-dashboard .fert-settings-panel,
    #fertilizer-dashboard .zone-history-panel {
      content-visibility: auto;
      contain-intrinsic-size: 760px;
    }

    /* Outdoor: use a static scene. ON/OFF remains immediately visible. */
    #outdoor-light-dashboard .outdoor-scene-sun,
    #outdoor-light-dashboard .outdoor-scene-clouds,
    #outdoor-light-dashboard .mini-plant,
    #outdoor-light-dashboard .plant-zone.on .light-cone {
      animation: none !important;
      will-change: auto !important;
    }

    #outdoor-light-dashboard .plant-zone {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      transition: border-color 0.16s ease, background 0.16s ease !important;
    }

    #outdoor-light-dashboard .plant-zone:hover {
      transform: translateZ(0) !important;
    }

    #outdoor-light-dashboard .light-cone {
      filter: none !important;
      opacity: 0 !important;
      transform: translate3d(-50%, 0, 0) scaleX(1) !important;
    }

    #outdoor-light-dashboard .plant-zone.on .light-cone {
      opacity: 0.80 !important;
    }

    #outdoor-light-dashboard .mini-plant,
    #outdoor-light-dashboard .plant-zone.on .mini-leaf {
      filter: none !important;
    }

    /* Fertilizer: keep only two compositor-friendly motions per active zone. */
    #fertilizer-dashboard .fert-root-active-label {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    #fertilizer-dashboard .fert-root-zone {
      transition: border-color 0.16s ease, background 0.16s ease !important;
    }

    #fertilizer-dashboard .fert-root-zone:hover {
      transform: none !important;
    }

    #fertilizer-dashboard .fert-root-zone.on .fert-root-stream {
      animation: fertRootFlowCompositor 1.35s ease-in-out infinite !important;
      transform-origin: center top;
      will-change: transform, opacity;
    }

    #fertilizer-dashboard .fert-root-zone.on .fert-root-drop.d1 {
      animation: fertRootDropCompositor 1.45s linear infinite !important;
      will-change: transform, opacity;
    }

    #fertilizer-dashboard .fert-root-zone.on .fert-root-drop.d2,
    #fertilizer-dashboard .fert-root-zone.on .fert-root-drop.d3 {
      animation: none !important;
      display: none !important;
    }

    #fertilizer-dashboard .fert-root-zone.on .fert-root-network path,
    #fertilizer-dashboard .fert-root-zone.on .fert-root-wet-area {
      animation: none !important;
    }

    #fertilizer-dashboard .fert-root-network path {
      filter: none !important;
    }

    #fertilizer-dashboard .fert-root-zone.on .fert-root-wet-area {
      opacity: 0.82 !important;
      transform: translateX(-50%) scale(1) !important;
    }

    @keyframes fertRootFlowCompositor {
      0%, 100% {
        opacity: 0.76;
        transform: translate3d(-50%, 0, 0) scaleY(0.97);
      }
      50% {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scaleY(1.03);
      }
    }

    @keyframes fertRootDropCompositor {
      0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0.78);
      }
      14% { opacity: 1; }
      82% { opacity: 1; }
      100% {
        opacity: 0;
        transform: translate3d(0, 58px, 0) scale(1.03);
      }
    }

    @media (hover: none), (pointer: coarse) {
      #fertilizer-dashboard .fert-root-zone.on .fert-root-stream,
      #fertilizer-dashboard .fert-root-zone.on .fert-root-drop.d1 {
        animation-duration: 1.8s !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #outdoor-light-dashboard *,
      #fertilizer-dashboard * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
      }
    }

  

    /* =========================================================
       DARK THEME TEXT CONTRAST FIX — RECORDING + FERTILIZER
       Keep dynamically generated labels readable in dark mode.
    ========================================================= */
    html[data-theme="dark"] #data-export-page :is(
      #recording-state-title,
      .recording-state-title,
      .export-sheet-name,
      .recording-table td,
      .recording-meta strong
    ) {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] #data-export-page :is(
      #recording-state-sub,
      .recording-state-sub,
      .recording-meta,
      .recording-table th
    ) {
      color: #cbd5e1 !important;
    }

    html[data-theme="dark"] #data-export-page .recording-storage,
    html[data-theme="dark"] .recording-storage-popup-details {
      background: #0b1526 !important;
      border-color: #334155 !important;
    }
    html[data-theme="dark"] #data-export-page .recording-storage.warning {
      background: #302410 !important;
      border-color: #b45309 !important;
    }
    html[data-theme="dark"] #data-export-page .recording-storage.critical {
      background: #32151a !important;
      border-color: #b91c1c !important;
    }
    html[data-theme="dark"] #data-export-page :is(
      .recording-storage-title,
      .recording-storage-stats strong
    ) { color: #f8fafc !important; }
    html[data-theme="dark"] #data-export-page :is(
      .recording-storage-stats,
      .recording-storage-message
    ),
    html[data-theme="dark"] .recording-storage-popup-details { color: #cbd5e1 !important; }
    html[data-theme="dark"] .recording-storage-popup-card { background: #0f172a !important; border-color: #334155 !important; }
    html[data-theme="dark"] .recording-storage-popup-card .system-popup-title { color: #f8fafc !important; }
    html[data-theme="dark"] .recording-storage-popup-card .system-popup-message { color: #cbd5e1 !important; }
    html[data-theme="dark"] .storage-popup-close { color: #f8fafc; background: #334155; }

    html[data-theme="dark"] #irrigation-status-page :is(
      .fert-manual-card-title,
      .fert-manual-toolbar-title,
      .fert-root-active-label,
      .fert-schedule-table td
    ) {
      color: #f8fafc !important;
    }

    html[data-theme="dark"] #irrigation-status-page :is(
      .fert-manual-duration-wrap,
      .fert-root-hint,
      .fert-root-zone-message,
      .fert-root-zone-duration
    ) {
      color: #cbd5e1 !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-manual-toolbar {
      background: linear-gradient(135deg, #111d30, #0b1526) !important;
      border-color: #2a3a50 !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-root-active-label {
      background: rgba(15, 23, 42, 0.92) !important;
      border-color: #334155 !important;
    }

    html[data-theme="dark"] #irrigation-status-page :is(
      .fert-root-zone-message,
      .fert-root-zone-duration
    ) {
      background: #111d30 !important;
      border-color: #2a3a50 !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-root-zone.on :is(
      .fert-root-zone-message,
      .fert-root-zone-duration
    ) {
      color: #bae6fd !important;
      background: rgba(7, 89, 133, 0.28) !important;
      border-color: rgba(56, 189, 248, 0.42) !important;
    }

  

    /* =========================================================
       MOBILE USERNAME LABEL FIX — REMOVE VISUAL USER PREFIX
       The responsive table previously inserted "User" before the
       real username, which made James appear as UserJames.
    ========================================================= */
    @media (max-width: 760px) {
      #user-management-page .user-table td:nth-child(1) {
        grid-template-columns: 1fr !important;
      }

      #user-management-page .user-table td:nth-child(1)::before {
        content: none !important;
        display: none !important;
      }
    }

  

    /* =========================================================
       FERTILIZER ROOT MESSAGE CONTRAST FIX
       Make "น้ำ/ปุ๋ยกำลังลงสู่ราก" readable without bright white text.
    ========================================================= */
    #irrigation-status-page .fert-root-zone.on .fert-root-zone-message {
      color: #123247 !important;
      background: #b9dce7 !important;
      border-color: #70b9cf !important;
      font-weight: 950 !important;
      text-shadow: none !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-root-zone.on .fert-root-zone-message {
      color: #102f42 !important;
      background: #a9d2df !important;
      border-color: #55a9c2 !important;
      text-shadow: none !important;
    }

  

    /* =========================================================
       FERTILIZER SCHEDULE ACTIVE ROW + MINUTE SECOND INPUT
    ========================================================= */
    .fert-schedule-period-wrap {
      display: grid;
      justify-items: center;
      gap: 7px;
    }

    .fert-schedule-running-badge {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 92px;
      padding: 5px 8px;
      border-radius: 999px;
      background: linear-gradient(135deg, #0284c7, #06b6d4);
      color: #ffffff;
      font-size: 10px;
      font-weight: 950;
      white-space: nowrap;
      box-shadow:
        0 0 0 3px rgba(14, 165, 233, 0.14),
        0 7px 16px rgba(2, 132, 199, 0.22);
    }

    .fert-schedule-running-dot {
      width: 8px;
      height: 8px;
      flex: 0 0 8px;
      border-radius: 999px;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(255,255,255,0.18);
      animation: fertScheduleRunningDot 0.9s ease-in-out infinite;
    }

    .fert-schedule-row-active {
      position: relative;
      isolation: isolate;
    }

    .fert-schedule-row-active td {
      position: relative;
      overflow: hidden;
      border-top: 1px solid rgba(56, 189, 248, 0.72);
      border-bottom: 1px solid rgba(56, 189, 248, 0.72);
      background:
        linear-gradient(
          105deg,
          rgba(14, 165, 233, 0.06) 0%,
          rgba(14, 165, 233, 0.18) 26%,
          rgba(186, 230, 253, 0.72) 48%,
          rgba(14, 165, 233, 0.18) 70%,
          rgba(14, 165, 233, 0.06) 100%
        );
      background-size: 260% 100%;
      animation: fertScheduleRowFlow 2.2s linear infinite;
    }

    .fert-schedule-row-active td:first-child {
      border-left: 3px solid #0ea5e9;
      box-shadow: inset 5px 0 14px rgba(14,165,233,0.13);
    }

    .fert-schedule-row-active td:last-child {
      border-right: 3px solid #0ea5e9;
    }

    .fert-schedule-row-active .fert-schedule-period {
      color: #ffffff;
      background: linear-gradient(135deg, #0284c7, #06b6d4);
      box-shadow:
        0 0 0 4px rgba(14,165,233,0.13),
        0 8px 18px rgba(2,132,199,0.20);
    }

    .fert-schedule-row-active .fert-schedule-running-badge {
      display: inline-flex;
    }

    .fert-duration-parts {
      display: grid;
      grid-template-columns: minmax(92px, 1fr) auto minmax(92px, 1fr);
      gap: 8px;
      align-items: end;
      min-width: 230px;
    }

    .fert-duration-part {
      min-width: 0;
      display: grid;
      gap: 5px;
      color: #64748b;
      font-size: 10px;
      font-weight: 900;
      text-align: left;
    }

    .fert-duration-part span {
      padding-inline: 3px;
    }

    .fert-duration-separator {
      align-self: center;
      margin-top: -13px;
      color: #38bdf8;
      font-size: 21px;
      line-height: 1;
      font-weight: 950;
    }

    .fert-duration-parts .zone-duration-input {
      min-width: 0;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    @keyframes fertScheduleRowFlow {
      from { background-position: 220% 0; }
      to { background-position: -40% 0; }
    }

    @keyframes fertScheduleRunningDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.36; transform: scale(0.68); }
    }

    html[data-theme="dark"] .fert-schedule-row-active td {
      border-color: rgba(56,189,248,0.58);
      background:
        linear-gradient(
          105deg,
          rgba(7,89,133,0.12) 0%,
          rgba(14,165,233,0.24) 28%,
          rgba(56,189,248,0.34) 48%,
          rgba(14,165,233,0.24) 68%,
          rgba(7,89,133,0.12) 100%
        );
      background-size: 260% 100%;
    }

    html[data-theme="dark"] .fert-duration-part {
      color: #cbd5e1;
    }

    @media (max-width: 760px) {
      .fert-duration-parts {
        min-width: 220px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .fert-schedule-row-active td,
      .fert-schedule-running-dot {
        animation: none !important;
      }
    }

  

    /* =========================================================
       FERTILIZER TIMER TEXT CONTRAST FIX
       Improve "เปิดแล้ว", "เหลือ" and active duration readability.
    ========================================================= */
    #irrigation-status-page .fert-run-timer.running {
      color: #17384a !important;
      background: linear-gradient(135deg, #b8d9e2, #a8d0dc) !important;
      border-color: #65aec2 !important;
      opacity: 1 !important;
      text-shadow: none !important;
    }

    #irrigation-status-page .fert-run-timer.running .fert-run-timer-row,
    #irrigation-status-page .fert-run-timer.running .fert-run-timer-row span {
      color: #17384a !important;
      font-weight: 950 !important;
      text-shadow: none !important;
    }

    #irrigation-status-page .fert-run-timer.running .fert-run-timer-row strong {
      color: #061f2d !important;
      font-weight: 950 !important;
      text-shadow: none !important;
    }

    #irrigation-status-page .fert-root-zone.on .fert-root-zone-duration {
      color: #123247 !important;
      background: #a9d2df !important;
      border-color: #55a9c2 !important;
      font-weight: 950 !important;
      text-shadow: none !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-run-timer.running {
      color: #17384a !important;
      background: linear-gradient(135deg, #b8d9e2, #9fc8d5) !important;
      border-color: #4e9eb6 !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-run-timer.running .fert-run-timer-row,
    html[data-theme="dark"] #irrigation-status-page .fert-run-timer.running .fert-run-timer-row span {
      color: #17384a !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-run-timer.running .fert-run-timer-row strong {
      color: #061f2d !important;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-root-zone.on .fert-root-zone-duration {
      color: #123247 !important;
      background: #a9d2df !important;
      border-color: #55a9c2 !important;
    }

  

    /* =========================================================
       MOBILE FERTILIZER DURATION WIDTH FIX
       Give the minute/second controls enough width on phones.
    ========================================================= */
    @media (max-width: 620px) {
      #irrigation-status-page .fert-schedule-table {
        width: 920px !important;
        min-width: 920px !important;
        table-layout: fixed !important;
      }

      #irrigation-status-page .fert-schedule-table th:nth-child(1),
      #irrigation-status-page .fert-schedule-table td:nth-child(1) {
        width: 11% !important;
      }

      #irrigation-status-page .fert-schedule-table th:nth-child(2),
      #irrigation-status-page .fert-schedule-table td:nth-child(2) {
        width: 24% !important;
      }

      #irrigation-status-page .fert-schedule-table th:nth-child(3),
      #irrigation-status-page .fert-schedule-table td:nth-child(3) {
        width: 27% !important;
      }

      #irrigation-status-page .fert-schedule-table th:nth-child(4),
      #irrigation-status-page .fert-schedule-table td:nth-child(4) {
        width: 38% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        overflow: visible !important;
      }

      #irrigation-status-page .fert-duration-parts {
        width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(118px, 1fr) 18px minmax(118px, 1fr) !important;
        gap: 10px !important;
      }

      #irrigation-status-page .fert-duration-part {
        width: 100% !important;
        min-width: 0 !important;
      }

      #irrigation-status-page .fert-duration-part .zone-duration-input,
      #irrigation-status-page .zone-duration-minute-input,
      #irrigation-status-page .zone-duration-second-input {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
      }

      #irrigation-status-page .fert-schedule-table-wrap {
        max-width: calc(100vw - 32px) !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding-bottom: 4px;
      }
    }

  
    /* =========================================================
       FERTILIZER MANUAL MINUTE SECOND INPUT FIX
    ========================================================= */
    #irrigation-status-page .fert-manual-duration-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      flex-wrap: wrap;
    }

    #irrigation-status-page .fert-manual-duration-parts {
      display: grid;
      grid-template-columns: minmax(82px, 96px) 14px minmax(82px, 96px);
      align-items: end;
      gap: 7px;
    }

    #irrigation-status-page .fert-manual-duration-part {
      display: grid;
      gap: 4px;
      min-width: 0;
      color: #475569;
      font-size: 10px;
      font-weight: 900;
      text-align: center;
    }

    #irrigation-status-page .fert-manual-duration-part .fert-manual-duration {
      width: 100%;
      min-width: 0;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    #irrigation-status-page .fert-manual-duration-colon {
      align-self: center;
      margin-top: -14px;
      color: #38bdf8;
      font-size: 20px;
      font-weight: 950;
    }

    html[data-theme="dark"] #irrigation-status-page .fert-manual-duration-part {
      color: #cbd5e1;
    }

    @media (max-width: 620px) {
      #irrigation-status-page .fert-manual-toolbar {
        align-items: stretch;
      }

      #irrigation-status-page .fert-manual-duration-wrap {
        width: 100%;
        align-items: flex-start;
        justify-content: space-between;
      }

      #irrigation-status-page .fert-manual-duration-parts {
        width: min(250px, 100%);
        grid-template-columns: minmax(90px, 1fr) 16px minmax(90px, 1fr);
      }
    }

    /* EVAP fans: five visual fans follow three independent contactor outputs. */
    .evap-fan-stage {
      position: relative;
      overflow: hidden;
      min-height: 250px;
      margin: 14px 0 18px;
      padding: 28px 18px 58px;
      border: 1px solid #bae6fd;
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 0%, rgba(56, 189, 248, .18), transparent 48%),
        linear-gradient(180deg, #f0f9ff 0%, #e0f2fe 62%, #d1fae5 100%);
    }

    .evap-fan-bank {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(5, minmax(86px, 1fr));
      gap: 14px;
      align-items: center;
    }

    .evap-fan-unit {
      display: grid;
      justify-items: center;
      gap: 8px;
      color: #0f172a;
      font-size: 12px;
      font-weight: 900;
    }

    .evap-fan-housing {
      position: relative;
      width: min(116px, 100%);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      border: 7px solid #334155;
      border-radius: 50%;
      background: radial-gradient(circle, #f8fafc 0 14%, #cbd5e1 15% 18%, #e2e8f0 19% 64%, #94a3b8 65% 100%);
      box-shadow: inset 0 0 0 5px rgba(255,255,255,.55), 0 12px 24px rgba(15,23,42,.16);
    }

    .evap-fan-blades {
      position: absolute;
      inset: 13%;
      border-radius: 50%;
      background: conic-gradient(
        from 10deg,
        #0ea5e9 0 13%, transparent 13% 25%,
        #0ea5e9 25% 38%, transparent 38% 50%,
        #0ea5e9 50% 63%, transparent 63% 75%,
        #0ea5e9 75% 88%, transparent 88% 100%
      );
      filter: drop-shadow(0 3px 2px rgba(2,132,199,.28));
      transform-origin: center;
    }

    .evap-fan-hub {
      position: relative;
      z-index: 2;
      width: 22%;
      aspect-ratio: 1;
      border: 3px solid #0f172a;
      border-radius: 50%;
      background: #f8fafc;
      box-shadow: 0 2px 5px rgba(15,23,42,.35);
    }

    .evap-fan-unit[data-state="on"] .evap-fan-blades {
      animation: evapFanSpin .62s linear infinite;
    }

    .evap-fan-unit[data-state="on"] .evap-fan-housing {
      border-color: #0284c7;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,.55), 0 0 0 4px rgba(56,189,248,.15), 0 14px 28px rgba(2,132,199,.24);
    }

    .evap-fan-unit[data-state="off"] .evap-fan-blades,
    .evap-fan-unit[data-state="waiting"] .evap-fan-blades {
      animation: none;
      filter: grayscale(.65) opacity(.58);
    }

    .evap-fan-unit small {
      color: #64748b;
      font-size: 10px;
      font-weight: 850;
      text-align: center;
    }

    .evap-fan-group-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(220px, 1fr));
      gap: 12px;
      margin: 14px 0;
    }

    .evap-fan-group-card {
      padding: 14px;
      border: 1px solid var(--line, #dbeafe);
      border-radius: 16px;
      background: rgba(248, 250, 252, .72);
    }

    .evap-fan-group-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 10px;
      font-size: 13px;
      font-weight: 900;
    }

    .evap-fan-group-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }

    .evap-fan-group-actions .curtain-command-btn {
      min-height: 66px;
      padding: 10px 8px;
      font-size: 12px;
    }

    html[data-theme="dark"] .evap-fan-group-card {
      border-color: #334155;
      background: rgba(15, 23, 42, .58);
    }

    html[data-theme="dark"] .evap-fan-unit small { color: #94a3b8; }

    .evap-fan-stage-label {
      position: absolute;
      left: 18px;
      right: 18px;
      bottom: 15px;
      z-index: 3;
      padding: 8px 12px;
      border-radius: 999px;
      color: #f8fafc;
      background: rgba(15,23,42,.82);
      text-align: center;
      font-size: 12px;
      font-weight: 900;
      letter-spacing: .04em;
    }

    .evap-fan-note {
      margin-top: 10px;
      padding: 10px 12px;
      border: 1px dashed #7dd3fc;
      border-radius: 12px;
      color: #075985;
      background: #f0f9ff;
      font-size: 12px;
      font-weight: 750;
      line-height: 1.5;
    }

    @keyframes evapFanSpin { to { transform: rotate(360deg); } }

    html[data-theme="dark"] .evap-fan-stage {
      border-color: #164e63;
      background: radial-gradient(circle at 50% 0%, rgba(14,165,233,.2), transparent 48%), linear-gradient(180deg, #0f172a, #082f49 66%, #064e3b);
    }
    html[data-theme="dark"] .evap-fan-unit { color: #e2e8f0; }
    html[data-theme="dark"] .evap-fan-note { color: #bae6fd; background: rgba(8,47,73,.55); border-color: #0369a1; }

    @media (max-width: 900px) {
      .evap-fan-bank { grid-template-columns: repeat(3, minmax(90px, 1fr)); }
      .evap-fan-group-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .evap-fan-bank { grid-template-columns: repeat(2, minmax(86px, 1fr)); }
      .evap-fan-stage { padding-inline: 12px; }
    }

    /* =========================================================
       Live date and time card in the top bar
    ========================================================= */
    .current-time-card {
      width: 166px;
      min-width: 166px;
      height: 72px;
      min-height: 72px;
      padding: 8px 12px;
      border: 1px solid #dbe3ef;
      border-radius: 16px;
      background:
        radial-gradient(circle at 18% 14%, rgba(255,255,255,.95), transparent 34%),
        linear-gradient(145deg, #eff6ff, #ffffff);
      box-shadow: 0 8px 20px rgba(15,23,42,.08);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr);
      align-items: center;
      gap: 9px;
      flex: 0 0 166px;
      overflow: hidden;
    }

    .current-time-icon {
      width: 34px;
      height: 34px;
      border-radius: 11px;
      display: grid;
      place-items: center;
      color: #2563eb;
      background: #dbeafe;
      box-shadow: inset 0 0 0 1px rgba(37,99,235,.10);
    }

    .current-time-icon svg {
      width: 21px;
      height: 21px;
      display: block;
    }

    .current-time-copy {
      min-width: 0;
      line-height: 1.12;
    }

    .current-time-label {
      display: block;
      color: #64748b;
      font-size: 9px;
      font-weight: 950;
      letter-spacing: .1px;
      white-space: nowrap;
    }

    .current-time-value {
      display: block;
      margin-top: 2px;
      color: #0f172a;
      font-size: 18px;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
      letter-spacing: .2px;
      white-space: nowrap;
    }

    .current-date-value {
      display: block;
      margin-top: 3px;
      color: #64748b;
      font-size: 9px;
      font-weight: 850;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    html[data-theme="dark"] .current-time-card {
      background:
        radial-gradient(circle at 18% 14%, rgba(51,65,85,.68), transparent 34%),
        linear-gradient(145deg, #172554, #0f172a);
      border-color: #33465f;
      box-shadow: 0 10px 24px rgba(0,0,0,.28);
    }

    html[data-theme="dark"] .current-time-icon {
      color: #93c5fd;
      background: rgba(37,99,235,.18);
      box-shadow: inset 0 0 0 1px rgba(96,165,250,.18);
    }

    html[data-theme="dark"] .current-time-value {
      color: #f8fafc;
    }

    html[data-theme="dark"] .current-time-label,
    html[data-theme="dark"] .current-date-value {
      color: #a8b6c9;
    }

    @media (min-width: 621px) and (max-width: 1366px) {
      .current-time-card {
        width: 156px;
        min-width: 156px;
        height: 64px;
        min-height: 64px;
        flex: 0 0 156px;
        padding: 7px 10px;
      }

      .current-time-value { font-size: 16px; }
    }

    @media (max-width: 620px) {
      .current-time-card {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        height: 64px;
        min-height: 64px;
        padding: 7px 12px;
      }

      .current-time-value { font-size: 17px; }
      .current-date-value { font-size: 10px; }
    }

    /* =========================================================
       iPad EVAP fan layout
       Safari on iPad Pro landscape reports a desktop-width viewport (up to
       1366px) while the collapsed sidebar still reduces the usable content.
       Keep both panels balanced and remove every fixed minimum that could
       push the third control group or fifth fan outside its card.
    ========================================================= */
    @supports (-webkit-touch-callout: none) {
      @media (min-width: 621px) and (max-width: 1200px) {
        #evap-fan-status-page .curtain-shell {
          grid-template-columns: minmax(0, 1fr) !important;
        }
      }

      @media (min-width: 1201px) and (max-width: 1366px) {
        #evap-fan-status-page {
          width: 100%;
          max-width: 100%;
          min-width: 0;
          overflow-x: clip;
        }

        #evap-fan-status-page .section {
          min-width: 0;
          padding: 16px;
        }

        body.sidebar-collapsed #evap-fan-status-page .curtain-shell {
          grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
          gap: 14px;
        }

        body:not(.sidebar-collapsed) #evap-fan-status-page .curtain-shell {
          grid-template-columns: minmax(0, 1fr) !important;
        }

        #evap-fan-status-page .curtain-panel {
          width: 100%;
          max-width: 100%;
          min-width: 0;
          overflow: hidden;
          padding: 14px;
          border-radius: 18px;
        }

        #evap-fan-status-page .curtain-panel-head,
        #evap-fan-status-page .evap-fan-group-head,
        #evap-fan-status-page .curtain-env-live-head {
          min-width: 0;
          flex-wrap: wrap;
        }

        #evap-fan-status-page .curtain-panel-head > div,
        #evap-fan-status-page .evap-fan-group-head > span:first-child,
        #evap-fan-status-page .curtain-env-live-head > div {
          min-width: 0;
        }

        #evap-fan-status-page .evap-fan-group-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
          gap: 8px;
        }

        #evap-fan-status-page .evap-fan-group-card {
          min-width: 0;
          padding: 10px;
          border-radius: 14px;
        }

        #evap-fan-status-page .evap-fan-group-head {
          align-content: flex-start;
          min-height: 48px;
          margin-bottom: 8px;
          font-size: 11px;
          line-height: 1.35;
        }

        #evap-fan-status-page .evap-fan-group-head .badge {
          padding: 4px 7px;
          font-size: 9px;
        }

        #evap-fan-status-page .evap-fan-group-actions {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 6px;
        }

        #evap-fan-status-page .evap-fan-group-actions .curtain-command-btn {
          width: 100%;
          min-width: 0;
          min-height: 74px;
          padding: 8px 4px;
          border-radius: 12px;
          font-size: 10px;
          line-height: 1.2;
          overflow-wrap: anywhere;
        }

        #evap-fan-status-page .evap-fan-group-actions .cmd-icon {
          margin-bottom: 4px;
          font-size: 21px;
        }

        #evap-fan-status-page .evap-fan-group-actions .cmd-sub {
          font-size: 8px;
          line-height: 1.15;
        }

        #evap-fan-status-page .auto-rule-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 9px;
        }

        #evap-fan-status-page .auto-rule-card {
          min-width: 0;
          padding: 11px;
          border-radius: 14px;
        }

        #evap-fan-status-page .rule-field input,
        #evap-fan-status-page .rule-field select {
          width: 100%;
          min-width: 0;
          max-width: 100%;
          box-sizing: border-box;
        }

        #evap-fan-status-page .evap-fan-stage {
          min-height: 210px;
          padding: 24px 9px 54px;
          border-radius: 18px;
        }

        #evap-fan-status-page .evap-fan-bank {
          grid-template-columns: repeat(5, minmax(0, 1fr));
          gap: 6px;
        }

        #evap-fan-status-page .evap-fan-unit {
          min-width: 0;
          gap: 6px;
          font-size: 10px;
        }

        #evap-fan-status-page .evap-fan-housing {
          width: clamp(58px, 5.7vw, 78px);
          max-width: 100%;
          border-width: 5px;
        }

        #evap-fan-status-page .evap-fan-stage-label {
          left: 9px;
          right: 9px;
          bottom: 12px;
          padding: 7px 9px;
          font-size: 9px;
          letter-spacing: .02em;
        }

        #evap-fan-status-page .status-grid {
          grid-template-columns: minmax(0, 1fr);
        }
      }
    }

    /* =========================================================
       OUTDOOR LIGHTING — static 4-plot image + pink perimeter UI
       Only an SVG stroke animates while a zone is ON, keeping the
       live dashboard substantially lighter than the old bulb scene.
    ========================================================= */
    #outdoor-light-dashboard .light-image-panel {
      overflow: hidden;
      border-color: rgba(236, 72, 153, 0.26);
      background:
        linear-gradient(145deg, rgba(236,72,153,0.045), transparent 38%),
        var(--card, #ffffff);
    }

    #outdoor-light-dashboard .outdoor-static-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px 18px;
      flex-wrap: wrap;
      margin: 2px 0 12px;
      padding: 10px 13px;
      border: 1px solid rgba(236,72,153,0.20);
      border-radius: 13px;
      background: rgba(253,242,248,0.76);
      color: #64748b;
      font-size: 12px;
      font-weight: 800;
    }

    #outdoor-light-dashboard .outdoor-static-toolbar strong {
      color: #be185d;
      font-weight: 950;
    }

    #outdoor-light-dashboard .outdoor-static-scene {
      position: relative;
      isolation: isolate;
      width: 100%;
      aspect-ratio: 1560 / 806;
      min-height: 0;
      overflow: hidden;
      border: 1px solid rgba(236,72,153,0.28);
      border-radius: 22px;
      background:
        radial-gradient(circle at 50% 38%, rgba(76,29,149,0.24), transparent 58%),
        linear-gradient(145deg, #080b16, #111426 62%, #090b14);
      box-shadow:
        inset 0 0 56px rgba(15,23,42,0.72),
        0 16px 34px rgba(15,23,42,0.13);
      contain: layout paint style;
    }

    #outdoor-light-dashboard .outdoor-static-stage {
      position: absolute;
      inset: 0;
      z-index: 1;
      transform-origin: center center;
    }

    #outdoor-light-dashboard .outdoor-static-stage > img {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      pointer-events: none;
      user-select: none;
      filter: contrast(1.04) brightness(1.08);
    }

    #outdoor-light-dashboard .outdoor-pink-ambient {
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      opacity: 0;
      background:
        radial-gradient(ellipse at 71% 34%, rgba(244,114,182,0.15), transparent 30%),
        radial-gradient(ellipse at 70% 72%, rgba(236,72,153,0.14), transparent 33%),
        radial-gradient(ellipse at 43% 28%, rgba(244,114,182,0.13), transparent 27%),
        radial-gradient(ellipse at 36% 63%, rgba(236,72,153,0.14), transparent 34%);
    }

    #outdoor-light-dashboard .outdoor-static-scene.has-light .outdoor-pink-ambient {
      opacity: 1;
    }

    #outdoor-light-dashboard .outdoor-plot-glow {
      position: absolute;
      z-index: 3;
      display: grid;
      place-items: center;
      pointer-events: none;
      opacity: 1;
      background: transparent;
      overflow: visible;
      --plot-orbit-delay: 0s;
    }

    #outdoor-light-dashboard .outdoor-plot-orbit {
      position: absolute;
      inset: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    /* The pink area and dashed perimeter share the same SVG points. */
    #outdoor-light-dashboard .outdoor-plot-orbit-fill {
      fill: rgba(244,114,182,0.075);
      stroke: none;
      transition: fill 180ms ease, filter 180ms ease;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-orbit-fill {
      fill: rgba(244,114,182,0.28);
      filter:
        drop-shadow(0 0 10px rgba(255,77,166,0.62))
        drop-shadow(0 0 24px rgba(236,72,153,0.35));
    }

    #outdoor-light-dashboard .outdoor-plot-orbit-track,
    #outdoor-light-dashboard .outdoor-plot-orbit-runner,
    #outdoor-light-dashboard .outdoor-plot-orbit-core {
      fill: none;
      vector-effect: non-scaling-stroke;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    #outdoor-light-dashboard .outdoor-plot-orbit-track {
      stroke: rgba(249,168,212,0.58);
      stroke-width: 2.2;
      stroke-dasharray: 3 3;
      filter: drop-shadow(0 0 3px rgba(236,72,153,0.48));
    }

    #outdoor-light-dashboard .outdoor-plot-orbit-runner,
    #outdoor-light-dashboard .outdoor-plot-orbit-core {
      opacity: 0;
      stroke-dasharray: 17 83;
      stroke-dashoffset: 0;
    }

    #outdoor-light-dashboard .outdoor-plot-orbit-runner {
      stroke: #ff3d9d;
      stroke-width: 6;
      filter:
        drop-shadow(0 0 5px rgba(255,61,157,1))
        drop-shadow(0 0 12px rgba(236,72,153,0.95));
    }

    #outdoor-light-dashboard .outdoor-plot-orbit-core {
      stroke: #fff7fb;
      stroke-width: 2;
      filter: drop-shadow(0 0 4px rgba(255,255,255,0.95));
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-orbit-track {
      stroke: rgba(255,105,180,0.96);
      stroke-width: 2.8;
      stroke-dasharray: none;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-orbit-runner,
    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-orbit-core {
      opacity: 1;
      animation: outdoorPinkOrbit 2.8s linear infinite;
      animation-delay: var(--plot-orbit-delay);
    }

    @keyframes outdoorPinkOrbit {
      to { stroke-dashoffset: -100; }
    }

    /* ปรับป้าย Plant: X บวก=ขวา, X ลบ=ซ้าย, Y บวก=ลง, Y ลบ=ขึ้น */

    #outdoor-light-dashboard .outdoor-plot-glow.plot-1 {
      left: 62.0%;
      top: 22.0%;
      width: 16.2%;
      height: 29.0%;

      --plot-orbit-delay: -0.35s;
      --plot-label-x: 300px;
      --plot-label-y: -80px;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.plot-2 {
      left: 55.8%;
      top: 49.7%;
      width: 21.6%;
      height: 46.8%;

      --plot-orbit-delay: -1.05s;
      --plot-label-x: 300px;
      --plot-label-y: -100px;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.plot-3 {
      left: 35.5%;
      top: 18.0%;
      width: 19.5%;
      height: 25.0%;

      --plot-orbit-delay: -1.75s;
      --plot-label-x: -280px;
      --plot-label-y: -80px;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.plot-4 {
      left: 21.4%;
      top: 41.0%;
      width: 26.1%;
      height: 39.5%;

      --plot-orbit-delay: -2.45s;
      --plot-label-x: -320px;
      --plot-label-y: -80px;
    }


    /* =========================================================
   ปรับตำแหน่งป้าย Plant 1–4 เฉพาะ iPad
   X บวก = ขวา, X ลบ = ซ้าย
   Y บวก = ลง, Y ลบ = ขึ้น
    ========================================================= */
    @supports (-webkit-touch-callout: none) {
      @media (min-width: 761px) and (max-width: 1366px) and (min-height: 700px) {

        /* Plant 1 */
        #outdoor-light-dashboard .outdoor-plot-glow.plot-1 {
          --plot-label-x: 180px;  /* แก้ซ้าย–ขวาตรงนี้ */
          --plot-label-y: -80px;  /* แก้ขึ้น–ลงตรงนี้ */
        }

        /* Plant 2 */
        #outdoor-light-dashboard .outdoor-plot-glow.plot-2 {
          --plot-label-x: 220px;  /* แก้ซ้าย–ขวาตรงนี้ */
          --plot-label-y: -100px; /* แก้ขึ้น–ลงตรงนี้ */
        }

        /* Plant 3 */
        #outdoor-light-dashboard .outdoor-plot-glow.plot-3 {
          --plot-label-x: -180px; /* แก้ซ้าย–ขวาตรงนี้ */
          --plot-label-y: -80px;  /* แก้ขึ้น–ลงตรงนี้ */
        }

        /* Plant 4 */
        #outdoor-light-dashboard .outdoor-plot-glow.plot-4 {
          --plot-label-x: -220px; /* แก้ซ้าย–ขวาตรงนี้ */
          --plot-label-y: -80px;  /* แก้ขึ้น–ลงตรงนี้ */
        }
      }
    }

    #outdoor-light-dashboard .outdoor-plot-label {
      position: relative;
      z-index: 2;
      display: grid;
      gap: 7px;
      min-width: clamp(118px, 9.5vw, 158px);
      padding: 10px 13px;
      border: 2px solid rgba(255,255,255,0.78);
      border-radius: 14px;
      background: rgba(2,6,23,0.94);
      color: #ffffff;
      text-align: center;
      text-shadow: 0 1px 2px rgba(0,0,0,0.78);
      box-shadow:
        0 0 0 3px rgba(15,23,42,0.52),
        0 10px 28px rgba(0,0,0,0.48);
      mix-blend-mode: normal;
      backdrop-filter: blur(3px);
      transform: translate(var(--plot-label-x, 0px), var(--plot-label-y, 0px));
    }

    #outdoor-light-dashboard .outdoor-plot-label strong {
      color: #ffffff;
      font-size: clamp(14px, 1.08vw, 18px);
      font-weight: 950;
      line-height: 1.1;
      letter-spacing: 0.01em;
    }

    #outdoor-light-dashboard .outdoor-plot-zone-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      white-space: nowrap;
    }

    #outdoor-light-dashboard .outdoor-plot-zone-badge,
    #outdoor-light-dashboard .outdoor-plot-state-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: clamp(11px, 0.86vw, 14px);
      font-weight: 950;
      line-height: 1;
      letter-spacing: 0.035em;
    }

    #outdoor-light-dashboard .outdoor-plot-zone-badge {
      border: 1px solid rgba(249,168,212,0.72);
      background: rgba(190,24,93,0.34);
      color: #fdf2f8;
    }

    #outdoor-light-dashboard .outdoor-plot-state-badge {
      border: 1px solid rgba(148,163,184,0.52);
      background: rgba(51,65,85,0.86);
      color: #e2e8f0;
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-off .outdoor-plot-label {
      opacity: 0.96;
      border-color: rgba(203,213,225,0.76);
      background: rgba(2,6,23,0.94);
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-label {
      border-color: #ff73b7;
      box-shadow:
        0 0 0 3px rgba(190,24,93,0.28),
        0 0 22px rgba(236,72,153,0.62),
        0 10px 28px rgba(0,0,0,0.48);
    }

    #outdoor-light-dashboard .outdoor-plot-glow.is-on .outdoor-plot-state-badge {
      border-color: rgba(255,255,255,0.84);
      background: linear-gradient(135deg, #db2777, #ff4fa3);
      color: #ffffff;
      box-shadow: 0 0 12px rgba(236,72,153,0.66);
    }

    #outdoor-light-dashboard .light-static-summary {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #outdoor-light-dashboard .light-static-summary .zone-summary-card {
      border-color: rgba(236,72,153,0.20);
    }

    #outdoor-light-dashboard .light-static-summary .zone-summary-value {
      color: #db2777;
    }

    #outdoor-light-dashboard .light-mode-tabs .zone-mode-tab.active {
      background: linear-gradient(135deg, #db2777, #f472b6);
      box-shadow: 0 8px 20px rgba(219,39,119,0.20);
    }

    #outdoor-light-dashboard .light-manual-note,
    #outdoor-light-dashboard .light-schedule-note {
      margin-bottom: 12px;
      border-color: rgba(236,72,153,0.24);
      background: linear-gradient(135deg, rgba(253,242,248,0.94), rgba(255,255,255,0.90));
    }

    #outdoor-light-dashboard .light-manual-note {
      padding: 11px 13px;
      border: 1px solid rgba(236,72,153,0.24);
      border-radius: 14px;
      color: #64748b;
      font-size: 12px;
      line-height: 1.5;
    }

    #outdoor-light-dashboard .light-manual-card.is-on {
      border-color: rgba(236,72,153,0.46);
      background: linear-gradient(145deg, rgba(253,242,248,0.96), rgba(255,255,255,0.98));
      box-shadow: 0 9px 24px rgba(219,39,119,0.09);
    }

    #outdoor-light-dashboard .light-schedule-table {
      min-width: 1040px;
    }

    #outdoor-light-dashboard .light-schedule-table select {
      width: 100%;
      min-height: 40px;
      border: 1px solid #cbd5e1;
      border-radius: 11px;
      padding: 8px 10px;
      background: #ffffff;
      color: #0f172a;
      font-weight: 850;
      outline: none;
    }

    #outdoor-light-dashboard .light-schedule-table select:focus {
      border-color: #ec4899;
      box-shadow: 0 0 0 3px rgba(236,72,153,0.13);
    }

    #outdoor-light-dashboard .light-schedule-table .fert-schedule-period {
      background: #fce7f3;
      color: #be185d;
    }

    #outdoor-light-dashboard .light-duration-cell {
      min-width: 180px;
    }

    #outdoor-light-dashboard .light-duration-value {
      display: block;
      color: #334155;
      font-weight: 900;
      line-height: 1.35;
    }

    #outdoor-light-dashboard .light-duration-value.is-warning {
      color: #b45309;
    }

    #outdoor-light-dashboard .light-duration-badge {
      display: inline-flex;
      margin-top: 5px;
      padding: 3px 8px;
      border-radius: 999px;
      background: rgba(219,39,119,0.10);
      color: #be185d;
      font-size: 10px;
      font-weight: 900;
    }

    #outdoor-light-dashboard .light-duration-badge.is-warning {
      background: rgba(245,158,11,0.16);
      color: #b45309;
    }

    #outdoor-light-dashboard .light-schedule-row-warning:not(.light-schedule-row-active) td {
      background: rgba(245,158,11,0.07);
    }

    #outdoor-light-dashboard .light-schedule-row-active td {
      border-top: 1px solid rgba(244,114,182,0.72);
      border-bottom: 1px solid rgba(244,114,182,0.72);
      background: linear-gradient(105deg, rgba(253,242,248,0.62), rgba(249,168,212,0.28), rgba(253,242,248,0.62));
      animation: none !important;
    }

    #outdoor-light-dashboard .light-schedule-row-active td:first-child {
      border-left: 3px solid #ec4899;
      box-shadow: inset 5px 0 14px rgba(236,72,153,0.12);
    }

    #outdoor-light-dashboard .light-schedule-row-active td:last-child {
      border-right: 3px solid #ec4899;
    }

    #outdoor-light-dashboard .light-schedule-row-active .fert-schedule-period,
    #outdoor-light-dashboard .light-schedule-running-badge {
      color: #ffffff;
      background: linear-gradient(135deg, #db2777, #f472b6);
      box-shadow: 0 6px 16px rgba(219,39,119,0.20);
    }

    #outdoor-light-dashboard .light-schedule-row-active .light-schedule-running-badge {
      display: inline-flex;
    }

    #outdoor-light-dashboard .light-schedule-running-badge .fert-schedule-running-dot {
      animation: none !important;
    }

    #outdoor-light-dashboard .btn-pink {
      border-color: #db2777;
      background: linear-gradient(135deg, #db2777, #f472b6);
      color: #ffffff;
      box-shadow: 0 8px 18px rgba(219,39,119,0.18);
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-image-panel,
    html[data-theme="dark"] #outdoor-light-dashboard .light-settings-panel {
      background: linear-gradient(145deg, rgba(131,24,67,0.08), #111c2b 42%) !important;
      border-color: rgba(244,114,182,0.22) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .outdoor-static-toolbar,
    html[data-theme="dark"] #outdoor-light-dashboard .light-manual-note,
    html[data-theme="dark"] #outdoor-light-dashboard .light-schedule-note {
      background: rgba(49,18,38,0.62) !important;
      border-color: rgba(244,114,182,0.24) !important;
      color: #cbd5e1 !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-manual-card.is-on {
      background: linear-gradient(145deg, rgba(131,24,67,0.18), #121d2d) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-schedule-row-active td {
      background: linear-gradient(105deg, rgba(80,7,36,0.30), rgba(190,24,93,0.26), rgba(80,7,36,0.30)) !important;
      border-color: rgba(244,114,182,0.48) !important;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-duration-value {
      color: #e2e8f0;
    }

    html[data-theme="dark"] #outdoor-light-dashboard .light-duration-value.is-warning,
    html[data-theme="dark"] #outdoor-light-dashboard .light-duration-badge.is-warning {
      color: #fbbf24;
    }

    @media (max-width: 760px) {
      #outdoor-light-dashboard .outdoor-static-scene {
        display: block;
        width: 100%;
        height: 703px;
        aspect-ratio: auto;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y;
        overscroll-behavior-x: contain;
      }
      #outdoor-light-dashboard .outdoor-static-stage {
        position: relative;
        inset: auto;
        width: 1360px;
        min-width: 1360px;
        height: 703px;
      }

      #outdoor-light-dashboard .light-static-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }
      #outdoor-light-dashboard .light-static-summary .zone-summary-card {
        min-height: 94px;
        padding: 13px 10px;
      }
      #outdoor-light-dashboard .light-static-summary .zone-summary-label {
        font-size: 11px;
        line-height: 1.3;
      }
      #outdoor-light-dashboard .light-static-summary .zone-summary-value {
        font-size: clamp(24px, 8vw, 38px);
      }
      #outdoor-light-dashboard .light-schedule-table { width: 1040px; min-width: 1040px; }
      #outdoor-light-dashboard .light-schedule-table-wrap {
        width: 100%;
        max-width: calc(100vw - 32px);
        margin-inline: auto;
      }
    }

    @media (max-width: 520px) {
      #outdoor-light-dashboard .outdoor-static-toolbar { align-items: flex-start; }
    }

    @media (prefers-reduced-motion: reduce) {
      #outdoor-light-dashboard .outdoor-static-scene *,
      #outdoor-light-dashboard .light-schedule-table * {
        animation: none !important;
        transition: none !important;
      }
    }

  

          .dashboard-startup-overlay { position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(226, 238, 250, .46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
          .dashboard-startup-overlay.visible { display: flex; }
          .dashboard-startup-card { width: min(440px, 92vw); padding: 24px; border: 1px solid rgba(148, 163, 184, .38); border-radius: 22px; background: rgba(255, 255, 255, .96); box-shadow: 0 24px 70px rgba(15, 23, 42, .22); text-align: center; color: #0f172a; }
          .dashboard-startup-spinner { width: 46px; height: 46px; margin: 0 auto 15px; border: 5px solid #dbeafe; border-top-color: #2563eb; border-radius: 50%; animation: dashboard-startup-spin .8s linear infinite; }
          .dashboard-startup-overlay.problem .dashboard-startup-spinner { animation-duration: 1.6s; border-top-color: #f59e0b; }
          .dashboard-startup-title { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
          .dashboard-startup-detail { margin: 0; color: #64748b; font-size: 13px; line-height: 1.55; }
          .dashboard-startup-retry { display: none; margin: 17px auto 0; min-height: 40px; padding: 9px 18px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #fff; font-weight: 900; cursor: pointer; }
          .dashboard-startup-overlay.problem .dashboard-startup-retry { display: inline-flex; align-items: center; justify-content: center; }
          html[data-theme="dark"] .dashboard-startup-overlay { background: rgba(2, 8, 23, .58); }
          html[data-theme="dark"] .dashboard-startup-card { background: rgba(15, 23, 42, .97); border-color: #334155; color: #f8fafc; }
          @keyframes dashboard-startup-spin { to { transform: rotate(360deg); } }
        

    .summary-card.summary-light::after { background: rgba(250, 204, 21, 0.16); }
    .metric-chart-grid { grid-template-columns: repeat(4, minmax(230px, 1fr)); }
    .chart-light-dot { background: #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18); }
    .history-metric-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; }
    .history-metric-tab { min-height: 36px; padding: 9px 14px; border: 1px solid #cbd5e1; border-radius: 999px; background: #ffffff; color: #334155; cursor: pointer; font-size: 12px; font-weight: 900; transition: all 0.15s ease; }
    .history-metric-tab:hover { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }
    .history-metric-tab.active { border-color: #2563eb; background: linear-gradient(135deg, #2563eb, #0ea5e9); color: #ffffff; box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18); }
    .single-history-strip { margin-top: 14px; }
    html[data-theme="dark"] .history-metric-tab { background: #121d2d !important; color: #b8c5d6 !important; border-color: #304158 !important; box-shadow: none !important; }
    html[data-theme="dark"] .history-metric-tab:hover { background: #17263a !important; color: #dbeafe !important; border-color: #4f78a8 !important; }
    html[data-theme="dark"] .history-metric-tab.active { background: linear-gradient(135deg, #356fbd, #278da7) !important; color: #ffffff !important; border-color: #6ba6e8 !important; box-shadow: 0 7px 18px rgba(36,104,181,.23) !important; }
    html[data-theme="dark"] .single-history-strip { background: linear-gradient(180deg, #111b2b, #0e1725) !important; border-color: #2c3c52 !important; }
    @media (max-width: 1280px) { .metric-chart-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)); } }
    @media (max-width: 760px) { .metric-chart-grid { grid-template-columns: 1fr; } .history-metric-tabs { gap: 6px; } .history-metric-tab { padding: 8px 12px; } }
  

    html[lang="en"] #user-management-page .user-table td:nth-child(1)::before { content: none !important; display: none !important; }
    html[lang="en"] #user-management-page .user-table td:nth-child(2)::before { content: "Display name"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(3)::before { content: "Role"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(4)::before { content: "Status"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(5)::before { content: "Monitoring access"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(6)::before { content: "Control access"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(7)::before { content: "Last login"; }
    html[lang="en"] #user-management-page .user-table td:nth-child(8)::before { content: "Actions"; }

    /* Project-owned 3D map geometry. No inline styles (CSP style-src self). */
    #evap-map { position: relative; isolation: isolate; background: #061c30 !important; }
    html #evap-map > img.evap-map-img { filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
    .sf-map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
    .sf-map-overlay .sf-map-cards { position: absolute; inset: 0; }
    .sf-map-overlay .evap-tag[data-sensor-no="1"] { left: 38% !important; top: 49% !important; }
    .sf-map-overlay .evap-tag[data-sensor-no="2"] { left: 76% !important; top: 25% !important; }
    .sf-map-overlay .evap-tag { z-index: 5; opacity: 1; }
    .sf-map-overlay .evap-map-leaders { z-index: 3; }
    .sf-map-overlay .evap-map-leaders path { stroke-width: 2; filter: drop-shadow(0 0 3px #22d3ee); }
    .sf-map-overlay .evap-sensor-marker {
      position: absolute; width: 17px; height: 21px; border: 1px solid #b9e4eb;
      border-radius: 5px; background: linear-gradient(135deg,#fff,#e6eff1);
      box-shadow: 0 0 0 8px #22d3ee30, 0 0 24px #22d3eebb; z-index: 4;
    }
    .sf-map-overlay [data-marker-sensor="1"] { left: 48%; top: 54%; }
    .sf-map-overlay [data-marker-sensor="2"] { left: 61%; top: 34%; }
    .sf-map-overlay .evap-sensor-marker::after {
      content: ''; position: absolute; left: 6px; top: 20px; width: 4px; height: 20px;
      border-radius: 0 0 3px 3px; background: linear-gradient(90deg,#a0b4bb,#edf6f7);
    }
    .sf-map-overlay .evap-map-fan-layer { position: absolute; inset: 0; z-index: 2; }
    .sf-map-overlay .sf-map-exhaust {
      position: absolute; width: 6.4%; aspect-ratio: .96; transform: translate(-50%,-50%) skewY(11deg);
    }
    .sf-map-overlay [data-map-fan="1"] { left: 15%; top: 59%; }
    .sf-map-overlay [data-map-fan="2"] { left: 22%; top: 61.8%; }
    .sf-map-overlay [data-map-fan="3"] { left: 41.2%; top: 69.2%; }
    .sf-map-overlay [data-map-fan="4"] { left: 48.3%; top: 72%; }
    .sf-map-fan-frame { position: absolute; inset: 0; border: 3px solid #9aadb4; background: linear-gradient(135deg,#d3dfe2,#718c98); box-shadow: 3px 4px 5px #03152190,inset 0 0 0 2px #e4ecef; }
    .sf-map-fan-frame::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle,#12252d,#061017 70%); border: 2px solid #bdcdd3; }
    .sf-map-fan-rotor { position: absolute; inset: 11%; border-radius: 50%; }
    .sf-map-fan-rotor i { position: absolute; left: 45%; top: 6%; width: 33%; height: 43%; border-radius: 75% 15% 60% 20%; background: linear-gradient(135deg,#f1f5f6,#8099a3); transform-origin: 15% 103%; }
    .sf-map-fan-rotor i:nth-child(2) { transform: rotate(90deg); }
    .sf-map-fan-rotor i:nth-child(3) { transform: rotate(180deg); }
    .sf-map-fan-rotor i:nth-child(4) { transform: rotate(270deg); }
    .sf-map-fan-grille { position: absolute; inset: 7%; border-radius: 50%; background: repeating-radial-gradient(circle,transparent 0 5%,#a8becb80 5.5% 6.5%,transparent 7% 12%); border: 1px solid #d1dce0; }
    .sf-map-fan-hub { position: absolute; left: 42%; top: 42%; width: 16%; height: 16%; border-radius: 50%; background: radial-gradient(circle at 30% 30%,#e6f1f3,#66818c); border: 1px solid #d6e3e9; }
    .sf-map-exhaust[data-state="on"] .sf-map-fan-rotor { animation: evapFanSpin .62s linear infinite; }
    .sf-map-exhaust[data-state="on"] .sf-map-fan-frame { border-color: #61cfdb; }
    .sf-map-exhaust[data-state="off"] .sf-map-fan-rotor, .sf-map-exhaust[data-state="waiting"] .sf-map-fan-rotor { animation: none; }

    /* Side shade follows the greenhouse wall perspective. */
    .sf-map-overlay .sf-map-shade {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background: repeating-linear-gradient(15deg,#213b46ba 0 2px,#5c7380ad 2px 4px);
      clip-path: polygon(53.4% 60.8%,85.6% 24.6%,85.6% 49%,53.4% 85.5%);
      transition: clip-path 2.5s ease-in-out,opacity .4s;
    }
    .sf-map-overlay .sf-map-shade[data-map-curtain="open"] { clip-path: polygon(53.4% 60.8%,85.6% 24.6%,85.6% 26.2%,53.4% 62.4%); }
    .sf-map-overlay .sf-map-shade[data-map-curtain="waiting"] { opacity: 0; }
    .sf-map-overlay .sf-map-shade-label, .sf-map-overlay .sf-map-pump-label {
      position: absolute; padding: 5px 9px; border: 1px solid #3d718b; border-radius: 8px;
      color: #e8f6ff; background: #082334eb; font-size: 11px; font-weight: 700; white-space: nowrap;
      transform: translate(-50%,-50%); z-index: 2;
    }
    .sf-map-overlay .sf-map-shade-label { left: 71%; top: 58%; }
    .sf-map-overlay .sf-map-pump { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
    .sf-map-overlay .sf-map-pump svg { width: 100%; height: 100%; }
    .sf-map-overlay .sf-map-pump-label { left: 88%; top: 44%; }
    .sf-map-water-flow { fill: none; stroke: #51e3ff; stroke-width: .42; stroke-linecap: round; stroke-dasharray: 1.1 .9; opacity: 0; }
    .sf-map-pump-pulse { fill: #22d3ee22; stroke: #5eeaff; stroke-width: .2; opacity: 0; transform-box: fill-box; transform-origin: center; }
    .sf-map-pump[data-state="on"] .sf-map-water-flow { opacity: 1; animation: sfWaterFlow 1s linear infinite; }
    .sf-map-pump[data-state="on"] .sf-map-pump-pulse { animation: sfPumpPulse 1.4s ease-out infinite; }
    .sf-map-overlay .sf-map-pump[data-state="on"] .sf-map-pump-label { color: #79f6dd; border-color: #2dd4bf; }
    @keyframes sfWaterFlow { to { stroke-dashoffset: -8; } }
    @keyframes sfPumpPulse { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.55); } }
    @media(prefers-reduced-motion:reduce) { .sf-map-water-flow,.sf-map-pump-pulse { animation-duration: 4s !important; } .sf-map-overlay .sf-map-shade { transition-duration: .01s; } }

    .sf-greenhouse-map { position: relative; isolation: isolate; background: #061c30; }
    html .sf-greenhouse-map > img.evap-map-img { width: 100%; height: auto; display: block; filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }
    .sf-device-scene { position: relative; aspect-ratio: 1.75; overflow: hidden; border-radius: 18px; border: 1px solid #344b60; background: #061c30; margin-top: 16px; }
    .sf-device-scene .sf-greenhouse-map { width: 110%; max-width: none; transform: translate(-5%,-3%); }
    .sf-device-scene-pump .sf-greenhouse-map { width: 240%; transform: translate(-56%,-5%); }
    .sf-device-scene .evap-map-img { border-radius: 0; }
    .sf-device-scene .sf-map-cards, .sf-device-scene .evap-map-leaders, .sf-device-scene .evap-sensor-marker { display: none; }
    .sf-device-scene .sf-map-pump-label, .sf-device-scene .sf-map-shade-label { display: none; }
    .sf-device-scene-caption { position: absolute; bottom: 12px; left: 12px; z-index: 7; border: 1px solid #3b6478; border-radius: 10px; padding: 7px 12px; color: #e6f6ff; background: #082334e8; font-size: 12px; font-weight: 700; }
    /* A narrow water stream inside rounded blue pipework, with moving
       highlights only when the board confirms that the pump is running. */
    .sf-map-water-pipe { fill: none; stroke: #0763a9; stroke-width: .48; stroke-linecap: round; stroke-linejoin: round; }
    .sf-map-pipe-sheen { fill: none; stroke: #81c5ee; stroke-width: .1; opacity: .6; }
    .sf-map-water-flow { stroke: #b4f3ff; stroke-width: .12; stroke-dasharray: .25 1.35; }
    .sf-map-pump[data-state="on"] .sf-map-water-flow { animation: sfWaterFlow 2s linear infinite; filter: drop-shadow(0 0 1px #71daff); }
    .sf-map-pump[data-state="waiting"] .sf-map-water-pipe,.sf-map-pump[data-state="waiting"] .sf-map-pipe-sheen { opacity: .3; }
    .system-activity-item.sf-activity-device { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .system-activity-item.sf-activity-device strong { min-width: 0; overflow-wrap: anywhere; }
    .system-activity-item.sf-activity-device > span { margin-left: auto; flex-shrink: 0; color: #75efbc; }