/* ============================================================
   Emerge Dance Academy — shared design tokens
   Modern, minimal, warm-neutral palette with one confident accent.
   Used by the hub now; Admin/Scheduler/Lessons adopt this next.
   ============================================================ */
:root{
  --bg:#F7F9F7;
  --surface:#FFFFFF;
  --ink:#1D211E;
  --ink-soft:#6B726C;
  --line:#E1E6E0;
  --accent:#99CC33;
  --accent-ink:#6B8F24;
  --accent-soft:#EFF6E0;
  --blue:#17AEDB;
  --blue-soft:#E3F6FC;
  --good:#3F7D5C;
  --good-soft:#E9F3EE;
  --bad:#A23E48;
  --bad-soft:#F8EBEC;
  --radius:10px;
  --radius-sm:7px;
  --shadow:0 1px 2px rgba(28,26,34,.04), 0 8px 24px rgba(28,26,34,.05);
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Manrope',sans-serif;
}
.eyebrow{
  font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:1.4px; color:var(--accent);
}
.display{ font-family:'Sora',sans-serif; font-weight:600; color:var(--ink); }

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:1px solid transparent; border-radius:var(--radius-sm);
  padding:9px 16px; font-family:'Manrope',sans-serif; font-size:13.5px; font-weight:600;
  cursor:pointer; text-decoration:none; transition:.15s;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-ink); }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink-soft); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.chip{
  display:inline-block; padding:2px 10px; border-radius:999px; font-size:11px; font-weight:600;
}
.chip-good{ background:var(--good-soft); color:var(--good); }
.chip-bad{ background:var(--bad-soft); color:var(--bad); }
.chip-accent{ background:var(--accent-soft); color:var(--accent-ink); }

/* ---- shared across every app: green bar + hamburger menu ---- */
.green-bar{
  background:var(--accent); display:flex; align-items:center; justify-content:space-between;
  padding:8px 22px; gap:10px; position:sticky; top:0; z-index:110;
}
.green-bar a{ font-size:12px; color:#1D211E; text-decoration:none; font-weight:600; }
.nav-menu-wrap{ position:relative; }
.hamburger-btn{ background:transparent; border:1px solid rgba(29,33,30,.35); color:#1D211E; border-radius:8px; padding:5px 10px; font-size:14px; cursor:pointer; line-height:1; }
.hamburger-btn:hover{ border-color:#1D211E; }
.nav-menu-panel{
  position:absolute; top:calc(100% + 8px); right:0; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.15); padding:6px; min-width:220px; max-height:80vh; overflow-y:auto; z-index:300;
}
.nav-menu-panel a{ display:flex; align-items:center; gap:8px; padding:5px 10px; border-radius:7px; color:var(--ink); text-decoration:none; font-size:12.5px; font-weight:400; line-height:1.3; }
.nav-menu-panel a:hover{ background:var(--bg); }
.nav-menu-section-title{ font-size:9.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-soft); font-weight:700; padding:6px 10px 2px; }
.nav-menu-divider{ height:1px; background:var(--line); margin:3px 4px; }