/* Styling for the three added pages. Tokens come from theme.css. */

.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.toolbar input { flex: 1 1 260px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.chip {
  padding: 7px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--primary-light); color: var(--primary-dark); }
.chip.active { background: var(--gradient); border-color: transparent; color: #fff; }

/* --- scheme cards --------------------------------------------------- */
.scheme { display: flex; flex-direction: column; }
.scheme-head { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.scheme h3 { font-size: 16px; margin: 0 0 12px; line-height: 1.3; }
.scheme p { margin: 2px 0 12px; font-size: 13.5px; color: #3f4d40; }
.scheme .label { margin-top: 4px; }
.benefit {
  background: var(--primary-soft); border: 1px solid #cfe0cc;
  border-radius: var(--r); padding: 11px 13px; margin-bottom: 14px;
}
.benefit strong { display: block; font-size: 14px; color: var(--primary-dark); margin-top: 3px; }
.scheme .apply { margin-top: auto; text-align: center; text-decoration: none; display: block; }

/* --- water stress ---------------------------------------------------- */
.gauge {
  height: 10px; background: #e8ede7; border-radius: var(--r-pill);
  overflow: hidden; margin: 10px 0 6px;
}
.gauge-fill { height: 100%; width: 0; border-radius: var(--r-pill); transition: width .4s ease; }
#wsResultCard h2 { font-size: 20px; }
#wsTiles { margin: 16px 0; }

/* --- photo inspector -------------------------------------------------- */
.dropzone {
  border: 2px dashed #cddbcf; border-radius: var(--r);
  min-height: 210px; display: grid; place-items: center; text-align: center;
  padding: 18px; cursor: pointer; background: #fafcf9; transition: all .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-soft); }
.dropzone strong { display: block; margin-bottom: 4px; }
.dropzone img { max-width: 100%; max-height: 260px; border-radius: var(--r-sm); }

.note-row {
  background: #f7faf6; border-left: 3px solid var(--primary-light);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 10px 13px; margin-bottom: 8px; font-size: 13.5px;
}
ul.cannot { margin: 6px 0 12px; padding-left: 18px; }
ul.cannot li { font-size: 13px; color: var(--muted); margin-bottom: 5px; }

@media (max-width: 900px) { .grid.c3 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ SoilQ / Ankur card
 *
 * A black panel with white text, deliberately unlike the farm cards around
 * it: this one leaves the app for another platform, and should read as a door
 * rather than another panel of figures.
 *
 * Every property is !important because theme-pages.css sets
 * `.card { background: var(--card) !important }`. Without matching that, the
 * card paints white and its white text disappears — which is exactly what
 * happened the first time, and what hid the wallet balance before it.
 */
.ankur-card {
  display: flex !important;
  align-items: center;
  gap: 22px;
  text-decoration: none;
  cursor: pointer;
  background: #0d1310 !important;
  border: 1px solid #24352a !important;
  border-radius: var(--r-lg, 14px) !important;
  padding: 22px 26px !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .22) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.ankur-card:hover {
  background: #111a14 !important;
  transform: translateY(-1px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .3) !important;
}

/* Every piece of text inside is set explicitly. The page's own rules colour
   .label and .card-sub for a white card, and would be unreadable here. */
.ankur-card .label {
  color: #7fc98a !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 700;
}
.ankur-card h3 {
  color: #ffffff !important;
  margin: 6px 0 8px !important;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ankur-card .card-sub,
.ankur-card p {
  color: rgba(255, 255, 255, .76) !important;
  margin: 0 0 8px !important;
  font-size: 13.5px;
  line-height: 1.6;
  max-width: 760px;
}
.ankur-card .muted,
.ankur-card .small {
  color: rgba(255, 255, 255, .5) !important;
}
.ankur-arrow { display: inline-block; transition: transform .14s ease; }
.ankur-card:hover .ankur-arrow { transform: translateX(5px); }

/* Three marks for the three things the chain does: read, decide, act. */
.ankur-mark {
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 15px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  place-content: center;
  gap: 7px;
  padding: 15px;
}
.ankur-dot { width: 10px; height: 10px; border-radius: 50%; background: #a9dcb2; }
.ankur-dot:nth-child(2) { background: #74bd7f; }
.ankur-dot:nth-child(3) {
  background: #4a9d57;
  grid-column: span 2;
  width: 27px;
  border-radius: 5px;
}

@media (max-width: 620px) {
  .ankur-card { flex-direction: column; align-items: flex-start; }
}

/* ==================================================================
 *  Services: browsing, booking, and the state of a job
 * ================================================================== */
.svc-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.svc-filters input, .svc-filters select { flex: 1 1 180px; min-width: 150px; }

.svc-grid { display: grid; gap: 1rem;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.svc-card { border: 1px solid var(--line, #e3e6e2); border-radius: 12px;
            overflow: hidden; display: flex; flex-direction: column;
            background: var(--card, #fff); }
.svc-photo { aspect-ratio: 16 / 10; background: #eef2ee; display: grid;
             place-items: center; overflow: hidden; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-noimg { font-size: 2.6rem; opacity: .55; }
.svc-body { padding: .85rem; display: flex; flex-direction: column; gap: .4rem; }
.svc-body h4 { margin: 0; font-size: 1rem; }
.svc-desc { margin: 0; font-size: .86rem; opacity: .8; }
.svc-price { font-weight: 700; color: #1f6b3a; }
.svc-price.big { font-size: 1.25rem; margin: .3rem 0 .1rem; }
.svc-tags { display: flex; gap: .35rem; flex-wrap: wrap; }
.svc-body .rev-btn { margin-top: .3rem; align-self: flex-start; }

/* Facts are a two-column list rather than prose: a farmer comparing two
   quotes reads down the labels, and prose makes that impossible. */
.svc-facts { display: grid; gap: .3rem; margin: .6rem 0; }
.svc-fact { display: flex; justify-content: space-between; gap: 1rem;
            padding: .35rem 0; border-bottom: 1px dashed var(--line, #e3e6e2); }
.svc-fact span { opacity: .7; font-size: .86rem; }
.svc-fact b { text-align: right; }

.bk-card { border: 1px solid var(--line, #e3e6e2); border-radius: 12px;
           padding: .85rem; margin-bottom: .75rem; display: flex;
           flex-direction: column; gap: .45rem; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 1rem; }
.bk-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* The track is the honest bit: seven dots, lit up to where the job has
   actually reached, and drawn not at all when the job ended early. */
.bk-track { display: flex; gap: .3rem; }
.bk-step { flex: 1; height: 6px; border-radius: 3px; background: #e0e5e0; }
.bk-step.on { background: #2d8a4e; }

.bk-events { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .55rem; }
.bk-events li { line-height: 1.45; }

.req { color: #b23; font-size: .75rem; text-transform: uppercase;
       letter-spacing: .04em; }

/* The land-record lookup is opt-in, so its toggle needs to read as a choice
   rather than as another required field. */
.check-row { display: flex; align-items: center; gap: .55rem; margin: .4rem 0 .2rem;
             font-weight: 500; cursor: pointer; }
.check-row input { width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* ==================================================================
 *  In-page dialogs
 *
 *  window.prompt and window.alert are suppressed by browsers often enough
 *  that a control depending on them reads as broken. These cannot be.
 * ================================================================== */
#toastHost { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
             display: flex; flex-direction: column; gap: .5rem; }
.toast { background: #1d2a20; color: #f2f6f1; padding: .7rem 1rem;
         border-radius: 8px; font-size: .92rem; max-width: 380px;
         box-shadow: 0 8px 28px -12px rgba(0,0,0,.6);
         border-left: 3px solid #6aa06a; opacity: 1; transition: opacity .5s; }
.toast.ok  { border-left-color: #4caf62; }
.toast.bad { border-left-color: #d1604a; }
.toast.out { opacity: 0; }

.ask-back { position: fixed; inset: 0; background: rgba(12,18,12,.55);
            display: grid; place-items: center; z-index: 9998; padding: 1rem; }
.ask-box { background: var(--card, #fff); color: inherit; border-radius: 12px;
           padding: 1.3rem; width: min(520px, 100%);
           box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.ask-box h3 { margin: 0 0 .3rem; }
.ask-box textarea { width: 100%; margin-top: .6rem; padding: .6rem;
                    border: 1px solid var(--line, #ccd3c8); border-radius: 7px;
                    font: inherit; resize: vertical; background: inherit;
                    color: inherit; }
.ask-err { color: #b23c28; font-size: .88rem; margin: .5rem 0 0; }
.ask-actions { display: flex; gap: .6rem; justify-content: flex-end;
               margin-top: .9rem; }

.keyout { background: #10160f; color: #cde8c9; padding: .8rem 1rem;
          border-radius: 8px; font-family: ui-monospace, monospace;
          font-size: .95rem; word-break: break-all; white-space: pre-wrap;
          user-select: all; }

/* The remote key is read aloud and typed by hand, so it is set large, spaced
   and selectable in one click rather than styled as ordinary text. */
.ak-actions { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.ak-reveal { border: 1px dashed var(--line, #ccd3c8); border-radius: 10px;
             padding: .9rem 1rem; margin-top: .6rem; }
.ak-code { font-family: ui-monospace, monospace; font-size: 2rem;
           letter-spacing: .34em; font-weight: 700; color: #1f6b3a;
           user-select: all; margin: .35rem 0 .5rem; }

/* An overdue job has to be findable at a glance, or the ageing is decorative. */
.muted.small.overdue { color: #c0533c; font-weight: 600; }

/* ==================================================================
 *  Shared dialogs (dialog.js)
 * ================================================================== */
#farmToastHost { position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
                 display: flex; flex-direction: column; gap: .5rem; }
.farm-toast { background: #1d2a20; color: #f2f6f1; padding: .7rem 1rem;
              border-radius: 8px; font-size: .92rem; max-width: 380px;
              box-shadow: 0 8px 28px -12px rgba(0,0,0,.6);
              border-left: 3px solid #6aa06a; transition: opacity .5s; }
.farm-toast.ok  { border-left-color: #4caf62; }
.farm-toast.bad { border-left-color: #d1604a; }
.farm-toast.out { opacity: 0; }

.farm-ask-back { position: fixed; inset: 0; background: rgba(12,18,12,.55);
                 display: grid; place-items: center; z-index: 9998; padding: 1rem; }
.farm-ask { background: var(--card, #fff); color: inherit; border-radius: 12px;
            padding: 1.3rem; width: min(520px, 100%); max-height: 90vh;
            overflow-y: auto; box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
.farm-ask h3 { margin: 0 0 .3rem; }
.farm-ask-msg { margin: 0 0 .8rem; opacity: .8; font-size: .93rem; }
.farm-ask-field { display: flex; flex-direction: column; gap: .2rem;
                  margin-bottom: .8rem; font-size: .9rem; }
.farm-ask-field input, .farm-ask-field textarea {
  padding: .55rem .65rem; border: 1px solid var(--line, #ccd3c8);
  border-radius: 7px; font: inherit; background: inherit; color: inherit;
  resize: vertical; }
.farm-ask-field small { opacity: .65; font-size: .8rem; }
.farm-ask-field .req { font-style: normal; color: #b23c28; font-size: .72rem;
                       text-transform: uppercase; letter-spacing: .04em; }
.farm-ask-err { color: #b23c28; font-size: .88rem; margin: 0 0 .6rem; }
.farm-ask-actions { display: flex; gap: .6rem; justify-content: flex-end; }

/* A validation message belongs beside the input it is about, and the input
   itself has to show that it is the one at fault. */
.field-err { color: #b23c28; font-size: .86rem; margin: .3rem 0 0; }
textarea.bad, input.bad { border-color: #b23c28 !important;
                          box-shadow: 0 0 0 2px rgba(178, 60, 40, .14); }