/* ===========================================================================
   V2 visual system applied to the core account/organizer journey (Profile,
   My Fundraisers, Fundraiser Dashboard, and the Create/Edit Board modal on
   admin.html). See the Launch Blocker handoff, section 15: "bring these
   core journey surfaces into the current V2 visual system - this is NOT a
   complete site redesign."

   This file is loaded AFTER base.css/styles.css, and ONLY on profile.html,
   fundraisers.html, fundraiser.html, and admin.html. It re-declares the same
   :root custom properties and re-skins the same utility class names those
   pages' existing JS already emits (.wrap/.panel/.btn/.btn2/.row/.sub/
   .stat-item/.admin-boards-grid/.admin-board-card/.modal.adminModal/
   .formGrid) - no new class system, no markup rewrite. Because it is scoped
   to these four pages only, admin.html's own out-of-scope dashboard
   sections and any other legacy page that loads base.css alone are
   unaffected in structure - they just inherit the lighter palette.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root{
  --bg:#ffffff; --card:#ffffff; --text:#0f1729; --muted:#5b6478; --border:#e6ebf5;
  --primary:#2554ea; --primary-dark:#173aad; --primary-tint:#e8edfd;
  --green:#0f9d58; --yellow:#d97706;
  --shadow:0 1px 2px rgba(16,23,42,.04), 0 10px 28px -16px rgba(16,23,42,.16);
}

body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,-apple-system,sans-serif; }
h1,h2,h3{ font-family:'Sora',sans-serif; letter-spacing:-.01em; color:var(--text); }
a{ color:var(--primary); }

/* Canonical light-theme wordmark: blue 4U icon, dark/navy "Squares4U" text
   - blue is reserved for links/actions/accent. The blanket `a{color:
   var(--primary)}` above (this file loads after v2.css, same 0,0,1
   specificity as v2.css's own `a{color:inherit}`, so it wins by load
   order alone) was turning the header's brand link blue on every page
   that loads this file (profile, My Fundraisers, fundraiser dashboard,
   admin) while pages that only load v2.css (home, board) correctly
   inherited the dark body text color instead - the exact "wordmark
   varies by page" bug. Restated here, once, in the shared stylesheet
   rather than per-page, so every page that loads this file matches. */
.brand{ color:var(--text); }

.wrap{ max-width:1080px; }
.header{ padding:24px 0 8px; align-items:flex-start; }

.account-nav{
  display:flex; align-items:center; padding:14px 0; margin-bottom:6px;
  border-bottom:1px solid var(--border);
}
.account-nav .brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Sora',sans-serif; font-weight:800; font-size:17px; color:var(--text);
}
.meBox{
  font-size:13px; font-weight:700; color:var(--text);
  background:var(--primary-tint); border:1px solid var(--border);
  border-radius:100px; padding:8px 14px; cursor:pointer;
}
.account-nav .brand-mark{
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(155deg,var(--primary),#5b8bff);
  display:grid; place-items:center; color:#fff; font-weight:800; font-size:12px; flex:none;
}

.panel{
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow); padding:20px; margin-bottom:16px;
}

.sub{ color:var(--muted); font-size:13px; }

label{ color:var(--text); font-size:12.5px; font-weight:700; margin-bottom:5px; }

input, select, textarea{
  background:#fff; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit;
}
input:focus, select:focus, textarea:focus{
  outline:2px solid var(--primary); outline-offset:1px; border-color:var(--primary);
}
select option{ background:#fff; color:var(--text); }
/* .formGrid's own input/select/textarea rule in styles.css (0,1,1
   specificity: near-transparent white background + white text, designed
   for that page's dark modal) beats the plain tag rule above on
   specificity alone, regardless of load order - match it here so the
   Create/Edit Board and Add User forms are actually readable instead of
   white-on-white. See openAdminModal()'s stray "notice-modal-body" class
   (removed in admin.js) for the other half of this bug. */
.formGrid input, .formGrid select, .formGrid textarea{
  background:#fff; color:var(--text); border:1px solid var(--border);
}
.formGrid label{ color:var(--text); opacity:1; }

.btn{
  background:#fff; color:var(--text); border:1px solid var(--border);
  border-radius:10px; padding:10px 16px; font-weight:700; font-size:14px; cursor:pointer;
}
.btn:hover{ filter:none; border-color:var(--primary); color:var(--primary); }
.btn2{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 16px -6px rgba(37,84,234,.5); }
.btn2:hover{ background:var(--primary-dark); color:#fff; border-color:var(--primary-dark); }
.btn.danger{ background:#fff; color:#b91c1c; border-color:#f3c6c6; }

/* v2.css's .btn-primary/.btn-ghost/.btn-sm modifiers (used by the shared
   global header - core/site_header.js) would otherwise lose to the plain
   .btn rule above on cascade order alone (both single-class selectors,
   this file loads after v2.css) - restated here so the header's buttons
   render correctly on every page that loads this file, not just the ones
   that load v2.css alone. */
.btn-primary{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 6px 16px -6px rgba(37,84,234,.5); }
.btn-primary:hover{ background:var(--primary-dark); color:#fff; border-color:var(--primary-dark); filter:none; }
.btn-ghost{ background:#fff; color:var(--text); border-color:var(--border); }
.btn-sm{ padding:9px 15px; font-size:13.5px; border-radius:8px; }

.stat-item{ background:var(--primary-tint); border:none; border-radius:12px; padding:12px 14px; }
.stat-item .stat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--primary-dark); font-weight:700; margin-bottom:2px; }
.stat-item .stat-value{ font-family:'Sora',sans-serif; font-size:19px; font-weight:700; color:var(--text); }
.stat-item .status-open{ color:var(--green); }
.stat-item .status-locked{ color:#b45309; }
.stat-item .available{ color:var(--muted); }
.stat-item .unpaid{ color:var(--yellow); }
.stat-item .paid{ color:var(--green); }

.admin-boards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.admin-board-card{
  border:1px solid var(--border); border-radius:14px; padding:16px;
  background:var(--card); box-shadow:var(--shadow);
}

/* My Fundraisers cards - compact dashboard summaries, not the full
   fundraiser story (that's the individual fundraiser page's job). A wider
   min column than .admin-board-card so a handful of cards fill the page
   intentionally instead of leaving a big empty gap next to one narrow
   card - see the "huge empty area" complaint this replaces. */
.fundraiser-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.fundraiser-card{
  display:flex; flex-direction:column; gap:10px;
  border:1px solid var(--border); border-radius:14px; padding:18px;
  background:var(--card); box-shadow:var(--shadow);
}
.fc-top{ display:flex; align-items:center; gap:12px; min-width:0; }
.fc-mark{ width:44px; height:44px; border-radius:10px; object-fit:cover; flex:none; }
.fc-mark-fallback{
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-family:'Sora',sans-serif; font-weight:800; font-size:15px;
}
.fc-id{ min-width:0; }
.fc-name{
  font-family:'Sora',sans-serif; font-weight:700; font-size:15.5px; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fc-status{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.fc-desc{
  font-size:13px; color:var(--muted); line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.fc-action{ margin-top:auto; align-self:flex-start; }

/* Individual fundraiser page - boards are the primary section (see
   .fr-boards-panel, just a plain .panel above the story panel in markup
   order); the story/description gets a readable constrained width with
   paragraph spacing instead of one raw full-width block, and organizer
   payment/contact config renders as clean label/value chips instead of a
   comma-joined sentence of raw data. */
.fr-desc{ max-width:640px; color:var(--text); font-size:14.5px; line-height:1.65; }
.fr-desc p{ margin:0 0 10px; }
.fr-desc p:last-child{ margin-bottom:0; }
.fr-config-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.fr-config-grid:not(:empty){ margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.fr-config-label{ color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.03em; font-weight:700; margin-bottom:2px; }
.fr-config-value{ color:var(--text); font-weight:600; font-size:13.5px; word-break:break-word; }
.fr-board-meta{ font-size:12px; color:var(--muted); margin-top:2px; }

/* Shared modal shell (.modal.adminModal / .modalCard / .formGrid) used by
   the Create/Edit Board form, Create/Edit Fundraiser forms, etc. */
.modal.adminModal{ background:rgba(15,23,41,.45); }
.modalCard{ background:var(--card); border:1px solid var(--border); box-shadow:0 24px 60px -20px rgba(16,23,42,.35); color:var(--text); }
.modalHead{ border-bottom:1px solid var(--border); }
.modalHead h3{ color:var(--text); }
.modalHead .x{ color:var(--muted); }
.formGrid .hint{ color:var(--muted); }
.form-section{
  border:1px solid var(--border); border-radius:14px; padding:16px; margin-bottom:16px; background:var(--card);
}
.form-section > summary{
  font-family:'Sora',sans-serif; font-weight:700; font-size:14.5px; color:var(--text);
  cursor:pointer; list-style:none;
}
.form-section > summary::-webkit-details-marker{ display:none; }
.form-section > summary .form-section-sub{ display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:12.5px; color:var(--muted); margin-top:2px; }
.form-section[open] > summary{ margin-bottom:14px; }

/* Create/Edit Board modal - section dividers (Launch Blocker section 16:
   "organize, do not rewrite" - these only label the EXISTING field order,
   they don't move any field). */
.form-section-title{
  font-family:'Sora',sans-serif; font-weight:800; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--primary-dark);
  background:var(--primary-tint); border-radius:8px; padding:6px 10px;
  margin:14px 0 2px;
}
.formGrid > .form-section-title:first-child{ margin-top:0; }