/* Greektopia Dashboard — layout (reuses brand variables from ../css/style.css) */
body.dash { background: var(--cream); color: var(--ink); }

/* Top bar */
.dash-top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; background: #fff; border-bottom: 1px solid rgba(0,0,0,0.08);
}
.dash-top .brand-text { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.dash-top .brand-text span { color: var(--gold); }
.dash-top .dash-brand { display: inline-flex; align-items: center; gap: 10px; }
.dash-top .dash-logo { height: 20px; width: auto; display: block; filter: brightness(0); }
.dash-top .dash-admin-tag { font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); border-left: 1px solid rgba(0,0,0,0.15); padding-left: 10px; }
.dash-top .who { display: flex; align-items: center; gap: 16px; font-size: 0.9rem; color: var(--grey); }
.dash-top .who a, .dash-top .who button {
  font-family: var(--font-head); font-weight: 700; font-size: 0.82rem;
  color: var(--gold-deep); background: none; border: none; cursor: pointer;
}
.dash-wrap { max-width: 1080px; margin: 0 auto; padding: 34px 24px 80px; }
.dash-wrap h1 { font-size: 1.9rem; margin-bottom: 6px; }
.dash-wrap .sub { color: var(--grey); margin-bottom: 28px; }

/* Cards / panels */
.panel { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 24px; margin-bottom: 22px; }
.panel h2 { font-size: 1.15rem; margin-bottom: 16px; }

/* Forms */
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px; font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15);
}
.field .hint { font-size: 0.78rem; color: var(--grey); margin-top: 4px; }
.checkline { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.checkline input { width: auto; }

/* Overview stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.stat-card { background: var(--cream); border-radius: 12px; padding: 18px; text-align: center; }
.stat-num { font-family: var(--font-head); font-weight: 800; font-size: 2rem; color: var(--gold-deep); }
.stat-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); margin-top: 4px; }
@media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

/* Small inline action buttons in tables */
.mini { font-family: var(--font-head); font-weight: 700; font-size: 0.72rem; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--gold); color: var(--gold-deep); background: #fff; cursor: pointer; margin-right: 6px; }
.mini:hover { background: var(--gold); color: #fff; }
.mini.ghost { border-color: rgba(0,0,0,0.15); color: var(--grey); }
.mini.ghost:hover { background: #eee; color: var(--ink); }
.mini.danger { border-color: rgba(201,42,42,0.5); color: #c92a2a; margin-right: 0; }
.mini.danger:hover { background: #c92a2a; color: #fff; }
.org-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th { text-align: left; font-family: var(--font-head); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); padding: 10px 12px; border-bottom: 2px solid rgba(0,0,0,0.08); }
.tbl td { padding: 12px; border-bottom: 1px solid rgba(0,0,0,0.06); vertical-align: middle; }
.tbl tr:hover td { background: var(--cream); }
.tbl a { color: var(--gold-deep); font-weight: 600; }

/* Status badges */
.badge { display: inline-block; font-family: var(--font-head); font-weight: 700; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; }
.badge.reference { background: #eef2f9; color: #55617a; }
/* Draft: ours, not sent yet. Deliberately drab so it never reads as "done". */
.badge.draft     { background: #e9e9ee; color: #5c5c68; border: 1px dashed #b9b9c4; padding: 3px 9px; }
.badge.sent      { background: #fff3d6; color: #96690a; }
.badge.viewed    { background: #dbeafe; color: #1e5fb4; }
.badge.signed    { background: #d8f5e3; color: #1c7a45; }
.badge.declined  { background: #fbe0e0; color: #b3261e; }
.pill-type { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gold-deep); }

/* Auth card */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 16px; padding: 34px; box-shadow: 0 20px 50px rgba(0,0,0,0.08); }
.auth-card .logo-text { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; text-align: center; margin-bottom: 6px; }
.auth-card .logo-text span { color: var(--gold); }
.auth-card .auth-logo { height: 30px; width: auto; display: block; margin: 0 auto 8px; filter: brightness(0); }
.auth-logo-link { display: block; width: fit-content; margin: 0 auto 8px; transition: opacity .15s ease; }
.auth-logo-link .auth-logo { margin: 0; }
.auth-logo-link:hover { opacity: 0.6; }
.auth-card .tag { text-align: center; color: var(--grey); font-size: 0.9rem; margin-bottom: 24px; }
.msg { font-size: 0.88rem; margin: 10px 0; padding: 10px 12px; border-radius: 8px; display: none; }
.msg.show { display: block; }
.msg.err { background: #fbe0e0; color: #b3261e; }
.msg.ok  { background: #d8f5e3; color: #1c7a45; }
.full { width: 100%; text-align: center; }
.muted-link { color: var(--gold-deep); font-weight: 600; cursor: pointer; }

@media (max-width: 640px) { .f-row { grid-template-columns: 1fr; } .dash-wrap { padding: 24px 16px 60px; } }

/* Chapters (Phase 1) */
.org-card { border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 18px; margin-bottom: 14px; background: #fff; }
.org-card h3 { font-size: 1.05rem; margin-bottom: 2px; }
.org-card .org-school { color: var(--grey); font-size: 0.82rem; margin-bottom: 12px; }
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 0.9rem; border-bottom: 1px solid rgba(0,0,0,0.05); }
.member-row .who2 { flex: 1; }
.role-tag2 { font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px; background: var(--cream); color: var(--gold-deep); }
.add-member { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(0,0,0,0.12); }
.add-member select, .add-member input { padding: 8px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 8px; font-size: 0.85rem; font-family: var(--font-body); }
.add-member .lbl { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grey); width: 100%; }

/* Document folders (client) */
.folder { border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.folder-head { background: var(--cream); padding: 12px 16px; font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
.folder-count { background: #fff; border-radius: 999px; padding: 1px 9px; font-size: 0.72rem; color: var(--grey); margin-left: 6px; }
.folder-doc { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 0.92rem; }
.folder-doc .fd-title { flex: 1; font-weight: 600; }
.folder-doc a { color: var(--gold-deep); font-weight: 600; }

/* ===================== CHAT (Phase 4) ===================== */
.chat-list {
  max-height: 340px; overflow-y: auto; padding: 6px 4px;
  background: var(--cream, #f4f6f9); border-radius: 12px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-empty { color: var(--grey); text-align: center; padding: 28px 10px; }
.chat-row { display: flex; }
.chat-row.mine { justify-content: flex-end; }
.chat-bubble {
  max-width: 78%; background: #fff; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px; padding: 8px 12px; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.chat-row.mine .chat-bubble { background: var(--gold, #1863dc); color: var(--on-accent, #fff); border-color: transparent; }
.chat-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.chat-who { font-weight: 700; font-size: 0.72rem; }
.chat-time { font-size: 0.66rem; opacity: 0.65; }
.chat-body { font-size: 0.92rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; }
.chat-form { display: flex; gap: 10px; }
.chat-form input {
  /* min-width:0 matters. A text input has an intrinsic minimum width, so
     flex:1 alone will not let it shrink - at 390px that pushed Send 42px off
     the screen. */
  flex: 1; min-width: 0; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.14);
  border-radius: 10px; font: inherit;
}
.chat-form .btn { flex: none; }

/* ---- Inline buttons on a phone ---------------------------------------
   The public site sets `.btn { width: 100% }` below 520px, which is right for
   a marketing call-to-action and wrong for a button sitting beside an input.
   Dashboard pages load that stylesheet too, so at 390px the chat Send button
   stretched to 304px and pushed itself off the screen.

   Only buttons in genuinely INLINE rows are reset here. A standalone form
   submit keeps the full-width treatment, which is easier to tap. */
@media (max-width: 520px) {
  .chat-form .btn,
  .dl-form .btn,
  .adv-actions .btn,
  .add-member .btn,
  .fld-tools .btn,
  .cal-head .btn,
  .panel-head .btn {
    width: auto; max-width: none;
  }
  .chat-form .btn { padding: 12px 18px; }
}
.chat-form input:focus { outline: none; border-color: var(--gold, #1863dc); }

/* ===================== INSPIRATION (Phase 5) ===================== */
.inspo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.inspo-card { position: relative; background: var(--cream, #f4f6f9); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.inspo-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.inspo-card.link a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 150px; text-decoration: none; color: var(--gold-deep, #0056a7); background: #fff; }
.inspo-link-ico { font-size: 2rem; }
.inspo-link-host { font-size: 0.8rem; font-weight: 600; margin-top: 6px; word-break: break-all; padding: 0 8px; text-align: center; }
.inspo-cap { padding: 8px 10px; font-size: 0.8rem; color: var(--black, #17181c); line-height: 1.3; }
.inspo-del {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px;
  border: none; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.inspo-del:hover { background: rgba(0,0,0,0.8); }

/* ---- photo gallery ---- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.photo-card { position: relative; margin: 0; background: var(--cream, #f4f6f9); border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,0.06); }
.photo-card img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .25s ease; }
.photo-card video { width: 100%; height: 190px; object-fit: cover; display: block; background: #000; }
.photo-card a:hover img { transform: scale(1.04); }
.photo-cap { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; font-size: 0.82rem; color: var(--black, #17181c); }
.photo-cap-txt { line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-actions { display: flex; gap: 4px; flex-shrink: 0; }
.photo-actions .mini { text-decoration: none; padding: 2px 8px; }

/* ---- next-event countdown ---- */
.countdown-card {
  display: flex; align-items: center; gap: 18px; margin-bottom: 18px;
  padding: 20px 24px; border-radius: 16px; color: #fff;
  background: linear-gradient(120deg, var(--gold, #1863dc), var(--gold-deep, #0056a7));
  box-shadow: 0 8px 24px rgba(var(--accent-rgb, 24,99,220), 0.28);
}
.countdown-card .cd-tile { min-width: 78px; text-align: center; line-height: 1; background: rgba(255,255,255,0.15); border-radius: 14px; padding: 10px 6px; }
.countdown-card .cd-day { font-family: var(--font-head, Montserrat, sans-serif); font-size: 2.8rem; font-weight: 800; line-height: 1; }
.countdown-card .cd-mon { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.92; margin-top: 4px; }
.countdown-card .cd-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.85; }
.countdown-card .cd-title { font-family: var(--font-head, Montserrat, sans-serif); font-size: 1.3rem; font-weight: 700; margin: 2px 0; }
.countdown-card .cd-sub { font-size: 0.9rem; opacity: 0.92; }

/* ---- your event planner ---- */
.planner-cards { display: flex; flex-wrap: wrap; gap: 20px; }
.planner-card { display: flex; gap: 16px; align-items: flex-start; min-width: 260px; flex: 1 1 300px; }
.planner-photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; border: 2px solid rgba(var(--accent-rgb, 24,99,220), 0.2); }
.planner-initials { display: flex; align-items: center; justify-content: center; font-family: var(--font-head, Montserrat, sans-serif); font-weight: 700; font-size: 1.8rem; color: #fff; background: linear-gradient(135deg, var(--gold, #1863dc), var(--gold-deep, #0056a7)); }
.planner-info { min-width: 0; }
.planner-name { font-family: var(--font-head, Montserrat, sans-serif); font-weight: 700; font-size: 1.1rem; color: var(--black, #17181c); }
.planner-title { font-size: 0.85rem; color: var(--gold-deep, #0056a7); font-weight: 600; margin-bottom: 6px; }
.planner-bio { font-size: 0.88rem; color: var(--grey, #565c66); line-height: 1.45; margin: 0 0 8px; }
.planner-contact { font-size: 0.88rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.planner-contact a { color: var(--black, #17181c); text-decoration: none; font-weight: 600; }
.planner-contact a:hover { color: var(--gold-deep, #0056a7); text-decoration: underline; }
.planner-dot { color: var(--grey, #565c66); }

/* ---- payment tracker ---- */
.pay-stats { display: flex; gap: 28px; flex-wrap: wrap; }
.pay-stat .pay-num { font-family: var(--font-head, Montserrat, sans-serif); font-weight: 800; font-size: 1.6rem; color: var(--black, #17181c); }
.pay-stat .pay-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey, #565c66); }
.pay-bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,0.08); overflow: hidden; margin-top: 14px; }
.pay-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold, #1863dc), var(--gold-deep, #0056a7)); transition: width .4s ease; }
.roster-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); margin-bottom: 8px; }
.roster-row.is-paid { background: rgba(12,166,120,0.07); border-color: rgba(12,166,120,0.25); }
.roster-check { display: flex; align-items: center; gap: 10px; flex: 1; cursor: pointer; font-weight: 500; }
.roster-check input { width: 18px; height: 18px; cursor: pointer; }
.roster-amt { font-weight: 600; font-size: 0.9rem; }

/* ---- planning timeline / checklist ---- */
.ck-progress { margin-bottom: 4px; }
.ck-prog-head { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--grey, #565c66); margin-bottom: 6px; }
.ck-prog-head strong { color: var(--black, #17181c); }
.ck-row .ck-txt { flex: 1; }
.ck-due { font-size: 0.76rem; font-weight: 600; color: var(--grey, #565c66); white-space: nowrap; margin: 0 6px; }
.ck-due.od { color: #c92a2a; }
.ck-row.done .ck-due { text-decoration: none; opacity: 0.6; }

/* ---- public RSVP page ---- */
.rsvp-card { max-width: 460px; }
.rsvp-head { text-align: center; margin-bottom: 18px; }
.rsvp-event { font-family: var(--font-head, Montserrat, sans-serif); font-size: 1.7rem; line-height: 1.15; margin: 4px 0; color: var(--black, #17181c); }
.rsvp-meta { color: var(--grey, #565c66); font-size: 0.92rem; }
.rsvp-choice { display: flex; flex-direction: column; gap: 8px; }
.rsvp-opt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid rgba(0,0,0,0.12); border-radius: 10px; cursor: pointer; font-weight: 500; transition: all .15s ease; }
.rsvp-opt:has(input:checked) { border-color: var(--gold, #1863dc); background: rgba(var(--accent-rgb,24,99,220),0.06); }
.rsvp-opt input { width: 18px; height: 18px; }

/* ---- RSVP management (dashboard) ---- */
.rsvp-linkbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--cream, #f4f6f9); border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; padding: 10px 12px; }
.rsvp-linkbox code { flex: 1; min-width: 180px; font-size: 0.82rem; color: var(--ink, #17181c); overflow-wrap: anywhere; }
.rsvp-tally { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 14px; }
.rsvp-tally .pay-num { font-family: var(--font-head, Montserrat, sans-serif); font-weight: 800; font-size: 1.6rem; color: var(--black, #17181c); }
.rsvp-tally .pay-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--grey, #565c66); }
.rsvp-row { display: grid; grid-template-columns: 1.2fr 1fr 1.4fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.rsvp-row.not-going { opacity: 0.55; }
.rsvp-row .rsvp-diet { color: var(--grey, #565c66); font-size: 0.85rem; }
.rsvp-row .rsvp-badge { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.rsvp-row .rsvp-badge.go { background: rgba(12,166,120,0.15); color: #087f5b; }
.rsvp-row .rsvp-badge.no { background: rgba(0,0,0,0.08); color: var(--grey, #565c66); }
@media (max-width: 620px) { .rsvp-row { grid-template-columns: 1fr auto; } .rsvp-row .rsvp-diet { grid-column: 1 / -1; } }

/* ===================== MODAL (Phase 6 signing) ===================== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(23,24,28,0.55); z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  position: relative; background: #fff; border-radius: 16px; padding: 30px;
  max-width: 520px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.3); max-height: 90vh; overflow-y: auto;
}
.modal-x {
  position: absolute; top: 14px; right: 16px; border: none; background: none;
  font-size: 1.6rem; line-height: 1; color: var(--grey); cursor: pointer;
}
.modal-x:hover { color: var(--black, #17181c); }

/* ===================== EVENT PLANNING TOOLS (Phase 6 extras) ===================== */
.et-h { font-size: 0.95rem; margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.et-count { font-weight: 500; font-size: 0.8rem; color: var(--grey); margin-left: 8px; }
.et-add { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.et-add input, .et-add select {
  flex: 1; min-width: 130px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.14);
  border-radius: 9px; font: inherit;
}
.et-add input:focus, .et-add select:focus { outline: none; border-color: var(--gold, #1863dc); }
.et-add .btn { flex: 0 0 auto; }
.et-list { display: flex; flex-direction: column; gap: 6px; }
.et-empty { color: var(--grey); font-size: 0.9rem; padding: 4px 0; }
.et-sub { color: var(--grey); font-size: 0.8rem; margin-top: 2px; }
.et-del {
  border: none; background: none; color: var(--grey); font-size: 1.2rem; line-height: 1;
  cursor: pointer; padding: 0 4px; margin-left: auto;
}
.et-del:hover { color: #b3261e; }
.ck-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  background: var(--cream, #f4f6f9); border-radius: 9px; cursor: pointer;
}
.ck-row input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--gold, #1863dc); }
.ck-row.done span { text-decoration: line-through; color: var(--grey); }
.vn-row, .gs-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--cream, #f4f6f9); border-radius: 9px;
}
.vn-row > div:first-child, .gs-row > div:first-child { flex: 1; }
.gs-row select, .vn-row select {
  padding: 6px 8px; border: 1px solid rgba(0,0,0,0.14); border-radius: 7px; font: inherit; font-size: 0.85rem;
}

/* ===================== DASHBOARD V2 — SIDEBAR SHELL ===================== */
body.dash { background-color: #f4f6f9; }
.dash-shell { display: flex; min-height: 100vh; align-items: stretch; }
.dash-sidebar {
  width: 236px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb,24,99,220),0.07), #fff 210px), #fff;
  border-right: 1px solid rgba(0,0,0,0.08);
  display: flex; flex-direction: column; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh;
}
.dash-sidebar .dash-brand { display: block; padding: 4px 8px 18px; }
.dash-sidebar .dash-logo { height: 22px; width: auto; filter: brightness(0); }
.dash-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.nav-btn {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 11px 14px; border: none; background: none; border-radius: 10px;
  font-family: var(--font-head); font-weight: 600; font-size: 0.92rem;
  color: var(--ink); cursor: pointer; transition: background .15s ease, color .15s ease;
}
.nav-btn .ni { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--grey); }
.nav-btn .ni svg { width: 18px; height: 18px; display: block; }
.nav-btn:hover { background: var(--cream); }
.nav-btn.active { background: var(--gold); color: #fff; }
.nav-btn.active .ni { color: #fff; }
.dash-signout {
  margin-top: 12px; padding: 10px; border: 1px solid rgba(0,0,0,0.12);
  background: none; border-radius: 10px; font-family: var(--font-body);
  font-weight: 600; color: var(--grey); cursor: pointer;
}
.dash-signout:hover { color: var(--ink); border-color: rgba(0,0,0,0.25); }

.dash-content { flex: 1; min-width: 0; padding: 0 34px 60px; }
/* The page title bar.

   It used to carry a solid cream fill and a hard bottom rule at all times,
   which read as a grey slab sitting behind the heading. It only actually
   needs a surface once content is sliding underneath it, so at rest it is
   completely transparent and the heading just sits on the page. The frosted
   fill, hairline and soft shadow fade in on scroll (see .is-stuck). */
.dash-topbar {
  display: flex; align-items: center; gap: 16px; padding: 26px 0 16px;
  position: sticky; top: 0; z-index: 10;
  background: transparent;
  border-bottom: 1px solid transparent;
  margin-bottom: 24px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.dash-topbar.is-stuck {
  background: rgba(244, 246, 249, 0.82);          /* --cream, translucent */
  backdrop-filter: blur(12px) saturate(1.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.35);
  border-bottom-color: rgba(0, 0, 0, 0.06);
  box-shadow: 0 8px 22px -16px rgba(23, 24, 28, 0.5);
}
/* Bleed the frosted panel to the full content width so it doesn't stop
   short of the padding and leave two pale gutters at the edges. */
.dash-topbar.is-stuck::after {
  content: "";
  position: absolute;
  top: 0; bottom: -1px; left: -34px; right: -34px;
  background: inherit;
  backdrop-filter: inherit;
  -webkit-backdrop-filter: inherit;
  border-bottom: inherit;
  z-index: -1;
}
@media (max-width: 720px) {
  .dash-topbar.is-stuck::after { left: -18px; right: -18px; }
}
.dash-topbar h1 { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.015em; flex: 1; line-height: 1.15; }
.dash-topbar .who { color: var(--grey); font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.sidebar-toggle { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--ink); }

.view { display: none; }
.view.active { display: block; }

/* Calendar */
.cal-head { display: flex; align-items: center; gap: 14px; }
.cal-head h2 { flex: 1; text-align: center; margin: 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 18px; }
.cal-dow { text-align: center; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey); padding: 6px 0; }
.cal-day {
  min-height: 116px; border: 1px solid rgba(0,0,0,0.07); border-radius: 12px;
  padding: 9px 10px; cursor: pointer; background: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.cal-day:hover { border-color: var(--gold); background: var(--cream); }
.cal-day.empty { border: none; background: none; cursor: default; }
.cal-day.today { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.cal-day .dnum { font-weight: 700; font-size: 0.95rem; }
.cal-day.today .dnum { color: var(--gold-deep); }
/* An event chip on the admin calendar reads chapter, then school, then the
   event, stacked. On a calendar covering many chapters the event name on its
   own is ambiguous, so the chapter is the loudest line and the name is the
   quietest. Each line clips independently instead of the whole chip
   collapsing to one truncated string. */
.cal-ev { margin-top: 5px; font-size: 0.72rem; background: var(--gold); color: #fff; border-radius: 6px; padding: 4px 7px; overflow: hidden; }
.cal-ev > span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-chapter { font-weight: 700; }
.cal-ev-school  { font-size: 0.66rem; opacity: 0.85; }
.cal-ev-name    { font-size: 0.68rem; opacity: 0.95; font-style: italic; }

/* Theme picker */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.theme-swatch { border: 2px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 12px; cursor: pointer; text-align: left; background: #fff; transition: border-color .15s ease; font: inherit; }
.theme-swatch:hover { border-color: rgba(0,0,0,0.2); }
.theme-swatch.active { border-color: currentColor; box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.theme-dot { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; border-radius: 10px; margin-bottom: 10px; }
.theme-emoji { font-size: 1.5rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.theme-name { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.theme-desc { font-size: 0.76rem; color: var(--grey); margin-top: 1px; }
.theme-current { font-size: 0.72rem; font-weight: 700; color: currentColor; margin-top: 6px; }

/* Settings tabs */
.settings-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.set-tab { border: 1px solid rgba(0,0,0,0.1); background: #fff; padding: 9px 18px; border-radius: 999px; font-family: var(--font-head); font-weight: 600; font-size: 0.88rem; cursor: pointer; color: var(--ink); transition: all .15s ease; }
.set-tab:hover { border-color: var(--gold); }
.set-tab.active { background: var(--gold); border-color: var(--gold); color: #fff; }
.set-panel { display: none; }
.set-panel.active { display: block; }
.acct-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.acct-row:last-child { border-bottom: none; }
.acct-row .acct-k { color: var(--grey); font-size: 0.9rem; }
.acct-row .acct-v { font-weight: 600; text-align: right; }
.notif-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; cursor: pointer; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.05); }
.notif-row:last-child { border-bottom: none; }
.notif-row input { width: 18px; height: 18px; cursor: pointer; flex-shrink: 0; }
.danger-zone { border: 1px solid rgba(201,42,42,0.28) !important; }
.danger-zone h2 { color: #c92a2a; }

/* Overview event list */
.sem-group + .sem-group { margin-top: 18px; }
.sem-head { font-family: var(--font-head, Montserrat, sans-serif); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-deep, #0056a7); padding: 4px 0; border-bottom: 2px solid rgba(var(--accent-rgb,24,99,220),0.18); margin-bottom: 4px; }
.ov-ev { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.06); }
.ov-ev:last-child { border-bottom: none; }
.ov-ev .when { color: var(--grey); font-size: 0.85rem; }

/* ===== Themes: accent color + a whisper-faint page tint. Subtle, not busy. ===== */
body.dash[data-theme="rose"]     { --gold:#e0407a; --gold-deep:#b02063; --gold-light:#f06595; --accent-rgb:224,64,122; background-color:#faf6f8; }
body.dash[data-theme="lavender"] { --gold:#7048e8; --gold-deep:#5a35c9; --gold-light:#9775fa; --accent-rgb:112,72,232; background-color:#f8f6fc; }
body.dash[data-theme="emerald"]  { --gold:#0ca678; --gold-deep:#087f5b; --gold-light:#20c997; --accent-rgb:12,166,120; background-color:#f5faf7; }
body.dash[data-theme="sunset"]   { --gold:#f76707; --gold-deep:#d9480f; --gold-light:#ff922b; --accent-rgb:247,103,7; background-color:#fdf8f4; }

@media (max-width: 860px) {
  .dash-sidebar { position: fixed; left: 0; top: 0; z-index: 300; transform: translateX(-100%); transition: transform .2s ease; box-shadow: 0 10px 40px rgba(0,0,0,0.25); }
  .dash-sidebar.open { transform: translateX(0); }
  .sidebar-toggle { display: block; }
  .dash-content { padding: 0 18px 50px; }
}

/* ===== Growth features: modal, action items, reviews, stage selector ===== */
.gt-modal { position: fixed; inset: 0; background: rgba(23,24,28,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
/* position: relative matters. The close button inside is absolutely
   positioned, so without it the X escapes the card and lands in the corner
   of the viewport on top of the dark backdrop, where it's grey-on-grey and
   effectively unclickable. That's a real bug, not a cosmetic one. */
.gt-modal-card { position: relative; background: #fff; border-radius: 16px; padding: 26px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,0.3); }
.gt-modal-card textarea { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 10px; resize: vertical; }

.stage-sel { font-family: var(--font-head); font-weight: 700; font-size: 0.75rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--gold); color: var(--gold-deep); background: #fff; cursor: pointer; }

.task-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.task-row.done { opacity: 0.6; }
.task-title { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; }
.task-meta { color: var(--grey); font-size: 0.82rem; margin-top: 2px; }

.rv-card { border: 1px solid rgba(0,0,0,0.1); border-radius: 12px; padding: 16px; margin-bottom: 12px; background: #fff; }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.rv-stars { color: #f5b301; font-size: 1.05rem; letter-spacing: 2px; }
.rv-who { font-size: 0.85rem; color: var(--grey); }
.rv-body { margin: 10px 0 12px; font-size: 0.95rem; color: var(--ink); font-style: italic; }
.rv-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ===== Client: event stage pills + action items ===== */
.stage-pill { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:0.62rem; text-transform:uppercase; letter-spacing:0.06em; padding:3px 9px; border-radius:999px; vertical-align:middle; }
.stage-inquiry   { background:#eef2f9; color:#55617a; }
.stage-booked    { background:#dbeafe; color:#1e5fb4; }
.stage-planning  { background:#fff3d6; color:#96690a; }
.stage-confirmed { background:#e5e0ff; color:#5b3fd6; }
.stage-wrapped   { background:#d8f5e3; color:#1c7a45; }

.task-panel h2 { font-size:1.05rem; }
.my-task { display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-bottom:1px solid rgba(0,0,0,0.06); cursor:pointer; }
.my-task:last-child { border-bottom:none; }
.my-task input { width:20px; height:20px; margin-top:1px; accent-color:var(--gold); cursor:pointer; flex:none; }
.my-task .mt-title { font-weight:600; }
.my-task.done .mt-title { text-decoration:line-through; color:var(--grey); }
.my-task .mt-meta { display:block; color:var(--grey); font-size:0.8rem; margin-top:2px; }

/* ===== Public review page: star rating ===== */
.star-row { display:flex; gap:6px; }
.star-row .star { font-size:2rem; line-height:1; background:none; border:none; cursor:pointer; color:#d7dbe3; padding:0; transition:color .1s ease, transform .1s ease; }
.star-row .star:hover { transform:scale(1.12); }
.star-row .star.on { color:#f5b301; }

/* ===== Advisor (read-only oversight) ===== */
/* This is a SENTENCE, not a row of controls, so it must not be a flex
   container. As flex with gap:8px every text fragment and every <strong>
   became its own flex item, so 8px was inserted between all of them -
   including between "Sign-off" and the full stop after it. Measured: 8px as
   flex, 0px as block. */
.advisor-banner { background:linear-gradient(135deg,#1863dc,#0056a7); color:#fff; padding:12px 18px; border-radius:12px; margin-bottom:20px; font-size:0.92rem; line-height:1.5; }
.advisor-banner strong { font-weight:700; }
/* Advisors read everything but don't create: hide the member-only create form. */
body.advisor-mode #inspo-form { display:none !important; }

/* ===== Sidebar action badges (notifications) ===== */
.nav-badge {
  margin-left: auto; background: #c92a2a; color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem; line-height: 1;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #fff;
}
.nav-btn.active .nav-badge { box-shadow: 0 0 0 2px var(--gold); }

/* ===== Admin: edit/remove client-created content ===== */
/* Calendar chips: click to edit, hover reveals a × to remove. */
.adm-ev { position: relative; cursor: pointer; padding-right: 15px !important; }
.adm-ev:hover { filter: brightness(0.92); }
.cal-ev-x {
  position: absolute; top: 0; right: 2px; border: none; background: none; color: inherit;
  font-size: 0.95rem; line-height: 1.1; padding: 0 2px; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.adm-ev:hover .cal-ev-x { opacity: 0.75; }
.cal-ev-x:hover { opacity: 1; color: #c92a2a; }

/* Inspiration cards: small × to pull an item off the chapter's board. */
.inspo-card { position: relative; }
.inspo-card .ins-del {
  position: absolute; top: 6px; right: 6px; z-index: 2; width: 24px; height: 24px;
  border: none; border-radius: 50%; background: rgba(23,24,28,0.62); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s ease;
}
.inspo-card:hover .ins-del { opacity: 1; }
.inspo-card .ins-del:hover { background: #c92a2a; }

/* Guest rows now carry a Remove button. */
.gs-row .gs-del { margin-left: 10px; flex: none; }

/* ===== Multi-chapter switcher (advisors) + advisor sign-off gate ===== */
.org-switch-lbl { display:block; font-size:0.66rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--grey); margin:14px 0 5px; }
.org-switch { width:100%; padding:8px 10px; border:1px solid rgba(0,0,0,0.15); border-radius:9px; font-family:var(--font-body); font-size:0.88rem; background:#fff; color:var(--ink); cursor:pointer; margin-bottom:6px; }
.adv-gate { display:flex; align-items:center; gap:8px; font-size:0.82rem; color:var(--grey); margin:0 0 12px; cursor:pointer; }
.adv-gate input { width:auto; accent-color:var(--gold); cursor:pointer; }
.ov-ev .adv-ok { margin-left:6px; }

/* ===== Chapter identity in the sidebar ===== */
.chapter-brand { display:flex; align-items:center; gap:10px; margin:16px 0 4px; padding:11px 12px; background:var(--cream); border-radius:12px; }
.chapter-emblem { width:34px; height:34px; object-fit:contain; flex:none; }
.chapter-brand-text { min-width:0; }
.chapter-brand-name { font-family:var(--font-head); font-weight:800; font-size:0.95rem; color:var(--ink); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chapter-brand-school { font-size:0.74rem; color:var(--grey); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== Team management rows ===== */
.member-row .who-sub { display:block; font-size:0.74rem; color:var(--grey); font-weight:400; }
.member-row .tm-role { padding:5px 8px; border:1px solid rgba(0,0,0,0.15); border-radius:8px; font-size:0.78rem; font-family:var(--font-body); background:#fff; color:var(--ink); cursor:pointer; }
.member-row .tm-role:disabled { opacity:0.55; cursor:not-allowed; }

/* Greek letters badge + letters input on the admin chapter card */
.chapter-letters { flex:none; font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--gold-deep); background:#fff; border-radius:9px; padding:5px 9px; line-height:1; }
.adv-gate .org-letters { width:90px; padding:5px 8px; border:1px solid rgba(0,0,0,0.15); border-radius:8px; font-size:0.85rem; font-family:var(--font-head); font-weight:700; }

/* ===== Phone polish (most chapter members only ever open this on a phone) ===== */
@media (max-width: 720px) {
  /* Wide tables scroll inside their own card instead of blowing out the page. */
  .panel { overflow-x: auto; }
  .tbl { min-width: 560px; }
  /* Give the sideways-scrolling table a little breathing room. */
  .panel > .tbl { margin-bottom: 2px; }
}
@media (max-width: 560px) {
  /* Team rows: name on its own line, controls underneath. */
  .member-row { flex-wrap: wrap; row-gap: 6px; }
  .member-row .who2 { flex: 1 1 100%; }
  /* Event rows on the overview. */
  .ov-ev { flex-wrap: wrap; row-gap: 4px; }
  .ov-ev .when { flex: 1 1 100%; }
  /* Guest rows carry a Remove button now. */
  .gs-row { flex-wrap: wrap; row-gap: 6px; }
  /* Modals shouldn't hug the screen edges. */
  .gt-modal { padding: 12px; }
  .gt-modal-card { padding: 20px; }
}

/* ---- Holiday labels on the calendars -------------------------------
   Deliberately quieter than .cal-ev: holidays are context, not the
   chapter's own events, so they never compete with a real booking. */
.cal-hol {
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--grey);
  background: rgba(0, 0, 0, 0.045);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.cal-hol .hol-e { margin-right: 4px; }
@media (max-width: 720px) {
  .cal-hol { font-size: 0.6rem; padding: 1px 4px; }
}

/* ---- Notification level chooser ---- */
.notif-opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.notif-opt:last-of-type { border-bottom: none; }
.notif-opt input { width: 18px; height: 18px; margin-top: 2px; cursor: pointer; flex-shrink: 0; }
.notif-opt strong { display: block; font-weight: 700; font-size: 0.98rem; }
.notif-opt em {
  display: block; margin-top: 3px; font-style: normal;
  color: var(--grey); font-size: 0.86rem; line-height: 1.45;
}
.notif-what { margin-top: 16px; border-top: 1px solid rgba(0, 0, 0, 0.07); padding-top: 14px; }
.notif-what summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--gold-deep); }
.notif-what p { margin: 10px 0 0; color: var(--grey); font-size: 0.86rem; line-height: 1.55; }

/* ---- Topbar search -------------------------------------------------- */
.gt-search { position: relative; flex: none; width: 260px; }
.gt-search input {
  width: 100%; font: inherit; font-size: 0.86rem;
  padding: 8px 12px; border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: var(--ink);
}
.gt-search input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(24, 99, 220, 0.12); }
.gt-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(23, 24, 28, 0.3);
  max-height: 60vh; overflow-y: auto; z-index: 60; padding: 6px;
}
.gt-res {
  display: block; width: 100%; text-align: left; background: none; border: none;
  font: inherit; padding: 9px 10px; border-radius: 8px; cursor: pointer; color: var(--ink);
}
.gt-res:hover, .gt-res:focus { background: var(--cream); outline: none; }
.gt-res .k {
  display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--grey); margin-right: 8px;
}
.gt-res .sub2 { display: block; font-size: 0.78rem; color: var(--grey); margin-top: 2px; }
.gt-empty { padding: 12px 10px; color: var(--grey); font-size: 0.86rem; }
@media (max-width: 900px) { .gt-search { width: 170px; } }
@media (max-width: 720px) { .gt-search { display: none; } }

/* ---- "Needs you this week" ------------------------------------------ */
.due-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
}
.due-row:last-child { border-bottom: none; }
.due-row:hover .due-what { color: var(--gold-deep); }
.due-when {
  flex: none; min-width: 96px; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.due-late .due-when { color: #c92a2a; }
.due-soon .due-when { color: #b8730a; }
.due-ok   .due-when { color: var(--grey); }
.due-what { flex: 1; font-weight: 600; font-size: 0.92rem; }
.due-who  { flex: none; color: var(--grey); font-size: 0.82rem; white-space: nowrap; }
@media (max-width: 720px) {
  .due-row { flex-wrap: wrap; gap: 4px 10px; }
  .due-who { width: 100%; }
}

/* All-chapters roster */
.roster-row { cursor: pointer; }
.roster-row:hover td { background: var(--cream); }
.org-flash { box-shadow: 0 0 0 2px var(--gold); transition: box-shadow .3s ease; }
.mem-head { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--grey); margin: 14px 0 4px; }
.mem-joined { font-size: 0.76rem; color: var(--grey); white-space: nowrap; }

/* ---- PDF viewer, shared by the field placer and the signing screen ---- */
/* overflow-x too: if a page still ends up wider than the box (a landscape
   scan, say) it must be pannable rather than clipped, or the fields on the
   right are simply gone. */
.pdf-host { max-height: 62vh; overflow: auto; background: #eef1f5; padding: 14px; border-radius: 12px; }
@media (max-width: 560px) { .pdf-host { max-height: 56vh; padding: 8px; } }
.pdf-page { position: relative; margin: 0 auto 14px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.14); }
.pdf-page canvas { display: block; }

/* A field box, both while placing and while signing. */
.fld-box {
  position: absolute; border: 2px dashed var(--gold); border-radius: 6px;
  background: rgba(24,99,220,.10); display: flex; align-items: center; justify-content: center;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--gold-deep); cursor: pointer; overflow: hidden;
}
.fld-box.k-initials { border-color: #b8730a; background: rgba(184,115,10,.10); color: #8a5606; }
.fld-box.k-date     { border-color: #1e7f42; background: rgba(30,127,66,.10);  color: #14602f; }
.fld-box.k-name     { border-color: #6d4bb8; background: rgba(109,75,184,.10); color: #4d3488; }
.fld-box.k-title    { border-color: #0b7285; background: rgba(11,114,133,.10); color: #085566; }
/* A printed name can be long, so let it shrink rather than spill out. */
.fld-box.k-name.filled { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.fld-box.k-title.filled { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.fld-box.k-date.filled { font-size: .8rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.fld-box img { width: 100%; height: 100%; object-fit: contain; }
.fld-box.filled { border-style: solid; background: transparent; }

.fld-card { max-width: 980px; width: 100%; }
/* Keep the toolbar (and Save/Close) reachable while scrolling a long PDF. */
.fld-tools {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
  position: sticky; top: -26px; z-index: 3; background: #fff;
  padding: 10px 0; margin-top: -4px;
}
.fld-tool.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.fld-count { font-size: .82rem; color: var(--grey); }

/* Signature pad */
.sig-pad-wrap { border: 1px solid rgba(0,0,0,.16); border-radius: 10px; background: #fff; }
/* A typed signature is a preview, not a drawing surface: no crosshair,
   and it must never look like something you're meant to scribble on. */
.sig-pad { width: 100%; height: 96px; display: block; touch-action: none; }
.sig-pad-wrap { margin-top: 8px; }
.sig-styles { display: flex; align-items: center; gap: 12px; margin: 2px 0 12px; flex-wrap: wrap; }
.sig-styles-lbl { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.sig-font-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sig-font {
  border: 1px solid rgba(0,0,0,0.15); background: #fff; border-radius: 10px;
  padding: 6px 14px; cursor: pointer; font-size: 1.15rem; line-height: 1.4;
  color: #12234a; min-width: 92px;
}
.sig-font:hover { border-color: var(--gold); }
.sig-font.active { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.15); }
.sig-font-name { display: block; font-family: var(--font-body); font-size: 0.62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grey); margin-top: 2px; }
.sig-row { display: flex; gap: 10px; align-items: center; margin-top: 8px; }

/* Sidebar group labels. Quiet on purpose: they organise the eye without
   competing with the items themselves. */
.nav-group {
  display: block; margin: 18px 0 6px; padding: 0 14px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.45);
}
.dash-nav .nav-btn + .nav-group { margin-top: 20px; }

/* System-check rows. A problem is a row you can click; a pass is just a
   quiet tick, so the eye lands on what actually needs doing. */
.hz { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 0.92rem; margin-bottom: 6px; }
.hz-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.hz-ok  { color: var(--grey); }
.hz-ok .hz-dot  { background: #1c7a45; opacity: .55; }
.hz-bad { background: #fff6e6; color: #7a4a06; cursor: pointer; font-weight: 600; }
.hz-bad .hz-dot { background: #d98407; }
.hz-bad:hover { background: #ffeccd; }
.hz-go { margin-left: auto; font-family: var(--font-head); font-size: 0.74rem; color: var(--gold-deep); }

/* ---- Chapter cards -------------------------------------------------
   Each fact carries its own label. The previous layout put bare numbers
   in table columns whose headers were rows away, so "1  4" next to
   somebody's name was unreadable. */
.org-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 20px; margin: 16px 0 4px; padding: 14px 0;
  border-top: 1px solid rgba(0,0,0,0.07); border-bottom: 1px solid rgba(0,0,0,0.07);
}
/* A grid item's default min-width is auto, which means it refuses to shrink
   below the widest unbreakable word inside it. An email address is one long
   unbreakable word, so a 35-character address pushed this cell past its
   column and printed over the next one. min-width:0 lets the cell shrink;
   overflow-wrap lets the address break rather than overflow. */
.org-facts > div { min-width: 0; }
.org-facts dt {
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey); margin-bottom: 3px;
}
.org-facts dd {
  font-size: 0.95rem; font-weight: 600; color: var(--ink); margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}
.fact-sub {
  display: block; font-size: 0.78rem; font-weight: 400; color: var(--grey);
  margin-top: 1px; overflow-wrap: anywhere;
}
.fact-none { font-weight: 400; color: var(--grey); font-style: italic; }
.org-letters-tag {
  font-size: 0.8rem; font-weight: 700; color: var(--gold-deep);
  background: var(--cream); border-radius: 999px; padding: 2px 10px; margin-left: 6px; vertical-align: middle;
}
.org-settings { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 12px 0 4px; }
@media (max-width: 640px) { .org-facts { grid-template-columns: 1fr 1fr; } }

/* ---- Advisor Review -------------------------------------------------
   One row per thing waiting on her, with the action on the right so the
   whole list can be worked top to bottom without hunting. */
.adv-item {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid rgba(0,0,0,0.07);
}
.adv-item:last-child { border-bottom: none; }
.adv-main { flex: 1 1 260px; min-width: 0; }
.adv-main strong { display: inline; }
.adv-sub { color: var(--grey); font-size: 0.84rem; margin-top: 3px; }
.adv-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.adv-actions .btn { padding: 9px 18px; font-size: 0.82rem; }
.adv-done-item { opacity: 0.72; }

/* ---- Overview as cards ----------------------------------------------
   Each block is its own card with its own heading, so the page reads as
   a set of answers rather than one long scroll. */
.panel-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.panel-head h2 { margin-bottom: 0; }
.panel-head .mini { margin-left: auto; margin-right: 0; }
.panel .sub { margin-bottom: 14px; }

.ov-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.ov-row > .panel { margin-bottom: 22px; }
@media (max-width: 900px) { .ov-row { grid-template-columns: 1fr; } }

/* Tables inside a card can be wider than the card; scroll them, never the page. */
.tbl-scroll { overflow-x: auto; }

/* Stat tiles as actual tiles.
   They used to use background: var(--cream), which is also the page
   background, so they read as floating text rather than cards. White with
   a hairline border makes each one a small section, matching the panels. */
.stat-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 22px; }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px;
  padding: 16px 12px; text-align: center;
}
.stat-num { font-size: 1.75rem; line-height: 1.1; }
.stat-lbl { font-size: 0.66rem; margin-top: 5px; }

/* ---- Deadlines timeline ---------------------------------------------
   Grouped by urgency with a rail down the left, so "overdue" and "next
   month" never look the same. */
.dl-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; align-items: end; padding: 16px; margin-bottom: 18px;
  background: var(--cream); border-radius: 12px;
}
.dl-form .field { margin-bottom: 0; }
.dl-form .btn { height: 44px; }

.dl-group { margin-bottom: 18px; }
.dl-group:last-child { margin-bottom: 0; }
.dl-group-hd {
  font-family: var(--font-head); font-weight: 700; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--grey);
  margin-bottom: 8px; display: flex; align-items: center; gap: 8px;
}
.dl-item {
  display: flex; align-items: flex-start; gap: 12px; padding: 11px 14px;
  border-left: 3px solid rgba(0,0,0,0.10); background: #fff;
  border-radius: 0 10px 10px 0; margin-bottom: 6px;
}
.dl-item.is-overdue { border-left-color: #c92a2a; background: #fdf3f3; }
.dl-item.is-soon    { border-left-color: #d98407; background: #fffaf1; }
.dl-item.is-later   { border-left-color: rgba(0,0,0,0.14); }
.dl-item.is-done    { opacity: .55; }
.dl-item.is-done .dl-title { text-decoration: line-through; }
.dl-check { margin-top: 2px; flex: none; width: 16px; height: 16px; cursor: pointer; }
.dl-body { flex: 1 1 auto; min-width: 0; }
.dl-title { font-weight: 600; font-size: 0.95rem; }
.dl-meta { color: var(--grey); font-size: 0.8rem; margin-top: 2px; }
.dl-when { font-family: var(--font-head); font-weight: 700; font-size: 0.78rem; flex: none; text-align: right; white-space: nowrap; }
.dl-item.is-overdue .dl-when { color: #c92a2a; }
.dl-item.is-soon .dl-when    { color: #96690a; }
.dl-item.is-later .dl-when   { color: var(--grey); }
.dl-who { font-size: 0.74rem; color: var(--grey); }
.dl-del { border: none; background: none; color: var(--grey); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; flex: none; }
.dl-del:hover { color: #c92a2a; }

/* ---- Chat: conversation list + thread --------------------------------
   Two panes on desktop, stacked on a phone. The list is sticky so you can
   scroll a long conversation without losing your place in it. */
.chat-layout { display: grid; grid-template-columns: 290px 1fr; gap: 22px; align-items: start; }
@media (max-width: 900px) { .chat-layout { grid-template-columns: 1fr; } }

.chat-threads { position: sticky; top: 16px; max-height: calc(100vh - 60px); overflow-y: auto; }
@media (max-width: 900px) { .chat-threads { position: static; max-height: none; } }

.thread-group { margin-bottom: 14px; }
.thread-group:last-child { margin-bottom: 0; }
.thread-group-hd {
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--grey);
  margin: 0 0 6px; display: flex; align-items: center; gap: 6px;
}
.thread-sem { margin: 10px 0 0; padding-left: 10px; border-left: 2px solid rgba(0,0,0,0.07); }
.thread-empty { color: var(--grey); font-size: 0.84rem; margin: 0; }

.thread {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 9px 10px; border-radius: 9px; margin-bottom: 2px;
  font-family: var(--font-body); color: var(--ink);
}
.thread:hover { background: var(--cream); }
.thread.is-active { background: var(--cream); box-shadow: inset 3px 0 0 var(--gold); }
.thread-main { flex: 1 1 auto; min-width: 0; }
.thread-name { display: block; font-weight: 600; font-size: 0.9rem; }
.thread.is-active .thread-name { color: var(--gold-deep); }
.thread-sub { display: block; font-size: 0.75rem; color: var(--grey); margin-top: 1px; }
/* A total-message pill used to live here. Removed: it looked like an unread
   badge but never changed, so an opened thread still showed "13". */

.thread-history-toggle {
  background: none; border: none; cursor: pointer; padding: 4px 0; width: 100%; text-align: left;
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--grey);
}
.thread-history-toggle:hover { color: var(--ink); }

/* Unread: gold and confident, versus the grey total-count pill. A number you
   need to act on must not look like a number that is merely true. */
.thread-unread {
  flex: none; font-family: var(--font-head); font-weight: 700; font-size: 0.66rem;
  background: var(--gold); color: #fff;
  min-width: 20px; text-align: center; padding: 2px 6px; border-radius: 999px;
}
.thread.has-unread .thread-name { font-weight: 700; }
.thread.has-unread { background: rgba(212,160,23,0.06); }
.thread.is-active.has-unread { background: var(--cream); }

/* ---- Chat attachments ------------------------------------------------ */
.chat-form input.chat-file-input {
  position: absolute; width: 1px; height: 1px; padding: 0; border: 0;
  flex: 0 0 1px; opacity: 0; pointer-events: none;
}
.chat-clip {
  flex: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; color: var(--grey);
  border: 1px solid rgba(0,0,0,0.12); background: #fff; user-select: none;
}
.chat-clip svg { display: block; }
.chat-clip:hover { color: var(--gold-deep); border-color: var(--gold); }
.chat-file-chip {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 0.82rem; color: var(--ink);
  background: var(--cream); border-radius: 999px; padding: 6px 12px; width: fit-content;
}
.chat-file-chip button {
  border: none; background: none; cursor: pointer; color: var(--grey);
  font-size: 1rem; line-height: 1; padding: 0;
}
.chat-file-chip button:hover { color: #c92a2a; }

/* A file in a message: a link you can tell is a file at a glance. */
.chat-att-wrap { display: flex; align-items: stretch; gap: 6px; margin-top: 8px; }
.chat-att {
  display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0;
  padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.07);
}
/* Separate control, deliberately quieter than the card: downloading is the
   less common intent now that clicking previews. */
.chat-att-dl {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 38px; border-radius: 10px; text-decoration: none; color: var(--grey);
  background: rgba(0,0,0,0.04); border: 1px solid rgba(0,0,0,0.07);
}
.chat-att-dl:hover { color: var(--gold-deep); border-color: var(--gold); background: rgba(0,0,0,0.07); }
.chat-att:hover { background: rgba(0,0,0,0.07); }
.chat-att-icon { flex: none; color: var(--gold-deep); display: flex; align-items: center; }
.chat-att-meta { display: flex; flex-direction: column; min-width: 0; }
.chat-att-name { font-weight: 600; font-size: 0.87rem; color: var(--ink); word-break: break-word; }
.chat-att-size { font-size: 0.74rem; color: var(--grey); }

.chat-att-img { display: block; margin-top: 8px; text-decoration: none; }
.chat-att-img img {
  display: block; max-width: 260px; max-height: 260px; width: auto; height: auto;
  border-radius: 10px; border: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03);
}
.chat-att-cap { display: block; font-size: 0.74rem; color: var(--grey); margin-top: 4px; }
.chat-att-gone { font-size: 0.8rem; color: var(--grey); font-style: italic; }

.chat-file-chip svg { flex: none; color: var(--gold-deep); }

/* ---- No chapter attached ---------------------------------------------
   Shown to someone whose account is fine but who belongs to no chapter:
   either not added yet, or removed at a handover. Deliberately explains BOTH,
   because the dashboard genuinely cannot tell which, and guessing wrong either
   alarms someone who is simply waiting or misleads someone who was removed. */
.no-chapter { max-width: 640px; }
.no-chapter h2 { margin-bottom: 10px; }
.no-chapter-list { margin: 0 0 16px; padding-left: 20px; }
.no-chapter-list li { color: var(--grey); font-size: 0.92rem; line-height: 1.55; margin-bottom: 10px; }
.no-chapter-list strong { color: var(--ink); }

/* ---- Semester picker in the topbar -----------------------------------
   Sits next to search because it scopes what you're looking at, same as a
   search term does. Quiet by default: it is a lens, not an action. */
.sem-pick { display: flex; align-items: center; gap: 7px; flex: none; }
.sem-pick-lbl {
  font-family: var(--font-head); font-weight: 700; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey);
}
.sem-pick select {
  font: inherit; font-size: 0.85rem; padding: 7px 10px; border-radius: 9px;
  border: 1px solid rgba(0,0,0,0.14); background: #fff; color: var(--ink); cursor: pointer;
}
.sem-pick select:focus { outline: none; border-color: var(--gold); }
@media (max-width: 720px) { .sem-pick-lbl { display: none; } }

/* Shown at the top of a filtered list when the term is hiding finished rows,
   so an empty-looking page is never a mystery. */
.sem-note {
  font-size: 0.82rem; color: var(--grey); margin: 0 0 12px;
  padding: 8px 12px; background: var(--cream); border-radius: 9px;
}
.sem-note button {
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--gold-deep); font: inherit; font-weight: 600; text-decoration: underline;
}

/* ---- Topbar on a phone ------------------------------------------------
   Measured at 390px: content was 460px in a 362px bar, so the email was
   sliced mid-word. h1 had flex:1 but no min-width:0, so it refused to shrink
   below its text, and .who was nowrap with nothing to stop it. Adding the term
   picker is what tipped it over, but the bar was already fragile.

   Nothing is hidden - both just yield and truncate. */
@media (max-width: 720px) {
  /* The title yields, but not to nothing: letting it shrink freely turned
     "Overview" into "O." - technically no overflow, and useless. */
  .dash-topbar h1 {
    min-width: 5.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .dash-topbar .who {
    min-width: 0; max-width: 30vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .sem-pick select { max-width: 34vw; }
}
@media (max-width: 560px) {
  /* On a phone the email is the least useful thing in the bar: you know who
     you are, and it's on Settings > Account details. Dropping it buys the
     title and the term picker room to be readable. */
  .dash-topbar .who { display: none; }
}

/* ---- Rooming lists (fraternity chapters) ---------------------------
   A room is a card, the people inside it are a list, and the person the
   hotel will chase is visibly marked. Everything else is deliberately
   plain: this screen gets edited under time pressure the week of a trip. */
.rm-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 14px 0 4px; font-size: 0.92rem; color: var(--ink);
}
.rm-open, .rm-full {
  font-size: 0.78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
}
.rm-open { background: #fff4e5; color: #b45309; }
.rm-full { background: #e7f7f0; color: #0b7a55; }

.rm-room {
  border: 1px solid rgba(0,0,0,0.09); border-radius: 14px;
  padding: 16px 18px; margin-bottom: 14px; background: #fff;
}
.rm-room-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rm-room-head h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.rm-cap {
  font-size: 0.78rem; font-weight: 700; color: var(--grey);
  background: var(--cream); border-radius: 999px; padding: 2px 10px;
}
.rm-people { list-style: none; margin: 12px 0 0; padding: 0; }
.rm-person {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.rm-person:last-child { border-bottom: none; }
.rm-name { font-weight: 600; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rm-person.is-lead .rm-name { color: var(--ink); }
.rm-lead-tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  background: #eef4ff; color: #1863dc; border-radius: 999px; padding: 3px 9px;
}
.rm-empty, .rm-fullnote { color: var(--grey); font-size: 0.88rem; margin: 8px 0 0; }
.rm-add { display: flex; gap: 8px; margin-top: 12px; }
.rm-add .rm-new {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px;
  border: 1px solid rgba(0,0,0,0.14); border-radius: 10px; font: inherit; font-size: 0.9rem;
}

/* The buttons on this screen are inline actions, not full-width blocks. The
   mobile rule that stretches .btn would otherwise stack every one of them. */
@media (max-width: 520px) {
  .rm-add .mini, .rm-room-head .mini, .rm-person .mini { width: auto; max-width: none; }
  .rm-person { gap: 8px; }
}