/* ============================================================
   NETITI FARM — Dashboard Styles (White Theme)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --sb:          #16241a;
  --sb-2:        #1e3023;
  --sb-hover:    rgba(255,255,255,.06);
  --sb-active-bg:rgba(255,255,255,.1);
  --sb-border:   rgba(255,255,255,.07);
  --sb-text:     #7aad8a;
  --sb-text2:    #4d7560;
  --sb-head:     #ffffff;
  --sb-w:        240px;
  --tb-h:        60px;

  --page:       #f4f6f4;
  --card:       #ffffff;
  --card-hover: #fafcfa;
  --border:     #e2e9e2;
  --border2:    #d0dbd0;

  --t1: #1a2e20;
  --t2: #3b5a45;
  --t3: #6b8a76;
  --t4: #9eb5a7;

  --g:      #2e7d32;
  --g2:     #388e3c;
  --g3:     #4caf50;
  --g-pale: #e8f5e9;
  --g-light:#f1f8f2;

  --r:      #c62828;
  --r2:     #d32f2f;
  --r3:     #ef5350;
  --r-pale: #ffebee;

  --o:      #e65100;
  --o-pale: #fff3e0;
  --b:      #1565c0;
  --b-pale: #e3f2fd;
  --p:      #6a1b9a;
  --p-pale: #f3e5f5;

  --sh-sm: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:    0 2px 8px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.04);
  --sh-md: 0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05);
  --sh-lg: 0 8px 28px rgba(0,0,0,.1),0 4px 12px rgba(0,0,0,.06);

  --rad: 10px;
  --rad-sm: 6px;
  --rad-lg: 14px;
  --rad-xl: 18px;
  --tr: .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-font-smoothing:antialiased}
body{font-family:'Inter',sans-serif;background:var(--page);color:var(--t1);min-height:100vh;overflow-x:hidden}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cdd9cd;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#b0c4b0}
a{color:var(--g);text-decoration:none;transition:color var(--tr)}
a:hover{color:var(--g2)}
button{cursor:pointer;border:none;background:none;font-family:inherit}
svg{display:block}

/* ── App Shell ──────────────────────────────────────────────── */
.app{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ────────────────────────────────────────────────── */
.sidebar{
  width:var(--sb-w);flex-shrink:0;
  background:var(--sb);display:flex;flex-direction:column;
  height:100vh;overflow-y:auto;overflow-x:hidden;
  transition:width var(--tr);z-index:100;
  position:relative;
}
.sidebar::-webkit-scrollbar{width:0}
.sidebar.collapsed{width:60px}

.sb-logo{
  display:flex;align-items:center;gap:.75rem;
  padding:1.1rem 1.1rem .8rem;border-bottom:1px solid var(--sb-border);
  flex-shrink:0;
}
.sb-logo-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  background:linear-gradient(135deg,var(--g2),var(--g3));
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  box-shadow:0 2px 8px rgba(76,175,80,.4);
}
.sb-logo-text{
  font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;
  font-size:.95rem;color:#fff;letter-spacing:.02em;white-space:nowrap;
  overflow:hidden;
}
.sb-logo-text em{color:var(--g3);font-style:normal}
.sidebar.collapsed .sb-logo-text{display:none}

.sb-section-label{
  font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--sb-text2);padding:.9rem 1.1rem .35rem;
  white-space:nowrap;overflow:hidden;
  transition:opacity var(--tr);
}
.sidebar.collapsed .sb-section-label{opacity:0;height:0;padding:0}

.nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem 1.1rem;margin:1px .5rem;border-radius:7px;
  color:var(--sb-text);font-size:.83rem;font-weight:500;
  cursor:pointer;transition:all var(--tr);position:relative;
  white-space:nowrap;overflow:hidden;
}
.nav-item:hover{background:var(--sb-hover);color:rgba(255,255,255,.85)}
.nav-item.active{
  background:var(--sb-active-bg);color:#fff;font-weight:600;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:18px;background:var(--g3);border-radius:0 2px 2px 0;
}
.nav-item .ni-icon{
  width:32px;height:32px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
  background:rgba(255,255,255,.07);transition:all var(--tr);
}
.nav-item.active .ni-icon{background:rgba(76,175,80,.2)}
.nav-item:hover .ni-icon{background:rgba(255,255,255,.1)}
.sidebar.collapsed .nav-item{padding:.6rem;justify-content:center;margin:1px .35rem}
.sidebar.collapsed .nav-item span.nav-text{display:none}
.nav-badge{
  margin-left:auto;background:var(--r);color:#fff;
  font-size:.62rem;font-weight:700;padding:.1rem .4rem;border-radius:4px;
  min-width:18px;text-align:center;
}
.sidebar.collapsed .nav-badge{
  position:absolute;top:4px;right:4px;padding:.05rem .3rem;font-size:.58rem;
}

.sb-bottom{margin-top:auto;padding:.8rem .5rem;border-top:1px solid var(--sb-border)}
.sb-user{display:flex;align-items:center;gap:.65rem;padding:.5rem .6rem;border-radius:7px;cursor:pointer;transition:all var(--tr)}
.sb-user:hover{background:var(--sb-hover)}
.sb-avatar{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--g),#66bb6a);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;font-weight:700;
}
.sb-user-info{overflow:hidden}
.sb-user-name{font-size:.8rem;font-weight:600;color:rgba(255,255,255,.9);white-space:nowrap}
.sb-user-role{font-size:.68rem;color:var(--sb-text2);white-space:nowrap}
.sidebar.collapsed .sb-user-info{display:none}
.sidebar.collapsed .sb-user{justify-content:center}

.sb-collapse-btn{
  position:absolute;top:50%;right:-12px;transform:translateY(-50%);
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;color:var(--t3);cursor:pointer;
  transition:all var(--tr);z-index:10;
  box-shadow:var(--sh-sm);
}
.sb-collapse-btn:hover{background:var(--g);color:#fff;border-color:var(--g)}

/* ── Main Area ──────────────────────────────────────────────── */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{
  height:var(--tb-h);background:var(--card);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;
  flex-shrink:0;z-index:50;
}
.topbar-title{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1rem;font-weight:700;
  color:var(--t1);margin-right:auto;
}
.topbar-title .tb-page{color:var(--g);font-size:.78rem;font-weight:500;display:block;margin-top:.1rem}
.topbar-search{
  display:flex;align-items:center;gap:.5rem;
  background:var(--page);border:1px solid var(--border);border-radius:7px;
  padding:.4rem .8rem;
}
.topbar-search input{
  border:none;background:none;outline:none;font-size:.82rem;color:var(--t1);width:180px;
}
.topbar-search input::placeholder{color:var(--t4)}
.topbar-search .search-icon{font-size:.85rem;color:var(--t4)}
.tb-icon-btn{
  width:36px;height:36px;border-radius:8px;
  background:var(--page);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--t2);cursor:pointer;transition:all var(--tr);
  position:relative;
}
.tb-icon-btn:hover{background:var(--g-pale);border-color:var(--g);color:var(--g)}
.tb-badge{
  position:absolute;top:-3px;right:-3px;
  width:16px;height:16px;border-radius:50%;
  background:var(--r);color:#fff;font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--card);
}
.tb-live{
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:600;color:var(--g);
  background:var(--g-pale);border:1px solid rgba(46,125,50,.2);
  border-radius:20px;padding:.25rem .75rem;
}
.tb-live-dot{width:6px;height:6px;border-radius:50%;background:var(--g3);animation:pulse-dot 1.5s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}

/* ── Content ────────────────────────────────────────────────── */
.content{flex:1;overflow-y:auto;padding:1.5rem}
.view{display:none}
.view.active{display:block;animation:view-in .25s ease}
@keyframes view-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── View Header ────────────────────────────────────────────── */
.view-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;
}
.view-header h2{
  font-family:'Plus Jakarta Sans',sans-serif;font-size:1.3rem;font-weight:800;color:var(--t1);
}
.view-header p{font-size:.82rem;color:var(--t3);margin-top:.25rem}
.view-actions{display:flex;gap:.5rem;align-items:center}

/* ── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:600;padding:.45rem .9rem;
  border-radius:var(--rad-sm);transition:all var(--tr);cursor:pointer;
  white-space:nowrap;
}
.btn-primary{background:var(--g);color:#fff;box-shadow:0 2px 6px rgba(46,125,50,.25)}
.btn-primary:hover{background:var(--g2);color:#fff;box-shadow:0 4px 12px rgba(46,125,50,.35);transform:translateY(-1px)}
.btn-secondary{background:var(--g-pale);color:var(--g);border:1px solid rgba(46,125,50,.2)}
.btn-secondary:hover{background:var(--g-light);border-color:var(--g)}
.btn-ghost{background:transparent;color:var(--t2);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--page);border-color:var(--border2);color:var(--t1)}
.btn-danger{background:var(--r);color:#fff}
.btn-danger:hover{background:var(--r2);color:#fff}
.btn-sm{font-size:.72rem;padding:.3rem .65rem}

/* ── KPI Grid ───────────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.kpi-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad-lg);
  padding:1.25rem 1.4rem;box-shadow:var(--sh-sm);transition:all var(--tr);
  position:relative;overflow:hidden;
}
.kpi-card:hover{box-shadow:var(--sh-md);border-color:var(--border2);transform:translateY(-2px)}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}
.kpi-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  flex-shrink:0;
}
.kpi-icon.green{background:var(--g-pale)}
.kpi-icon.red{background:var(--r-pale)}
.kpi-icon.blue{background:var(--b-pale)}
.kpi-icon.orange{background:var(--o-pale)}
.kpi-icon.purple{background:var(--p-pale)}
.kpi-delta{
  font-size:.7rem;font-weight:600;padding:.15rem .45rem;
  border-radius:4px;display:flex;align-items:center;gap:.2rem;
}
.kpi-delta.up{background:#e8f5e9;color:#2e7d32}
.kpi-delta.down{background:#ffebee;color:#c62828}
.kpi-delta.neutral{background:#f5f5f5;color:#757575}
.kpi-val{
  font-family:'JetBrains Mono',monospace;font-size:1.75rem;font-weight:600;
  color:var(--t1);line-height:1;margin-bottom:.35rem;
}
.kpi-label{font-size:.75rem;color:var(--t3);font-weight:500}
.kpi-sub{font-size:.68rem;color:var(--t4);margin-top:.2rem}

/* ── Cards ──────────────────────────────────────────────────── */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  box-shadow:var(--sh-sm);overflow:hidden;
}
.card-header{
  padding:.9rem 1.2rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.card-title{font-size:.88rem;font-weight:700;color:var(--t1)}
.card-subtitle{font-size:.73rem;color:var(--t3);margin-top:.15rem}
.card-body{padding:1.2rem}
.card-body.p0{padding:0}

/* ── Grid helpers ───────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}
.g-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.flex{display:flex}
.flex-col{display:flex;flex-direction:column}
.gap-1{gap:.5rem}.gap-2{gap:1rem}.gap-3{gap:1.5rem}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}

/* ── Charts ─────────────────────────────────────────────────── */
.chart-wrap{padding:1.2rem}
.chart-title{font-size:.82rem;font-weight:700;color:var(--t1);margin-bottom:.3rem}
.chart-sub{font-size:.7rem;color:var(--t3);margin-bottom:1rem}

/* SVG Line Chart */
.svg-chart{width:100%;height:auto;overflow:visible}
.chart-grid-line{stroke:#f0f4f0;stroke-width:1}
.chart-line-g{stroke:var(--g3);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart-line-r{stroke:var(--r3);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart-line-b{stroke:#42a5f5;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.chart-area-g{fill:url(#grad-g);opacity:.7}
.chart-area-b{fill:url(#grad-b);opacity:.7}
.chart-dot{r:3.5;transition:r var(--tr);cursor:pointer}
.chart-dot:hover{r:5.5}
.chart-x-label{font-size:9px;fill:#9eb5a7;text-anchor:middle;font-family:'Inter',sans-serif}
.chart-y-label{font-size:9px;fill:#9eb5a7;text-anchor:end;font-family:'Inter',sans-serif}
.chart-tooltip{
  position:absolute;background:var(--t1);color:#fff;
  font-size:.7rem;padding:.3rem .65rem;border-radius:5px;
  pointer-events:none;white-space:nowrap;
  opacity:0;transition:opacity .15s;
}

/* Bar Chart (CSS) */
.bar-chart{display:flex;align-items:flex-end;gap:6px;height:100px;padding:.5rem 0 0}
.bar-wrap{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex:1}
.bar{
  width:100%;border-radius:4px 4px 0 0;
  transition:height .7s cubic-bezier(.34,1.56,.64,1);
  position:relative;cursor:pointer;min-height:4px;
}
.bar.g{background:linear-gradient(to top,#388e3c,#66bb6a)}
.bar.r{background:linear-gradient(to top,#c62828,#ef9a9a)}
.bar.b{background:linear-gradient(to top,#1565c0,#64b5f6)}
.bar.o{background:linear-gradient(to top,#e65100,#ffb74d)}
.bar:hover{filter:brightness(1.1)}
.bar-lbl{font-size:.65rem;color:var(--t4);white-space:nowrap}
.bar-val{font-size:.68rem;font-family:'JetBrains Mono',monospace;color:var(--t2);font-weight:600}

/* Horizontal Bar */
.h-bar-item{margin-bottom:.9rem}
.h-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.35rem}
.h-bar-label{font-size:.78rem;color:var(--t2);font-weight:500}
.h-bar-value{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--t1);font-weight:600}
.h-bar-track{height:7px;background:#f0f4f0;border-radius:4px;overflow:hidden}
.h-bar-fill{height:100%;border-radius:4px;transition:width 1s ease .3s}
.h-bar-fill.g{background:linear-gradient(90deg,var(--g),var(--g3))}
.h-bar-fill.r{background:linear-gradient(90deg,var(--r),var(--r3))}
.h-bar-fill.b{background:linear-gradient(90deg,var(--b),#42a5f5)}
.h-bar-fill.o{background:linear-gradient(90deg,var(--o),#ffb74d)}

/* Donut */
.donut-wrap{display:flex;align-items:center;justify-content:center;gap:2rem;padding:1.2rem}
.donut-svg{width:100px;height:100px;transform:rotate(-90deg)}
.donut-bg{fill:none;stroke:#f0f4f0;stroke-width:12}
.donut-ring{fill:none;stroke-width:12;stroke-linecap:round;transition:stroke-dasharray 1.2s ease .3s}
.donut-label{text-anchor:middle;dominant-baseline:middle;font-family:'JetBrains Mono',monospace;transform:rotate(90deg);transform-origin:50% 50%}
.donut-val{font-size:16px;font-weight:700;fill:var(--t1)}
.donut-unit{font-size:9px;fill:var(--t3)}
.donut-legend{display:flex;flex-direction:column;gap:.5rem;flex:1}
.donut-leg-item{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--t2)}
.donut-leg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}

/* ── Sensor Nodes ───────────────────────────────────────────── */
.sensor-node{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  padding:1.1rem;box-shadow:var(--sh-sm);transition:all var(--tr);
}
.sensor-node:hover{box-shadow:var(--sh-md);border-color:var(--border2)}
.sn-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.9rem}
.sn-type{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:.2rem}
.sn-name{font-size:.88rem;font-weight:700;color:var(--t1)}
.sn-status{
  padding:.15rem .55rem;border-radius:12px;font-size:.65rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.sn-status.online{background:var(--g-pale);color:var(--g)}
.sn-status.warning{background:var(--o-pale);color:var(--o)}
.sn-status.offline{background:var(--r-pale);color:var(--r)}
.sn-reading-main{
  font-family:'JetBrains Mono',monospace;font-size:2rem;font-weight:600;
  color:var(--t1);line-height:1;margin-bottom:.25rem;
}
.sn-reading-main .unit{font-size:.9rem;color:var(--t3);font-weight:400}
.sn-reading-label{font-size:.7rem;color:var(--t3);margin-bottom:.75rem}
.sn-mini-bar{height:4px;background:#f0f4f0;border-radius:2px;overflow:hidden;margin-bottom:.6rem}
.sn-mini-fill{height:100%;border-radius:2px;transition:width 1.2s ease}
.sn-meta{display:flex;gap:.75rem;font-size:.68rem;color:var(--t4)}
.sn-meta-item{display:flex;align-items:center;gap:.25rem}
.sn-secondary{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.6rem}
.sn-sec-item{background:var(--page);border-radius:5px;padding:.4rem .5rem;text-align:center}
.sn-sec-val{font-family:'JetBrains Mono',monospace;font-size:.82rem;font-weight:600;color:var(--t1)}
.sn-sec-lbl{font-size:.62rem;color:var(--t4);text-transform:uppercase;letter-spacing:.05em}

/* ── Status Badge ───────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:.2rem .6rem;border-radius:12px;
}
.badge.green{background:var(--g-pale);color:var(--g)}
.badge.red{background:var(--r-pale);color:var(--r)}
.badge.orange{background:var(--o-pale);color:var(--o)}
.badge.blue{background:var(--b-pale);color:var(--b)}
.badge.gray{background:#f5f5f5;color:#616161}
.badge .bdot{width:5px;height:5px;border-radius:50%;background:currentColor;animation:pulse-dot 1.5s ease-in-out infinite}

/* ── Table ──────────────────────────────────────────────────── */
.data-table{width:100%;border-collapse:collapse;font-size:.8rem}
.data-table th{
  text-align:left;padding:.6rem .9rem;font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--t3);
  border-bottom:2px solid var(--border);background:var(--page);
}
.data-table td{
  padding:.7rem .9rem;border-bottom:1px solid #f0f4f0;
  color:var(--t2);vertical-align:middle;
}
.data-table tr:hover td{background:#fafcfa}
.data-table tr:last-child td{border-bottom:none}

/* ── Drone Cards ────────────────────────────────────────────── */
.drone-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  padding:1.2rem;box-shadow:var(--sh-sm);transition:all var(--tr);
}
.drone-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)}
.dc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}
.dc-icon{font-size:2rem;animation:drone-hover 3s ease-in-out infinite}
@keyframes drone-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.dc-id{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--t4);margin-bottom:.25rem}
.dc-name{font-size:.9rem;font-weight:700;color:var(--t1)}
.dc-meter{margin:.6rem 0}
.dc-meter-label{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t3);margin-bottom:.3rem}
.dc-bar{height:5px;background:#f0f4f0;border-radius:3px;overflow:hidden}
.dc-fill{height:100%;border-radius:3px;transition:width 1s ease}
.dc-stats{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.75rem}
.dc-stat{background:var(--page);border-radius:5px;padding:.4rem .5rem}
.dc-stat-val{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:600;color:var(--t1)}
.dc-stat-lbl{font-size:.62rem;color:var(--t4)}

/* ── Climate Zone ───────────────────────────────────────────── */
.climate-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  overflow:hidden;box-shadow:var(--sh-sm);transition:all var(--tr);
}
.climate-card:hover{box-shadow:var(--sh-md)}
.cc-header{
  padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--border);
}
.cc-zone-name{font-size:.85rem;font-weight:700;color:var(--t1)}
.cc-zone-crop{font-size:.7rem;color:var(--t3);margin-top:.15rem}
.cc-readings{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid var(--border)}
.cc-reading{
  padding:.75rem .9rem;text-align:center;border-right:1px solid var(--border);
}
.cc-reading:last-child{border-right:none}
.cc-reading-val{font-family:'JetBrains Mono',monospace;font-size:1.2rem;font-weight:600;color:var(--t1)}
.cc-reading-lbl{font-size:.65rem;color:var(--t3);margin-top:.2rem;text-transform:uppercase;letter-spacing:.05em}
.cc-controls{padding:.9rem 1rem}
.cc-ctrl-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 0;border-bottom:1px solid #f0f4f0;font-size:.8rem;color:var(--t2);
}
.cc-ctrl-row:last-child{border-bottom:none;padding-bottom:0}
.cc-ctrl-left{display:flex;align-items:center;gap:.6rem}
.cc-ctrl-icon{font-size:1rem}

/* Toggle */
.toggle{
  width:40px;height:22px;border-radius:11px;cursor:pointer;
  position:relative;transition:background var(--tr);flex-shrink:0;
  background:#d0d8d0;
}
.toggle.on{background:var(--g3)}
.toggle::after{
  content:'';position:absolute;top:3px;left:3px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform var(--tr);
}
.toggle.on::after{transform:translateX(18px)}

/* ── Irrigation Zone ────────────────────────────────────────── */
.irr-zone{
  background:var(--card);border:1px solid var(--border);border-radius:var(--rad);
  padding:1.1rem;box-shadow:var(--sh-sm);transition:all var(--tr);
}
.irr-zone:hover{box-shadow:var(--sh-md)}
.irr-zone.running{border-top:3px solid var(--b)}
.irr-zone.scheduled{border-top:3px solid var(--g3)}
.irr-zone.paused{border-top:3px solid var(--o)}
.irr-zone.critical{border-top:3px solid var(--r)}
.iz-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.8rem}
.iz-name{font-size:.85rem;font-weight:700;color:var(--t1)}
.iz-crop{font-size:.7rem;color:var(--t3);margin-top:.1rem}
.iz-moist-val{font-family:'JetBrains Mono',monospace;font-size:1.6rem;font-weight:600;color:var(--t1);line-height:1}
.iz-moist-lbl{font-size:.65rem;color:var(--t3);text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem;margin-bottom:.6rem}
.iz-progress{height:6px;background:#f0f4f0;border-radius:3px;overflow:hidden;margin-bottom:.6rem}
.iz-progress-fill{height:100%;border-radius:3px;transition:width 1s ease}
.iz-meta{display:flex;justify-content:space-between;font-size:.7rem;color:var(--t3)}

/* ── Alert Items ────────────────────────────────────────────── */
.alert-item{
  display:flex;align-items:flex-start;gap:.85rem;
  padding:.9rem 1rem;border-bottom:1px solid #f0f4f0;transition:all var(--tr);cursor:pointer;
}
.alert-item:hover{background:#fafcfa}
.alert-item:last-child{border-bottom:none}
.ai-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:.25rem}
.ai-dot.critical{background:var(--r)}
.ai-dot.warning{background:var(--o);box-shadow:0 0 0 3px var(--o-pale)}
.ai-dot.info{background:var(--b)}
.ai-dot.success{background:var(--g3)}
.ai-content{flex:1;min-width:0}
.ai-title{font-size:.82rem;font-weight:600;color:var(--t1);margin-bottom:.2rem}
.ai-desc{font-size:.74rem;color:var(--t3);margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-meta{display:flex;gap:.75rem;font-size:.68rem;color:var(--t4)}
.ai-actions{display:flex;gap:.4rem;flex-shrink:0}

/* ── Field Map ──────────────────────────────────────────────── */
.field-map{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);
  gap:6px;padding:1rem;border:1px solid var(--border);border-radius:var(--rad);
  background:var(--page);min-height:200px;
}
.field-zone{
  border-radius:7px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.25rem;cursor:pointer;font-size:.72rem;font-weight:600;
  transition:all var(--tr);border:2px solid transparent;padding:.5rem;
}
.field-zone:hover{filter:brightness(.94);transform:scale(.97)}
.field-zone.selected{border-color:var(--t1)!important;box-shadow:var(--sh)}
.field-zone .fz-emoji{font-size:1.4rem}
.field-zone .fz-name{font-size:.65rem;font-weight:700;text-align:center;line-height:1.3}
.field-zone .fz-ndvi{font-family:'JetBrains Mono',monospace;font-size:.7rem}
.fz-healthy{background:#dcf5e7;color:#1b5e20}
.fz-stressed{background:#fff3cd;color:#795548}
.fz-critical{background:#fde0e0;color:#b71c1c}
.fz-good{background:#e3f2fd;color:#0d47a1}
.fz-fallow{background:#f5f5f5;color:#616161}

/* ── Settings ───────────────────────────────────────────────── */
.settings-group{margin-bottom:2rem}
.settings-group-title{
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);margin-bottom:.85rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.setting-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;background:var(--card);border:1px solid var(--border);
  border-radius:var(--rad-sm);margin-bottom:.5rem;transition:all var(--tr);
}
.setting-row:hover{border-color:var(--border2);background:var(--card-hover)}
.setting-info{}
.setting-name{font-size:.85rem;font-weight:600;color:var(--t1)}
.setting-desc{font-size:.73rem;color:var(--t3);margin-top:.15rem}
.setting-control{flex-shrink:0;margin-left:1.5rem}
.form-input{
  padding:.45rem .8rem;border:1px solid var(--border);border-radius:var(--rad-sm);
  font-size:.82rem;color:var(--t1);font-family:inherit;outline:none;
  transition:border-color var(--tr);background:var(--card);
}
.form-input:focus{border-color:var(--g3);box-shadow:0 0 0 3px rgba(76,175,80,.1)}
.form-select{
  padding:.4rem .7rem;border:1px solid var(--border);border-radius:var(--rad-sm);
  font-size:.78rem;color:var(--t1);background:var(--card);
  font-family:inherit;outline:none;cursor:pointer;
}

/* ── Sparkline ──────────────────────────────────────────────── */
.sparkline{width:80px;height:28px}

/* ── Weather Strip ──────────────────────────────────────────── */
.weather-strip{
  display:flex;gap:0;border:1px solid var(--border);border-radius:var(--rad);
  overflow:hidden;background:var(--card);
}
.weather-day{
  flex:1;padding:.7rem .3rem;text-align:center;border-right:1px solid var(--border);
  transition:background var(--tr);cursor:pointer;
}
.weather-day:last-child{border-right:none}
.weather-day:hover{background:var(--g-light)}
.weather-day.today{background:var(--g-pale);border-top:2px solid var(--g3)}
.wd-name{font-size:.65rem;color:var(--t3);text-transform:uppercase;font-weight:600;margin-bottom:.25rem}
.wd-icon{font-size:1.3rem;margin-bottom:.2rem}
.wd-temp{font-size:.78rem;font-weight:700;color:var(--t1)}
.wd-rain{font-size:.62rem;color:var(--b)}

/* ── Mobile burger ──────────────────────────────────────────── */
.burger{display:none;width:36px;height:36px;border-radius:7px;background:var(--page);border:1px solid var(--border);align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:5px;padding:8px}
.burger span{display:block;width:18px;height:1.5px;background:var(--t2);border-radius:1px;transition:all var(--tr)}

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:1100px){
  .kpi-grid{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .sidebar{position:fixed;z-index:200;transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .burger{display:flex}
  .col-span-2,.col-span-3{grid-column:span 1}
  .g3{grid-template-columns:1fr 1fr}
  .g4{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .kpi-grid,.g2,.g3,.g4{grid-template-columns:1fr}
  .content{padding:1rem}
  .topbar-search{display:none}
  .field-map{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(4,1fr)}
}