/* ─────────────────────────────────────────────────────────────────────────────
   Club portal — the shell (sidebar + Home dashboard) built by js/club-shell.js.

   Components come from css/ds.css (.ncl-sidebar, .ncl-card, .ncl-btn, .ncl-tabs,
   .ncl-empty, .ncl-page-title) and colours from css/tokens.css. This file adds:

     app-*  the generic frame: grid, sidebar extras, page head, sub-tabs, chips,
            "Next" banner, dashboard grid, phone tiles. Named to match the shared
            css/app-shell.css being built for the admin side (branch
            admin/app-shell), so these rules can be folded into it later.
     cp-*   club-only pieces: team cards, competition cards, the photo hint.

   Loaded AFTER the page's inline <style>, so it refines rather than replaces.
   Everything is scoped under html.cp-on, which js/club-shell.js sets before
   first paint — if the script fails it removes the class and the old tab strip
   comes back.
   ───────────────────────────────────────────────────────────────────────────── */

/* The shell replaces the old tab strip and the phone <select>. */
html.cp-on #pageTabs,
html.cp-on #pageTabSelect { display: none !important; }

/* Header: the club now lives in the sidebar; Guide and Submit Concern are
   sidebar items. They stay in the DOM because the ☰ sheet (portal-menu.js)
   re-dispatches clicks on them. */
html.cp-on header .header-club,
html.cp-on header .guide-link,
html.cp-on header .btn-concern { display: none; }
html.cp-on header { padding: 0 20px 0 16px; }
html.cp-on .header-left { min-width: 0; }

/* ── frame ──────────────────────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
  align-items: start;
}
.app-sidebar.ncl-sidebar {
  width: auto;
  position: sticky; top: 60px;
  height: calc(100vh - 60px);
  min-height: 0;
  padding: 0 0 18px;
}
.app-content { min-width: 0; padding: 28px 32px 48px; }
.app-content > main { max-width: none; margin: 0; padding: 0; }
.app-content > section, .app-content > main, .app-pagehead, .app-subtabs { max-width: 1120px; }

/* Lucide icons inside the shell */
.app-ic { width: 18px; height: 18px; stroke-width: 1.8; flex: none; }
.app-ic--sm { width: 15px; height: 15px; }
.app-ic--xl { width: 30px; height: 30px; stroke-width: 1.6; color: var(--muted); }

/* ── sidebar ────────────────────────────────────────────────────────────── */
.app-identity {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 18px 16px 16px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border-soft, #F0F2F5);
}
.app-identity__logo {
  width: 40px; height: 40px; border-radius: 10px; flex: none; object-fit: contain;
  background: #fff; border: 1px solid var(--border);
}
.app-identity__logo--txt {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; border-color: var(--navy);
  font-size: 13px; font-weight: 800; letter-spacing: .3px;
}
.app-identity__txt { min-width: 0; }
.app-identity__name { font-size: 14px; font-weight: 800; color: var(--navy); line-height: 1.25; overflow-wrap: anywhere; }
.app-identity__meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.app-identity__role { font-size: 11px; font-weight: 700; color: var(--blue, #1A5276); margin-top: 6px; }
.app-identity__switch {
  margin-top: 6px; padding: 0; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--red);
}
.app-sidebar .ncl-sidebar__group { margin-bottom: 8px; }
.app-sidebar .ncl-sidebar__group-label { padding: 6px 16px; }
.app-link.ncl-sidebar__link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 13px; font-size: 13.5px;
}
.app-link .app-ic { color: var(--muted); width: 17px; height: 17px; }
.app-link.ncl-sidebar__link--active .app-ic { color: var(--red); }
.app-link__lbl { flex: 1; min-width: 0; }

/* Attention count: small, red, numeric — the sidebar's only red besides the
   active marker, so it reads as "needs you". */
.app-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── page head + sub-tabs ───────────────────────────────────────────────── */
.app-pagehead .ncl-page-title { margin-bottom: 16px; }
.app-pagehead .ncl-page-title h1 { font-size: 22px; }
.app-subtabs.ncl-tabs { margin-bottom: 20px; }
.app-back { display: none; }

/* ── chips (a richer variation of .ncl-badge) ───────────────────────────── */
.app-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 9px 4px 8px; border-radius: var(--radius-pill, 20px);
  border: 1px solid transparent; white-space: nowrap;
}
.app-chip__ic { width: 13px; height: 13px; stroke-width: 2.2; flex: none; }
.app-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.app-chip__n { font-weight: 800; font-variant-numeric: tabular-nums; }
.app-chip--neutral { background: var(--slate-bg, #F1F4F8); color: var(--slate, #475569); border-color: var(--border); }
.app-chip--neutral .app-chip__dot { background: #97A0AD; }
.app-chip--amber { background: var(--amber-bg); color: #856404; border-color: var(--amber-border, #F5C842); }
.app-chip--amber .app-chip__dot { background: var(--amber, #F39C12); }
.app-chip--green { background: var(--green-bg); color: var(--green); border-color: var(--green-border); }
.app-chip--red { background: var(--red-bg, #FDEDEC); color: #B5121A; border-color: var(--red-border, #F5B7B1); }
.app-chip--red .app-chip__dot { background: var(--red); }
.app-chip--blue { background: var(--blue-bg, #EBF5FB); color: var(--blue, #1A5276); border-color: var(--blue-border, #AED6F1); }

/* ── Home ───────────────────────────────────────────────────────────────── */
.app-next.ncl-card {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 20px; margin-bottom: 28px;
  border-left: 4px solid var(--red);
  box-shadow: var(--shadow-card);
}
.app-next--calm.ncl-card { border-left-color: var(--green); }
.app-next__ic {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--red-bg, #FDEDEC); color: var(--red);
}
.app-next--calm .app-next__ic { background: var(--green-bg); color: var(--green); }
.app-next__txt { flex: 1; min-width: 0; }
.app-next__lbl { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--red); }
.app-next--calm .app-next__lbl { color: var(--green); }
.app-next__what { font-size: 17px; font-weight: 800; color: var(--navy); margin-top: 2px; }
.app-next__sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.app-next__btn { flex: none; }

.app-section { margin-bottom: 28px; }
.app-section__label {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
.app-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.app-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.app-muted { color: var(--muted); }
.app-section--tiles { display: none; }   /* phone only */

/* club: team cards */
.cp-team.ncl-card {
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  padding: 16px 18px; font: inherit; color: inherit; cursor: pointer;
  box-shadow: var(--shadow-card); transition: box-shadow .15s, transform .15s, border-color .15s;
}
.cp-team.ncl-card:hover { box-shadow: 0 4px 12px rgba(16,24,40,.10); transform: translateY(-1px); }
.cp-team--attn.ncl-card { border-top: 3px solid var(--red); }
.cp-team__name { font-size: 15px; font-weight: 800; color: var(--navy); line-height: 1.25; }
.cp-team__div { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.cp-team__counts, .cp-team__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* club: competition cards */
.cp-comp.ncl-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); }
.cp-comp__head { display: flex; align-items: center; gap: 12px; }
.cp-comp__ic {
  width: 38px; height: 38px; padding: 9px; border-radius: 10px; flex: none;
  background: var(--light); color: var(--navy); stroke-width: 1.8;
}
.cp-comp__title { font-size: 16px; font-weight: 800; color: var(--navy); }
.cp-comp__kicker { font-size: 12px; color: var(--muted); }
.cp-comp__stat { display: flex; flex-wrap: wrap; gap: 6px; }
.cp-comp__line { font-size: 13px; color: var(--text); }
.cp-comp__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }

/* club: photo hint above the roster when Photos falls back to it */
.cp-hint {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--red-bg, #FDEDEC); border: 1px solid var(--red-border, #F5B7B1); color: #7B1216;
  border-radius: var(--radius-md, 8px); padding: 11px 14px; font-size: 13px; margin: -4px 0 18px;
}
.cp-hint--ok { background: var(--green-bg); border-color: var(--green-border); color: var(--green); }
.cp-hint .app-ic { width: 17px; height: 17px; margin-top: 1px; }

/* ── harmonise the tabs' own cards with ds.css (scoped, visual only) ───── */
html.cp-on .app-content main .team-card,
html.cp-on .app-content main .sum-card,
html.cp-on .app-content main .susp-card,
html.cp-on .app-content main .event-confirm-card,
html.cp-on .app-content main .inc-table-wrap,
html.cp-on .app-content main .fin-card,
html.cp-on .app-content main .csc {
  border-color: var(--border); border-radius: var(--radius-lg, 12px); box-shadow: var(--shadow-card);
}
html.cp-on .app-content main .btn-primary:hover { background: #000; }
html.cp-on .app-content main .status-badge { padding: 3px 9px; letter-spacing: .3px; }

/* ── phone ──────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html.cp-on header { padding: 0 10px; }
  html.cp-on .header-logo img { height: 34px; }
  html.cp-on .header-left { flex: 1 1 auto; overflow: hidden; }
  html.cp-on .header-right { flex: none; gap: 8px; }

  .app-shell { display: block; min-height: 0; }
  .app-sidebar.ncl-sidebar { display: none; }
  .app-content { padding: 14px 12px 72px; }
  .app-back { display: block; margin: -2px 0 8px; }
  .app-at-home .app-back { display: none; }
  .app-back button {
    display: inline-flex; align-items: center; gap: 4px; padding: 6px 2px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 700; color: var(--red);
  }
  .app-pagehead .ncl-page-title { margin-bottom: 12px; }
  .app-pagehead .ncl-page-title h1 { font-size: 20px; }
  .app-subtabs.ncl-tabs { flex-wrap: nowrap; overflow-x: auto; }

  .app-home .ncl-page-title h1 { font-size: 20px; }
  .app-next.ncl-card { flex-wrap: wrap; padding: 15px 16px; gap: 12px; margin-bottom: 22px; }
  .app-next__txt { flex-basis: calc(100% - 58px); }
  .app-next__btn { width: 100%; }
  .app-grid, .app-grid--2 { grid-template-columns: minmax(0, 1fr); gap: 10px; }

  /* the portal-home.js springboard, drawn from the sidebar's items */
  .app-section--tiles { display: block; }
  .app-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .app-tile {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 92px; padding: 14px 6px; text-align: center;
    border: 1px solid var(--border); border-radius: 16px; background: var(--card, #fff);
    color: var(--text); font: inherit; text-decoration: none; cursor: pointer;
  }
  .app-tile:active { transform: scale(.97); background: var(--light); }
  .app-tile__ic { color: var(--red); }
  .app-tile__ic .app-ic { width: 26px; height: 26px; stroke-width: 1.7; }
  .app-tile__lb { font-size: 12px; font-weight: 600; line-height: 1.25; }
  .app-tile__n { position: absolute; top: 7px; right: 7px; }
}

/* The sidebar is pinned to the window under the sticky header and scrolls on its own (Corey,
   2026-10-16: "if the page is long, the platforms links are low on the page"). A flex column: the
   club card on top, the menu scrolling in the middle. On a short window the club card tightens.
   WPC Platforms is the grid at the top right of the portal bar (entry 206), not a sidebar footer. */
@media (min-width: 761px) { .app-sidebar.ncl-sidebar { display: flex; flex-direction: column; overflow: hidden; padding: 0; } }
.app-sidebar > .app-identity { flex: 0 0 auto; }
.app-sidebar > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 10px; }
@media (max-height: 760px) {
  .app-identity { padding: 12px 16px 10px; margin-bottom: 4px; }
}

/* entry 211 (Q49): "To do for your event" on the club portal Home */
.cp-todos { padding: 14px 16px; }
.cp-todo__list { list-style: none; margin: 10px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cp-todo { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--ncl-line, #E1E5EA); border-radius: 10px; background: #fff; }
.cp-todo__dot { width: 8px; height: 8px; border-radius: 50%; background: #C0392B; flex: 0 0 auto; }
.cp-todo__t { flex: 1 1 auto; font-size: 14px; min-width: 0; }
.cp-todo .ncl-btn { flex: 0 0 auto; }

/* entry 222: "Add your club president" on the club portal Home */
.cp-pres { padding: 14px 16px; }
.cp-pres__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-top: 12px; }
.cp-pres__f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 200px; min-width: 0; font-size: 12px; font-weight: 700; color: var(--muted); }
.cp-pres__msg { font-size: 13px; color: #8E1B1B; margin-top: 6px; }
.cp-pres__msg:empty { display: none; }