/* ClubOS additions on top of the template's styles.css.
   Raw values match the tokens in tailwind-config.js. */

.pill-neutral      { background: #F4F1EA; color: #3A3833; }
.pill-neutral .dot { background: #9A968F; }

select.input { appearance: auto; padding-right: 6px; }
.check { width: 15px; height: 15px; accent-color: #204098; cursor: pointer; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-danger { background: #fff; border-color: #EBC4C4; color: #A02323; }
.btn-danger:hover { background: #FBE1E1; }
.btn-sm { padding: 4px 9px; font-size: 11.5px; min-height: 0; }
/* Every button in a row is the same height as an .input beside it. */
.btn { min-height: 36px; }
.btn-icon { min-width: 36px; padding-left: 0; padding-right: 0; justify-content: center; }
/* Comfortable tap targets on phones for text-style buttons and chips. */
@media (max-width: 767px) {
  button.btn-link { min-height: 36px; display: inline-flex; align-items: center; }
  .card-head a.btn-link { padding: 8px; margin: -8px; }
  .f-pill { padding: 8px 12px; }
  .btn-sm { min-height: 36px; padding: 6px 12px; }
  .icon-btn, .fbtn { width: 40px; height: 40px; }
  .check { width: 20px; height: 20px; }
  .fs-item { padding: 10px 8px; }
  .fchip { padding: 6px 6px 6px 10px; }
  .fchip button { width: 28px; height: 28px; }
  .ffoot-clear { padding: 10px 12px; }
}
@media (max-width: 520px) {
  .tab { padding: 9px 8px; }
  /* Drawer buttons share the row evenly and wrap instead of spilling off-screen. */
  .drawer-foot .btn { flex: 1 1 auto; justify-content: center; min-height: 40px; margin-right: 0; }
}

/* A table cell that holds only bound text: let it truncate with an ellipsis.
   (.row .cell is display:flex, where text-overflow has no effect on bare text.) */
.row .cell[x-text] { display: block; }
.row .cell[x-text].justify-end { text-align: right; }

/* ---- Side-panel editing (replaces modal dialogs) ---- */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(15,12,8,0.32); z-index: 50; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(540px, 100vw);
  background: #fff; z-index: 51;
  display: flex; flex-direction: column;
  border-left: 1px solid #E7E2D8;
  box-shadow: -16px 0 40px rgba(28,24,18,0.14);
}
.drawer.is-wide { width: min(720px, 100vw); }
.drawer-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid #EDEAE3; flex-shrink: 0; }
.drawer-title { font-size: 15px; font-weight: 600; color: #1A1816; line-height: 1.25; }
.drawer-sub { font-size: 11.5px; color: #7A766F; margin-top: 1px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 18px; overscroll-behavior: contain; }
.drawer-foot {
  padding: 12px 18px; border-top: 1px solid #EDEAE3; background: #FBFAF7;
  display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-shrink: 0; flex-wrap: wrap;
}
.icon-btn {
  width: 36px; height: 36px; border-radius: 7px; border: 0; background: transparent; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #7A766F; cursor: pointer;
}
.icon-btn:hover { background: #F4F1EA; color: #1A1816; }

/* ---- Tabs ---- */
.tabs {
  display: flex; gap: 2px; border-bottom: 1px solid #EDEAE3;
  /* Scrolls sideways on narrow screens, but never shows a scrollbar: setting
     overflow-x alone makes overflow-y scrollable too, and the tabs' -1px
     margin then produced a stray vertical scrollbar. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; flex-shrink: 0;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  padding: 9px 12px; margin-bottom: -1px;
  font-size: 12.5px; font-weight: 500; color: #7A766F;
  background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
}
.tab:hover { color: #1A1816; }
.tab.is-active { color: #1A1816; font-weight: 600; border-bottom-color: #F8C808; }
.tab .count {
  margin-left: 5px; padding: 0 6px; border-radius: 9px;
  background: #F4F1EA; color: #7A766F; font-size: 10.5px; font-weight: 600;
}
.tab .count.is-hot { background: #D33A3A; color: #fff; }

/* ---- Form grid ---- */
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.fgrid .col-2 { grid-column: 1 / -1; }
@media (max-width: 520px) { .fgrid { grid-template-columns: 1fr; } }
.section-label {
  font-size: 10.5px; font-weight: 600; color: #9A968F;
  letter-spacing: 0.08em; text-transform: uppercase; margin: 20px 0 10px;
}
.section-label:first-child { margin-top: 0; }

/* ---- Table header row + selection bar ---- */
.thead { height: 38px !important; background: #FBFAF7 !important; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #7A766F; font-weight: 600; }
.row.is-selected { background: #F3F6FC; }
.row.is-click { cursor: pointer; }
.bulk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 10px;
  background: #1A1816; color: #fff; border-radius: 8px; font-size: 12.5px;
}
.bulk-bar .btn { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.18); color: #fff; }
.bulk-bar .btn:hover { background: rgba(255,255,255,0.2); }
.bulk-bar .btn { min-height: 32px; }
.num { font-variant-numeric: tabular-nums; }

/* ---- Booking calendar ----
   One column per court/table. Rows are the sport's slot length; bookings are
   absolutely positioned by start/end minute so any length draws correctly. */
.bcal { overflow: auto; border: 1px solid #EDEAE3; border-radius: 8px; background: #fff; max-height: calc(100vh - 230px); }
.bcal-grid { display: grid; grid-template-columns: 58px repeat(var(--cols), minmax(118px, 1fr)); min-width: max-content; }
.bcal-head {
  position: sticky; top: 0; z-index: 6;
  background: #FBFAF7; border-bottom: 1px solid #EDEAE3;
  padding: 9px 8px; font-size: 12px; font-weight: 600; color: #1A1816; text-align: center;
}
.bcal-head.is-corner { left: 0; z-index: 7; }
.bcal-times { position: sticky; left: 0; z-index: 5; background: #fff; border-right: 1px solid #EDEAE3; }
.bcal-time { position: absolute; right: 7px; font-size: 10.5px; color: #9A968F; transform: translateY(-50%); white-space: nowrap; }
.bcal-col { position: relative; border-right: 1px solid #F4F1EA; }
.bcal-slot {
  position: absolute; left: 0; right: 0;
  border-bottom: 1px solid #F4F1EA; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: transparent;
}
.bcal-slot:hover { background: #F7F5F0; color: #7A766F; }
.bcal-slot.is-past { background: repeating-linear-gradient(0deg, #FCFBF9, #FCFBF9); cursor: default; }
.bcal-slot.is-past:hover { color: transparent; }
.bcal-book {
  position: absolute; left: 3px; right: 3px;
  border-radius: 6px; padding: 3px 7px;
  font-size: 11.5px; line-height: 1.3; color: #fff;
  overflow: hidden; cursor: pointer;
  box-shadow: 0 1px 2px rgba(28,24,18,0.18);
  border-left: 3px solid rgba(0,0,0,0.22);
}
.bcal-book:hover { filter: brightness(1.06); }
.bcal-book b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcal-book span { opacity: .88; font-size: 10.5px; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; }
.bcal-book.is-taken { background: #E7E2D8; color: #7A766F; border-left-color: #C9C4B9; cursor: default; box-shadow: none; }
.bcal-closed {
  position: absolute; left: 0; right: 0; z-index: 2;
  background: repeating-linear-gradient(135deg, #F4F1EA, #F4F1EA 7px, #EAE5DA 7px, #EAE5DA 14px);
  color: #7A766F; font-size: 11px; font-weight: 600; padding: 4px 7px; overflow: hidden;
}
.bcal-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid #D33A3A; z-index: 4; pointer-events: none; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

/* ---- Printable invoice ---- */
@media print {
  body.page-canvas { background: #fff !important; }
  .no-print { display: none !important; }
  .print-sheet { border: 0 !important; box-shadow: none !important; margin: 0 !important; max-width: none !important; }
}

/* ---- Faceted filter panel ----
   Lifted from the template's list.html so any list page can use it. */
/* ==================== Filter panel ====================
   A slide-out drawer of faceted filters. Always position:fixed and slid with
   a GPU transform, so open/close is smooth and it never scrolls with the page.
   Width is the user-resizable --fw custom property (persisted to localStorage).
   Two docking modes on md+:
     pinned   — flush dock; the list reserves space beside it (margin-right)
     unpinned — floating card overlaying the list (inset + soft shadow)
   Below md it's always a flush overlay with a backdrop. */
.people-main { transition: margin-right .32s cubic-bezier(.22,.61,.36,1); }
@media (min-width: 768px) {
  .people-wrap.is-docked .people-main { margin-right: var(--fw, 320px); }
}
.people-wrap.is-resizing { user-select: none; cursor: col-resize; }
.people-wrap.is-resizing .people-main,
.people-wrap.is-resizing .fpanel { transition: none !important; }

.fpanel {
  position: fixed;
  top: 52px; right: 0; bottom: 0;
  width: min(var(--fw, 320px), calc(100vw - 24px));
  z-index: 40;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FCFBF8 0%, #F8F6F0 100%);
  border-left: 1px solid #E7E2D8;
  box-shadow: -12px 0 32px rgba(28,24,18,0.07);
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.22,.61,.36,1),
              box-shadow .32s ease, border-radius .32s ease,
              top .32s ease, bottom .32s ease, right .32s ease,
              visibility 0s 0s;
}
.fpanel.is-closed {
  transform: translateX(calc(100% + 32px));
  visibility: hidden;
  transition: transform .26s cubic-bezier(.45,.03,.65,.12),
              visibility 0s .26s;
}
@media (min-width: 768px) {
  .fpanel.is-pinned { box-shadow: none; }
  .fpanel:not(.is-pinned) {
    top: 62px; right: 10px; bottom: 10px;
    border: 1px solid #E7E2D8;
    border-radius: 14px;
    box-shadow: 0 28px 64px rgba(28,24,18,0.16), 0 6px 20px rgba(28,24,18,0.07);
    overflow: hidden;
  }
}

/* Drag-to-resize grip on the panel's left edge (md+). The 2px line lights
   up on hover/drag; double-click resets to the default width. */
.fgrip {
  position: absolute; left: -3px; top: 0; bottom: 0;
  width: 8px; cursor: col-resize;
  z-index: 2; display: none;
  touch-action: none;
}
@media (min-width: 768px) { .fgrip { display: block; } }
.fgrip::after {
  content: '';
  position: absolute; left: 3px; top: 0; bottom: 0; width: 2px;
  background: transparent;
  transition: background .15s;
}
.fgrip:hover::after,
.people-wrap.is-resizing .fgrip::after { background: #204098; }

.fhead {
  display: flex; align-items: center; gap: 6px;
  height: 50px; padding: 0 12px 0 18px;
  border-bottom: 1px solid #EDE9DF;
  flex-shrink: 0;
}
.fhead-title { font-size: 13px; font-weight: 600; color: #1A1816; }
.fbtn {
  width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #8A8579; background: transparent; border: 0; cursor: pointer;
  transition: background .12s, color .12s;
}
.fbtn:hover { background: #F0EDE4; color: #1A1816; }
.fbtn.is-on { color: #204098; background: rgba(32,64,152,0.08); }

/* Active-selection chips strip — every applied filter as a removable chip */
.fchips {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 10px 18px 12px;
  border-bottom: 1px solid #EDE9DF;
  flex-shrink: 0;
  max-height: 132px; overflow-y: auto;
}
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%;
  padding: 3px 6px 3px 9px;
  border-radius: 6px;
  background: #fff; border: 1px solid #E4DFD4;
  font-size: 11.5px; color: #3A3833;
  box-shadow: 0 1px 1px rgba(28,24,18,0.03);
}
.fchip .fchip-k { color: #9A968F; font-weight: 500; }
.fchip b { font-weight: 600; color: #1A1816; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fchip button {
  width: 15px; height: 15px; border-radius: 4px; border: 0; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: #B5B0A4; cursor: pointer;
  transition: background .1s, color .1s;
}
.fchip button:hover { background: #FBEAEA; color: #204098; }

.fbody {
  flex: 1; overflow-y: auto;
  padding: 4px 10px 16px;
  overscroll-behavior: contain;
}
.fbody::-webkit-scrollbar { width: 10px; }
.fbody::-webkit-scrollbar-thumb { background: #E0DBD0; border-radius: 5px; border: 3px solid #F8F6F0; }
.fbody::-webkit-scrollbar-thumb:hover { background: #C9C4B9; }

/* Collapsible sections with a staggered reveal when the panel opens */
.fsec { padding: 4px 0 12px; }
.fsec + .fsec { border-top: 1px solid #EFEBE1; }
.fpanel:not(.is-closed) .fsec {
  animation: fsec-in .4s cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(60ms + var(--i, 0) * 35ms);
}
@keyframes fsec-in {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .fpanel, .people-main { transition: none !important; }
  .fpanel:not(.is-closed) .fsec { animation: none; }
}
.fsec-head {
  width: 100%;
  display: flex; align-items: center; gap: 7px;
  padding: 9px 8px 7px;
  border: 0; background: transparent; cursor: pointer;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #7A766F;
  border-radius: 6px;
  text-align: left;
}
.fsec-head:hover { color: #1A1816; }
.fsec-n {
  min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #204098; color: #fff;
  font-size: 10px; letter-spacing: 0; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fsec-chev { margin-left: auto; color: #B5B0A4; transition: transform .18s; flex-shrink: 0; }
.fsec.is-open .fsec-chev { transform: rotate(180deg); }
.fsec-body { padding: 1px 8px 0; }

/* Search-within-section input */
.fsearch { position: relative; margin: 2px 0 7px; }
.fsearch svg {
  position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
  color: #ABA699; pointer-events: none;
}
.fsearch input {
  width: 100%; height: 30px;
  padding: 0 9px 0 29px;
  border: 1px solid #E2DDD2; border-radius: 7px;
  background: #fff; color: #1A1816; font-size: 12px;
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.fsearch input:focus { border-color: #1A1816; box-shadow: 0 0 0 3px rgba(28,24,18,0.05); }
.fsearch input::placeholder { color: #ABA699; }

/* Title type-ahead chips + suggestion dropdown */
.fs-chiprow { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 7px; }
.fs-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px 3px 9px;
  border-radius: 6px;
  background: #1A1816; color: #fff;
  font-size: 11.5px; font-weight: 500;
  max-width: 100%;
}
.fs-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-chip button {
  border: 0; background: transparent; color: #A39E92;
  cursor: pointer; padding: 0; line-height: 0;
}
.fs-chip button:hover { color: #fff; }
.fs-suggest {
  border: 1px solid #E7E2D8; border-radius: 9px;
  background: #fff;
  margin-top: 6px;
  max-height: 200px; overflow-y: auto;
  box-shadow: 0 10px 28px rgba(28,24,18,0.10);
  padding: 3px;
}

/* Live result count + clear-all footer */
.ffoot {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px 10px 18px;
  border-top: 1px solid #EDE9DF;
  background: #FBFAF6;
  flex-shrink: 0;
  font-size: 12px; color: #7A766F;
}
.ffoot b { color: #1A1816; font-weight: 600; font-variant-numeric: tabular-nums; }
.ffoot-clear {
  margin-left: auto;
  border: 0; background: transparent; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: #204098;
  padding: 4px 8px; border-radius: 6px;
  transition: background .12s;
}
.ffoot-clear:hover { background: rgba(32,64,152,0.07); }

/* Pill-style badge for the Filters toggle button showing active filter count */
.filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: #204098; color: #fff;
  font-size: 10.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Option rows */
.fs-list {
  display: flex; flex-direction: column;
  gap: 1px;
  max-height: 218px; overflow-y: auto;
  margin: 0 -4px;
  padding-right: 2px;
}
.fs-list::-webkit-scrollbar { width: 8px; }
.fs-list::-webkit-scrollbar-thumb { background: #E5E0D5; border-radius: 4px; border: 2px solid #F8F6F0; }
.fs-item {
  display: flex; align-items: center; gap: 9px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 12.5px; color: #3A3833;
  cursor: pointer;
  user-select: none;
  transition: background .1s;
}
.fs-item:hover { background: #F1EDE3; }
.fs-item.is-active { color: #1A1816; }
.fs-item.is-active .fs-label { font-weight: 600; }
.fs-check {
  width: 15px; height: 15px;
  border: 1.5px solid #C9C4B9;
  border-radius: 4.5px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; flex-shrink: 0;
  transition: background .12s, border-color .12s, transform .12s;
}
.fs-item:active .fs-check { transform: scale(0.88); }
.fs-item.is-active .fs-check { background: #204098; border-color: #204098; }
.fs-check svg { display: none; color: #fff; }
.fs-item.is-active .fs-check svg { display: block; }
.fs-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fs-count { font-size: 11px; color: #A39E92; font-variant-numeric: tabular-nums; }
.fs-item.is-active .fs-count { color: #204098; font-weight: 600; }

/* ---- Charts (reports and member pages) ----
   Colour by role: fixed categorical order for income streams, one hue for magnitude. */
.viz {
  --s-membership: #2a78d6; --s-tennis: #eb6834; --s-squash: #1baf7a; --s-pickleball: #eda100; --s-other: #e87ba4;
  --s-1: #2a78d6; --s-2: #eb6834;
  --ink: #1A1816; --ink-2: #52514e; --muted: #898781; --grid: #E9E6DF; --axis: #C9C4B9; --surface: #fff;
}
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11.5px; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; }
.hbar { display: grid; grid-template-columns: minmax(96px, 34%) 1fr auto; align-items: center; gap: 10px; padding: 5px 0; font-size: 12.5px; }
.hbar-label { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 10px; display: flex; gap: 2px; }
.hbar-fill { height: 100%; border-radius: 0 4px 4px 0; background: var(--s-1); min-width: 2px; }
.hbar-fill.first { border-radius: 0; }
.hbar-val { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.hbar:hover .hbar-label { color: var(--ink); }
.cols { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--axis); }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; position: relative; }
.col-bar { width: 100%; max-width: 44px; background: var(--s-1); border-radius: 4px 4px 0 0; min-height: 1px; }
.col:hover .col-bar { filter: brightness(0.9); }
.col-top { font-size: 10.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.col-x { display: flex; gap: 2px; margin-top: 5px; font-size: 10.5px; color: var(--muted); }
.col-x span { flex: 1; min-width: 0; text-align: center; overflow: hidden; white-space: nowrap; }
.insight { display: flex; gap: 8px; font-size: 12.5px; color: #3A3833; line-height: 1.5; }
.insight::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: #F8C808; margin-top: 7px; flex-shrink: 0; }

/* ---- Roster: one square per weekday showing a person's regular availability ---- */
.wk-day {
  width: 22px; height: 22px; border-radius: 5px; display: grid; place-items: center; flex-shrink: 0;
  font-size: 10.5px; font-weight: 600; background: #F4F1EA; color: #9A968F;
}
.wk-day.is-all { background: #E7F3EC; color: #0F7A3C; }
.wk-day.is-part { background: #FFF3DA; color: #8A5A00; }

/* ---- Roles & permissions matrix ---- */
.acl { width: 100%; border-collapse: collapse; font-size: 13px; }
.acl th { position: sticky; top: 0; z-index: 2; background: #FBFAF7; border-bottom: 1px solid #EDEAE3; padding: 8px 6px; font-size: 10.5px; font-weight: 600; color: #7A766F; text-transform: uppercase; letter-spacing: 0.02em; vertical-align: bottom; width: 80px; }
.acl th:first-child { width: auto; left: 0; z-index: 3; }
.acl td { padding: 8px 6px; border-bottom: 1px solid #F4F1EA; vertical-align: top; }
.acl td:first-child { padding-left: 18px; min-width: 230px; position: sticky; left: 0; z-index: 1; background: #fff; }
.acl th:last-child, .acl td:last-child { padding-right: 18px; }
/* On a phone the roles scroll sideways under a fixed label column. */
@media (max-width: 520px) {
  .acl th { width: 58px; font-size: 9.5px; padding-left: 3px; padding-right: 3px; }
  .acl td:first-child { min-width: 150px; max-width: 150px; padding-left: 14px; }
  .acl th:last-child, .acl td:last-child { padding-right: 12px; }
  .acl-detail { display: none; }
}
.acl tr.is-first td { border-top: 1px solid #EDEAE3; padding-top: 14px; }
.acl-area { font-size: 10.5px; font-weight: 600; color: #9A968F; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.acl-tick { text-align: center; color: #0F7A3C; font-weight: 700; }
.acl tr.is-first .acl-tick { padding-top: 34px; }
.acl-tick .check { vertical-align: middle; cursor: pointer; }
.acl-tick.is-fixed { color: #9A968F; }
.acl-tick.is-changed { background: #FFF3DA; }
.acl tr:hover td { background: #FBFAF7; }
.acl tr:hover td.is-changed { background: #FFEBC2; }

/* ---- Roster: the week grid (staff down the side, days across) ---- */
.ros { display: grid; grid-template-columns: 196px repeat(7, minmax(128px, 1fr)); min-width: 1100px; }
.ros-h, .ros-n, .ros-c { border-right: 1px solid #F1EEE7; border-bottom: 1px solid #F1EEE7; }
.ros-h { padding: 8px 8px 7px; background: #FBFAF7; font-size: 12px; font-weight: 600; color: #3A3833; min-height: 40px; }
.ros-h.is-today { box-shadow: inset 0 2px 0 #F8C808; color: #1A1816; }
.ros-n { padding: 8px 10px; background: #fff; position: sticky; left: 0; z-index: 2; min-width: 0; }
.ros-n.is-open { background: #FBFAF7; }
.ros-c { min-height: 60px; padding: 4px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; background: #fff; }
.ros-c:hover { box-shadow: inset 0 0 0 1px #DDD8CE; }
.ros-c.is-over { box-shadow: inset 0 0 0 2px #204098; }
.ros-c.av-all { background: #F2F9F4; }
.ros-c.av-part { background: #FFF9EA; }
.ros-c.av-off { background: repeating-linear-gradient(135deg, #F8F6F1 0 6px, #F0EDE6 6px 12px); }
.ros-c.av-away { background: #FDEFEF; }
.ros-c.is-openrow { background: #FBFAF7; }
.ros-av { font-size: 10px; line-height: 1.25; color: #9A968F; margin-top: auto; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shift { border: 1px solid #BFCBEA; background: #EDF1FB; border-radius: 6px; padding: 4px 6px; font-size: 11.5px; line-height: 1.3; color: #1A1816; cursor: grab; min-width: 0; }
.shift:hover { border-color: #204098; }
.shift.is-draft { border-style: dashed; background: #fff; }
.shift.is-open { background: #fff; border-color: #D89B14; }
.shift-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-s { color: #7A766F; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 4px; background: #C5C0B6; }
.shift-dot.is-pending { background: #D89B14; }
.shift-dot.is-confirmed { background: #1F9D55; }
.shift-warn { color: #A02323; font-weight: 700; }
.ev-chip { display: block; margin-top: 4px; padding: 2px 6px; border-radius: 4px; background: #204098; color: #fff; font-size: 10.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
/* ---- Roster: the calendar (days across, shifts as cards, staff to drag in from the side) ---- */
.rcal-wrap { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: 12px; align-items: start; }
.rcal-staff { position: sticky; top: 64px; max-height: calc(100vh - 76px); display: flex; flex-direction: column; overflow: hidden; }
.rcal-people { overflow-y: auto; padding: 6px; }
.rperson { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid transparent; border-radius: 8px; cursor: grab; user-select: none; }
.rperson:hover { background: #F7F5F0; }
.rperson.is-picked { background: #F3F6FC; border-color: #BFCBEA; }
.rg { display: grid; grid-template-columns: 52px repeat(7, minmax(124px, 1fr)); min-width: 940px; }
.rg > .ros-h:nth-child(8n) { border-right: 0; }
.rg-axis { position: relative; background: #FBFAF7; border-right: 1px solid #F1EEE7; border-bottom: 1px solid #F1EEE7; }
.rg-axis span { position: absolute; right: 6px; font-size: 10.5px; line-height: 1; color: #9A968F; white-space: nowrap; }
.rg-day { position: relative; border-right: 1px solid #F1EEE7; border-bottom: 1px solid #F1EEE7; cursor: cell; min-width: 0;
  background-image: linear-gradient(#F1EEE7 1px, transparent 1px); background-size: 100% var(--pxh); }
.rg-day:last-of-type { border-right: 0; }
.rg-band { position: absolute; left: 0; right: 0; pointer-events: none; }
.rg-band.is-yes { background: rgba(31, 157, 85, 0.10); }
.rg-band.is-no { background: repeating-linear-gradient(135deg, rgba(26, 24, 22, 0.02) 0 6px, rgba(26, 24, 22, 0.07) 6px 12px); }
.rg-band.is-away { background: rgba(211, 58, 58, 0.09); }
.rblock { position: absolute; box-sizing: border-box; border: 1px solid #BFCBEA; border-radius: 6px; background: #EDF1FB; padding: 4px 6px 3px; font-size: 11px; line-height: 1.3; color: #1A1816; overflow: hidden; cursor: grab; z-index: 1; }
.rblock:hover { border-color: #204098; z-index: 2; }
.rblock.is-confirmed { background: #E7F3EC; border-color: #9CCBAB; }
.rblock.is-pending { background: #FFF3DA; border-color: #E2C877; }
.rblock.is-draft { background: #fff; border: 1px dashed #9AA9D6; }
.rblock.is-open { background: #fff; border: 1px dashed #D89B14; }
.rblock.is-cant { background: #FBE1E1; border-color: #E3A3A3; }

/* ---- communications: the steps of writing a message ---- */
.mstep-bar { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.mstep { display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid #E5E1D8; border-radius: 999px; background: #fff; font-size: 13px; color: #6B675F; white-space: nowrap; cursor: pointer; min-height: 36px; }
.mstep b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #F4F1EA; font-size: 11px; font-weight: 600; color: #6B675F; }
.mstep.is-done b { background: #E7F3EC; color: #0F7A3C; }
.mstep.is-active { border-color: #204098; color: #1A1816; font-weight: 600; }
.mstep.is-active b { background: #204098; color: #fff; }
@media (max-width: 640px) { .mstep { min-height: 44px; } }
.rblock.fit-yes { box-shadow: 0 0 0 2px #1F9D55; }
.rblock.fit-maybe { box-shadow: 0 0 0 2px #D89B14; }
.rblock.fit-mine { box-shadow: 0 0 0 2px #204098; }
.rblock.fit-no { opacity: .45; }
.rblock.is-over { border-style: solid; border-color: #204098; box-shadow: 0 0 0 2px #204098; opacity: 1; }
.rblock-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
.rblock-n { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rblock.is-open .rblock-n { color: #8A5A00; }
.rblock-s { font-size: 10.5px; color: #6B675F; }
.rblock-h { position: absolute; left: 0; right: 0; height: 7px; cursor: ns-resize; z-index: 1; }
.rblock-h.is-top { top: 0; }
.rblock-h.is-bottom { bottom: 0; }
.rblock-h::after { content: ""; position: absolute; left: 50%; width: 18px; margin-left: -9px; height: 2px; border-radius: 1px; background: #204098; opacity: 0; }
.rblock-h.is-top::after { top: 2px; }
.rblock-h.is-bottom::after { bottom: 2px; }
.rblock:hover .rblock-h::after { opacity: .55; }
.rblock-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; display: none; place-items: center; font-size: 13px; line-height: 1; color: #6B675F; z-index: 2; }
.rblock:hover .rblock-x, .rblock-x:focus-visible { display: grid; }
.rblock-x:hover { background: #fff; color: #A02323; }
.rblock.is-ghost { left: 2px; right: 2px; background: rgba(32, 64, 152, 0.10); border: 1px dashed #204098; color: #204098; font-weight: 600; pointer-events: none; z-index: 3; }
/* Who can work this shift */
.cand { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid #F4F1EA; }
.cand.is-picked { background: #F3F6FC; }