/* SchoolDay v270.13: Clubs -- staff by date, the rota calendar, Manage Clubs
   tools, and the Dashboard's flags, totals, weeks and widgets.
   Loaded after admin-clubs-v27012.css and before admin-function-shell-v2365.css. */

[hidden].clubs-add-widgets-v27013 { display: none !important; }

/* ------------------------------------------------- the batch-of-days form */
#tab-clubs .clubs-pattern-days-v27013 { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
#tab-clubs .clubs-pattern-days-v27013 .clubs-day-v2690 { padding: .2rem .45rem; font-size: .85rem; }
#tab-clubs .clubs-pattern-count-v27013 { margin: .2rem 0 .5rem; font-weight: 700; }

/* ------------------------------------------------- the rota calendar */
#tab-clubs .clubs-rota-key-v27013 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .85rem; }
#tab-clubs .clubs-rota-wrap-v27013 { overflow: auto; max-height: calc(100dvh - 15rem); scroll-behavior: auto; border: 1px solid var(--club-line, #dbe4ee); border-radius: .6rem; background: #fff; }
#tab-clubs .clubs-rota-v27013 { border-collapse: separate; border-spacing: 0; font-size: .85rem; }
#tab-clubs .clubs-rota-v27013 th,
#tab-clubs .clubs-rota-v27013 td { padding: 0; border-bottom: 1px solid #eef2f7; border-right: 1px solid #f1f5f9; text-align: center; }
#tab-clubs .clubs-rota-v27013 thead th { position: sticky; top: 0; z-index: 2; background: #f4f8fb; font-weight: 700; }
#tab-clubs .clubs-rota-v27013 thead th.is-weekend { background: #e4e9ef; }
#tab-clubs .clubs-rota-v27013 thead tr th:first-child { z-index: 5; }
#tab-clubs .clubs-rota-name-v27013 {
  position: sticky; left: 0; z-index: 1; background: #fff; text-align: left !important; white-space: nowrap;
  padding: .25rem .6rem !important; min-width: 10rem; border-right: 2px solid #dbe4ee !important;
}
#tab-clubs .clubs-rota-person-v27013 {
  border: 0; background: none; padding: 0; color: #0f3d6b; font-weight: 800; text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
#tab-clubs .clubs-rota-total-v27013 { padding: .25rem .6rem !important; font-weight: 800; white-space: nowrap; background: #f4f8fb; border-left: 2px solid #dbe4ee; }
#tab-clubs .clubs-rota-cell-v27013 { min-width: 2.15rem; height: 2.1rem; }
#tab-clubs .clubs-rota-cell-v27013.is-weekend { background: #eef1f5; }
#tab-clubs .clubs-rota-cell-v27013.is-today,
#tab-clubs .clubs-rota-v27013 thead th.is-today { box-shadow: inset 2px 0 0 #0f3d6b, inset -2px 0 0 #0f3d6b; }

/* A day: nothing when not working; a dark grey square outline when working
   (half of it for AM or PM, with the word); the club's colour inside when at
   a club. */
#tab-clubs .clubs-rota-day-v27013 {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; position: relative;
  width: 1.5rem; height: 1.5rem; margin: .15rem auto; padding: 0; border: 2px dashed transparent; border-radius: .2rem;
  background: transparent; cursor: pointer; vertical-align: middle; overflow: hidden;
}
#tab-clubs .clubs-rota-day-v27013:hover { border-color: #94a3b8; }
#tab-clubs .clubs-rota-day-v27013:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; }
#tab-clubs .clubs-rota-day-v27013.is-working { border: 2px solid #374151; }
#tab-clubs .clubs-rota-day-v27013.has-club { background: var(--rota-fill); }
#tab-clubs .clubs-rota-day-v27013.part-am.has-club,
#tab-clubs .clubs-rota-day-v27013.part-pm.has-club { background: none; }
#tab-clubs .clubs-rota-day-v27013.part-am::before,
#tab-clubs .clubs-rota-day-v27013.part-pm::before {
  content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: #d1d5db;
}
#tab-clubs .clubs-rota-day-v27013.part-am::before { left: 0; }
#tab-clubs .clubs-rota-day-v27013.part-pm::before { right: 0; }
#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 > span {
  position: relative; font-size: .55rem; font-weight: 900; color: #111827; background: rgba(255, 255, 255, .85); border-radius: .15rem; padding: 0 .1rem; line-height: 1.1;
}
#tab-clubs .clubs-rota-day-v27013.is-key { width: 1.1rem; height: 1.1rem; margin: 0 .1rem; cursor: default; }

#tab-clubs .clubs-record-days-v27013 { list-style: none; margin: .3rem 0; padding: 0; columns: 2 14rem; }
#tab-clubs .clubs-record-days-v27013 li { break-inside: avoid; padding: .1rem 0; }
#tab-clubs .clubs-record-danger-v27013 { border-top: 1px solid var(--club-line, #dbe4ee); padding-top: .6rem; margin-top: .6rem; }

/* ------------------------------------------------- Manage Clubs: tools beside each club */
#tab-clubs .clubs-manage-list-v2690 > li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
#tab-clubs .clubs-manage-list-v2690 > li > .clubs-manage-row-v2690 { flex: 1 1 22rem; width: auto; }
#tab-clubs .clubs-manage-tools-v27013 { display: flex; flex-wrap: wrap; gap: .3rem; }
#tab-clubs .clubs-manage-tools-v27013 > button { padding: .35rem .6rem; font-size: .82rem; }

/* ------------------------------------------------- the Dashboard */
#tab-clubs .clubs-dash-tools-v27011 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
#tab-clubs .clubs-dash-tools-v27011 > #clubsFullscreenV27011 { grid-column: 3; justify-self: end; }
#tab-clubs .clubs-add-widgets-v27013 {
  grid-column: 2; padding: .25rem .7rem; font-size: .78rem; font-weight: 700; border-radius: 999px;
  background: #e5e7eb; color: #374151; border: 1px solid #d1d5db;
}
#tab-clubs .clubs-add-widgets-v27013:hover { background: #d1d5db; }

/* Widgets: a number in a coloured box. White text on the colour, so the
   colours offered are all dark. */
#tab-clubs .clubs-widgets-v27013 { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 .8rem; align-items: stretch; }
#tab-clubs .clubs-widget-v27013 {
  position: relative; display: flex; flex-direction: column; min-width: 9.5rem; max-width: 16rem; padding: .6rem .8rem;
  border-radius: .7rem; background: var(--widget-colour, #0f3d6b); color: #fff;
}
#tab-clubs .clubs-widget-value-v27013 { font-size: 1.9rem; font-weight: 900; line-height: 1.05; }
#tab-clubs .clubs-widget-label-v27013 { font-weight: 800; }
#tab-clubs .clubs-widget-detail-v27013 { font-size: .75rem; opacity: .9; }
#tab-clubs .clubs-widget-tools-v27013 { display: flex; gap: .3rem; margin-top: .35rem; }
#tab-clubs .clubs-widget-tools-v27013 button {
  padding: .1rem .45rem; font-size: .72rem; border-radius: .35rem; background: rgba(255, 255, 255, .92); color: #0f172a; border: 0;
}
#tab-clubs .clubs-widget-add-v27013 {
  min-width: 7rem; border: 2px dashed #cbd5e1; border-radius: .7rem; background: #f8fafc; color: #475569; font-weight: 800;
}
#tab-clubs .clubs-widget-sentence-v27013 { display: flex; flex-wrap: wrap; gap: .5rem .8rem; }
#tab-clubs .clubs-widget-preview-v27013 { margin: .5rem 0; }
#tab-clubs .clubs-widget-preview-v27013 input[type="color"],
#tab-clubs input#widgetColourV27013 { width: 4rem; height: 2.2rem; padding: .1rem; }

/* Under each club's name: its totals for the range. */
#tab-clubs .clubs-grid-sums-v27013 { display: flex; flex-direction: column; margin-top: .2rem; font-size: .72rem; font-weight: 600; color: #475569; }
#tab-clubs .clubs-grid-sums-v27013 b { color: #0f172a; }
#tab-clubs .clubs-grid-table-v27012 th.clubs-grid-club-v27012[rowspan] { vertical-align: top; }

/* The week row: one merged cell a week, no lines between its days, and a
   darker line where each week starts -- down the whole table. */
#tab-clubs .clubs-grid-week-v27013 td {
  background: #f8fafc; font-size: .7rem; color: #334155; padding: .2rem .1rem; border-bottom: 2px solid #dbe4ee; border-right: 0;
  line-height: 1.25; white-space: nowrap;
}
#tab-clubs .clubs-grid-week-v27013 td > span { display: inline-block; margin: 0 .3rem; }
#tab-clubs .clubs-grid-week-v27013 td b { color: #0f172a; }
#tab-clubs .clubs-grid-week-v27013 td.is-narrow > span { margin: 0; }
#tab-clubs .clubs-grid-table-v27012 .is-week-start { border-left: 2px solid #475569 !important; }

/* A date nobody is working is red; short of the ratio, orange. Each also
   differs in shape -- solid red with white figures, an orange ring with
   dark figures -- so neither depends on colour alone. */
#tab-clubs .clubs-grid-cell-v27012.is-nostaff > button { background: #b91c1c; color: #fff; }
#tab-clubs .clubs-grid-cell-v27012.is-nostaff > button:hover { background: #991b1b; color: #fff; }
#tab-clubs .clubs-grid-cell-v27012.is-short > button { background: #ffedd5; color: #7c2d12; box-shadow: inset 0 0 0 2px #ea580c; }
#tab-clubs .clubs-grid-cell-v27012.is-short > button:hover { background: #fed7aa; }
#tab-clubs .clubs-grid-key-v27013 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .8rem; margin: .35rem 0 0; }
#tab-clubs .clubs-grid-keybox-v27013 { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.3rem; font-weight: 800; font-size: .78rem; }
#tab-clubs .clubs-grid-keybox-v27013.is-nostaff { background: #b91c1c; color: #fff; }
#tab-clubs .clubs-grid-keybox-v27013.is-short { background: #ffedd5; color: #7c2d12; box-shadow: inset 0 0 0 2px #ea580c; margin-left: .5rem; }
#tab-clubs .clubs-grid-under-v27013 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: .5rem; }

/* The club page: who is working each date. */
#tab-clubs .clubs-date-staff-v27013 { font-size: .8rem; color: #334155; }
#tab-clubs .clubs-date-staff-v27013.is-none { color: #b91c1c; font-weight: 800; }