/* AGRIXON — calm control-room layer.
   Loaded after app.css / tools.css / sensors.css. Tokens first, then shell,
   then components, then responsive. No layout data lives here. */

:root{
  --bg:#F5F7F3;
  --surface:#FFFFFF;
  --ink:#18221B;
  --muted:#58645C;
  --line:#D9E1D8;
  --green:#245C3A;
  --green-ink:#FFFFFF;
  --soft:#E8F0E7;
  --orange:#9A5B00;
  --red:#B42318;
  --info:#245CA6;
  --radius:16px;
  --radius-sm:10px;
  --tap:44px;
  --shadow-pop:0 18px 40px rgba(24,34,27,.14);
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-size:15px;line-height:1.55}
h1{font-size:30px;letter-spacing:-.9px;line-height:1.2}
h2{font-size:20px;letter-spacing:-.35px}
h3{font-size:16px}
.page-heading p{font-size:14px;line-height:1.65;max-width:64ch}
.eyebrow{font-size:10px;letter-spacing:.14em;color:var(--green);font-weight:650}
.source-caption,.field-sub{font-size:12px;color:var(--muted);line-height:1.6}

/* ---------- shell ---------- */
.topbar{
  height:auto;min-height:64px;padding:8px 24px;gap:16px;
  background:var(--surface);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;
}
.topbar-brand{font-size:17px;letter-spacing:-.3px;min-height:var(--tap)}
.topbar-brand small{font-size:8px;letter-spacing:.16em;color:var(--muted)}
.topnav{gap:4px;padding:2px 0}
.topnav a,.nav-more-btn{
  min-height:var(--tap);height:var(--tap);padding:0 14px;gap:8px;
  border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);
  transition:background .16s ease,color .16s ease;
}
.topnav a:hover,.nav-more-btn:hover{background:var(--soft);color:var(--ink)}
.topnav a.active,.nav-more.active>.nav-more-btn{
  background:var(--green);color:var(--green-ink);font-weight:600;
}
.topnav a.active .icon,.nav-more.active>.nav-more-btn .icon{color:currentColor}
.topnav .icon{width:18px;height:18px}
.nav-more-menu{
  min-width:248px;padding:8px;border-radius:14px;border:1px solid var(--line);
  box-shadow:var(--shadow-pop);background:var(--surface);
}
.nav-more-menu a{height:var(--tap);min-height:var(--tap);border-radius:10px;font-size:13px;padding:0 12px}
.nav-more-menu a.active{background:var(--soft);color:var(--green);font-weight:600}
.top-actions{gap:10px}
.connection-pill,.season-control{font-size:11px}
.season-control select{min-height:var(--tap);font-size:12px;width:84px}
.icon-btn{width:var(--tap);height:var(--tap);border-radius:10px}
.btn{min-height:var(--tap);padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:550}
.btn.small{min-height:36px;padding:8px 12px;font-size:12px}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary:hover{background:#1C4A2E;border-color:#1C4A2A}
.btn:hover{border-color:#A9BBA6;background:var(--soft)}
input,select{min-height:var(--tap);border-radius:var(--radius-sm);border-color:var(--line);font-size:14px}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:3px solid #73A77F;outline-offset:2px;
}

/* ---------- page rhythm ---------- */
.page{padding:28px 28px 24px}
.page-heading{margin-bottom:22px;gap:20px}
.overview{
  border-radius:var(--radius);border-color:var(--line);background:var(--surface);
  margin-bottom:20px;min-height:96px;padding:4px 8px;
}
.overview-item{padding:14px 18px}
.overview-item small{font-size:11px;color:var(--muted);letter-spacing:.02em}
.overview-item strong{font-size:22px;letter-spacing:-.4px}
.overview-source{padding:14px 18px;font-size:12px;color:var(--muted)}
.card{border-radius:var(--radius);border-color:var(--line);padding:22px;box-shadow:none}
.cards-grid,.tools-grid{gap:16px}
.section-label{font-size:10px;letter-spacing:.12em;color:var(--muted)}
.pill{font-size:10px;letter-spacing:.06em;border-radius:999px;padding:4px 8px;background:var(--soft);color:var(--green)}

/* ---------- map workspace ---------- */
.map-workspace{
  border-radius:var(--radius);border-color:var(--line);
  grid-template-columns:minmax(0,1fr) 320px;
  min-height:560px;height:calc(100vh - 320px);max-height:920px;
}
.analysis-panel{border-left:1px solid var(--line)}
.panel-heading{padding:18px 18px 14px}
.panel-heading h2{font-size:17px}
.panel-section{padding:0 18px 18px}
.map-topline{top:14px;left:14px;right:14px;gap:10px}
.map-button{min-height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--surface);box-shadow:0 2px 10px rgba(24,34,27,.08)}
.map-tools{right:14px;bottom:120px;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(24,34,27,.08)}
.map-tool{width:var(--tap);height:var(--tap)}
.map-bottom{bottom:28px;left:14px;right:14px}
.layer-tabs{border-radius:999px;background:var(--surface);border:1px solid var(--line);padding:4px;box-shadow:0 2px 10px rgba(24,34,27,.08)}
.layer-tab{min-height:36px;border-radius:999px;font-size:12px}
.layer-tab.active{background:var(--green);color:#fff}
.fields-popover{border-radius:14px;box-shadow:var(--shadow-pop);top:70px;left:14px;width:280px}
.field-row{min-height:56px;padding:12px 14px}
.field-row.selected{background:var(--soft);box-shadow:inset 3px 0 0 var(--green)}
.map-onboarding{border-radius:14px;background:var(--surface);box-shadow:var(--shadow-pop)}
.drawing-bar{border-radius:12px;box-shadow:var(--shadow-pop)}

/* ---------- tools + sensors ---------- */
.tools-tabs{padding:8px 24px;gap:4px;position:sticky;top:64px;z-index:20}
.tools-tab{min-height:var(--tap);height:var(--tap);padding:0 14px;border-radius:999px;font-size:13px}
.tools-tab.is-active{background:var(--green);color:#fff;font-weight:600}
.tools-view{padding:26px 28px 48px}
.sensor-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sensor-card{border-radius:var(--radius);padding:20px;min-height:140px}
.sensor-label{font-size:12px;color:var(--muted)}
.sensor-value{font-size:34px;letter-spacing:-1px}
.sensor-sub{font-size:11px;color:var(--muted)}
.sensor-charts{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sensor-raw table{width:100%;border-collapse:collapse}
.sensor-raw th,.sensor-raw td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);font-size:13px}
.notice{border-radius:12px;border:1px solid #E7D3B4;background:#FBF4E8;color:#6B4A12;padding:14px 16px;font-size:13px}

/* ---------- tables, dialogs, feedback ---------- */
table{border-collapse:collapse}
th{font-size:11px;letter-spacing:.06em;color:var(--muted);font-weight:600}
td,th{padding:10px 8px;border-bottom:1px solid var(--line)}
dialog{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow-pop);padding:0}
dialog::backdrop{background:rgba(18,28,21,.42)}
.toast{border-radius:12px;background:#18221B;color:#F2F6F0;box-shadow:var(--shadow-pop);font-size:13px;padding:12px 16px}

/* ---------- 3D dialog ---------- */
.f3d-dialog{background:#0E1512}
.f3d-canvas canvas{touch-action:none}
.f3d-head{padding:14px 18px}
.f3d-side{width:300px}
.f3d-note{margin-top:10px;padding:10px 12px;border:1px solid #2E4034;border-radius:10px;background:#16211B;font:500 10px/1.6 ui-monospace,Menlo,monospace;color:#A9BCAD}
.f3d-note b{color:#E8EDE6;font-weight:600}
.f3d-dialog .btn.small{min-height:36px}

/* ---------- responsive ---------- */
@media(max-width:1240px){
  .map-workspace{grid-template-columns:minmax(0,1fr) 300px}
  .sensor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1000px){
  .topbar{padding:6px 16px;gap:0}
  .topbar-brand{height:56px}
  .topnav{order:3;width:100%;padding:6px 0 8px;border-top:1px solid var(--line);gap:6px}
  .topnav a,.nav-more-btn{min-height:var(--tap);height:var(--tap);padding:0 13px}
  .nav-more-menu{left:0;right:auto;max-width:calc(100vw - 32px)}
  .tools-tabs{top:0;padding:8px 16px}
  .page,.tools-view{padding:22px 16px 32px}
  .page-heading{flex-direction:column;align-items:flex-start;gap:14px}
  .heading-actions{width:100%;flex-wrap:wrap}
  .map-workspace{grid-template-columns:1fr;height:auto;min-height:0}
  .map-stage{height:min(62vh,560px)}
  .analysis-panel{border-left:0;border-top:1px solid var(--line);max-height:none}
  .overview{flex-wrap:wrap}
  .overview-item{flex:1 1 45%}
  .overview-source{flex:1 1 100%;border-top:1px solid var(--line)}
  .cards-grid,.tools-grid{grid-template-columns:1fr}
  .sensor-charts{grid-template-columns:1fr}
  .f3d-body{flex-direction:column}
  .f3d-side{width:auto;border-left:0;border-top:1px solid #24312A;max-height:42vh}
}
@media(max-width:560px){
  h1{font-size:26px}
  .sensor-grid{grid-template-columns:1fr}
  .sensor-raw{overflow-x:auto}
  .sensor-raw table{min-width:420px}
  .map-stage{height:58vh}
  .map-topline{flex-wrap:wrap}
  .coordinates-search{flex:1 1 100%}
  .map-bottom{flex-direction:column;align-items:stretch;gap:8px}
  .layer-tabs{overflow-x:auto}
  .f3d-head{flex-wrap:wrap;gap:8px}
  .f3d-controls{gap:10px}
  .f3d-grow{min-width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* 3D model picker */
.f3d-controls-models{border-top:1px solid #24312A;padding-top:10px;margin-top:8px}
.f3d-controls-models .f3d-field{min-width:220px}
.f3d-controls-models .f3d-field select{min-width:220px}

/* AGRIXON logo */
.topbar-brand .brand-logo{height:40px;width:auto;display:block}
@media(max-width:760px){.topbar-brand .brand-logo{height:34px}}

.topbar-brand .brand-logo-dark{display:none}
body[data-theme=dark] .topbar-brand .brand-logo-light{display:none}
body[data-theme=dark] .topbar-brand .brand-logo-dark{display:block}