/* ========== Forest Studio buttons (Quarto) ========== */
/* Color tokens (Tailwind-matched) */
:root{
  --fs-green-50:  #F0FDF4;
  --fs-green-700: #15803D;
  --fs-green-900: #166534;
  --fs-gray-700:  #374151;
  --fs-gray-500:  #6B7280;
  --fs-white:     #FFFFFF;
}

/* --- Shared icon size helper (used with SVG sprite <use>) --- */
.fs-ico{
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* ==============================================================
   SIDEBAR-STYLE NAV BUTTONS (Dashboard, Management Scenario, etc.)
   ============================================================== */
.fs-navbtn{
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;                 /* p-2 */
  border-radius: 0.375rem;         /* rounded-md */
  font-size: 14px;                 /* text-sm */
  line-height: 1.5;
  font-weight: 600;                /* font-semibold */
  text-decoration: none;           /* never underlined */
  color: var(--fs-gray-700);       /* default gray like the app */
  background: var(--fs-white);
  border: none;
}

.fs-navbtn svg{ width:20px; height:20px; flex-shrink:0; }

/* hover (neutral -> green) */
.fs-navbtn:hover{
  background: var(--fs-green-50);
  color: var(--fs-green-700);
}

/* selected/active (light green background + green text) */
.fs-navbtn.is-active{
  background: var(--fs-green-50);
  color: var(--fs-green-700);
}

/* optional layout helpers */
.fs-navbtn.wide   { display:flex; width:100%; }
.fs-navbtn.compact{ padding: 0.35rem 0.6rem; font-size: 13px; }
.fs-navbtn.wider  { padding-left: 0.9rem; padding-right: 0.9rem; }
.fs-navbtn.slimsvg svg{ width:18px; height:18px; }

/* Inline-in-text variant (use with .fs-navbtn or .fs-cta) */
.fs-inline{
  display: inline-flex;
  line-height: 1;
  vertical-align: baseline;
  white-space: nowrap;
  margin: 0 0.1rem;                /* tiny spacing in prose */
  border-radius: 0.375rem;
}

/* Inline-compact: matches text height closely */
.fs-navbtn.inline-compact{
  --nav-py: 0.10rem;     /* much slimmer vertically */
  --nav-px: 0.35rem;     /* a bit tighter left/right */
  --nav-fs: 0.95em;      /* follow the paragraph size */
  --nav-icon: 1em;       /* icon ≈ text height */
  line-height: 1;        /* keep it tight */
}

/* Optional: nudge the icon to sit on the baseline a hair better */
.fs-navbtn.inline-compact svg{ transform: translateY(0.02em); }

/* If you still see extra space around the token in prose */
.fs-inline.narrow-gap{ margin: 0 .05rem; }

/* ==============================================================
   CTA BUTTON (e.g., “Create Management Scenario”)
   Matches: font=system-ui stack, size=14px, green text, white bg.
   ============================================================== */

/* Base style (works for <span>, <a>, or <button>) */
.fs-cta,
.fs-cta:link,
.fs-cta:visited{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* App/system font stack + sizing */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  font-weight: 500;                /* font-medium */
  font-size: 14px;
  line-height: 1.25;

  /* Visuals */
  color: var(--fs-green-700);      /* green text even at rest */
  background: var(--fs-white);
  border: none;
  border-radius: 6px;              /* rounded-md */
  --cta-py: 8px;   /* vertical padding (height) */
  --cta-px: 16px;  /* horizontal padding (width) */
  padding: var(--cta-py) var(--cta-px);      /* p-2 w/ a smidge more width */

  /* Make sure there is NEVER an underline (even under quirky themes) */
  text-decoration: none !important;
}

/* Hover treatment ONLY when you want it to act like a link/button */
.fs-cta.is-link:hover,
.fs-cta.is-link:focus{
  color: var(--fs-green-900);
  text-decoration: none !important;
  outline: none;
  cursor: pointer;
}

/* “Selected” look (soft green background) */
.fs-cta.is-active{ background: var(--fs-green-50); }

/* Non-interactive “symbol” (what you asked for) */
.fs-cta.is-static{
  cursor: default;
}

/* Muted/disabled variant (optional) */
.fs-cta.is-inactive{
  color: var(--fs-gray-500);
  cursor: default;
}

/* Size knobs (optional) */
.fs-cta.compact{ padding: 6px 14px; font-size: 13px; }
.fs-cta.wider  { min-width: 240px; }   /* a bit wider, not full width */

/* If you drop the CTA inside a paragraph frequently,
   combine with .fs-inline to keep it tidy. */

   /* presets you can apply */
.fs-cta.tight   { --cta-py: 4px; --cta-px: 8px; }  /* close to app look */
.fs-cta.tighter { --cta-py: 3px; --cta-px: 8px;  font-size: 13px; } /* extra slim */

/* if the gap around inline tokens feels big, shrink the outer margin too */
.fs-inline.narrow-gap { margin: 0 .05rem; }


/* Forest Studio section title (e.g., "Management Scenario") */
.fs-title{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  font-weight: 600;          /* font-semibold */
  font-size: 18px;           /* matches inspector */
  line-height: 28px;         /* ~28px block height in app */
  color: #000000;            /* black */
  margin: 0;                 /* keep tight if used inline */
}



/* =========================
   Form: "Simulation Name"
   ========================= */

/* Label (label.block.text-sm.font-medium.text-gray-700) */
.fs-form-label{
  display:block;                       /* block */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
               "Noto Color Emoji";
  font-size:14px;                      /* text-sm */
  font-weight:500;                     /* font-medium */
  color:#374151;                       /* text-gray-700 */
  margin: 0 0 6px 0;
  line-height:1.4;
}

/* Optional required asterisk */
.fs-label-required::after{
  content:" *";
  color:#9CA3AF;                       /* gray-400 (subtle asterisk like many UIs) */
  font-weight:400;
}

/* Input box (app-style text input) */
.fs-input{
  display:block;
  width:100%;                          /* stretch to container; remove if not desired */
  font-family: inherit;
  font-size:14px;
  line-height:1.5;
  color:#111827;                       /* gray-900 */
  background:#FFFFFF;
  border:1px solid #D1D5DB;            /* gray-300 */
  border-radius:6px;                   /* rounded-md */
  padding:8px 12px;                    /* p-2 px-3 */
  outline:none;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);   /* no default shadow */
}

/* Placeholder color (subtle) */
.fs-input::placeholder{ color:#9CA3AF; } /* gray-400 */

/* Focus ring in Forest Studio green */
.fs-input:focus{
  border-color:#15803D;                /* green-700 */
  box-shadow:0 0 0 3px rgba(21,128,61,0.15);  /* soft green ring */
}

/* Disabled state */
.fs-input:disabled{
  background:#F9FAFB;                  /* gray-50 */
  color:#6B7280;                       /* gray-500 */
  cursor:not-allowed;
}

/* Quick size modifiers (if you want to match tighter fields) */
.fs-input.compact{ padding:6px 10px; }
.fs-input.tight{ padding:4px 8px; font-size:13px; }

/* ---------- Inline field (label + input in one line) ---------- */
.fs-field-inline{
  display: inline-flex;          /* keeps label + input together */
  align-items: baseline;         /* lines up with surrounding text */
  gap: 0.5rem;                   /* space between label and input */
  vertical-align: baseline;
  white-space: nowrap;           /* prevents awkward wraps */
  margin: 0 .1rem;               /* tiny breathing room in prose */
}

.fs-field-inline .fs-form-label{  /* kill block spacing when inline */
  margin: 0;
  display: inline;
}

.fs-field-inline .fs-input{
  width: auto;                   /* shrink to content */
  min-width: 220px;              /* tweak as you like */
}

/* tighter option for inline use */
.fs-field-inline.tight .fs-input{
  padding: 4px 8px;              /* shorter field */
  font-size: 13px;
  min-width: 180px;
}

/* smallest option */
.fs-field-inline.sm .fs-input{
  min-width: 150px;
}


/* =========================
   Floating map menu button
   ========================= */
:root{
  --fs-mapbtn-bg: #FFFFFF;
  --fs-mapbtn-fg: #333333;        /* icon color (from your inspector) */
  --fs-mapbtn-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

/* Base container (white rounded square with drop shadow) */
.fs-mapbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;                     /* matches the visual chip size */
  height:44px;
  background: var(--fs-mapbtn-bg);
  color: var(--fs-mapbtn-fg);
  border-radius:12px;             /* soft corner like the app */
  box-shadow: var(--fs-mapbtn-shadow);
  text-decoration:none;           /* never underlined */
  border:0;
}

/* Icon size (≈18x18 in the screenshot) */
.fs-mapbtn svg{ width:18px; height:18px; }

/* Inline token usage (drop into a sentence) */
.fs-mapbtn.inline{
  vertical-align: middle;
  margin: 0 .2rem;
}

/* Non-interactive “symbol” (no pointer, no hover) */
.fs-mapbtn.is-static{
  cursor: default;
}

/* Optional clickable behavior (if you ever want it) */
.fs-mapbtn.is-link{ cursor: pointer; }
.fs-mapbtn.is-link:hover{ box-shadow: 0 8px 20px rgba(0,0,0,0.18); }

/* Size shortcuts if you need variations */
.fs-mapbtn.small{ width:36px; height:36px; border-radius:10px; }
.fs-mapbtn.small svg{ width:16px; height:16px; }

.fs-mapbtn.tiny{ width:28px; height:28px; border-radius:8px; }
.fs-mapbtn.tiny svg{ width:14px; height:14px; }


/* =========================
   Leaflet-style white button
   ========================= */
:root{
  --fs-gray-300:#D1D5DB;
  --fs-gray-700:#374151;
  --fs-green-50:#F0FDF4;
  --fs-green-700:#15803D;
}

.fs-leaflet-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;                        /* inspector: 36 x 36 */
  height:36px;
  padding:8px;                       /* p-2 */
  background:#FFFFFF;
  color:#374151;                     /* icon stroke color (gray-700-ish) */
  border:1px solid var(--fs-gray-300);
  border-radius:10px;                /* rounded-md (≈10px at this size) */
  box-shadow:0 2px 6px rgba(0,0,0,.12); /* subtle like Leaflet controls */
  text-decoration:none;              /* never underlined */
}
.fs-leaflet-btn svg{ width:20px; height:20px; }
.fs-leaflet-btn.inline{ vertical-align:middle; margin:0 .2rem; }
.fs-leaflet-btn.is-static{ cursor:default; }   /* non-selectable symbol */

/* Size options if needed */
.fs-leaflet-btn.small{ width:32px; height:32px; padding:6px; }
.fs-leaflet-btn.small svg{ width:18px; height:18px; }

/* ======================================
   Green chevron chip (collapse sidebar)
   ====================================== */
.fs-chevron-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;                        /* matches the visual chip size */
  height:44px;
  background:var(--fs-green-50);
  color:var(--fs-green-700);
  border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  text-decoration:none;
}
.fs-chevron-chip svg{ width:18px; height:18px; }
.fs-chevron-chip.inline{ vertical-align:middle; margin:0 .2rem; }
.fs-chevron-chip.is-static{ cursor:default; }

/* Smaller option if you want it more compact inline */
.fs-chevron-chip.small{ width:36px; height:36px; border-radius:10px; }
.fs-chevron-chip.small svg{ width:16px; height:16px; }


/* Inline SVG icon utilities */
.icon {
  display: inline-block;
  width: 1em;              /* scales with text size */
  height: 1em;
  vertical-align: -0.15em; /* baseline alignment with text */
  color: currentColor;     /* inherit text color */
}
.icon-inline { margin: 0 .2em; } /* nice spacing when placed between words */

/* Optional theme-aware colors (Quarto/Bootstrap tokens) */
.icon-muted   { color: var(--bs-secondary-color); }
.icon-strong  { color: var(--bs-emphasis-color); }
.icon-primary { color: var(--bs-primary); }

/* Micro-nudges for baseline alignment (pick one) */
.icon-up-1   { vertical-align: -0.2em; }
.icon-up-2   { vertical-align: -0.25em; }
.icon-down-1 { vertical-align: -0.1em; }

/* If you need even finer control per place, use a positional nudge: */
.icon-nudge-up   { position: relative; top: -0.09em; }
.icon-nudge-down { position: relative; top:  0.05em; }