/* Barbican Sports Turf — the calendar.
   Sits on the same tokens as turf.css. Phone first: the manager runs the
   field from their phone, so the week grid scrolls sideways rather than
   squeezing seven nights into 380px. */

.tm-cal-bar-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.tm-cal-modes{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.tm-cal-modes button{border:0;background:none;font:inherit;font-size:13px;font-weight:500;
  padding:8px 14px;cursor:pointer;color:var(--ink-soft)}
.tm-cal-modes button + button{border-left:1px solid var(--line)}
.tm-cal-modes button.is-on{background:var(--bg-deep);color:#fff}
.tm-cal-nav{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.tm-cal-nav button{border:1px solid var(--line);background:var(--bg);border-radius:8px;
  font:inherit;font-size:14px;padding:7px 12px;cursor:pointer;line-height:1}
.tm-cal-nav button:hover{border-color:var(--ink)}
.tm-cal-title{font-family:var(--display);font-weight:500;font-size:19px;margin:0 0 2px}
.tm-cal-sum{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.tm-cal-sum-i{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:7px 12px;min-width:92px}
.tm-cal-sum-i strong{display:block;font-family:var(--display);font-size:17px;font-weight:500}
.tm-cal-sum-i span{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.tm-cal-sum-i.has-items{border-color:#c2903a;background:#fdf7ec}
.tm-cal-load{padding:26px 0;color:var(--ink-soft);font-size:14px}
.tm-cal-note{font-size:12.5px;color:var(--ink-soft);margin:0 0 10px}

/* ---- night ---- */
.tm-cal-night{display:grid;gap:5px}
.tm-cal-hr{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:stretch}
.tm-cal-h{font-size:11.5px;color:var(--ink-soft);padding-top:11px;white-space:nowrap;letter-spacing:.02em}
.tm-cal-slot{display:grid;gap:5px;min-width:0}
.tm-cal-hr.is-past .tm-cal-h{opacity:.5}
.tm-cal-open{border:1px dashed var(--line);background:transparent;border-radius:8px;padding:10px 12px;
  font:inherit;font-size:12.5px;color:var(--ink-soft);cursor:pointer;text-align:left}
.tm-cal-open:hover{border-color:#2f7d4f;color:#2f7d4f;background:#f2f8f4}
.tm-cal-gone{display:block;border:1px solid transparent;border-radius:8px;padding:10px 12px;
  font-size:12.5px;color:var(--ink-soft);opacity:.55}
.tm-cal-bk{display:grid;gap:2px;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--line);border-left:4px solid #2f7d4f;background:var(--bg);
  border-radius:8px;padding:9px 12px;position:relative}
.tm-cal-bk:hover{border-color:var(--ink)}
.tm-cal-bk b{font-size:14px;font-weight:600}
.tm-cal-bk span{font-size:12px;color:var(--ink-soft)}
.tm-cal-bk.is-new{border-left-color:#c2903a;background:#fdf7ec}
.tm-cal-bk.is-completed{border-left-color:#6b655c}
.tm-cal-bk.is-void{border-left-color:#b3402f;opacity:.6;text-decoration:line-through}
.tm-cal-tag{position:absolute;top:8px;right:10px;font-size:10px!important;letter-spacing:.06em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:20px;padding:1px 7px;background:var(--bg-alt)}
.tm-cal-cont{font-style:italic;opacity:.75}

/* ---- week ---- */
.tm-cal-wk{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tm-cal-wk-head,.tm-cal-wk-row{display:grid;grid-template-columns:52px repeat(7,minmax(74px,1fr));gap:3px;min-width:600px}
.tm-cal-wk-head{margin-bottom:4px;position:sticky;top:0;background:var(--bg-alt);z-index:1;padding-bottom:2px}
.tm-cal-wd{border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:6px 4px;
  font:inherit;cursor:pointer;display:grid;gap:0;line-height:1.2}
.tm-cal-wd b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);font-weight:500}
.tm-cal-wd i{font-style:normal;font-family:var(--display);font-size:16px}
.tm-cal-wd.is-today{border-color:#2f7d4f;background:#f2f8f4}
.tm-cal-wd-n{font-size:10.5px;color:#2f7d4f;font-weight:600}
.tm-cal-wk-body{display:grid;gap:3px}
.tm-cal-wk-row .tm-cal-h{padding-top:6px}
.tm-cal-cell{border:1px solid var(--line);border-radius:5px;background:var(--bg);min-height:26px;
  padding:0;font:inherit;overflow:hidden}
.tm-cal-cell.is-shut{background:repeating-linear-gradient(45deg,transparent,transparent 4px,rgba(0,0,0,.035) 4px,rgba(0,0,0,.035) 8px);border-color:transparent}
.tm-cal-cell.is-past{background:var(--bg-alt);border-color:transparent;opacity:.6}
.tm-cal-cell.is-free{cursor:pointer;border-style:dashed}
.tm-cal-cell.is-free:hover{border-color:#2f7d4f;background:#f2f8f4;border-style:solid}
.tm-cal-cell.is-bk{background:#2f7d4f;border-color:#2f7d4f;color:#fff;cursor:pointer;
  display:flex;align-items:center;padding:0 5px}
.tm-cal-cell.is-bk span{font-size:10.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-cal-cell.is-bk.is-new{background:#c2903a;border-color:#c2903a}
.tm-cal-cell.is-bk.is-completed{background:#6b655c;border-color:#6b655c}
.tm-cal-cell.is-bk.is-cancelled,.tm-cal-cell.is-bk.is-no_show{background:#cbb7b2;border-color:#cbb7b2;color:#5c4a45}

/* ---- month ---- */
.tm-cal-mh{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.tm-cal-mh span{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);text-align:center}
.tm-cal-m{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tm-cal-mc{border:1px solid var(--line);background:var(--bg);border-radius:8px;min-height:84px;
  padding:7px 8px;font:inherit;text-align:left;cursor:pointer;display:grid;align-content:start;gap:2px}
.tm-cal-mc:hover{border-color:var(--ink)}
.tm-cal-mc.is-blank{background:transparent;border-color:transparent;cursor:default;pointer-events:none}
.tm-cal-mc.is-today{border-color:#2f7d4f;box-shadow:inset 0 0 0 1px #2f7d4f}
.tm-cal-mc.has-bk{background:#f2f8f4}
.tm-cal-mc-d{font-family:var(--display);font-size:15px}
.tm-cal-mc-n{font-size:11px;font-weight:600;color:#2f7d4f}
.tm-cal-mc-n2{display:none;font-size:12px;font-weight:600;color:#2f7d4f}
.tm-cal-mc-v{font-size:10.5px;color:var(--ink-soft)}
.tm-cal-mc-free{font-size:10.5px;color:var(--ink-soft);opacity:.7}
.tm-cal-mc-new{font-size:10px;color:#8a6a1a;font-weight:600}
.tm-cal-bar{display:block;height:4px;border-radius:3px;background:#dfe7e1;overflow:hidden;margin-top:3px}
.tm-cal-bar i{display:block;height:100%;background:#2f7d4f}

/* ---- year ---- */
.tm-cal-yr{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tm-cal-y{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px;
  font:inherit;text-align:left;cursor:pointer;display:grid;gap:8px}
.tm-cal-y:hover{border-color:var(--ink)}
.tm-cal-y-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tm-cal-y-h b{font-family:var(--display);font-size:14px;font-weight:500}
.tm-cal-y-h em{font-style:normal;font-size:11px;color:var(--ink-soft)}
.tm-cal-y-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.tm-cal-y-g i{font-style:normal;display:grid;place-items:center;aspect-ratio:1;border-radius:3px;
  font-size:8.5px;color:#7d8a80;background:#eef1ee}
.tm-cal-y-g i.is-blank{background:transparent}
.tm-cal-y-g i.lv-1{background:#cfe3d5;color:#31513c}
.tm-cal-y-g i.lv-2{background:#9ecbaf;color:#1f3a28}
.tm-cal-y-g i.lv-3{background:#5fa87a;color:#fff}
.tm-cal-y-g i.lv-4{background:#2f7d4f;color:#fff}
.tm-cal-y-g i.is-today{outline:2px solid #1b1a17;outline-offset:1px}
.tm-cal-key{display:flex;align-items:center;gap:5px;margin-top:14px;font-size:11px;color:var(--ink-soft)}
.tm-cal-key i{width:12px;height:12px;border-radius:3px;background:#eef1ee;display:inline-block}
.tm-cal-key i.lv-1{background:#cfe3d5}
.tm-cal-key i.lv-2{background:#9ecbaf}
.tm-cal-key i.lv-3{background:#5fa87a}
.tm-cal-key i.lv-4{background:#2f7d4f}

@media (max-width:640px){
  .tm-cal-hr{grid-template-columns:64px 1fr;gap:7px}
  .tm-cal-mc{min-height:62px;padding:5px 5px}
  /* the cell is ~46px wide on a phone: show "3", not "3 bookings" */
  .tm-cal-mc-n{display:none}
  .tm-cal-mc-n2{display:block}
  .tm-cal-mc-v,.tm-cal-mc-free{font-size:9.5px}
  .tm-cal-mc-new{font-size:0}
  .tm-cal-mc-new::before{content:"!";font-size:11px;font-weight:700;color:#8a6a1a}
  .tm-cal-mc-d{font-size:13px}
  .tm-cal-m,.tm-cal-mh{gap:4px}
  .tm-cal-nav{margin-left:0;width:100%;justify-content:space-between}
  .tm-cal-modes{width:100%}
  .tm-cal-modes button{flex:1;padding:8px 4px}
}