/*
  /exnet/css/exnet-modern.css

  Shared design tokens + reusable components for the exNet "navy/gold"
  visual identity introduced Aug 2026 on login.ihtml / perminvalid.ihtml.

  Extracted here now that a third consumer (the coach-picker modals in
  act_reg.php / act_reg.ihtml) needs the same system -- closes out the
  "duplicated CSS block, worth factoring out if a third page gets this
  treatment" note from the architecture doc's Section 9.

  IMPORTANT: login.ihtml and perminvalid.ihtml still embed their own
  copies of the :root token block today. This file was NOT wired into
  them automatically -- they're already shipped and working, and
  swapping their source of truth is a separate, deliberate decision, not
  a side effect of building this. Say the word if you want them pointed
  at this file instead of their inline copies.

  Scope note: this file intentionally does NOT touch html/body or set
  a page-wide font-family. It only styles the specific component classes
  below (.exnet-modal*, .exnet-table*, .exnet-btn*, .exnet-input*,
  .exnet-field*, .exnet-filter*). Pages that include this file keep
  their existing typography everywhere except the elements that
  explicitly use these classes -- this is a scoped component library,
  not a page reskin.
*/

:root{
  --ink:#0A1730;
  --ink-2:#12234A;
  --court:#1E3FE0;
  --court-dark:#152CA8;
  --chalk:#F5F7FB;
  --gold:#F0A93B;
  --gold-tint:#FDF1DC;
  --ink-text:#12172B;
  --muted:#5B6479;
  --muted-on-dark:#8B96BA;
  --line:#E3E6EE;
  --tint-bg:#EAEFFC;
  --error-bg:#FCEDED;
  --error-border:#E9B7B7;
  --error-text:#8A2C2C;
  --font-display:'Big Shoulders Display', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:'Space Mono', monospace;
}

/* Component-wide box-sizing reset, scoped to the modal tree only (not a
   page-wide *{} reset, consistent with this being a scoped component
   library). This is the actual fix for the fieldset border overflowing
   the card: without it, elements set to width:100% (the fieldset, the
   filter input, the table wrap) add their padding/border ON TOP of that
   100%, in content-box's default box model -- which pushes them past
   the card's edge. border-box makes width:100% include padding/border,
   so nothing overflows. */
.exnet-modal, .exnet-modal *{box-sizing:border-box;}

/* ---------- Shared "gold-topped card" chrome ----------
   Used by the modal card below AND by perminvalid.ihtml's .exnet-pv__card
   (Aug 2026 consolidation -- both were independently declaring the exact
   same background/border-top/border-radius/box-shadow). Each consumer
   still owns its own max-width/padding/margin locally, since those are
   legitimately page-specific (a modal, a full-page card, etc.) -- only
   the shared visual chrome lives here.
   NOT used by login.ihtml's .exnet-login__card -- that one is a
   deliberately different variant (no gold top bar, fully rounded
   corners) since the login page already has its gold accent on the
   scoreboard chip on the hero side; forcing it into this shared rule
   would change its look, not just deduplicate CSS. */
.exnet-card, .exnet-modal__card, .exnet-pv__card{
  background:#fff; border-top:4px solid var(--gold);
  border-radius:0 0 16px 16px; box-shadow:0 24px 60px -28px rgba(10,22,50,0.28);
}

/* ---------- Modal chrome (overlay + card) ---------- */
.exnet-modal{
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(10,23,48,0.55);
  padding:64px 20px; overflow:auto;
}
.exnet-modal__card{
  width:100%; max-width:840px; margin:0 auto;
  font-family:var(--font-body); color:var(--ink-text);
  overflow:hidden; /* defensive: clips anything that still overflows, belt-and-suspenders with the border-box fix above */
}
.exnet-modal__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px 16px;
}
.exnet-modal__title{
  font-family:var(--font-display); font-weight:800; font-size:22px; margin:0; color:var(--ink-text);
}
.exnet-modal__close{
  background:none; border:none; font-size:22px; line-height:1; color:var(--muted);
  cursor:pointer; padding:4px 8px; border-radius:6px;
}
.exnet-modal__close:hover{color:var(--ink-text); background:var(--tint-bg);}
.exnet-modal__close:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.exnet-modal__body{padding:0 28px 22px;}
.exnet-modal__note{
  display:flex; gap:11px; align-items:flex-start; text-align:left;
  background:var(--tint-bg); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin-bottom:18px; font-size:13.5px; color:var(--ink-text); line-height:1.45;
}
.exnet-modal__foot{
  display:flex; justify-content:flex-end; gap:10px;
  padding:16px 28px; border-top:1px solid var(--line);
}

/* ---------- Buttons ---------- */
.exnet-btn{
  padding:11px 22px; border-radius:8px; border:none; cursor:pointer;
  font-family:var(--font-body); font-weight:600; font-size:14.5px;
  transition:background .15s ease, transform .05s ease, border-color .15s ease;
}
.exnet-btn--primary{background:var(--court); color:#fff;}
.exnet-btn--primary:hover{background:var(--court-dark);}
.exnet-btn--primary:active{transform:scale(0.99);}
.exnet-btn--primary:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}
.exnet-btn--ghost{background:#fff; color:var(--ink-text); border:1.5px solid var(--line);}
.exnet-btn--ghost:hover{border-color:var(--court); background:var(--tint-bg);}
.exnet-btn--ghost:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}

/* ---------- Inputs / form fields ---------- */
.exnet-input{
  width:100%; padding:10px 13px; font-size:14.5px; font-family:var(--font-body);
  border:1.5px solid var(--line); border-radius:8px; color:var(--ink-text); background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.exnet-input:focus{outline:none; border-color:var(--court); box-shadow:0 0 0 3px rgba(30,63,224,0.15);}
.exnet-field{margin-bottom:16px; text-align:left;}
.exnet-field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-text); margin:0 0 6px;}
.exnet-field--required label::after{content:" *"; color:var(--court);}

/* ---------- Filter box, sits above a picker table ---------- */
.exnet-filter{position:relative; margin-bottom:12px;}
.exnet-filter input{
  /* !important is deliberate: this input also matches the broader
     .exnet-modal__body input[type="text"] rule further down, which is
     MORE specific (0,2,1 vs 0,1,1 for this selector) and was silently
     winning, resetting padding-left back to 13px -- that's why the icon
     sat on top of the placeholder text. !important reliably wins
     regardless of how that other rule changes later. */
  padding-left:34px !important;
}
.exnet-filter svg{
  position:absolute; left:11px; top:50%;
  width:15px; height:15px; /* pinned explicitly -- don't rely on the <svg> tag's own width/height attributes surviving whatever else on the page targets svg */
  transform:translateY(-50%);
  color:var(--muted); pointer-events:none;
}
.exnet-filter__count{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); margin:7px 2px 0;}

/* ---------- Data table (coach picker) ---------- */
.exnet-table-wrap{
  max-height:380px; overflow-y:auto; overflow-x:auto;
  border:1px solid var(--line); border-radius:10px;
}
.exnet-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.exnet-table thead th{
  position:sticky; top:0; z-index:1; background:var(--chalk);
  text-align:left; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.6px;
  text-transform:uppercase; color:var(--muted); font-weight:700;
  padding:10px 12px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.exnet-table tbody td{
  padding:9px 12px; border-bottom:1px solid var(--line); color:var(--ink-text); white-space:nowrap;
}
.exnet-table tbody tr:nth-child(even){background:var(--chalk);}
.exnet-table tbody tr:hover{background:var(--tint-bg); cursor:pointer;}
.exnet-table tbody tr.selected{
  background:var(--gold-tint) !important;
  box-shadow:inset 3px 0 0 var(--gold);
}
.exnet-table .hide{display:none;}
.exnet-table tbody tr.exnet-filtered-out{display:none;}

/* ---------- OOH Forms fields rendered inside a modal ----------
   These modals still call $this->form_data->show_element(...) -- the
   1998-era OOH Forms engine -- which renders plain <input>/<select> tags
   with no distinguishing class. Rather than touch form.php/of_*.php (out
   of scope tonight, and would affect every form on the site, not just
   these modals), this styles them by tag, scoped strictly to elements
   inside .exnet-modal__body so nothing outside these two modals is
   affected. If a given of_* element ever renders its own inline `style`
   attribute, that will win over this and may need a closer look -- not
   confirmed either way, since of_text.php/of_select.php weren't reviewed
   for this pass. */
.exnet-modal__body fieldset{
  border:1px solid var(--line); border-radius:10px; padding:16px 18px 4px; margin:0 0 18px;
}
.exnet-modal__body legend{
  font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-text);
  padding:0 6px; background:#fff;
}
.exnet-modal__body ol{list-style:none; margin:0; padding:0;}
.exnet-modal__body ol li{margin-bottom:14px; text-align:left;}
.exnet-modal__body ol li label{
  display:block; font-size:12.5px; font-weight:600; color:var(--ink-text); margin:0 0 6px;
}
.exnet-modal__body input[type="text"],
.exnet-modal__body input[type="password"],
.exnet-modal__body select{
  width:100%; max-width:100%; padding:10px 13px; font-size:14.5px; font-family:var(--font-body);
  border:1.5px solid var(--line); border-radius:8px; color:var(--ink-text); background:#fff;
  box-sizing:border-box;
}
.exnet-modal__body input[type="text"]:focus,
.exnet-modal__body select:focus{
  outline:none; border-color:var(--court); box-shadow:0 0 0 3px rgba(30,63,224,0.15);
}

@media (max-width:720px){
  .exnet-modal{padding:24px 12px;}
  .exnet-modal__head, .exnet-modal__body{padding-left:18px; padding-right:18px;}
  .exnet-modal__foot{padding-left:18px; padding-right:18px;}
}

/* ---------- Standalone alert banner (form-level errors, outside modals) ----------
   Not scoped under .exnet-modal, so it doesn't inherit that tree's
   box-sizing reset -- set explicitly here instead. max-width:780px
   matches this page's other boxed content EXACTLY -- default.css's
   generic `table{width:780px}` (the school-info box) and form.css's
   generic `fieldset{width:780px}` (the registration fieldsets) both
   hardcode that same number. (Note for whoever reads this later: an
   earlier version of this comment said 640px matched -- it didn't;
   that was the actual bug behind the misaligned banner in the Aug 2026
   screenshot. All three files -- this one, default.css, form.css --
   still hardcode 780px independently rather than sharing one source of
   truth. Not fixed here since it's out of scope for a quick alignment
   fix, but worth a shared CSS variable if a fourth box ever needs it.) */
.exnet-alert{
  box-sizing:border-box;
  display:flex; gap:11px; align-items:flex-start; text-align:left;
  max-width:780px; margin:0 auto 20px;
  background:var(--error-bg); border:1px solid var(--error-border); border-radius:10px;
  padding:14px 16px; font-family:var(--font-body); font-size:14px; color:var(--error-text); line-height:1.5;
}
.exnet-alert svg{flex:0 0 auto; margin-top:2px; width:18px; height:18px;}
/* Optional two-line variant (title + supporting text), added Aug 2026 so
   login.ihtml could drop its own near-identical .exnet-login__alert
   rather than keep duplicating this component. Purely additive -- act_reg's
   existing plain <span> usage is untouched by these two classes. */
.exnet-alert__title{display:block; font-weight:600; font-size:13.5px; margin:0 0 2px;}
.exnet-alert__body{display:block; font-size:13px; opacity:0.85; line-height:1.45; margin:0;}