/* =====================================================================
 *  Page internals, restyled to the merged design language.
 *
 *  theme.css establishes the tokens and the shell. This file re-dresses
 *  the markup the twelve app pages already use — .card, .page-header,
 *  .custom-input, .top-tabs, the chatbot, the sliders — so the content
 *  matches the new chrome instead of sitting inside it in the old skin.
 *
 *  Nothing here renames a class or touches the DOM: every selector below
 *  already exists in the pages, so all page JavaScript keeps working.
 *  Loaded after each page's own stylesheet, so it wins on specificity
 *  without needing !important on layout.
 * ===================================================================== */

/* --- the page's own left rail is now the app sidebar ----------------- */
.layout > .sidebar { display: none; }
.layout { display: block !important; min-height: 0 !important; }
.layout > .main { width: 100%; padding: 0 !important; }

/* --- page header ----------------------------------------------------- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
}
.page-eyebrow {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.page-title {
  font-size: 26px; font-weight: 700; color: var(--ink);
  margin: 4px 0 6px; line-height: 1.18;
}
.page-desc { color: var(--muted); font-size: 14px; max-width: 720px; margin: 0; }

/* --- cards (Soft UI shadow, no hairline border) ---------------------- */
.card {
  background: var(--card) !important;
  border: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
}
.card-title {
  font-size: 15px; font-weight: 700; color: var(--ink);
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
}
/* Soft UI's icon chip in place of a bare emoji. */
.card-icon {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: var(--primary-soft); border-radius: var(--r-sm);
  font-size: 15px;
}

/* --- tabs ------------------------------------------------------------ */
.top-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  border-radius: var(--r-sm); padding: 7px 14px;
  font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.tab:hover { border-color: var(--primary-light); color: var(--primary-dark); }
.tab.active {
  background: var(--gradient); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-sm);
}

/* --- form controls --------------------------------------------------- */
.form-group { margin-bottom: 14px; }
.field-label, .form-group > label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 5px;
}
.req { color: var(--danger); }
.custom-input, .custom-select, input[type="text"], input[type="number"],
input[type="password"], input[type="email"], select, textarea {
  width: 100%; padding: 10px 13px; font: inherit; color: var(--ink);
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color .12s, box-shadow .12s;
}
.custom-input:focus, .custom-select:focus, input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(78,155,78,.15);
}

/* --- range sliders (the agent controls) ------------------------------ */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; padding: 0; border: none;
  background: #e6ece5; border-radius: var(--r-pill); cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--gradient); border: 2px solid #fff;
  box-shadow: var(--shadow-sm); cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--primary); border: 2px solid #fff;
  box-shadow: var(--shadow-sm); cursor: pointer;
}

/* --- buttons ---------------------------------------------------------
   Every primary-action class the twelve pages actually use, found by
   inventorying the markup rather than guessing at names. They were all
   flat green; the gradient is what ties them to the new design. */
.btn-pipeline, .btn-geo-primary, .btn-scan-leaf, .btn-category-req,
.chat-send-btn, .apply-btn, .map-btn, .strategy-btn.active,
.btn-filled, .run-btn, button.primary, .primary-btn {
  background: var(--gradient) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-sm) !important;
  font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .04em; padding: 10px 18px;
  box-shadow: var(--shadow-sm);
}
.btn-pipeline:hover, .btn-geo-primary:hover, .btn-scan-leaf:hover,
.btn-filled:hover, .run-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-pipeline:disabled, .btn-geo-primary:disabled, .btn-scan-leaf:disabled {
  background: #b6c7b6 !important; box-shadow: none; transform: none; cursor: not-allowed;
}

/* Unselected segmented options stay quiet so the active one reads. */
.strategy-btn {
  background: #f2f5f1; color: var(--muted); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-weight: 600; font-size: 12px;
}
.strategy-btn:hover { border-color: var(--primary-light); color: var(--primary-dark); }

.btn-clear-history, .dismiss-btn {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--r-sm); font-size: 12px; text-transform: uppercase; font-weight: 600;
}

/* Small status tags across the pages. */
.agent-tag, .live-tag, .growth-tag, .height-tag, .action-tag {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}

/* Recommendation cards on the reports and pipeline pages. */
.action-card {
  background: var(--card); border: none; border-radius: var(--r);
  box-shadow: var(--shadow-sm); padding: 14px 16px;
}
.action-name { font-weight: 700; color: var(--ink); }
.action-meta, .action-label { color: var(--muted); font-size: 12px; }

/* Toggle switches. */
.toggle-slider { border-radius: var(--r-pill) !important; }
input:checked + .toggle-slider { background: var(--primary) !important; }
.btn-ghost, .btn-outline, .secondary-btn {
  background: #fff; border: 1px solid var(--line); color: var(--muted);
  border-radius: var(--r-sm); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em; padding: 10px 16px;
}

/* --- status chips ---------------------------------------------------- */
.active-tag, .badge, .status-chip {
  display: inline-block; padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--primary-soft); color: var(--primary-dark);
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}

/* --- the chatbot ----------------------------------------------------- */
.chatbot-open-btn {
  background: var(--gradient) !important; color: #fff !important;
  border: none !important; border-radius: var(--r-pill) !important;
  box-shadow: var(--shadow) !important; font-weight: 600; padding: 11px 18px;
}
.chatbot-popup {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  border: none !important; overflow: hidden;
}
.chatbot-header { background: var(--gradient) !important; color: #fff !important; }
.chat-bubble { border-radius: var(--r) !important; }
.bot-bubble { background: var(--primary-soft) !important; color: var(--ink) !important; }

/* --- misc ------------------------------------------------------------ */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--gradient); color: #fff;
  display: grid; place-items: center; font-size: 14px;
}
.mt16 { margin-top: 16px; }
.brand, .brand-name { font-weight: 700; color: var(--ink); }
.brand-sub { font-size: 10px; letter-spacing: .09em; color: var(--muted); text-transform: uppercase; }

/* Charts and canvases sit on the card surface, not a grey plate. */
canvas { max-width: 100%; }

@media (max-width: 900px) {
  .page-title { font-size: 21px; }
  .page-header { gap: 10px; }
}

/* --- width ------------------------------------------------------------
   The shell's .content already supplies the page gutter. Several pages
   also set their own `main { max-width; margin: 0 auto }`, which left the
   content boxed in a narrow centred column with dead space beside it.
   Inside the shell the page column should simply fill what it is given. */
.content > main,
.content main {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- two-column pages -------------------------------------------------
   A form beside a map reads better when the form keeps a fixed, readable
   width and the map takes the space that is left, rather than the two
   splitting the row evenly and both ending up cramped. */
/* Only the bare form-beside-map layout. The .c2/.c3/.c4 utility grids define
   their own columns, and this rule was overriding them — which is why the
   store showed one card at 460px and a second stretched across the rest. */
.content .grid:not(.c2):not(.c3):not(.c4) {
  display: grid;
  grid-template-columns: minmax(380px, 460px) minmax(420px, 1fr);
  gap: 18px;
  align-items: start;
}

/* The map should stand as tall as the form beside it. */
.content .map-card { position: sticky; top: 96px; }
.content #map, .content #map canvas { height: 520px !important; }

/* Sections inside a form card get real separation instead of running
   together as one long strip of inputs. */
.content .card > hr { margin: 18px -20px; border-top: 1px solid var(--line); }
.content .coordbox, .content .picked {
  background: var(--primary-soft) !important;
  border: 1px solid #cfe0cc !important;
  border-radius: var(--r) !important;
  padding: 14px !important;
}
.content .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.content .results { display: grid; gap: 6px; margin-top: 8px; }
.content .result {
  text-align: left; background: #f7faf6; border: 1px solid var(--line);
  border-radius: var(--r-sm); font-size: 13px; padding: 9px 12px;
}

@media (max-width: 1100px) {
  .content .grid:not(.c2):not(.c3):not(.c4) { grid-template-columns: 1fr; }
  .content .map-card { position: static; }
  .content #map, .content #map canvas { height: 380px !important; }
}
@media (max-width: 620px) {
  .content .two { grid-template-columns: 1fr; }
}

/* --- the land form ----------------------------------------------------
   Five administrative levels stacked one per row made the form far taller
   than the map beside it. Two per row keeps the whole thing on one screen
   and closes the gap in the right-hand column. */
.content #levelBoxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}
.content #levelBoxes label { margin: 0; }

/* The find-method tabs and their panel read as one control. */
.content #findTabs { margin-bottom: 10px; }
.content .find { margin-bottom: 4px; }
.content .find p.muted { margin: 0 0 8px; }

/* Coordinate mode switch sits tight above its inputs. */
.content #coordMode { margin: 8px 0 10px !important; }
.content #coordMode .tab { padding: 6px 12px; font-size: 12px; }

/* Hint blocks stay compact rather than becoming full notice panels. */
.content #bhuHint {
  margin: 10px 0 0; padding: 10px 12px; font-size: 13px; border-radius: var(--r-sm);
}
.content #registerResult { margin-top: 12px; }

/* The map fills its column so the two sides finish together. */
.content #map, .content #map canvas { height: 620px !important; }

@media (max-width: 1100px) {
  .content #levelBoxes { grid-template-columns: 1fr 1fr; }
  .content #map, .content #map canvas { height: 400px !important; }
}
@media (max-width: 620px) {
  .content #levelBoxes { grid-template-columns: 1fr; }
}