/* =========================================================
   AgriCal — Design System
   Signature: instrument dial (rain-gauge inspired) + Android
   Material-style app shell (top bar, bottom nav, elevation).
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700;800&family=Inter:wght@400;500;600&family=Roboto+Mono:wght@500;700&display=swap');

:root{
  /* --- Color tokens --- */
  --bg:        #F2F6EE;   /* pale sage-oat, not flat cream */
  --surface:   #FFFFFF;
  --surface-2: #E9F0E1;   /* soft moss tint for alt panels */
  --ink:       #16241A;   /* deep field-black green */
  --ink-muted: #55655A;
  --primary:      #1F5C3A;  /* deep field green */
  --primary-dark: #123A24;
  --primary-tint: #DCEBE0;
  --accent:      #D79A1F;  /* harvest wheat/amber */
  --accent-dark: #A9740C;
  --accent-tint: #FBEBC4;
  --danger:  #B5432E;
  --line:    #DCE3D3;
  --shadow-1: 0 1px 2px rgba(18,58,36,0.08), 0 1px 1px rgba(18,58,36,0.06);
  --shadow-2: 0 4px 14px rgba(18,58,36,0.12);
  --shadow-3: 0 10px 30px rgba(18,58,36,0.18);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
:focus-visible{outline:2.5px solid var(--accent-dark);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;}
}

/* ---------- App shell: mimics a native Android app frame ---------- */
.app-shell{
  max-width:480px;
  margin:0 auto;
  min-height:100vh;
  background:var(--bg);
  position:relative;
  display:flex;
  flex-direction:column;
  box-shadow:0 0 60px rgba(18,58,36,0.10);
}
@media (min-width:481px){
  body{background:linear-gradient(180deg,#EAF1E4,#DCE7D5);}
  .app-shell{margin-top:18px;margin-bottom:18px;border-radius:28px;overflow:hidden;min-height:calc(100vh - 36px);}
}

/* ---------- Top App Bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  background:var(--primary);
  color:#fff;
  padding:14px 18px calc(14px + env(safe-area-inset-top,0)) 18px;
  padding-top:calc(14px + env(safe-area-inset-top,0));
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-2);
}
.topbar .back-btn{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.14); border:none; color:#fff; cursor:pointer;
  flex:none;
}
.topbar .back-btn:active{background:rgba(255,255,255,0.28);}
.topbar h1{
  font-family:var(--font-display);
  font-size:17px; font-weight:700; margin:0; letter-spacing:.1px;
  flex:1; line-height:1.25;
}
.topbar .eyebrow{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:11px; opacity:.78; letter-spacing:.4px; text-transform:uppercase;
}
.topbar .brand-mark{
  width:34px;height:34px;border-radius:10px;
  background:var(--accent); color:var(--primary-dark);
  display:flex;align-items:center;justify-content:center; flex:none;
}
.lang-switch{
  display:inline-flex; background:rgba(0,0,0,0.22); border-radius:20px; padding:3px; gap:2px; flex:none; border:1px solid rgba(255,255,255,0.15);
}
.lang-btn{
  border:none; background:transparent; color:rgba(255,255,255,0.75); font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:14px; cursor:pointer; transition:all 0.2s ease;
}
.lang-btn.active{
  background:var(--accent); color:var(--primary-dark); box-shadow:0 1px 4px rgba(0,0,0,0.2);
}
.unit-toggle-wrap{
  display:flex; gap:6px; margin-bottom:8px;
}
.unit-toggle-btn{
  flex:1; padding:6px 10px; font-size:12px; font-weight:600; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); cursor:pointer; text-align:center;
}
.unit-toggle-btn.active{
  background:var(--primary-tint); border-color:var(--primary); color:var(--primary-dark); font-weight:700;
}


/* ---------- Content area ---------- */
.content{flex:1; padding:18px 16px 24px; padding-bottom:calc(96px + env(safe-area-inset-bottom,0));}

/* ---------- Hero (home) ---------- */
.hero{
  background:linear-gradient(155deg,var(--primary) 0%, #1B4E30 55%, #123A24 100%);
  color:#fff; border-radius:var(--radius-lg);
  padding:22px 20px 20px; position:relative; overflow:hidden;
  box-shadow:var(--shadow-2);
}
.hero::after{
  content:""; position:absolute; right:-30px; top:-30px; width:160px;height:160px;
  border-radius:50%; background:radial-gradient(circle,rgba(215,154,31,.35),transparent 70%);
}
.hero .kicker{font-size:11.5px; text-transform:uppercase; letter-spacing:1px; color:var(--accent-tint); opacity:.9; font-weight:600;}
.hero h2{font-family:var(--font-display); font-size:22px; line-height:1.3; margin:6px 0 8px; font-weight:800;}
.hero p{font-size:13.5px; line-height:1.55; margin:0 0 16px; color:#E7EFE2; max-width:34ch;}
.hero-stats{display:flex; gap:10px; position:relative; z-index:1;}
.hero-stat{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:8px 12px; flex:1;}
.hero-stat b{display:block; font-family:var(--font-mono); font-size:16px;}
.hero-stat span{font-size:10.5px; color:#CFE0C8;}

/* ---------- Section headers ---------- */
.section-title{
  display:flex; align-items:baseline; justify-content:space-between;
  margin:26px 2px 12px;
}
.section-title h3{font-family:var(--font-display); font-size:15px; font-weight:800; margin:0; color:var(--ink);}
.section-title span{font-size:11.5px; color:var(--ink-muted);}

/* ---------- Calculator grid / cards ---------- */
.calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.calc-card{
  background:var(--surface); border-radius:var(--radius-md);
  padding:14px; box-shadow:var(--shadow-1); border:1px solid var(--line);
  display:flex; flex-direction:column; gap:10px; position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.calc-card:active{transform:scale(.97); box-shadow:var(--shadow-2);}
.calc-card .icon{
  width:40px;height:40px;border-radius:11px; display:flex;align-items:center;justify-content:center;
  background:var(--primary-tint); color:var(--primary-dark);
}
.calc-card .icon.amber{background:var(--accent-tint); color:var(--accent-dark);}
.calc-card h4{font-family:var(--font-display); font-size:13.5px; font-weight:700; margin:0; line-height:1.3;}
.calc-card p{font-size:11px; color:var(--ink-muted); margin:0; line-height:1.4;}

/* ---------- Generic card / panel ---------- */
.panel{background:var(--surface); border-radius:var(--radius-md); box-shadow:var(--shadow-1); border:1px solid var(--line); padding:16px;}

/* ---------- Form elements ---------- */
.field{margin-bottom:16px;}
.field label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;
}
.field label .unit-tag{font-size:10.5px; font-weight:500; color:var(--ink-muted); font-family:var(--font-mono);}
.field input[type=number], .field input[type=text], .field select{
  width:100%; padding:12px 13px; border-radius:12px; border:1.6px solid var(--line);
  background:#FBFCF9; font-size:15px; font-family:var(--font-mono); color:var(--ink);
  transition:border-color .15s, background .15s;
}
.field input:focus, .field select:focus{border-color:var(--primary); background:#fff;}
.field .hint{font-size:10.5px; color:var(--ink-muted); margin-top:5px;}
.seg{display:flex; background:var(--surface-2); border-radius:12px; padding:3px; gap:3px;}
.seg button{
  flex:1; border:none; background:transparent; padding:9px 6px; border-radius:9px;
  font-size:12px; font-weight:600; color:var(--ink-muted); cursor:pointer;
}
.seg button.active{background:var(--surface); color:var(--primary-dark); box-shadow:var(--shadow-1);}

.btn-primary{
  width:100%; padding:14px; border:none; border-radius:14px;
  background:var(--primary); color:#fff; font-family:var(--font-display);
  font-weight:700; font-size:14.5px; cursor:pointer; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:active{background:var(--primary-dark);}
.btn-ghost{
  width:100%; padding:12px; border-radius:14px; border:1.6px solid var(--line);
  background:transparent; color:var(--ink); font-weight:600; font-size:13.5px; cursor:pointer;
}

/* ---------- Result / instrument dial (signature element) ---------- */
.result-block{margin-top:18px; text-align:center;}
.dial-wrap{position:relative; width:190px; height:190px; margin:0 auto 14px;}
.dial-wrap svg{width:100%; height:100%; display:block;}
.dial-track{fill:none; stroke:var(--surface-2); stroke-width:14; stroke-linecap:round;}
.dial-progress{fill:none; stroke:var(--accent); stroke-width:14; stroke-linecap:round; transition:stroke-dashoffset .8s cubic-bezier(.4,0,.2,1);}
.dial-center{
  position:absolute; top:14px; right:14px; bottom:14px; left:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; text-align:center; padding:0 6px;
}
.dial-center .value{font-family:var(--font-mono); font-weight:700; font-size:26px; color:var(--primary-dark); line-height:1.15; max-width:100%; word-break:break-word;}
.dial-center .unit{font-size:11px; color:var(--ink-muted); margin-top:2px; font-weight:600;}
.result-label{font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600; margin-top:8px;}
.result-note{font-size:12px; color:var(--ink); margin-top:10px; background:var(--surface-2); border-radius:10px; padding:10px 12px; line-height:1.5;}
.result-secondary{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px;}
.result-secondary .mini{background:var(--surface-2); border-radius:12px; padding:10px; text-align:left;}
.result-secondary .mini b{display:block; font-family:var(--font-mono); font-size:15px; color:var(--primary-dark);}
.result-secondary .mini span{font-size:10.5px; color:var(--ink-muted);}

/* ---------- Ad slot ---------- */
.ad-slot{
  background:var(--surface-2); border:1px dashed var(--line); border-radius:14px;
  padding:14px; text-align:center; font-size:10.5px; color:var(--ink-muted);
  margin:18px 0; min-height:60px; display:flex; align-items:center; justify-content:center;
}

/* ---------- Bottom Navigation (Android-style) ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:480px; margin:0 auto;
  background:var(--surface); border-top:1px solid var(--line);
  display:flex; padding:8px 6px calc(8px + env(safe-area-inset-bottom,0));
  box-shadow:0 -4px 18px rgba(18,58,36,0.10);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 2px; border-radius:12px; color:var(--ink-muted); font-size:10.5px; font-weight:600;
}
.bottom-nav a.active{color:var(--primary-dark);}
.bottom-nav a.active .nav-ic{background:var(--primary-tint);}
.nav-ic{width:38px; height:26px; border-radius:13px; display:flex; align-items:center; justify-content:center;}

/* ---------- Misc ---------- */
.badge{display:inline-flex; align-items:center; gap:5px; background:var(--primary-tint); color:var(--primary-dark); font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.footer-note{text-align:center; font-size:11px; color:var(--ink-muted); margin-top:22px; line-height:1.6;}
.footer-note a{color:var(--primary-dark); font-weight:600;}
::selection{background:var(--accent-tint);}

/* ---------- Custom App Modal Dialog (Replaces native browser domain alert) ---------- */
.custom-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px);
  z-index: 9999; display: none; align-items: center; justify-content: center; padding: 20px;
}
.custom-modal-box {
  background: var(--surface); width: 100%; max-width: 380px;
  border-radius: var(--radius-md); box-shadow: var(--shadow-3); overflow: hidden;
  border: 1px solid var(--line); animation: modalPop 0.22s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.88); }
  to { opacity: 1; transform: scale(1); }
}
.custom-modal-header {
  background: var(--primary); color: #fff; padding: 13px 16px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 700;
  display: flex; align-items: center; gap: 8px; box-shadow: var(--shadow-1);
}
.custom-modal-body {
  padding: 20px 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.custom-modal-footer {
  padding: 10px 16px 14px; text-align: right; background: var(--bg); border-top: 1px solid var(--line);
}
.custom-modal-btn {
  background: var(--primary); color: #fff; border: none; padding: 9px 24px;
  border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow-1); transition: all 0.2s ease;
}
.custom-modal-btn:active { background: var(--primary-dark); }