/* ============================================================================
   GroundsReview — app.css
   SINGLE SOURCE for design tokens + shared chrome (nav, footer, buttons, pills,
   cards, forms, health, property selector). Every page links this file.
   Page-specific layout lives in each page's own <style> block.
   Tokens drawn from the Grounds Intelligence logo pack.
   ============================================================================ */

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

/* ---- DESIGN TOKENS ------------------------------------------------------- */
:root{
  /* Surfaces — warm paper */
  --paper:#F4F0E7; --surface:#FBF9F3; --sunken:#ECE5D8; --line:#E0D8C8; --line-strong:#CDC3AF;
  /* Brand — navy for structure */
  --navy:#0B2545; --navy-ink:#051E3E; --navy-soft:#33486A; --navy-muted:#7A879B;
  /* Brand — green for life & action */
  --forest:#1E4D2E; --green:#357A45; --green-mid:#5C9A55; --sage:#A9C28C; --green-tint:#E8F0DF;
  /* Text */
  --text:#0B2545; --text-2:#4A5A52; --text-muted:#8A9088;
  /* Severity — muted, never alarmist */
  --sev-critical:#9B3A2E; --sev-high:#B0702A; --sev-medium:#9A7B23; --sev-low:#4E8A46; --sev-info:#3F5973;
  /* Status — lifecycle: neutral -> ochre -> green */
  --st-open:#8A8475; --st-scheduled:#3F5973; --st-inprogress:#B0702A; --st-improved:#5C9A55; --st-resolved:#357A45;
  /* Radius / elevation */
  --r-sm:6px; --r:10px; --r-lg:14px; --pill:999px;
  --shadow-sm:0 1px 2px rgba(11,37,69,.05); --shadow:0 6px 22px rgba(11,37,69,.07);
  /* Type */
  --font-display:'Montserrat',system-ui,sans-serif; --font-ui:'Inter',system-ui,sans-serif;
  --font-data:'Consolas',ui-monospace,Menlo,monospace;
}

/* ---- BASE ---------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--text);font-family:var(--font-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1200px;margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--font-ui);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}

/* ---- BUTTONS  (shared component → Blade <x-btn>) ------------------------- */
.btn{font-family:var(--font-ui);font-weight:600;font-size:14px;border-radius:var(--r-sm);padding:11px 18px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  transition:background .15s,color .15s}
.btn-primary{background:var(--green);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--forest)}
.btn-secondary{background:var(--surface);color:var(--navy-ink);border-color:var(--line-strong)}
.btn-secondary:hover{background:var(--sunken)}
.btn-ghost{background:transparent;color:var(--green);padding:11px 6px}
.btn-ghost:hover{color:var(--forest)}
.btn:focus-visible{outline:2px solid var(--navy-soft);outline-offset:2px}

/* ---- PILLS  (severity / status / tag) ------------------------------------ */
.pill{display:inline-flex;align-items:center;font-family:var(--font-ui);font-weight:600;font-size:11px;
  padding:4px 11px;border-radius:var(--pill);border:1px solid transparent;white-space:nowrap}
.sev-critical{color:var(--sev-critical);background:#F4E4E0;border-color:#E6CFC9}
.sev-high{color:var(--sev-high);background:#F4EADA;border-color:#E7D7BD}
.sev-medium{color:var(--sev-medium);background:#F1EDD6;border-color:#E2DBBC}
.sev-low{color:var(--sev-low);background:#E6F0E0;border-color:#D2E4C9}
.sev-info{color:var(--sev-info);background:#E6EBF1;border-color:#D3DCE7}
.st-open{color:var(--st-open);background:#EEEBE3;border-color:#DFD9CC}
.st-scheduled{color:var(--st-scheduled);background:#E6EBF1;border-color:#D3DCE7}
.st-inprogress{color:var(--st-inprogress);background:#F4EADA;border-color:#E7D7BD}
.st-improved{color:var(--st-improved);background:#E8F0DF;border-color:#D6E5C8}
.st-resolved{color:#fff;background:var(--st-resolved);border-color:var(--st-resolved)}
.tagpill{color:var(--navy-soft);background:var(--sunken);border-color:var(--line)}

/* ---- LOGO ---------------------------------------------------------------- */
.brand-logo{height:34px;width:auto;display:block}

/* ---- APP NAV  (shared partial → partials/app-nav.blade.php) -------------- */
.appnav{position:sticky;top:0;z-index:30;background:rgba(244,240,231,.85);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.appnav .wrap{display:flex;align-items:center;gap:30px;height:64px}
.navlinks{display:flex;align-items:center;gap:4px;margin-left:8px}
.navlinks a{color:var(--navy-soft);text-decoration:none;font-size:14px;font-weight:500;padding:8px 13px;border-radius:var(--r-sm)}
.navlinks a:hover{color:var(--navy-ink);background:var(--surface)}
.navlinks a.active{color:var(--navy-ink);font-weight:600;background:var(--surface);box-shadow:var(--shadow-sm)}
.account{margin-left:auto;display:flex;align-items:center;gap:10px;cursor:pointer;padding:5px 8px 5px 5px;border-radius:var(--pill)}
.account:hover{background:var(--surface)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--navy-ink);color:var(--sage);font-family:var(--font-display);font-weight:700;font-size:12px;display:grid;place-items:center}
.account .nm{font-size:13.5px;font-weight:600;color:var(--navy-ink)}
@media(max-width:820px){.navlinks{display:none}}

/* ---- PAGE BAND + PROPERTY SELECTOR --------------------------------------- */
.pageband{border-bottom:1px solid var(--line);background:var(--surface)}
.pageband .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 28px;flex-wrap:wrap}
.crumb{display:flex;align-items:center;gap:10px}
.crumb a{color:var(--green);text-decoration:none;font-size:13px;font-weight:600}
.crumb a:hover{color:var(--forest)}
.propselect{position:relative}
.propselect .sel{display:flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--line);border-radius:var(--r);padding:9px 14px;cursor:pointer}
.propselect .sel:hover{border-color:var(--line-strong);background:var(--paper)}
.propselect .pin{width:30px;height:30px;border-radius:7px;background:var(--green-tint);color:var(--forest);display:grid;place-items:center;flex:none}
.propselect .who .a{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--navy-ink);line-height:1.1}
.propselect .who .b{font-size:12px;color:var(--text-muted)}
.propselect .chev{color:var(--navy-muted)}
.propmenu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:280px;padding:6px;display:none;z-index:20}
.propmenu.open{display:block}
.propmenu a{display:flex;gap:10px;padding:10px 12px;border-radius:var(--r-sm);text-decoration:none;color:var(--navy-ink)}
.propmenu a:hover{background:var(--sunken)}
.propmenu a .a{font-weight:600;font-size:14px}.propmenu a .b{font-size:12px;color:var(--text-muted)}
.propmenu .add{color:var(--green);font-weight:600;font-size:13px;border-top:1px solid var(--line);margin-top:4px;padding-top:12px}

/* ---- HEALTH — shown quietly (a number, never a gauge) -------------------- */
.health{display:flex;align-items:center;gap:15px}
.health .ring{width:64px;height:64px;border-radius:50%;border:2px solid var(--sage);display:grid;place-items:center;flex:none}
.health .num{font-family:var(--font-display);font-weight:800;font-size:30px;color:var(--navy-ink);line-height:1}
.health .cap{font-size:12.5px;color:var(--text-muted)}
.health .cap strong{display:block;font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--navy-soft);margin-bottom:2px}

/* ---- CARDS + FORMS ------------------------------------------------------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:22px}
.field{display:block}
.field label{font-family:var(--font-ui);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--navy-muted);display:block;margin-bottom:6px}
.field input{width:100%;font-family:var(--font-ui);font-size:15px;color:var(--navy-ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:11px 13px}
.field input::placeholder{color:var(--navy-muted)}
.field input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-tint)}

/* ---- MARKETING FOOTER  (shared partial → partials/site-footer.blade.php) - */
.site-footer{background:var(--navy-ink);color:#cdd6e2;padding:54px 0 40px}
.site-footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start}
.site-footer .wordmark{font-family:var(--font-display);font-weight:800;font-size:19px;color:#fff}
.site-footer .wordmark span{color:var(--sage)}
.site-footer .fcol h5{color:#fff;font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.site-footer .fcol a{display:block;color:#aab6c6;text-decoration:none;font-size:14px;margin-bottom:8px}
.site-footer .fcol a:hover{color:#fff}
.site-footer .legal{width:100%;border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:20px;font-size:12px;color:#8493a6;font-style:italic;line-height:1.6}

/* ---- SLIM APP FOOTER ----------------------------------------------------- */
.app-footer{border-top:1px solid var(--line);padding:26px 0;margin-top:40px}
.app-footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.app-footer p{font-size:12.5px;color:var(--text-muted)}
.app-footer a{color:var(--navy-soft);text-decoration:none;font-size:12.5px}

/****------------Nabv CSS********/
nav.mkt{position:sticky;top:0;z-index:20;background:rgba(244,240,231,.82);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
nav.mkt .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
nav.mkt .brand-logo{height:36px}
.mktlinks{display:flex;align-items:center;gap:30px}
.mktlinks a:not(.btn){color:var(--navy-soft);text-decoration:none;font-size:14px;font-weight:500}
.mktlinks a:not(.btn):hover{color:var(--navy-ink)}