/* SchoolDay v270.15: Clubs -- Full screen beside the version, where you are
   (breadcrumbs), staff on a date as widgets, the Staff Rota's key, filters
   and drag, the Dashboard's spacing, quick filters and equal rows, and
   Club Attendees' sorting and locks.
   Loaded after admin-clubs-v27014.css and before admin-function-shell-v2365.css. */

/* ------------------------------------------------- Full screen, beside the version */
/* admin-clubs-v27011.css hides every button in the version row on Clubs
   (with !important); this one, more specific, comes back. Other pages leave
   it hidden by its attribute. */
.admin-body #adminApp #tab-clubs .admin-page-help-row > #clubsFullscreenV27011 { display: inline-flex !important; align-items: center; }

/* ------------------------------------------------- where you are */
#tab-clubs .clubs-crumbs-v27015 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; flex: 1 1 auto; min-width: 0; }
#tab-clubs .clubs-crumbs-v27015 > button { padding: .35rem .7rem; font-size: .9rem; white-space: nowrap; }
#tab-clubs .clubs-crumbs-v27015 > h3 { margin: 0 0 0 .2rem; display: flex; align-items: center; flex: 0 1 auto; }

/* ------------------------------------------------- staff as widgets */
#tab-clubs .clubs-staff-chips-v27015 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#tab-clubs .clubs-staff-chip-v27015 {
  display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .25rem .15rem .6rem; border-radius: 999px;
  background: #e7f1fa; color: #0f3d6b; border: 1px solid #b6d3ee; font-weight: 700; line-height: 1.3;
}
#tab-clubs .clubs-staff-chip-v27015.is-off { background: #f1f5f9; color: #475569; border-style: dashed; }
#tab-clubs .clubs-staff-chip-v27015 > button {
  display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; font-size: 1rem; font-weight: 800; line-height: 1; cursor: pointer;
}
#tab-clubs .clubs-staff-chip-v27015 > button:hover { background: #fee2e2; color: #991b1b; }
#tab-clubs .clubs-staff-add-v27015 { width: auto; max-width: 18rem; padding: .2rem .4rem; font-size: .9rem; }

/* A club page's date: the staff line is the date's size, under it, starting
   where the date's text starts (the date button's own left padding). */
#tab-clubs .clubs-date-staff-v27015 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding-left: .35rem; font-size: 1rem; color: #0f172a; }
#tab-clubs .clubs-date-staff-v27015.is-none { font-weight: inherit; }
#tab-clubs .clubs-staff-label-v27015 { font-weight: 800; color: #334155; }
#tab-clubs .clubs-date-staff-v27015.is-none .clubs-staff-label-v27015 { color: #b91c1c; }

/* A date's register: the staff in a frame, "Staff" centred on it; green when
   the date meets its ratio, red when not -- and a tick or a "!" in the words,
   so colour is never the only difference. */
#tab-clubs .clubs-staff-frame-v27015 { border: 2px solid #15803d; border-radius: .7rem; background: #f0fdf4; padding: .4rem .8rem .5rem; margin: .4rem 0 .8rem; }
#tab-clubs .clubs-staff-frame-v27015.is-over { border-color: #b91c1c; background: #fef2f2; }
#tab-clubs .clubs-staff-title-v27015 { margin: 0 0 .4rem; text-align: center; font-size: 1rem; color: #14532d; }
#tab-clubs .clubs-staff-frame-v27015.is-over .clubs-staff-title-v27015 { color: #7f1d1d; }
#tab-clubs .clubs-staff-frame-v27015 > .clubs-staff-chips-v27015 { display: flex; justify-content: center; }
#tab-clubs .clubs-staff-ratio-v27015 { margin: .4rem 0 0; text-align: center; font-weight: 700; font-size: .9rem; color: #14532d; }
#tab-clubs .clubs-staff-frame-v27015.is-over .clubs-staff-ratio-v27015 { color: #991b1b; }

/* ------------------------------------------------- the Staff Rota */
/* White is Available: working, at no club. A club's colour fills a day at
   that club. A half day is half of the square; the other half is grey. */
#tab-clubs .clubs-rota-day-v27013.is-working { background: #fff; }
#tab-clubs .clubs-rota-day-v27013.is-working.has-club { background: var(--rota-fill); }
#tab-clubs .clubs-rota-day-v27013.part-am,
#tab-clubs .clubs-rota-day-v27013.part-pm,
#tab-clubs .clubs-rota-day-v27013.part-am.has-club,
#tab-clubs .clubs-rota-day-v27013.part-pm.has-club { background: #cbd5e1; }
#tab-clubs .clubs-rota-day-v27013.part-am::before,
#tab-clubs .clubs-rota-day-v27013.part-pm::before { background: #fff; }
#tab-clubs .clubs-rota-day-v27013.part-am.has-club::before,
#tab-clubs .clubs-rota-day-v27013.part-pm.has-club::before { background: var(--rota-fill); }
#tab-clubs .clubs-rota-day-v27013.is-faded { opacity: .3; }
#tab-clubs .clubs-rota-day-v27013[aria-disabled="true"] { cursor: default; }
#tab-clubs .clubs-rota-day-v27013[aria-disabled="true"]:hover { border-color: transparent; }
#tab-clubs .clubs-rota-day-v27013.is-working[aria-disabled="true"]:hover { border-color: #374151; }

#tab-clubs .clubs-rota-key-v27013 { gap: .35rem 1rem; margin: .4rem 0; color: #334155; }
#tab-clubs .clubs-rota-keyitem-v27015 { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-weight: 600; }
#tab-clubs .clubs-rota-keyhelp-v27015 { flex-basis: 100%; color: #64748b; }

#tab-clubs .clubs-rota-filters-v27015 { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
#tab-clubs .clubs-multi-v27015 { position: relative; }
#tab-clubs .clubs-multi-v27015 > summary {
  list-style: none; cursor: pointer; padding: .4rem .7rem; border: 1px solid #cbd5e1; border-radius: .5rem; background: #fff; white-space: nowrap;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis;
}
#tab-clubs .clubs-multi-v27015 > summary::-webkit-details-marker { display: none; }
#tab-clubs .clubs-multi-v27015 > summary::after { content: " \25BE"; color: #64748b; }
#tab-clubs .clubs-multi-v27015[open] > summary { border-color: #0f3d6b; box-shadow: 0 0 0 2px #bfdbfe; }
#tab-clubs .clubs-multi-list-v27015 {
  position: absolute; z-index: 20; top: calc(100% + .25rem); left: 0; min-width: 15rem; max-height: 20rem; overflow-y: auto;
  display: grid; gap: .1rem; padding: .4rem; background: #fff; border: 1px solid #cbd5e1; border-radius: .6rem; box-shadow: 0 10px 24px rgba(15, 23, 42, .18);
}
#tab-clubs .clubs-multi-list-v27015 > label { display: flex; align-items: center; gap: .45rem; padding: .3rem .4rem; border-radius: .35rem; cursor: pointer; white-space: nowrap; }
#tab-clubs .clubs-multi-list-v27015 > label:hover { background: #f1f5f9; }
#tab-clubs .clubs-multi-list-v27015 .clubs-swatch-v2690 { display: inline-block; width: .8rem; height: .8rem; border-radius: .15rem; }
#tab-clubs .clubs-multi-list-v27015 > button { justify-self: start; margin-top: .2rem; }

#tab-clubs .clubs-rota-filtered-v27015 {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .3rem 0 .45rem; padding: .35rem .7rem;
  border-radius: .5rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #0f3d6b;
}
#tab-clubs .clubs-rota-filtered-v27015 > span { font-weight: 800; }

/* Dragging: no text selection, and the chosen block outlined. */
#tab-clubs .clubs-rota-v27013.is-draggable-v27015 { -webkit-user-select: none; user-select: none; }
#tab-clubs .clubs-rota-v27013.is-draggable-v27015 .clubs-rota-day-v27013 { -webkit-touch-callout: none; }
#tab-clubs .clubs-rota-cell-v27013.is-selected-v27015 { background: #bfdbfe; box-shadow: inset 0 0 0 1px #2563eb; }

#tab-clubs .clubs-rota-sel-v27015 { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 .6rem; }
#tab-clubs .clubs-rota-sel-v27015 dt { font-weight: 800; }
#tab-clubs .clubs-rota-sel-v27015 dd { margin: 0; }

/* ------------------------------------------------- the Dashboard */
/* The key under the table: room above it, further in, the club names' size. */
#tab-clubs .clubs-grid-key-v27013 { margin: 1rem 0 0; padding-left: 1.25rem; font-size: .85rem; gap: .5rem; }
#tab-clubs .clubs-grid-under-v27013 { padding-left: 1.25rem; margin-top: .7rem; }
/* The totals under a club's name and the week row: the numbers' size. */
#tab-clubs .clubs-grid-sums-v27013 { font-size: .88rem; gap: .1rem; }
#tab-clubs .clubs-grid-week-v27013 td { font-size: .88rem; padding: .25rem .1rem; }

/* Quick filters, beside Show. */
#tab-clubs .clubs-quicks-v27015 { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
#tab-clubs .clubs-quick-item-v27015 { display: inline-flex; align-items: stretch; }
#tab-clubs .clubs-quick-v27015 {
  padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 800; line-height: 1.2;
  background: var(--quick-colour, #0f3d6b); color: #fff; border: 2px solid var(--quick-colour, #0f3d6b);
}
#tab-clubs .clubs-quick-v27015.is-reset { background: #fff; color: #334155; border-color: #94a3b8; }
#tab-clubs .clubs-quick-v27015[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0f172a; text-decoration: underline; text-underline-offset: 2px; }
#tab-clubs .clubs-quick-v27015.is-reset[aria-pressed="true"] { text-decoration: none; }
#tab-clubs .clubs-quick-item-v27015 > .clubs-quick-v27015 { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#tab-clubs .clubs-quick-remove-v27015 {
  padding: 0 .45rem; border-radius: 0 999px 999px 0; border: 2px solid #cbd5e1; border-left: 0; background: #f8fafc; color: #475569; font-weight: 800;
}
#tab-clubs .clubs-quick-remove-v27015:hover { background: #fee2e2; color: #991b1b; }
#tab-clubs .clubs-quick-add-v27015 {
  padding: .3rem .75rem; border-radius: 999px; font-size: .82rem; font-weight: 800; background: #f8fafc; color: #475569; border: 2px dashed #cbd5e1;
}

/* ------------------------------------------------- Club Attendees */
#tab-clubs .clubs-db-sort-v27015 {
  display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 800; cursor: pointer; text-align: left;
}
#tab-clubs .clubs-db-sort-v27015:hover { text-decoration: underline; }
#tab-clubs .clubs-db-sort-v27015 > .clubs-db-arrow-v27015 { font-size: .8em; color: #64748b; min-width: .8em; }
#tab-clubs .clubs-db-sort-v27015[aria-sort-v27015="asc"] > .clubs-db-arrow-v27015,
#tab-clubs .clubs-db-sort-v27015[aria-sort-v27015="desc"] > .clubs-db-arrow-v27015 { color: #0f3d6b; }
#tab-clubs .clubs-db-lock-v27015 {
  display: inline-flex; align-items: center; justify-content: center; margin-left: .3rem; padding: .05rem .3rem; border-radius: .35rem;
  border: 1px solid #cbd5e1; background: #f8fafc; font-size: .8rem; line-height: 1.2; cursor: default;
}
#tab-clubs button.clubs-db-lock-v27015 { cursor: pointer; }
#tab-clubs button.clubs-db-lock-v27015:hover { background: #e2e8f0; }
#tab-clubs .clubs-db-lock-v27015.is-open { border-style: dashed; color: #64748b; }
#tab-clubs .clubs-db-v27012 td.is-locked-v27015 { background: #f8fafc; color: #334155; }

/* ------------------------------------------------- Import, step 3 */
/* A new club's colour picker is a square big enough to see the colour in,
   not the sliver an unsized colour input draws. border-box, so the 2rem is
   the whole box. */
#tab-clubs .clubs-club-map-v2690 input[type="color"][data-import-new-colour] {
  box-sizing: border-box; width: 2rem; height: 2rem; min-width: 2rem; aspect-ratio: 1; padding: 2px; border: 1px solid #94a3b8; border-radius: .35rem;
  background: #fff; vertical-align: middle; cursor: pointer;
}
#tab-clubs .clubs-club-map-v2690 input[type="color"][data-import-new-colour]::-webkit-color-swatch-wrapper { padding: 0; }
#tab-clubs .clubs-club-map-v2690 input[type="color"][data-import-new-colour]::-webkit-color-swatch { border: 0; border-radius: .2rem; }
#tab-clubs .clubs-club-map-v2690 input[type="color"][data-import-new-colour]::-moz-color-swatch { border: 0; border-radius: .2rem; }

/* ------------------------------------------------- notes: one list per attendee */
#tab-clubs .clubs-note-head-v27015 { margin: .8rem 0 .2rem; }
#tab-clubs .clubs-note-scroll-v27015 { max-height: min(22rem, 45vh); overflow-y: auto; padding-right: .3rem; overscroll-behavior: contain; }
#tab-clubs .clubs-note-where-v27015 { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: #334155; }
#tab-clubs .clubs-note-where-v27015 .clubs-swatch-v2690 { margin: 0; width: .75rem; height: .75rem; }
#tab-clubs .clubs-note-where-v27015.is-system { color: #6d28d9; }

/* Club Attendees: Notes first, a line of colour per club beside the name,
   and every club the attendee goes to. */
#tab-clubs .clubs-db-notes-v27015 { white-space: nowrap; }
/* Notes and Name both stay put when the table scrolls sideways: Notes at
   the left edge, Name just right of it. One width, written once. */
#tab-clubs .clubs-db-v27012.has-notes-v27015 { --db-notes-w-v27015: 6.75rem; }
#tab-clubs .clubs-db-v27012.has-notes-v27015 tr > :first-child {
  position: sticky; left: 0; box-sizing: border-box;
  width: var(--db-notes-w-v27015); min-width: var(--db-notes-w-v27015); max-width: var(--db-notes-w-v27015);
}
#tab-clubs .clubs-db-v27012.has-notes-v27015 tbody tr > :first-child { z-index: 2; background: #fff; }
#tab-clubs .clubs-db-v27012.has-notes-v27015 tr > :nth-child(2) { position: sticky; left: var(--db-notes-w-v27015); }
#tab-clubs .clubs-db-v27012.has-notes-v27015 thead tr > :nth-child(2) { z-index: 5; }
#tab-clubs .clubs-db-notes-v27015 > button { padding: .15rem .5rem; font-size: .8rem; }
#tab-clubs .clubs-db-bars-v27015 { display: inline-flex; gap: 2px; margin-right: .4rem; vertical-align: middle; }
#tab-clubs .clubs-db-bars-v27015 > span { display: inline-block; width: 4px; height: 1.15rem; border-radius: 2px; }
#tab-clubs .clubs-db-v27012 th:has(> .clubs-db-bars-v27015) { white-space: nowrap; }
#tab-clubs .clubs-db-v27012 th > .clubs-db-bars-v27015 + .clubs-db-cell-v27012 { display: inline-block; width: auto; margin: 0; vertical-align: middle; }
#tab-clubs .clubs-db-clubs-v27015 { white-space: normal; min-width: 9rem; }
#tab-clubs .clubs-db-club-v27015 { display: inline-flex; align-items: center; gap: .25rem; margin: .05rem .45rem .05rem 0; white-space: nowrap; }
#tab-clubs .clubs-db-club-v27015 .clubs-swatch-v2690 { margin: 0; width: .7rem; height: .7rem; }