/* ============================================================
   Patricia Todd — Staff Portal + Login styles
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Patricia Todd palette */
  --navy:#0e1c3a; --navy-mid:#162850; --navy-deep:#091428; --navy-soft:#162850;
  --red:#b42a44; --red-dark:#8f1f36;
  --gold:#d4a030; --gold-light:#e8b84a; --rose:#c25a72;
  --cream:#ece2c8; --off-white:#faf6f4;
  --text:#222; --text-muted:#666;

  /* portal token aliases (mapped to Patricia palette) */
  --blue:#162850; --sun:#d4a030;
  --snow:#faf6f4; --mist:#ece2c8; --white:#fff;
  --ink:#222; --ink-muted:#666; --line:#e3dccb;

  --font-display:'Oswald','Arial Narrow',sans-serif;
  --font-slab:'Playfair Display',Georgia,serif;
  --font-body:'Open Sans',system-ui,sans-serif;
  --shadow:0 6px 26px rgba(14,28,58,0.12);
  --shadow-lg:0 18px 50px rgba(9,20,40,0.32);
}
body { font-family: var(--font-body); color: var(--ink); background: var(--snow); line-height: 1.6; }
a { color: var(--red); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* star mark */
.mark { display:inline-block; }
.mark svg { display:block; }

/* ---- Buttons ---- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:0.05em;
  text-transform:uppercase; padding:0.7em 1.4em; border:none; border-radius:7px;
  transition:background .2s, transform .2s, box-shadow .2s, color .2s, opacity .2s;
}
.btn-primary { background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(180,42,68,0.28); }
.btn-primary:hover { background:var(--red-dark); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-ghost { background:transparent; color:var(--navy); border:1.5px solid var(--line); }
.btn-ghost:hover { border-color:var(--navy); }
.btn-sm { font-size:0.8rem; padding:0.45em 0.9em; }
.btn-sun { background:var(--gold); color:var(--navy-deep); }
.btn-sun:hover { background:var(--gold-light); }

/* ============================================================
   LOGIN
   ============================================================ */
.login-body {
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem;
  background:
    radial-gradient(80% 60% at 50% 120%, rgba(212,160,48,0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-mid) 100%);
}
.login-wrap { width:100%; max-width:410px; }
.login-brand { text-align:center; margin-bottom:1.6rem; color:#fff; }
.login-brand .mark { width:46px; height:46px; color:var(--gold); margin:0 auto 0.6rem; }
.login-brand-name { display:block; font-family:var(--font-slab); font-weight:700; font-size:1.6rem; }
.login-brand-sub { display:block; font-family:var(--font-display); font-size:0.66rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); margin-top:0.2rem; }
.login-brand-rule { width:34px; height:2px; background:var(--red); border-radius:2px; margin:1rem auto; }
.login-brand-label { font-family:var(--font-display); font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:rgba(255,255,255,0.45); font-weight:700; }

.login-card { background:#fff; border-radius:14px; padding:2.2rem 2rem; box-shadow:var(--shadow-lg); }
.login-card h1 { font-family:var(--font-slab); font-size:1.4rem; color:var(--navy); margin-bottom:0.3rem; }
.login-intro { font-size:0.9rem; color:var(--ink-muted); margin-bottom:1.4rem; }

.field { margin-bottom:1.05rem; display:flex; flex-direction:column; }
.field label { font-family:var(--font-display); font-weight:600; font-size:0.8rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); margin-bottom:0.35rem; }
.field input {
  padding:0.72em 0.9em; border:2px solid var(--line); border-radius:7px; font-size:0.95rem;
  font-family:var(--font-body); outline:none; transition:border-color .2s; background:#fff;
}
.field input:focus { border-color:var(--red); }

.login-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem; }
.login-link { font-size:0.82rem; background:none; border:none; color:var(--red); padding:0; }
.login-link:hover { text-decoration:underline; }
.btn-block { width:100%; margin-top:0.4rem; }

.alert { display:none; border-radius:7px; font-size:0.86rem; padding:0.7rem 0.95rem; margin-bottom:1.05rem; line-height:1.5; }
.alert.show { display:block; }
.alert.error { background:rgba(180,42,68,0.08); border:1px solid rgba(180,42,68,0.3); color:var(--red-dark); }
.alert.ok { background:rgba(22,40,80,0.09); border:1px solid rgba(22,40,80,0.35); color:var(--navy-mid); }

.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,0.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:none; }
.btn.loading .spinner { display:block; }
@keyframes spin { to { transform:rotate(360deg); } }
.back-to-site { display:block; text-align:center; margin-top:1.6rem; font-size:0.74rem; letter-spacing:0.08em; color:rgba(255,255,255,0.4); }
.back-to-site:hover { color:#fff; }
.emu-badge { position:fixed; bottom:10px; left:10px; background:var(--gold); color:var(--navy-deep); font-family:var(--font-display); font-weight:700; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.25rem 0.6rem; border-radius:5px; }

/* ============================================================
   PORTAL SHELL
   ============================================================ */
.portal-body { background:var(--snow); min-height:100vh; }
#authGate { position:fixed; inset:0; background:var(--navy-deep); display:flex; align-items:center; justify-content:center; z-index:9999; color:#fff; }
#authGate .spinner { display:block; width:34px; height:34px; border-width:3px; border-color:rgba(255,255,255,0.2); border-top-color:var(--gold); }

.portal-shell { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }

/* Sidebar */
.side {
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  color:#fff; padding:1.4rem 1rem; display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.side-brand { display:flex; align-items:center; gap:0.6rem; padding:0 0.4rem 1.3rem; border-bottom:1px solid rgba(255,255,255,0.1); margin-bottom:1rem; }
.side-brand .mark { width:32px; height:32px; color:var(--gold); }
.side-brand-name { font-family:var(--font-slab); font-weight:700; font-size:1.1rem; line-height:1; }
.side-brand-sub { font-family:var(--font-display); font-size:0.6rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); }
.nav-item {
  display:flex; align-items:center; gap:0.8rem; width:100%; text-align:left; background:none; border:none;
  color:rgba(255,255,255,0.72); font-family:var(--font-display); font-weight:600; font-size:1rem; letter-spacing:0.03em;
  padding:0.7rem 0.8rem; border-radius:8px; transition:background .2s, color .2s; margin-bottom:0.15rem;
}
.nav-item i { width:20px; text-align:center; font-size:0.95rem; }
.nav-item:hover { background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active { background:var(--red); color:#fff; box-shadow:0 6px 16px rgba(180,42,68,0.35); }
.nav-item .count { margin-left:auto; font-size:0.72rem; background:rgba(255,255,255,0.16); border-radius:100px; padding:0.05rem 0.5rem; font-family:var(--font-body); font-weight:700; }
.side-foot { margin-top:auto; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); }
.side-user { font-size:0.8rem; color:rgba(255,255,255,0.6); margin-bottom:0.6rem; padding:0 0.3rem; }
.side-user strong { display:block; color:#fff; font-size:0.92rem; }

/* Main */
.main { padding:1.6rem 2rem 3rem; overflow-x:hidden; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem; gap:1rem; flex-wrap:wrap; }
.topbar h1 { font-family:var(--font-slab); font-weight:700; font-size:1.9rem; color:var(--navy); }
.topbar p { font-size:0.88rem; color:var(--ink-muted); }
.topbar-actions { display:flex; gap:0.6rem; flex-wrap:wrap; }

.mobile-bar { display:none; }

/* Views */
.view { display:none; }
.view.active { display:block; animation:fade .3s ease; }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

/* Stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:1.8rem; }
.stat { background:#fff; border-radius:12px; padding:1.3rem 1.4rem; box-shadow:var(--shadow); border-left:4px solid var(--red); }
.stat:nth-child(2){ border-left-color:var(--navy-mid); }
.stat:nth-child(3){ border-left-color:var(--gold); }
.stat:nth-child(4){ border-left-color:#2a8a4a; }
.stat:nth-child(5){ border-left-color:var(--navy); }
.stat-label { font-family:var(--font-display); font-weight:600; font-size:0.78rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); display:flex; align-items:center; gap:0.5rem; }
.stat-num { font-family:var(--font-slab); font-weight:700; font-size:2.1rem; color:var(--navy); margin-top:0.3rem; line-height:1; }

/* Card / table */
.card { background:#fff; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.3rem; border-bottom:1px solid var(--line); gap:0.8rem; flex-wrap:wrap; }
.card-head h2 { font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:0.03em; text-transform:uppercase; color:var(--navy); }
.search { position:relative; }
.search input { padding:0.5em 0.8em 0.5em 2rem; border:2px solid var(--line); border-radius:7px; font-size:0.88rem; font-family:var(--font-body); outline:none; min-width:200px; }
.search input:focus { border-color:var(--red); }
.search i { position:absolute; left:0.7rem; top:50%; transform:translateY(-50%); color:var(--ink-muted); font-size:0.8rem; }

.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.9rem; }
thead th { text-align:left; font-family:var(--font-display); font-weight:600; font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-muted); padding:0.8rem 1.3rem; border-bottom:1px solid var(--line); white-space:nowrap; }
tbody td { padding:0.8rem 1.3rem; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover { background:var(--snow); }
tbody tr:last-child td { border-bottom:none; }
td .muted { color:var(--ink-muted); font-size:0.84rem; }
.tag { display:inline-block; font-family:var(--font-display); font-weight:600; font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; padding:0.15rem 0.6rem; border-radius:100px; }
.tag.vol { background:rgba(212,160,48,0.22); color:#8a6500; }
.tag.new { background:rgba(22,40,80,0.12); color:var(--navy-mid); }
.tag.role { background:rgba(180,42,68,0.1); color:var(--red-dark); }
.row-del { background:none; border:none; color:var(--ink-muted); font-size:0.9rem; padding:0.3rem; border-radius:5px; }
.row-del:hover { color:var(--red); background:rgba(180,42,68,0.08); }

.empty { text-align:center; padding:3rem 1rem; color:var(--ink-muted); }
.empty i { font-size:2rem; color:var(--mist); display:block; margin-bottom:0.6rem; }

/* Modal */
.modal { position:fixed; inset:0; z-index:9000; display:none; align-items:center; justify-content:center; padding:1.2rem; }
.modal.show { display:flex; }
.modal-back { position:absolute; inset:0; background:rgba(9,20,40,0.6); backdrop-filter:blur(3px); }
.modal-card { position:relative; background:#fff; border-radius:14px; width:100%; max-width:440px; padding:1.8rem; box-shadow:var(--shadow-lg); max-height:90vh; overflow:auto; animation:fade .25s ease; }
.modal-card h3 { font-family:var(--font-slab); font-size:1.35rem; color:var(--navy); margin-bottom:1.2rem; }
.modal-actions { display:flex; gap:0.6rem; margin-top:0.6rem; }
.modal-actions .btn { flex:1; }
.field-row { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }

/* event + testimonial cards */
.event-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.event-card { background:#fff; border-radius:12px; box-shadow:var(--shadow); padding:1.3rem; border-top:4px solid var(--navy-mid); position:relative; }
.event-date { font-family:var(--font-display); font-weight:700; font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--red); margin-bottom:0.3rem; }
.event-card h3 { font-family:var(--font-slab); font-size:1.2rem; color:var(--navy); margin-bottom:0.4rem; }
.event-meta { font-size:0.85rem; color:var(--ink-muted); display:flex; flex-direction:column; gap:0.2rem; margin-bottom:0.6rem; }
.event-meta i { color:var(--navy-mid); width:16px; }
.event-card p { font-size:0.88rem; color:var(--ink); margin-bottom:0.7rem; }
.event-card .row-del { position:absolute; top:0.9rem; right:0.9rem; z-index:2; background:rgba(255,255,255,0.85); }
.event-card.is-hidden { opacity:0.7; border-top-color:var(--ink-muted); }
.ev-photo { width:calc(100% + 2.6rem); height:130px; object-fit:cover; margin:-1.3rem -1.3rem 0.9rem; display:block; border-radius:12px 12px 0 0; }
.ev-badge { position:absolute; top:0.9rem; left:0.9rem; z-index:2; font-family:var(--font-display); font-weight:700; font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--ink-muted); color:#fff; padding:0.15rem 0.55rem; border-radius:100px; }
.ev-sub { font-family:var(--font-display); font-weight:600; font-size:0.74rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:0.2rem; }
.ev-actions { display:flex; flex-wrap:wrap; gap:0.4rem; padding-top:0.7rem; border-top:1px solid var(--line); }
.ev-act { display:inline-flex; align-items:center; gap:0.35rem; font-family:var(--font-display); font-weight:600; font-size:0.74rem; letter-spacing:0.02em; color:var(--navy); background:var(--snow); border:1px solid var(--line); border-radius:6px; padding:0.3em 0.6em; }
.ev-act:hover { background:var(--navy); color:#fff; border-color:var(--navy); }
.ev-act i { font-size:0.82rem; }

/* testimonial cards (reuse event-card shell) — classes match portal.js renderTestimonials */
.testimonial-card { border-top-color:var(--gold); }
.testimonial-card .tm-head { display:flex; align-items:center; gap:0.7rem; margin-bottom:0.7rem; }
.testimonial-card .tm-photo { width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; border:2px solid var(--cream); }
.testimonial-card .tm-initials { width:46px; height:46px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--gold); font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:0.03em; }
.testimonial-card .tm-id h3 { font-family:var(--font-display); font-weight:700; font-size:0.95rem; color:var(--navy); line-height:1.1; }
.testimonial-card .tm-quote { font-family:var(--font-slab); font-style:italic; font-size:0.98rem; color:var(--ink); line-height:1.55; }

/* event form extras */
.field textarea { padding:0.72em 0.9em; border:2px solid var(--line); border-radius:7px; font-size:0.95rem; font-family:var(--font-body); outline:none; transition:border-color .2s; resize:vertical; }
.field textarea:focus { border-color:var(--red); }
.field input[type="file"] { padding:0.5em; border:2px dashed var(--line); border-radius:7px; font-size:0.85rem; background:var(--snow); }
.field .opt { font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-muted); font-size:0.72rem; }
.check-field { justify-content:center; }
.check { display:flex; align-items:center; gap:0.5rem; font-family:var(--font-body); font-weight:500; font-size:0.9rem; text-transform:none; letter-spacing:0; color:var(--ink); cursor:pointer; margin:0; }
.check input { width:16px; height:16px; accent-color:var(--red); }
.field-group-label { font-family:var(--font-display); font-weight:700; font-size:0.82rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--navy); margin:0.4rem 0 0.6rem; display:flex; align-items:center; gap:0.4rem; }
.field-group-label i { color:var(--red); }
.field-group-label .opt { font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-muted); font-size:0.74rem; }
.field-hint { font-size:0.78rem; color:var(--ink-muted); line-height:1.5; margin:0.3rem 0 0.6rem; display:flex; align-items:flex-start; gap:0.4rem; }
.field-hint i { color:var(--navy-mid); margin-top:0.15rem; }
.form-msg { font-size:0.85rem; color:var(--navy-mid); margin-bottom:0.6rem; }
.form-msg.err { color:var(--red-dark); }

@media (max-width: 820px) {
  .portal-shell { grid-template-columns:1fr; }
  .side { display:none; position:fixed; inset:0; height:100vh; z-index:1000; }
  .side.open { display:flex; }
  .mobile-bar { display:flex; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; padding:0.8rem 1rem; position:sticky; top:0; z-index:500; }
  .mobile-bar .mark { width:28px; height:28px; color:var(--gold); }
  .mobile-bar-name { font-family:var(--font-slab); font-weight:700; }
  .hamb { background:none; border:none; color:#fff; font-size:1.3rem; }
  .main { padding:1.2rem 1.1rem 3rem; }
  .field-row { grid-template-columns:1fr; }
}