/* SchoolDay v270.37: Clubs -- a staff member's record as fold-out sections
   (a darker grey header with an arrow, a faint line between, no frames),
   its Roles section, and the Auto-allocate window. No !important. */

/* ------------------------------------------------- the record's sections */
#tab-clubs .clubs-record-folds-v27037 { margin: .6rem 0 .4rem; border-bottom: 1px solid #e5e7eb; }
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 {
  border: 0; border-radius: 0; padding: 0; background: none; border-top: 1px solid #e5e7eb;
}
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .75rem; margin: 0;
  background: #e2e6eb; color: #1f2937; cursor: pointer; list-style: none;
}
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary:hover { background: #d7dce2; }
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary:focus-visible { outline: 3px solid #2563eb; outline-offset: -3px; }
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary::before {
  content: "\25B8"; color: #374151; font-size: .9rem; width: .8rem; transition: transform .15s;
}
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037[open] > summary::before { transform: rotate(90deg); }
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary h4 { margin: 0; font-size: .95rem; font-weight: 700; }
#tab-clubs .clubs-record-folds-v27037 > details.clubs-fold-v27037 > summary .muted { margin-left: auto; font-size: .82rem; color: #4b5563; }
#tab-clubs .clubs-fold-body-v27037 { padding: .65rem .75rem .8rem; }
#tab-clubs .clubs-fold-body-v27037 > :first-child { margin-top: 0; }
#tab-clubs .clubs-fold-body-v27037 > :last-child { margin-bottom: 0; }

/* ------------------------------------------------- Roles */
#tab-clubs .clubs-record-roles-v27037 { list-style: none; margin: 0 0 .6rem; padding: 0; }
#tab-clubs .clubs-record-roles-v27037 > li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; padding: .35rem 0; border-bottom: 1px solid #f1f3f5;
}
#tab-clubs .clubs-record-roles-v27037 > li:last-child { border-bottom: 0; }
#tab-clubs .clubs-record-role-when-v27037 { min-width: 13rem; font-size: .88rem; }
#tab-clubs .clubs-record-role-when-v27037 .clubs-swatch-v2690 { margin-right: .4rem; }
#tab-clubs .clubs-record-role-chips-v27037 { display: flex; flex-wrap: wrap; gap: .3rem; }
#tab-clubs .clubs-record-role-v27037 {
  display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .2rem .1rem .55rem; border-radius: 999px;
  background: #eef2f7; border: 1px solid #cbd5e1; font-size: .82rem; line-height: 1.3;
}
#tab-clubs .clubs-record-role-v27037.is-mandatory { background: #fff7ed; border-color: #fdba74; }
#tab-clubs .clubs-record-role-x-v27037 {
  min-height: 0; width: 1.35rem; height: 1.35rem; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #374151;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
#tab-clubs .clubs-record-role-x-v27037:hover { background: #dbe2ea; }
#tab-clubs .clubs-record-role-x-v27037:focus-visible { outline: 3px solid #2563eb; outline-offset: 0; }
#tab-clubs .clubs-record-role-add-v27037 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .7rem; }
#tab-clubs .clubs-record-role-add-v27037 .clubs-field-v2690 { flex: 1 1 12rem; margin: 0; }
#tab-clubs .clubs-record-role-add-v27037 select { width: 100%; }

/* ------------------------------------------------- Auto-allocate */
#tab-clubs .clubs-dialog-card-v2690.is-allocate-v27037 { width: min(96rem, 100%); }
#tab-clubs .clubs-alloc-v27037 { position: relative; }
#tab-clubs .clubs-alloc-step-v27037 { border-top: 1px solid #e5e7eb; padding: .7rem 0 .8rem; }
#tab-clubs .clubs-alloc-step-v27037:first-child { border-top: 0; padding-top: 0; }
#tab-clubs .clubs-alloc-step-v27037 > h4 { display: flex; align-items: center; gap: .55rem; margin: 0 0 .45rem; font-size: 1rem; }
#tab-clubs .clubs-alloc-num-v27037 {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: #1f2937; color: #fff; font-size: .8rem; font-weight: 800;
}
#tab-clubs .clubs-alloc-step-v27037.is-locked { opacity: .45; }
#tab-clubs .clubs-alloc-step-v27037.is-locked .clubs-alloc-num-v27037 { background: #9ca3af; }
#tab-clubs .clubs-alloc-step-v27037.is-done .clubs-alloc-num-v27037 { background: #16a34a; }
#tab-clubs .clubs-alloc-ticks-v27037 {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .15rem .9rem; margin: .3rem 0 .5rem; padding: 0; list-style: none;
}
#tab-clubs .clubs-alloc-ticks-v27037 label { display: flex; align-items: center; gap: .4rem; font-size: .88rem; }
#tab-clubs .clubs-alloc-ticks-v27037 .muted { font-size: .78rem; }
#tab-clubs .clubs-alloc-row-v27037 { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .8rem; margin: .2rem 0 .5rem; }
#tab-clubs .clubs-alloc-row-v27037 .clubs-field-v2690 { margin: 0; }
#tab-clubs .clubs-alloc-counts-v27037 { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: .35rem 1rem; margin: .3rem 0 .6rem; }
#tab-clubs .clubs-alloc-count-v27037 { display: flex; align-items: center; gap: .5rem; padding: .3rem .5rem; border-left: 4px solid var(--club-colour-v27037, #94a3b8); background: #f8fafc; }
#tab-clubs .clubs-alloc-count-v27037 > span:first-child { flex: 1 1 auto; font-size: .88rem; }
#tab-clubs .clubs-alloc-count-v27037 .muted { display: block; font-size: .75rem; }
#tab-clubs .clubs-alloc-stepper-v27037 { display: inline-flex; align-items: center; gap: .25rem; }
#tab-clubs .clubs-alloc-stepper-v27037 button {
  min-height: 0; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: .35rem; font-size: 1.05rem; font-weight: 800; line-height: 1;
}
#tab-clubs .clubs-alloc-stepper-v27037 input { width: 3.2rem; text-align: center; padding: .25rem; }

/* As narrow as the rota: the table takes the width its days need, not the window's. */
#tab-clubs .clubs-alloc-wrap-v27037 { width: fit-content; max-width: 100%; overflow-x: auto; border: 1px solid #dbe4ee; border-radius: .5rem; background: #fff; }
#tab-clubs .clubs-alloc-grid-v27037 { border-collapse: collapse; width: auto; font-size: .82rem; }
#tab-clubs .clubs-alloc-grid-v27037 th, #tab-clubs .clubs-alloc-grid-v27037 td { border-bottom: 1px solid #eef1f4; padding: 0; text-align: center; }
#tab-clubs .clubs-alloc-grid-v27037 th.clubs-alloc-club-v27037 {
  position: sticky; left: 0; z-index: 1; min-width: 10rem; max-width: 14rem; padding: .3rem .6rem .3rem .7rem; text-align: left; background: #fff;
  border-left: 5px solid var(--club-colour-v27037, #94a3b8); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tab-clubs .clubs-alloc-grid-v27037 thead th.clubs-alloc-club-v27037 { border-left-color: transparent; }
#tab-clubs .clubs-alloc-grid-v27037 .is-weekend { background: #f3f4f6; }
#tab-clubs .clubs-alloc-cell-v27037, #tab-clubs .clubs-alloc-grid-v27037 thead th:not(.clubs-alloc-club-v27037) { width: 2.4rem; min-width: 2.4rem; max-width: 2.4rem; height: 2.2rem; }
#tab-clubs .clubs-alloc-box-v27037 {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin: .1rem auto; padding: 0;
  min-height: 0; border: 2px solid var(--club-colour-v27037, #64748b); border-radius: .3rem; background: #fff; color: #0f172a;
  font-size: .8rem; font-weight: 800; cursor: pointer;
}
#tab-clubs .clubs-alloc-box-v27037.is-new { border-style: dashed; }
#tab-clubs .clubs-alloc-box-v27037.is-filled { background: #16a34a; border-color: #15803d; color: #fff; }
#tab-clubs .clubs-alloc-box-v27037.is-short { background: #f59e0b; border-color: #b45309; color: #111827; }
#tab-clubs .clubs-alloc-box-v27037.is-missing { background: #dc2626; border-color: #991b1b; color: #fff; }
#tab-clubs .clubs-alloc-box-v27037.is-closed { border: 1px dashed #9ca3af; background: repeating-linear-gradient(45deg, #f3f4f6 0 4px, #e5e7eb 4px 8px); color: #6b7280; font-weight: 600; }
#tab-clubs .clubs-alloc-empty-v27037 {
  display: block; width: 100%; height: 2.2rem; min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent; cursor: pointer;
}
#tab-clubs .clubs-alloc-empty-v27037:hover, #tab-clubs .clubs-alloc-empty-v27037:focus-visible { background: #eef2f7; color: #64748b; }
#tab-clubs .clubs-alloc-box-v27037:focus-visible, #tab-clubs .clubs-alloc-empty-v27037:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; }
#tab-clubs .clubs-alloc-box-v27037.is-picked, #tab-clubs .clubs-alloc-empty-v27037.is-picked { outline: 3px solid #2563eb; outline-offset: 1px; }

#tab-clubs .clubs-alloc-pop-v27037 {
  position: absolute; z-index: 5; width: 15.5rem; padding: .6rem .7rem .7rem; background: #fff; border: 1px solid #cbd5e1; border-radius: .6rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
}
#tab-clubs .clubs-alloc-pop-v27037 > p { margin: 0 0 .45rem; font-size: .85rem; font-weight: 700; }
#tab-clubs .clubs-alloc-pop-v27037 .clubs-alloc-stepper-v27037 { margin-bottom: .5rem; }
#tab-clubs .clubs-alloc-toggle-v27037 { display: flex; gap: .3rem; margin-bottom: .5rem; }
#tab-clubs .clubs-alloc-toggle-v27037 button { flex: 1 1 0; min-height: 0; padding: .3rem .4rem; }
#tab-clubs .clubs-alloc-toggle-v27037 button[aria-pressed="true"] { background: #1f2937; border-color: #1f2937; color: #fff; }
#tab-clubs .clubs-alloc-toggle-v27037 button[aria-pressed="false"] { background: #fff; color: #1f2937; border: 1px solid #cbd5e1; }
#tab-clubs .clubs-alloc-pop-v27037 .muted { font-size: .76rem; margin: 0 0 .45rem; }
#tab-clubs .clubs-alloc-actions-v27037 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin-top: .6rem; }
#tab-clubs .clubs-alloc-key-v27037 { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .4rem 0; font-size: .78rem; color: #4b5563; }
#tab-clubs .clubs-alloc-key-v27037 .clubs-alloc-box-v27037 { width: 1.1rem; height: 1.1rem; margin: 0 .3rem 0 0; vertical-align: middle; cursor: default; font-size: 0; }
#tab-clubs .clubs-alloc-results-v27037 { margin-top: .6rem; }
#tab-clubs .clubs-alloc-results-v27037 table { border-collapse: collapse; width: 100%; font-size: .82rem; }
#tab-clubs .clubs-alloc-results-v27037 th, #tab-clubs .clubs-alloc-results-v27037 td { border-bottom: 1px solid #eef1f4; padding: .25rem .45rem; text-align: left; vertical-align: top; }
#tab-clubs .clubs-alloc-results-v27037 .is-gap { color: #b91c1c; font-weight: 700; }
#tab-clubs .clubs-alloc-results-v27037 .is-kept { color: #6b7280; }