/* GroupCards: entry screen, group selection and admin. Colours follow the Priority People site. */

:root {
  --blue: #2178ba;
  --blue-dark: #1a5683;
  --teal: #3ec1d5;
  --navy: #010030;
  --text: #212529;
  --muted: #6c757d;
  --line: #dee2e6;
  --bg: #f4f7fa;
  --danger: #dc3545;
  --ok: #198754;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.4;
}

a { color: var(--blue); }

/* A panel of its own under a form: on the entry form a pointer to the admin page for trainers, on the
   admin sign-in a pointer back to the activities */
.aside-panel {
  max-width: 420px;
  margin: 24px auto 0;
  padding: 20px 32px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.aside-panel p { margin: 0 0 0.8em; color: var(--muted); }

/* --primary / --primary-dark / --primary-text are set inline on the group-choice page from the activity's
   primary colour; every other page falls back to the site blues. */
h1 { margin: 0 0 0.6em; color: var(--primary-dark, var(--blue-dark)); }
h2 { margin: 1.2em 0 0.5em; color: var(--blue-dark); font-size: 1.2rem; }

/* ---------- Buttons and inputs ---------- */

.btn {
  font: inherit;
  padding: 0.45em 1em;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
.btn:hover { background: #eaf3fa; }
.btn.primary { background: var(--blue); color: #fff; }
.btn.primary:hover { background: var(--blue-dark); }
.btn.danger { border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: #fdecee; }
.btn.small { padding: 0.25em 0.7em; font-size: 0.9rem; }
.btn.big { font-size: 1.2rem; padding: 0.6em 1.6em; margin-top: 1rem; }
.btn:disabled { opacity: 0.55; cursor: default; }
/* .btn's own "display" above is normal author CSS, which beats the browser's built-in "[hidden]{display:none}"
   regardless of specificity (author always outranks user-agent at equal importance) — so a .btn only actually
   disappears when hidden if something author-side says so too, at least as specific as .btn itself. */
.btn[hidden] { display: none; }
/* Unlike [hidden] above, this keeps the button's own space in a row of buttons, so the others after it
   still line up from row to row whether or not this particular one has anything to show. */
.btn.invisible { visibility: hidden; }

input[type=text], input[type=password], input[type=date], input[type=number], textarea {
  font: inherit;
  width: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  background: #fff;
}
input:focus, textarea:focus { outline: 2px solid var(--teal); outline-offset: 0; }

/* Short-name availability (new activities): the extra shadow makes a 2px border without shifting the layout */
input.short-ok { border-color: var(--ok); box-shadow: 0 0 0 1px var(--ok); }
input.short-bad { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.short-msg { margin-top: -0.2em; min-height: 1.4em; }
textarea { min-height: 7em; resize: vertical; }

select {
  font: inherit;
  max-width: 100%;
  padding: 0.45em 0.6em;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  background: #fff;
}
select:focus { outline: 2px solid var(--teal); outline-offset: 0; }

label { display: block; font-weight: 600; margin: 0.9em 0 0.3em; }
/* Standard tickboxes: about 50% larger than the browser default (~13px), centred against their label text */
input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; cursor: pointer; vertical-align: middle; }

.hint { color: var(--muted); font-size: 0.9rem; margin: 0.2em 0 0.5em; }

.notice { padding: 0.7em 1em; border-radius: 6px; margin: 0 0 1em; }
.notice.error { background: #fdecee; color: #842029; border: 1px solid #f1b0b7; }
.notice.ok { background: #e6f4ec; color: #0f5132; border: 1px solid #a9d5bb; }

/* ---------- Entry screen and group selection ---------- */

body.page { padding: 4vh 16px; }

.card-panel {
  margin: 0 auto;
  background: #fff;
  padding: 28px 32px;
  border-radius: 12px;
  border-top: 5px solid var(--primary, var(--blue));
  box-shadow: 0 4px 24px rgba(1, 0, 48, 0.1);
}
.card-panel.narrow { max-width: 420px; }
.card-panel.wide { max-width: 900px; }
/* index.php's landing card: as wide as its module rows need and no wider (max 100% of the screen). The lead
   paragraph is taken out of the width calculation (width:0 + min-width:100%) so its one long line doesn't
   stop the card shrinking; it simply wraps to whatever width the rows give. */
.card-panel.fit { width: fit-content; max-width: 100%; box-sizing: border-box; }
.card-panel.fit .lead { width: 0; min-width: 100%; }

.group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 0.5rem;
}

/* The top-level index.php's module list: a tall button (like .group-btn below, just narrower rather than
   stretched) with its description beside it, top-aligned with the button rather than centred beside it. */
.tool-list { display: flex; flex-direction: column; gap: 20px; margin: 0.5rem 0 0; }
.tool-row { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.tool-desc { color: var(--muted); text-align: left; padding-top: 0.3em; max-width: 420px; }

.group-btn,
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 16px;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--primary-text, #fff);
  background: var(--primary, var(--blue));
  border-radius: 14px;
  box-shadow: 0 3px 0 var(--primary-dark, var(--blue-dark));
}
.tool-btn { flex: none; width: 220px; }
.group-btn:hover,
.tool-btn:hover { background: var(--primary-dark, var(--blue-dark)); }

.lead { font-size: 1.1rem; margin: 0 0 1.2rem; }
.footer-link { margin: 1.5rem 0 0; }
.date-note { margin-top: 1.6em; }

/* "Additional options": a panel that slides in from the right edge, with its tab attached to the edge */
.opt-panel {
  position: fixed;
  right: 0;
  bottom: 24px;
  z-index: 50;
  width: min(340px, 90vw);
  padding: 4px 22px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-right: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: -4px 4px 20px rgba(1, 0, 48, 0.18);
  transform: translateX(100%);
  visibility: hidden;                              /* keeps the hidden panel out of the tab order */
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
}
.opt-panel.open {
  transform: none;
  visibility: visible;
  transition: transform 0.25s ease;
}
.opt-tab {
  position: absolute;
  right: 100%;                                     /* sits just outside the panel's left edge, so it slides with it */
  bottom: 0;
  visibility: visible;                             /* stays visible while the panel itself is hidden */
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55em 0.9em;
  color: #fff;
  background: var(--blue);
  border: 0;
  border-radius: 10px 0 0 10px;
  box-shadow: -2px 2px 10px rgba(1, 0, 48, 0.2);
  cursor: pointer;
  white-space: nowrap;
}
.opt-tab:hover { background: var(--blue-dark); }
.opt-arrow { display: inline-block; transition: transform 0.25s ease; }
.opt-panel.open .opt-arrow { transform: rotate(180deg); }
.opt-date { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.opt-date label { margin: 0; }
.opt-date .hint { margin: 0; }
.opt-leave { margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }

.instructions { white-space: pre-line; line-height: 1.45; }

/* ---------- Admin ---------- */

body.admin { padding: 0 0 90px; }

.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: var(--navy);
  color: #fff;
}
.admin-bar a { color: #9ee6f2; }
.admin-bar a.btn { color: var(--blue); }                /* Log out is a button (the rule above is for plain links) */
/* A font's line box has more space above the letters than below, so text in a button sits a little low.
   Where the browser supports it, trim the text box to the letters' own height (cap height to baseline) so equal
   padding centres them. The padding is larger to keep the button the same size. Elsewhere it stays as a plain .btn. */
@supports (text-box: trim-both cap alphabetic) {
  .admin-bar a.btn { text-box: trim-both cap alphabetic; padding: 0.6em 0.9em; }
}
.admin-bar-right { display: flex; align-items: center; gap: 14px; }

/* Navigation buttons at the top of a page's body (the title bar only carries Log out) */
.admin-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.admin-nav .btn + .btn { margin-left: 0; }
.admin-wrap.nav-top { padding-bottom: 0; }              /* the editor's own wrapper follows and supplies the gap */
.admin-bar strong { font-size: 1.1rem; display: inline-flex; align-items: center; gap: 8px; }
.brand-logo { height: 1.3em; width: auto; border-radius: 4px; vertical-align: middle; }   /* scaled to whichever text it sits beside, not its own 64x64 size */

.admin-wrap { max-width: 960px; margin: 0 auto; padding: 20px 16px; }

/* The sign-in and register forms are a .card-panel.narrow, the same look as the entry form on index.php */
.login { width: calc(100% - 32px); margin-top: 4vh; margin-bottom: 0; }   /* the same top gap as the entry page; a 16px gutter on narrow screens (admin pages have no body padding) */
/* An h1 with the .brand-logo icon beside its text (admin sign-in, index.php's entry screen): both are a
   plain h1 inside a .card-panel.narrow, so they already share the same font size without any extra rule. */
.brand-h1 { display: inline-flex; align-items: center; gap: 8px; }
.login + .aside-panel { width: calc(100% - 32px); }

/* Admin sign-in page: no bottom padding (that is only for the editor's save bar) and a column as tall as the
   window, so the credit line sits at the bottom centre of the screen, or just under the other content when the
   window is too short for that */
body.signin { padding-bottom: 0; }
.signin-page { display: flex; flex-direction: column; min-height: 100vh; }
.credit { margin: auto 0 0; padding: 20px 16px 14px; text-align: center; font-size: 0.85rem; color: var(--muted); }

/* "I am human" tickbox, drawn like a small captcha widget; .hp is the honeypot field, kept out of sight of people */
label.human {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1.2em 0 0;
  padding: 12px 14px;
  font-weight: 400;
  background: #f8fafc;
  border: 1px solid #b9c4cf;
  border-radius: 6px;
  cursor: pointer;
}
label.human input { width: 22px; height: 22px; margin: 0; cursor: pointer; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.owner-group h2 { margin-top: 1.4em; }
.user-form, .copy-form { max-width: 460px; }
/* Edit user: the account fields in a left column, the tool-access ticks in a right one (one column when narrow) */
.user-form.two-col { max-width: 860px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.user-form.two-col .form-actions { grid-column: 1 / -1; }
@media (max-width: 700px) { .user-form.two-col { grid-template-columns: 1fr; } }
.user-form .module-head, .user-form .module-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.user-form .module-head span { font-weight: 600; margin-top: 0.9em; }
.user-form .module-row .limit-input { width: 70px; flex: none; margin: 1.2em 0 0; text-align: center; }
.user-form label.check { display: flex; align-items: center; gap: 8px; margin-top: 1.2em; font-weight: 600; }
.form-actions { margin: 1.4em 0 0; }

table.list { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
table.list th, table.list td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list th { background: #eaf3fa; color: var(--blue-dark); }
.list-scroll { overflow-x: auto; }
.tag { display: inline-block; margin-left: 8px; padding: 1px 8px; font-size: 0.75rem; font-weight: 600; vertical-align: middle; color: #fff; background: var(--blue); border-radius: 999px; }
.tag.tag-archive { background: #6c757d; margin-left: 6px; }
.inst-date h2 { margin-bottom: 0.4em; }
.status-ok { color: var(--ok); font-weight: 600; }
.status-off { color: var(--muted); }
/* The actions column has no header text and holds only buttons, so give it just the width its buttons need
   (auto table layout otherwise leaves that spare width sitting unused inside the cell, at the expense of the
   other columns). white-space: nowrap stops the browser reacting to the narrower column by collapsing it
   down to one button per line; the buttons stay on one row and the row scrolls (.list-scroll) if they don't fit. */
table.list th:last-child, table.list td:last-child { width: 1%; white-space: nowrap; }
/* Buttons inside an actions cell, spaced with margin rather than flex gap: setting display:flex/inline-flex
   directly on a <td> knocks it out of normal table-cell layout, which was shrinking the row and throwing off
   its bottom border. */
.actions > .btn { margin-right: 6px; }
.actions > .btn:last-child { margin-right: 0; }

.panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 4px 20px 18px; margin-bottom: 18px; }
.panel h2 { margin-top: 0.9em; }

.sortlist { list-style: none; margin: 0 0 10px; padding: 0; }
.sortlist li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  margin-bottom: 4px;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.sortlist li.dragging { opacity: 0.4; }
/* Column / row labels: two lines each. The first is the usual handle, label, colour and delete row; the second is the details box.
   The row is a grid so the details box sits in the same column as the label box, with identical left and right edges. */
.sortlist li.two-line {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;   /* handle, label, colour text, colour picker, delete */
  column-gap: 8px;
  row-gap: 5px;
  align-items: center;
}
.sortlist li.two-line .li-main { display: contents; }         /* its children take part in the grid directly */
.sortlist li.two-line input.details { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
.sortlist li.disabled input[type=text] { opacity: 0.55; }
.sortlist li.disabled input[type=text]:first-of-type { text-decoration: line-through; }
.sortlist input[type=text] { flex: 1 1 auto; min-width: 0; }
.sortlist input.hex { flex: 0 0 96px; width: 96px; font-family: ui-monospace, Consolas, monospace; }
.handle { cursor: grab; color: var(--muted); user-select: none; padding: 0 4px; font-size: 1.2rem; line-height: 1; }
input[type=color] { width: 38px; height: 32px; padding: 0; border: 1px solid #b9c4cf; border-radius: 6px; background: #fff; cursor: pointer; flex: 0 0 auto; }
.del { flex: 0 0 auto; border: 0; background: none; color: var(--danger); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 2px 8px; }
.del:hover { background: #fdecee; border-radius: 6px; }

.btn + .btn { margin-left: 6px; }
.banding { margin-top: 14px; padding-top: 4px; border-top: 1px solid var(--line); }
.overlap { margin-top: 12px; }
.import-panel { margin-top: 12px; }
.sortlist .inline-check { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 400; white-space: nowrap; flex: 0 0 auto; }

.row-inline { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.row-inline label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; }
.row-inline input[type=text], .row-inline input[type=number], .row-inline input[type=date] { width: auto; }
.row-inline input[type=number].pct { width: 5.5em; }   /* half the old width: these hold short numbers like 12.5 */
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 20px; }
.colour-row { display: flex; align-items: center; gap: 8px; }
.colour-row input[type=text] { width: 110px; font-family: ui-monospace, Consolas, monospace; }

.savebar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: #fff;
  border-top: 1px solid var(--line);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.savebar .msg { color: var(--muted); margin-left: auto; text-align: right; }   /* alone at the right edge */
.savebar .msg.err { color: var(--danger); }
.savebar .msg.good { color: var(--ok); }

.errors { margin: 0 0 16px; }
.errors ul { margin: 0.3em 0 0; padding-left: 1.2em; }