/* Bridgeway Design — app shell theme (back-end + client areas, login).
   Palette aligned to the marketing front end: warm ink + a terracotta/clay accent + supporting
   moss/ultramarine. Variable names are kept (the "bronze*" family now holds the clay accent) so the
   whole app — including the staff sidebar shell — re-themes from these values. */
:root{
  --espresso:#14120f; --charcoal:#211d18; --ink:#211d18;
  --bronze:#c8613e; --bronze-2:#e4a184; --bronze-deep:#a44a2c;
  --cream:#f3ece0; --paper:#f8f2e8; --sand:#ece2d2; --line:#d7c9b2;
  --muted:#8a8072; --soft:#5c5347; --ok:#3f7d52; --danger:#a8453a;
  --moss:#5c6b4a; --blue:#2b3ff0;
  --serif:"Fraunces", Georgia, serif;
  --sans:"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{ box-sizing:border-box; }
body{
  margin:0; font-family:var(--sans); background:var(--cream); color:var(--ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{ color:var(--bronze-deep); text-decoration:none; }
a:hover{ text-decoration:underline; }
h1,h2,h3{ font-family:var(--serif); font-weight:600; line-height:1.05; letter-spacing:-.015em; margin:0 0 .4em; }

/* top bar */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(18px,4vw,42px); background:rgba(246,239,227,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{ font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:-.02em; color:var(--ink); }
.brand:hover{ text-decoration:none; }
.brand .d{ color:var(--bronze); }
.topbar .right{ display:flex; align-items:center; gap:16px; font-size:.9rem; }
.who{ color:var(--soft); }
.who b{ color:var(--ink); font-weight:600; }

/* badges */
.badge{ font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 9px; border-radius:100px; border:1px solid var(--line); background:var(--paper); color:var(--soft); }
.badge.dev{ background:var(--ink); color:var(--cream); border-color:var(--ink); }
.badge.client{ background:rgba(200,97,62,.14); color:var(--bronze-deep); border-color:transparent; }
.badge.ok{ color:var(--ok); border-color:rgba(63,125,82,.4); }

/* layout */
.wrap{ max-width:1080px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(18px,4vw,42px); }
.page-head{ margin-bottom:28px; }
.page-head .ey{ font-size:.76rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--bronze); }
.page-head h1{ font-size:clamp(1.8rem,4vw,2.6rem); margin-top:8px; }
.page-head p{ color:var(--soft); max-width:60ch; }

/* cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:22px; }
.card h3{ font-size:1.3rem; }
.card .sub{ color:var(--muted); font-size:.86rem; margin-bottom:14px; }
.card .row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; flex-wrap:wrap; }

/* buttons */
.btn{ font-family:var(--sans); font-weight:600; font-size:.9rem; border:0; cursor:pointer;
  padding:11px 18px; border-radius:100px; display:inline-flex; align-items:center; gap:8px; line-height:1; }
.btn:hover{ text-decoration:none; }
.btn-bronze{ background:linear-gradient(120deg,var(--bronze),var(--bronze-deep)); color:#fff;
  box-shadow:0 10px 24px -10px rgba(200,97,62,.7); }
.btn-ink{ background:var(--ink); color:var(--cream); }
.btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); }
.btn-sm{ padding:8px 14px; font-size:.82rem; }
.btn-link{ background:none; color:var(--bronze-deep); padding:0; }

/* forms */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:.82rem; font-weight:600; color:var(--soft); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:11px 13px; border:1.5px solid var(--line); border-radius:11px;
  background:#fff; font-family:var(--sans); font-size:.95rem; color:var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--bronze); }
.field .hint{ font-size:.76rem; color:var(--muted); margin-top:5px; }
.err{ background:rgba(168,69,58,.1); border:1px solid rgba(168,69,58,.35); color:var(--danger);
  padding:10px 14px; border-radius:10px; font-size:.88rem; margin-bottom:16px; }
.note{ background:var(--sand); border:1px solid var(--line); border-radius:12px; padding:14px 16px;
  font-size:.86rem; color:var(--soft); }

/* auth card */
.auth-shell{ min-height:calc(100vh - 56px); display:grid; place-items:center; padding:24px; }
.auth-card{ width:100%; max-width:400px; background:var(--paper); border:1px solid var(--line);
  border-radius:20px; padding:34px; box-shadow:0 30px 60px -40px rgba(40,28,18,.5); }
.auth-card h1{ font-size:1.9rem; }
.auth-card .lead{ color:var(--soft); font-size:.92rem; margin-bottom:22px; }
.demo-creds{ margin-top:20px; font-size:.8rem; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; }
.demo-creds code{ background:#fff; border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink); }

/* tables */
.tbl{ width:100%; border-collapse:collapse; font-size:.9rem; }
.tbl th{ text-align:left; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); }
.tbl td{ padding:12px; border-bottom:1px solid var(--line); }

/* staff sub-nav (rendered by _StaffNav partial on back-end pages) */
.staffnav{ border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:53px; z-index:30; }
.staffnav-in{ max-width:1080px; margin:0 auto; padding:0 clamp(18px,4vw,42px); display:flex; gap:4px; flex-wrap:wrap; }
.staffnav a{ padding:14px 14px; font-size:.88rem; font-weight:600; color:var(--soft); border-bottom:2px solid transparent; }
.staffnav a:hover{ color:var(--ink); text-decoration:none; }
.staffnav a.on{ color:var(--bronze-deep); border-bottom-color:var(--bronze); }

footer.app-foot{ text-align:center; color:var(--muted); font-size:.8rem; padding:30px; }