/* SchoolDay v270.12: Clubs -- the editor's sections in matching frames, the
   counts and ratio on each date, the Dashboard's 45-day table, and the
   Database tab.

   Loaded after admin-clubs-v27011.css and before admin-function-shell-v2365.css,
   which stays last. The panels are already zoom: .9 (v270.11), so sizes here
   are written for that. */

/* ------------------------------------------------- the editor: one frame each */
/* Sean: "Make sure titles are uniformly indented from the border." Every
   section of the club editor -- Details, Staff Members, the three folds -- is
   the same frame with the same padding, and a fold's arrow sits at the RIGHT,
   so every title starts the same distance from its border. */
#tab-clubs .clubs-editor-v2690 > section,
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011,
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011.clubs-ratio-section-v27011 {
  border: 1px solid var(--club-line, #dbe4ee); border-radius: .7rem; background: #fff;
  padding: .7rem 1rem; margin: 0 0 .7rem;
}
#tab-clubs .clubs-editor-v2690 > section:first-child { border-top: 1px solid var(--club-line, #dbe4ee); }
#tab-clubs .clubs-editor-v2690 > section > h4,
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011 > summary h4 { margin: 0; font-size: 1rem; line-height: 1.3; }
#tab-clubs .clubs-editor-v2690 > section > h4 { margin-bottom: .45rem; }
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011 > summary { padding: 0; align-items: baseline; }
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011[open] > summary { margin-bottom: .5rem; }
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011 > summary::before { content: none; }
/* Two glyphs rather than a rotation: a transform does nothing to an inline
   pseudo-element, which left the open arrow pointing the wrong way. */
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011 > summary::after { content: "\25B8"; margin-left: auto; color: #475569; }
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011[open] > summary::after { content: "\25BE"; }
/* The ratio's lines are lines: two inline-flex paragraphs ran together as
   "pupils per staffStaff on duty". */
#tab-clubs .clubs-ratio-section-v27011 > p.clubs-inline-v2690 { display: flex; margin: .5rem 0; }
#tab-clubs .clubs-editor-v2690 > details.clubs-fold-v27011.clubs-ratio-section-v27011 > summary h4 { margin: 0; }

/* ------------------------------------------------- each date: ratio and counts */
#tab-clubs .clubs-date-extra-v27012 {
  grid-column: 2 / -1; display: grid; gap: .45rem; padding: .1rem 0 .35rem;
}
#tab-clubs .clubs-date-ratio-v27012 { display: flex; }
#tab-clubs .clubs-date-row-v2690.is-ratio-over { border-color: #dc2626; box-shadow: inset .35rem 0 0 #b91c1c; background: #fef2f2; }
#tab-clubs .clubs-date-row-v2690.is-ratio-ok { box-shadow: inset .35rem 0 0 #15803d; }
#tab-clubs .clubs-date-row-v2690.is-live.is-ratio-over { box-shadow: inset .35rem 0 0 #b91c1c; }
#tab-clubs .clubs-sum-grid-v27012 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; align-items: start;
}
#tab-clubs .clubs-sum-block-v27012 {
  border: 1px solid #e2e8f0; border-radius: .55rem; background: #f8fafc; padding: .4rem .55rem .5rem;
}
#tab-clubs .clubs-sum-title-v27012 { font-size: .82rem; font-weight: 800; color: #334155; margin: 0 0 .3rem; }
/* The widgets: two columns, a name on the left and its count on the right. */
#tab-clubs .clubs-sum-cells-v27012 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
#tab-clubs .clubs-sum-cell-v27012 {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 0;
  padding: .22rem .5rem; border-radius: .45rem; font-size: .82rem; font-weight: 700; text-align: left;
  background: #eef6ff; color: #0f3d6b; border: 1px solid #b8d4ef; cursor: pointer;
}
#tab-clubs .clubs-sum-cell-v27012 > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tab-clubs .clubs-sum-cell-v27012 > b { flex: 0 0 auto; min-width: 1.6rem; text-align: center; padding: 0 .3rem; border-radius: 999px; background: #0f3d6b; color: #fff; }
#tab-clubs button.clubs-sum-cell-v27012:hover { background: #dceffc; color: #0f3d6b; }
#tab-clubs .clubs-sum-cell-v27012.is-none { background: #fff; color: #64748b; border-color: #e2e8f0; cursor: default; }
#tab-clubs .clubs-sum-cell-v27012.is-none > b { background: #e2e8f0; color: #475569; }

/* ------------------------------------------------- the Dashboard's 45-day table */
#tab-clubs .clubs-grid-v27012 { margin: 0 0 .9rem; }
#tab-clubs .clubs-grid-tools-v27012 { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 .4rem; }
#tab-clubs .clubs-grid-tools-v27012 h4 { margin: 0; }
#tab-clubs .clubs-grid-tools-v27012 select { max-width: 22rem; }
#tab-clubs .clubs-grid-wrap-v27012 { overflow-x: auto; border: 1px solid var(--club-line, #dbe4ee); border-radius: .6rem; background: #fff; }
#tab-clubs .clubs-grid-table-v27012 { border-collapse: separate; border-spacing: 0; font-size: .85rem; min-width: 100%; }
#tab-clubs .clubs-grid-table-v27012 th,
#tab-clubs .clubs-grid-table-v27012 td { padding: 0; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; text-align: center; }
#tab-clubs .clubs-grid-club-v27012 {
  position: sticky; left: 0; z-index: 1; background: #fff; text-align: left !important; white-space: nowrap;
  padding: .3rem .6rem !important; font-weight: 700; min-width: 9rem; border-right: 2px solid #dbe4ee !important;
}
#tab-clubs .clubs-grid-club-v27012 .clubs-swatch-v2690 { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; margin-right: .4rem; vertical-align: -.05rem; }
#tab-clubs .clubs-grid-table-v27012 thead th { background: #f4f8fb; font-weight: 700; }
#tab-clubs .clubs-grid-day-v27012 { min-width: 2.15rem; padding: .2rem 0 !important; line-height: 1.1; }
#tab-clubs .clubs-grid-day-v27012 > span { display: block; }
#tab-clubs .clubs-grid-dow-v27012 { font-size: .7rem; color: #64748b; font-weight: 600; }
#tab-clubs .clubs-grid-month-v27012 { font-size: .68rem; color: #0f3d6b; }
/* Weekends: a little grey, the same in every other way. */
#tab-clubs .clubs-grid-table-v27012 .is-weekend { background: #eef1f5; }
#tab-clubs .clubs-grid-table-v27012 thead .is-weekend { background: #e4e9ef; }
#tab-clubs .clubs-grid-table-v27012 .is-today { box-shadow: inset 2px 0 0 #0f3d6b, inset -2px 0 0 #0f3d6b; }
#tab-clubs .clubs-grid-cell-v27012 > button {
  display: block; width: 100%; min-height: 1.9rem; padding: 0; border: 0; border-radius: 0; background: transparent;
  color: #0f172a; font-weight: 800; font-size: .88rem;
}
#tab-clubs .clubs-grid-cell-v27012 > button:hover { background: #dceffc; color: #0f3d6b; }
#tab-clubs .clubs-grid-cell-v27012.is-zero > button { color: #94a3b8; font-weight: 600; }
#tab-clubs .clubs-grid-cell-v27012.is-cancelled { color: #b91c1c; }
#tab-clubs .clubs-grid-total-v27012 th,
#tab-clubs .clubs-grid-total-v27012 td { background: #f4f8fb; font-weight: 800; padding: .3rem 0; border-top: 2px solid #dbe4ee; }
#tab-clubs .clubs-grid-total-v27012 .is-weekend { background: #e4e9ef; }

/* ------------------------------------------------- the Database */
/* styles.css makes .table-wrap scroll smoothly, so a redraw that puts the
   scroll back would visibly slide from the first column every time. */
#tab-clubs .clubs-db-tools-v27012 { align-items: center; }
#tab-clubs .clubs-db-wrap-v27012 { scroll-behavior: auto; overflow: auto; max-height: calc(100dvh - 15rem); border: 1px solid var(--club-line, #dbe4ee); border-radius: .6rem; background: #fff; }
#tab-clubs .clubs-db-v27012 { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
#tab-clubs .clubs-db-v27012 th,
#tab-clubs .clubs-db-v27012 td {
  padding: .3rem .45rem; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; text-align: left; vertical-align: top;
  max-width: 16rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-clubs .clubs-db-v27012 thead tr:first-child th { position: sticky; top: 0; z-index: 3; background: #f4f8fb; font-weight: 800; }
#tab-clubs .clubs-db-v27012 thead tr:first-child th.is-requirement { background: #eaf3fb; }
#tab-clubs .clubs-db-v27012 thead .clubs-db-filters-v27012 th { position: sticky; top: 1.95rem; z-index: 3; background: #fbfdff; border-bottom: 2px solid #cbd9e5; overflow: visible; }
#tab-clubs .clubs-db-v27012 tbody th { position: sticky; left: 0; z-index: 2; background: #fff; font-weight: 700; }
/* The corner: above both sticky rows and the sticky column. Written with
   tr in it, or the row rules above outrank it and the next heading slides
   over "Name". */
#tab-clubs .clubs-db-v27012 thead tr th:first-child { left: 0; z-index: 5; }
#tab-clubs .clubs-db-filter-v27012 { display: grid; gap: .2rem; min-width: 7.5rem; }
#tab-clubs .clubs-db-filter-v27012 :is(select, input) { font-size: .78rem; padding: .15rem .3rem; min-height: 0; width: 100%; }
#tab-clubs .clubs-db-cell-v27012 {
  display: block; width: 100%; min-height: 1.6rem; padding: .1rem .25rem; margin: calc(-.1rem - 1px) calc(-.25rem - 1px); border: 1px dashed transparent;
  border-radius: .3rem; background: transparent; color: inherit; font: inherit; font-weight: inherit; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-clubs .clubs-db-cell-v27012:hover { border-color: #93c5fd; background: #eff6ff; color: inherit; }
#tab-clubs .clubs-db-v27012 .is-editing { overflow: visible; max-width: none; background: #fffbeb; }
#tab-clubs .clubs-db-v27012 .is-editing :is(input, select, textarea) { font-size: .85rem; min-width: 11rem; padding: .2rem .35rem; }
/* Save and Cancel under the box, so they are on screen with it. */
#tab-clubs .clubs-db-edit-actions-v27012 { display: flex; gap: .25rem; margin-top: .3rem; }

@media (max-width: 700px) {
  #tab-clubs .clubs-date-extra-v27012 { grid-column: 1 / -1; }
  #tab-clubs .clubs-sum-grid-v27012 { grid-template-columns: 1fr; }
}

/* v270.52: a filtered column's heading in the selected tab's colours, and Clear filters (N) beside it. */
#tab-clubs .clubs-db-v27012 thead tr:first-child th.is-filtered-v27052 {
  background: var(--admin-selected-subtab-bg, var(--admin-calendar-main-header-bg, #144f8c));
  color: var(--admin-selected-subtab-text, var(--admin-calendar-main-header-color, #fff));
  box-shadow: inset 0 -3px 0 var(--admin-selected-subtab-border, var(--admin-header-border, #f5c542));
}
#tab-clubs .clubs-db-v27012 thead tr:first-child th.is-filtered-v27052 :is(button, .clubs-db-arrow-v27015, .clubs-db-calcmark-v27038) { color: inherit; }
#tab-clubs .clubs-db-v27012 thead .clubs-db-filters-v27012 th.is-filtered-v27052 { border-bottom-color: var(--admin-selected-subtab-bg, var(--admin-calendar-main-header-bg, #144f8c)); }
#tab-clubs .clubs-db-tools-v27012 [data-db-clear-v27012].is-on-v27052 {
  background: var(--admin-selected-subtab-bg, var(--admin-calendar-main-header-bg, #144f8c));
  border-color: var(--admin-selected-subtab-border, var(--admin-header-border, #f5c542));
  color: var(--admin-selected-subtab-text, var(--admin-calendar-main-header-color, #fff));
}