/* Jungle Gym Marketing Planner - design system
   Rebranded 2026-07-15 from Master Chim (ivory/charcoal/auburn) to the
   Jungle Gym Martial Arts brand: BLACK + WHITE + GREEN, dark-mode-forward.
   Source of truth for the palette: junglegym-poconos/site/assets/css/styles.css.

   The old Master Chim token NAMES are kept (--auburn, --charcoal, --ivory, --slate,
   --white, --border-1, ...) so the views' inline styles remap to the new brand
   without touching every view. New meanings:
     --auburn / -deep / -tint  -> JG green accent family (was auburn red)
     --charcoal / -soft        -> primary / secondary TEXT on dark (white / light gray)
     --slate / -soft           -> secondary / muted gray text
     --ivory / -deep / -line   -> dark app backgrounds
     --white                   -> card / surface background (#141414), NOT literal white
     --border-1 / -2           -> dark hairline borders
     --danger                  -> functional red, errors + destructive actions only
   Fonts: Inter everywhere (Chimera + Source Serif / Montserrat / Oswald retired). */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root{
  /* Jungle Gym brand palette */
  --jg-green:#00CC00; --jg-green-bright:#00FF00; --jg-green-dark:#009900;
  --jg-green-muted:rgba(0,204,0,.15); --jg-green-glow:rgba(0,204,0,.4);

  /* Legacy token names, remapped to the JG palette (see header note) */
  --auburn:#00CC00; --auburn-deep:#009900; --auburn-tint:rgba(0,204,0,.15);
  --charcoal:#FFFFFF; --charcoal-soft:#B0B0B0;
  --slate:#B0B0B0; --slate-soft:#888888;
  --ivory:#0A0A0A; --ivory-deep:#1E1E1E; --ivory-line:#222222; --white:#141414;
  --border-1:#333333; --border-2:#333333;
  --danger:#FF6B6B;

  /* Explicit brand surfaces */
  --bg-primary:#0A0A0A; --bg-surface:#111111; --bg-card:#141414; --bg-input:#1E1E1E;

  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Georgia,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --shadow-1:0 1px 0 rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.5);
  --shadow-3:0 8px 24px rgba(0,0,0,.6);
  --shadow-green:0 0 20px rgba(0,204,0,.35);
}
*{box-sizing:border-box;}
html{color-scheme:dark;}
body{
  margin:0; background:var(--ivory); color:var(--charcoal);
  font-family:var(--serif); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--display); text-transform:uppercase; letter-spacing:-.02em; line-height:1.04; margin:0; font-weight:900; color:var(--charcoal);}
p{margin:0 0 1rem;}
a{color:var(--auburn); text-decoration:none;}
button{font-family:var(--sans);}

/* form controls on dark: dark field, white text, native chrome darkened,
   green border + green glow on focus. Inline styles set only the border/size,
   so background + text color + focus state come from here. */
input,select,textarea{
  font-family:var(--sans); color:var(--charcoal);
  background:var(--bg-input); color-scheme:dark; border-radius:2px;
}
select option{background:var(--bg-input); color:var(--charcoal);}
input::placeholder,textarea::placeholder{color:var(--slate-soft);}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--jg-green)!important;
  box-shadow:0 0 0 2px var(--jg-green-muted),var(--shadow-green);
}

.label{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--slate);}
.ui{font-family:var(--sans);}

/* app layout */
main#app section{padding:clamp(32px,5vw,56px) clamp(20px,5vw,64px);}
.wrap{max-width:1180px; margin:0 auto;}

/* bento / card system - views render summary tiles into these */
.bento{display:grid; grid-template-columns:repeat(12,1fr); gap:16px;}
.card{background:var(--white); border:1px solid var(--border-1); border-radius:2px; padding:26px; box-shadow:var(--shadow-1);}
.card h3{font-size:20px; margin-bottom:10px;}
.card .num{font-family:var(--display); font-size:14px; color:var(--auburn); letter-spacing:.05em; margin-bottom:14px;}
.card p{font-size:15.5px; line-height:1.55; color:var(--charcoal);}
.span3{grid-column:span 3;} .span4{grid-column:span 4;} .span5{grid-column:span 5;}
.span6{grid-column:span 6;} .span7{grid-column:span 7;} .span8{grid-column:span 8;} .span12{grid-column:span 12;}

/* dashboard buckets (Start today / Deliver today / Coming up / Overdue) */
.buckets{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.bucket .bh{font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); padding-bottom:8px; border-bottom:2px solid var(--border-1); margin-bottom:10px;}
.bucket.hot .bh{color:var(--auburn); border-color:var(--auburn);}
.row{font-family:var(--sans); font-size:12.5px; background:var(--white); border:1px solid var(--border-1); border-radius:2px; padding:9px 10px; margin-bottom:8px; line-height:1.3; transition:background 150ms ease,border-color 150ms ease;}
.row:hover{background:var(--jg-green-muted); border-color:var(--auburn);}
.row .d{display:block; font-size:10px; color:var(--slate); margin-top:3px; letter-spacing:.03em;}
.row.a{border-left:3px solid var(--auburn);}

/* status pills (content item state) */
.status{font-family:var(--sans); font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; border-radius:999px; display:inline-block;}
.st-ready{background:var(--jg-green); color:#000;}
.st-need{background:#222222; color:#888888;}
.st-prog{background:transparent; color:#B0B0B0; border:1px solid #333333;}

/* readiness bar + item rows (campaign detail) */
.readbar{height:12px; background:var(--bg-input); border:1px solid var(--border-1); border-radius:999px; overflow:hidden; margin:6px 0 4px;}
.readbar i{display:block; height:100%; background:var(--jg-green); box-shadow:var(--shadow-green);}
.item{display:flex; align-items:center; justify-content:space-between; gap:12px; font-family:var(--sans); font-size:13px; padding:11px 0; border-bottom:1px solid var(--border-1);}
.item:last-child{border-bottom:0;}
.item .nm{display:flex; align-items:center; gap:10px;}
.item .clip{font-size:10px; color:var(--slate);}

/* year strip (year calendar view) */
.year{display:grid; grid-template-columns:repeat(6,1fr); gap:8px;}
.mo{background:var(--white); border:1px solid var(--border-1); border-radius:2px; padding:10px; min-height:64px;}
.mo .mn{font-family:var(--sans); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate);}
.mo .dots{display:flex; gap:4px; margin-top:8px; flex-wrap:wrap;}
.mo .dots span{width:8px; height:8px; border-radius:999px;}
/* four distinct dot colors on the dark ground (also drive the legend swatches) */
.c-hol{background:transparent; border:2px solid var(--jg-green-bright);}
.c-enr{background:#FFFFFF;}
.c-tou{background:var(--jg-green);}
.c-eve{background:#888888;}

/* legend for the year/type dot colors above */
.legend{display:flex; flex-wrap:wrap; gap:18px; margin-top:20px; font-family:var(--sans); font-size:12px; color:var(--slate);}
.legend span{display:inline-flex; align-items:center; gap:7px;}
.legend i{width:10px; height:10px; border-radius:999px; display:inline-block;}

/* data table (e.g. settings lead-time editor) */
.tbl{width:100%; border-collapse:collapse; font-family:var(--sans); font-size:14px;}
.tbl th{text-align:left; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--slate); padding:10px 12px; border-bottom:2px solid var(--border-1);}
.tbl td{padding:11px 12px; border-bottom:1px solid var(--border-1); color:var(--charcoal);}
.tbl td b{color:var(--auburn);}

/* primary action button, brand mark */
.go{font-family:var(--sans); font-size:13px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:var(--auburn); color:#000; padding:16px 26px; border-radius:2px; white-space:nowrap; display:inline-block; transition:background 150ms ease,box-shadow 150ms ease;}
.go:hover{background:var(--jg-green-bright); box-shadow:var(--shadow-green);}
.mark{font-family:var(--display); font-size:18px; font-weight:900; text-transform:uppercase; letter-spacing:.02em; color:var(--charcoal); display:inline-flex; align-items:center; gap:10px;}
.mark img{height:36px; width:auto; display:block;}
.mark b{color:var(--auburn);}

@media(max-width:860px){
  .bento{grid-template-columns:repeat(6,1fr);}
  .span3,.span4,.span5{grid-column:span 3;} .span6,.span7,.span8{grid-column:span 6;}
  .buckets{grid-template-columns:1fr 1fr;}
  .year{grid-template-columns:repeat(3,1fr);}
}
@media(max-width:520px){
  .buckets{grid-template-columns:1fr;}
}

/* ---- Step 6: top navigation (app-only, no equivalent in the one-pager) ---- */
#topnav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);
  background:rgba(10,10,10,.92); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--jg-green);
}
#topnav[hidden]{display:none;}
#topnav nav{display:flex; align-items:center; gap:26px;}
#topnav nav a{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--charcoal); transition:color 150ms ease;
}
#topnav nav a:hover{color:var(--auburn);}
#topnav #logout{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--charcoal);
  background:none; border:0; padding:0; margin:0; cursor:pointer; transition:color 150ms ease;
}
#topnav #logout:hover{color:var(--auburn);}