/* ---------------------------------------------------------------------------
   public/css/agronomist.css

   Lifted straight out of agronomist-dashboard.html — same class names, same
   numbers. Loaded from spa.blade.php the same way shf.css is:

       <link rel="stylesheet" href="{{ asset('css/agronomist.css') }}">

   EVERY rule is scoped under .agro, including the custom properties. The
   prototype declared them on :root, but this sheet now sits on the same page as
   shf.css — anything shared on :root would silently repaint the farmer screens,
   since this file loads last and would win. Under .agro they reach the
   agronomist screens and nothing else.

   Fonts (DM Sans, Fraunces) and Font Awesome are already in the blade head.
--------------------------------------------------------------------------- */

.agro{
  --forest-950:#062a15; --forest-900:#0b3d1f; --forest-800:#14402a; --forest-700:#166534;
  --brand:#2f8a4c; --leaf:#22c55e; --leaf-soft:#e7f5ec; --leaf-line:#cfe8d9;
  --gold:#c9a227; --gold-dark:#a8861a;
  --orange:#e07a1f; --orange-soft:#fdf0e0;
  --sky:#0e7490; --sky-soft:#e2f4f8;
  --danger:#c0392b; --danger-soft:#fbe9e7;
  --bg:#f1f5f2; --card:#ffffff; --ink:#152219; --muted:#6b7a71; --faint:#93a29a;
  --line:#e3eae6; --line-2:#d3ded8;
  --shadow:0 1px 2px rgba(11,61,31,.05),0 4px 14px rgba(11,61,31,.06);
  --shadow-lg:0 10px 34px rgba(11,61,31,.16);
  --r:16px; --r-sm:11px;
  --body:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --disp:"Fraunces",Georgia,serif;

  font-family:var(--body);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;min-height:100vh
}

.agro *{box-sizing:border-box}
.agro button{cursor:pointer;border:none;background:none;font-family:inherit;font-size:inherit;color:inherit}
.agro input,.agro select,.agro textarea{font-family:inherit;font-size:inherit;color:inherit}
.agro :focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.agro h1,.agro h2,.agro h3,.agro h4{font-family:var(--disp);font-weight:700;letter-spacing:-.4px;line-height:1.15;margin:0}
.agro p{margin:0}

/* ===================== LAYOUT =====================
   The prototype was a standalone page: it capped the content at 1240px, centred
   it, and added its own side padding. Inside the SPA both of those fight the
   shell, which already caps the column and adds a gutter of its own — the cap
   left dead space down the right, the padding an indent down the left. So: full
   width, and no horizontal padding. The shell provides the gutter, and the
   cards line up with the bar above them.
=================================================== */
.agro .wrap{width:100%;padding:26px 0 80px}
.agro .hero{margin-bottom:22px}
.agro .hero h1{font-size:34px}
.agro .hero p{color:var(--muted);font-size:14.5px;margin-top:6px}
.agro .page-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.agro .back{width:40px;height:40px;border-radius:12px;background:var(--card);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;color:var(--forest-700);box-shadow:var(--shadow)}
.agro .back:hover{background:var(--leaf-soft)}
.agro .page-head h1{font-size:26px}
.agro .page-head .sub{font-size:13px;color:var(--muted);margin-top:2px}
.agro .page-head .acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}

/* ===================== BIG BRAND BOXES ===================== */
.agro .boxes{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.agro .box{position:relative;overflow:hidden;text-align:left;border-radius:22px;padding:26px 26px 22px;color:#eafff1;
  background:linear-gradient(145deg,var(--forest-800),var(--forest-950));box-shadow:var(--shadow-lg);
  min-height:196px;display:flex;flex-direction:column;transition:transform .16s,box-shadow .16s}
.agro .box:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,61,31,.26)}
.agro .box.alt{background:linear-gradient(145deg,var(--forest-700),var(--forest-900))}
.agro .box::after{content:"";position:absolute;right:-40px;bottom:-50px;width:190px;height:190px;border-radius:50%;
  background:rgba(255,255,255,.05)}
.agro .box-ic{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.13);display:flex;align-items:center;
  justify-content:center;font-size:20px;color:var(--gold);margin-bottom:14px}
.agro .box h2{font-size:25px;color:#fff}
.agro .box .bsub{font-size:13.5px;color:#b9dfc7;margin-top:6px;max-width:520px;position:relative;z-index:1}
.agro .box .bfoot{margin-top:auto;padding-top:16px;display:flex;align-items:flex-end;gap:22px;position:relative;z-index:1}
.agro .box .kpi{line-height:1}
.agro .box .kpi b{font-family:var(--disp);font-size:27px;color:var(--gold);display:block}
.agro .box .kpi span{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#9fd3b0;font-weight:700}
.agro .box .arrow{margin-left:auto;width:38px;height:38px;border-radius:50%;background:var(--gold);color:#33280a;
  display:flex;align-items:center;justify-content:center;font-size:14px}

/* ===================== CARDS / BITS ===================== */
.agro .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.agro .card-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line)}
.agro .card-h .ci{width:36px;height:36px;border-radius:10px;background:var(--leaf-soft);color:var(--forest-700);
  display:flex;align-items:center;justify-content:center;font-size:15px}
.agro .card-h h3{font-size:17px}
.agro .card-h .sub{font-size:12px;color:var(--muted);margin-top:1px}
.agro .card-h .ha{margin-left:auto;display:flex;gap:8px}
.agro .card-b{padding:16px 18px}
.agro .grid{display:grid;gap:16px}
.agro .g2{grid-template-columns:repeat(2,1fr)}
.agro .g3{grid-template-columns:repeat(3,1fr)}
.agro .g4{grid-template-columns:repeat(4,1fr)}
.agro .stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.agro .stat .si{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.agro .stat b{font-family:var(--disp);font-size:24px;display:block;line-height:1}
.agro .stat span{font-size:12px;color:var(--muted);font-weight:500}
.agro .stat .ssub{font-size:11.5px;color:var(--faint);margin-top:3px}
.agro .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:11px;font-weight:700;font-size:13px;transition:.15s}
.agro .btn-g{background:var(--forest-700);color:#fff}
.agro .btn-g:hover{background:var(--forest-800)}
.agro .btn-gold{background:var(--gold);color:#33280a}
.agro .btn-gold:hover{background:var(--gold-dark);color:#fff}
.agro .btn-ghost{background:var(--card);border:1px solid var(--line-2);color:var(--ink)}
.agro .btn-ghost:hover{background:var(--leaf-soft);border-color:var(--leaf-line)}
.agro .btn-sm{padding:7px 12px;font-size:12px;border-radius:9px}
.agro .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.agro .bg-green{background:var(--leaf-soft);color:var(--forest-700)}
.agro .bg-gold{background:#faf1d4;color:#7a610f}
.agro .bg-red{background:var(--danger-soft);color:var(--danger)}
.agro .bg-sky{background:var(--sky-soft);color:var(--sky)}
.agro .bg-orange{background:var(--orange-soft);color:var(--orange)}
.agro .note{display:flex;gap:10px;align-items:flex-start;background:var(--leaf-soft);border:1px solid var(--leaf-line);
  border-radius:12px;padding:12px 14px;font-size:13px;color:var(--forest-800);margin-bottom:16px}
.agro .note i{margin-top:2px}
.agro .empty{text-align:center;padding:44px 20px;color:var(--muted)}
.agro .empty i{font-size:28px;color:var(--faint);margin-bottom:10px;display:block}
.agro .empty h4{font-size:17px;color:var(--ink);margin-bottom:4px}

/* search + filters */
.agro .filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:12px;box-shadow:var(--shadow);margin-bottom:16px}
.agro .filters.bare{box-shadow:none;border:none;padding:0;background:none;margin-bottom:14px}
.agro .search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:#f6faf8;border:1px solid var(--line-2);
  border-radius:11px;padding:10px 13px}
.agro .search i{color:var(--faint)}
.agro .search input{flex:1;border:none;background:none;outline:none;font-weight:500}
.agro .sel{display:flex;align-items:center;gap:7px;background:#f6faf8;border:1px solid var(--line-2);border-radius:11px;padding:8px 11px}
.agro .sel label{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.agro .sel select{border:none;background:none;outline:none;font-weight:700;font-size:13px}
.agro .gname{max-width:250px;font-weight:700;background:#f6faf8;border:1px solid var(--line-2);border-radius:11px;padding:10px 13px;outline:none}

/* farmer cards */
.agro .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.agro .fcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:10px}
.agro .fcard .top{display:flex;gap:12px;align-items:center}
.agro .fcard .av{width:44px;height:44px;border-radius:13px;background:var(--forest-700);color:#fff;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.agro .fcard .nm{font-weight:700;font-size:15px}
.agro .fcard .mt{font-size:12px;color:var(--muted)}
.agro .fcard .crops{display:flex;gap:6px;flex-wrap:wrap}
.agro .fcard .crop{background:var(--leaf-soft);color:var(--forest-700);font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:8px}
.agro .fcard .foot{display:flex;gap:8px;align-items:center;margin-top:auto;padding-top:6px}
.agro .fcard .grow{flex:1;min-width:0}
.agro .tick{width:22px;height:22px;border-radius:7px;border:2px solid var(--line-2);display:flex;align-items:center;
  justify-content:center;color:transparent;font-size:11px;flex-shrink:0}
.agro .tick.on{background:var(--forest-700);border-color:var(--forest-700);color:#fff}

/* list rows */
.agro .row{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--line);border-radius:13px;
  background:var(--card);margin-bottom:10px}
.agro .row .ri{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.agro .row .rt{font-weight:700;font-size:14.5px}
.agro .row .rs{font-size:12.5px;color:var(--muted)}
.agro .row .rv{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--forest-700);white-space:nowrap}
.agro .row .ra{display:flex;gap:8px;flex-wrap:wrap}
.agro .row .grow{flex:1;min-width:200px}
.agro .chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.agro .chip{padding:9px 15px;border-radius:11px;background:var(--card);border:1px solid var(--line-2);font-weight:700;font-size:13px}
.agro .chip.on{background:var(--forest-700);color:#fff;border-color:var(--forest-700)}

/* schedule */
.agro .week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.agro .day{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:11px;min-height:150px}
.agro .day.today{border-color:var(--forest-700);box-shadow:0 0 0 2px rgba(22,101,52,.15)}
.agro .day .dh{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--faint)}
.agro .day .dd{font-family:var(--disp);font-size:18px;margin-bottom:8px}
.agro .day .ev{background:var(--leaf-soft);border-left:3px solid var(--forest-700);border-radius:7px;padding:7px 8px;
  margin-bottom:6px;font-size:11.5px;line-height:1.35;cursor:pointer;width:100%;text-align:left}
.agro .day .ev b{display:block;font-size:12px}
.agro .day .ev.soil{background:var(--sky-soft);border-color:var(--sky)}
.agro .day .ev.pemb{background:var(--orange-soft);border-color:var(--orange)}
.agro .day .dv{margin-top:8px;font-size:11.5px;font-weight:700;color:var(--forest-700)}
.agro .day .dv.free{color:var(--faint)}
.agro .mrow{display:flex;align-items:center;gap:14px;padding:12px 14px;border-bottom:1px solid var(--line)}
.agro .mrow:last-child{border-bottom:none}
.agro .mbar{flex:1;height:9px;background:#eef3f0;border-radius:6px;overflow:hidden}
.agro .mbar span{display:block;height:100%;background:var(--forest-700);border-radius:6px}

/* forms */
.agro .form{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.agro .fg{display:flex;flex-direction:column;gap:5px}
.agro .fg.full{grid-column:1/-1}
.agro .fg label{font-size:11.5px;font-weight:700;color:var(--muted)}
.agro .fg input,.agro .fg select,.agro .fg textarea{border:1px solid var(--line-2);border-radius:10px;padding:10px 12px;outline:none;background:#fbfdfc}
.agro .fg input:focus,.agro .fg select:focus{border-color:var(--brand)}

/* modal + toast */
.agro .ovl{position:fixed;inset:0;background:rgba(6,42,21,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.agro .modal{background:var(--card);border-radius:18px;width:100%;max-width:620px;max-height:88vh;overflow:auto;box-shadow:var(--shadow-lg)}
.agro .modal-h{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line)}
.agro .modal-h h3{font-size:18px}
.agro .modal-h .x{margin-left:auto;width:32px;height:32px;border-radius:9px;background:#f1f5f3;color:var(--muted)}
.agro .modal-b{padding:20px}
.agro .modal-f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
.agro .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--forest-900);
  color:#eafff1;padding:13px 20px;border-radius:12px;font-weight:700;font-size:13.5px;z-index:300;opacity:0;
  transition:.25s;box-shadow:var(--shadow-lg);pointer-events:none;max-width:90vw}
.agro .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1020px){
  .agro .boxes{grid-template-columns:1fr}
  .agro .fgrid,.agro .g4,.agro .g3{grid-template-columns:repeat(2,1fr)}
  .agro .week{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .agro .wrap{padding:18px 0 70px}
  .agro .hero h1{font-size:27px}
  .agro .fgrid,.agro .g4,.agro .g3,.agro .g2,.agro .form{grid-template-columns:1fr}
  .agro .row{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){
  .agro *{animation:none!important;transition:none!important}
}