/* EstimateIt release 1.23.0 */
/* Rota (1.22.0): the parts of the Rota page that style.css doesn't already have. Colours come from style.css's
   tokens, so the light and dark themes and their measured contrast carry over. */
main.rota{max-width:1240px}
.rota-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
.rota-biz{flex:0 1 260px}
.rota .panel.wide{width:100%;box-sizing:border-box}
.rota-tabs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.rota-tabs a{display:inline-block;padding:10px 14px;min-height:24px;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:3px solid transparent}
.rota-tabs a[aria-current="page"]{border-bottom-color:var(--accent);color:var(--accent)}
.rota-tabs a:hover{background:var(--wash)}
.rota-tab{display:flex;flex-direction:column;gap:16px}
.rota-tab[hidden]{display:none}
.rota-week-row{justify-content:space-between;align-items:flex-end}
.rota-venue{flex:0 1 260px}
.rota-weeknav{display:flex;gap:6px;flex-wrap:wrap}
.rota-stats{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0}
.rota-stats div{display:flex;flex-direction:column}
.rota-stats dt{font-size:.72rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rota-stats dd{margin:0;font-family:var(--mono);font-size:1.05rem}
.rota-stats .over{color:var(--bad)}
.chip.draft{border-style:dashed}
.chip.pub{border-color:var(--ok);color:var(--ok)}
.chip.changed{border-color:var(--warn);color:var(--warn)}

/* The board */
.rota-scroll{max-width:100%}
table.rota-board{min-width:900px;table-layout:fixed}
.rota-board th,.rota-board td{border:1px solid var(--line);padding:6px}
.rota-board thead th{text-transform:none;letter-spacing:0;font-size:.85rem;color:var(--ink);white-space:normal;vertical-align:bottom}
.rota-board thead th .btn{margin-top:4px}
.rota-board th[scope="row"]{width:170px;text-transform:none;letter-spacing:0;font-size:.9rem;color:var(--ink);white-space:normal;background:var(--surface);position:sticky;left:0;z-index:1}
.rota-board th[scope="row"] .muted{display:block;font-weight:400;font-size:.8rem}
.rota-board col.hours{width:128px}
.rota-board td.rota-hours{white-space:normal;text-align:left}
.rota-board td.cell{min-height:64px;height:64px}
.rota-board td.cell.drop{outline:3px dashed var(--accent);outline-offset:-3px}
.rota-board td.leave{background:repeating-linear-gradient(135deg,transparent 0 8px,var(--wash) 8px 16px)}
.rota-board td.today,.rota-board th.today{box-shadow:inset 0 3px 0 var(--accent)}
.rota-cell{display:flex;flex-direction:column;gap:4px}
.shift{display:block;width:100%;text-align:left;border:1px solid var(--control);border-left:5px solid var(--accent);background:var(--wash);color:var(--ink);border-radius:6px;padding:4px 6px;font-size:.82rem;line-height:1.3;cursor:pointer;min-height:24px}
.shift b{font-family:var(--mono);font-weight:600}
.shift .sec{display:block;color:var(--muted)}
.shift.warn{border-left-color:var(--warn)}
.shift.breach{border-left-color:var(--bad);border-color:var(--bad)}
.shift .flag{display:block;font-weight:600}
.shift.breach .flag{color:var(--bad)}
.shift.warn .flag{color:var(--warn)}
.shift[draggable="true"]{cursor:grab}
.shift:focus-visible,.rota-add:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.rota-add{border:1px dashed var(--control);background:transparent;color:var(--muted);border-radius:6px;font-size:.8rem;min-height:28px;min-width:24px;padding:2px 6px;cursor:pointer}
.rota-add:hover{color:var(--accent);border-color:var(--accent)}
.rota-hours{font-family:var(--mono);font-size:.85rem}
.rota-hours .warn{color:var(--warn)}
.rota-hours .breach{color:var(--bad)}
.rota-board tfoot td,.rota-board tfoot th{font-family:var(--mono);font-size:.82rem;color:var(--muted)}
.rota-daypick{display:none;gap:6px;flex-wrap:wrap}
.flag-icon{display:inline-block;width:1em;text-align:center;font-weight:700}

/* Gaps, checks, suggestions */
.rota-gapday{display:flex;flex-direction:column;gap:6px;padding:8px 0;border-top:1px solid var(--line)}
.rota-gapday:first-child{border-top:0}
.rota-gapday h3{font-size:1rem}
.rota-gaps{list-style:none;margin:0;padding:0;display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}
.rota-gaps li{display:flex;gap:8px;align-items:center;border:1px solid var(--bad);border-radius:8px;padding:4px 4px 4px 10px;font-size:.88rem}
.rota-gaps li .icon{color:var(--bad);font-weight:700}
.rota-checks{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.rota-checks .breach{color:var(--bad)}
.rota-checks .warn{color:var(--warn)}
.rota-checks button{background:none;border:0;padding:0;color:var(--accent);text-decoration:underline;cursor:pointer;font:inherit;min-height:24px}
.rota-issues{display:flex;flex-direction:column;gap:6px;font-size:.9rem}
.rota-issues p{margin:0;padding:6px 10px;border-radius:8px;border:1px solid}
.rota-issues .breach{border-color:var(--bad);color:var(--bad)}
.rota-issues .warn{border-color:var(--warn);color:var(--warn)}
.rota-suggest{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:10px}
.rota-suggest li{padding-left:4px}
.rota-suggest .row{justify-content:space-between}
.rota-suggest .why{display:block;color:var(--muted);font-size:.85rem}

/* Dialogs */
dialog.rota-dlg{border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);padding:20px;width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-sizing:border-box}
dialog.rota-dlg.wide{width:min(860px,calc(100vw - 32px))}
dialog.rota-dlg::backdrop{background:rgba(0,0,0,.45)}
dialog.rota-dlg form,dialog.rota-dlg{display:flex;flex-direction:column;gap:14px}
dialog.rota-dlg:not([open]){display:none}
.rota-fs{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;margin:0}
.rota-fs legend{font-weight:600;padding:0 4px}
.rota-checks-row{display:flex;flex-wrap:wrap;gap:6px 16px}
label.check{display:inline-flex;gap:8px;align-items:center;min-height:24px}
label.check input{width:20px;height:20px;margin:0}
input[type=time],input[type=date],input[type=file]{background:var(--bg);color:var(--ink);border:1px solid var(--control);border-radius:8px;padding:8px 10px;min-height:44px;font:inherit}
.rota-edit td{padding:4px 6px;vertical-align:middle}
.rota-edit input,.rota-edit select{width:100%;box-sizing:border-box}
.rota-edit input[type=number]{max-width:90px}

/* People, availability and leave, venues */
.rota-people td{vertical-align:middle}
.rota-people .acts{display:flex;gap:6px;flex-wrap:wrap}
.rota-people tr.archived td{color:var(--muted)}
.rota-import{background:var(--bg)}
.rota-import td{font-size:.88rem}
.rota-import tr.bad td{color:var(--bad)}
.rota-who{max-width:320px}
.rota-avail td{vertical-align:middle}
.rota-venues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rota-venues li{display:flex;justify-content:space-between;gap:8px;align-items:center;border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.rota-shiftlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rota-shiftlist li{border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:8px;padding:8px 12px}
.rota-shiftlist b{font-family:var(--mono)}

/* Phones: one day at a time */
@media (max-width:720px){
  .rota-daypick{display:flex}
  table.rota-board{min-width:0}
  .rota-board[data-day] .d{display:none}
  .rota-board[data-day="0"] .d0,.rota-board[data-day="1"] .d1,.rota-board[data-day="2"] .d2,.rota-board[data-day="3"] .d3,
  .rota-board[data-day="4"] .d4,.rota-board[data-day="5"] .d5,.rota-board[data-day="6"] .d6{display:table-cell}
  .rota-board th[scope="row"]{width:120px}
}
@media print{
  main.rota{max-width:none}
  .rota-tab:not(#tab-board),#checksPanel,.rota-bar .rota-actions,.rota-add,.rota-daypick,#gapsList,.rota-board thead .btn{display:none!important}
  .rota-board .d{display:table-cell!important}
  table.rota-board{min-width:0;font-size:9pt}
  .shift{border:1px solid #999;border-left-width:3px;background:#fff;color:#000}
}

/* 1.23.0: offers on the board, shifts nobody took, and the offer page */
.shift .offer{display:block;font-size:.8rem;color:var(--muted)}
.shift .offer.accepted,.shift .offer.confirmed{color:var(--ok);font-weight:600}
.shift .offer.late{color:var(--bad);font-weight:600}
.rota-unfilled{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rota-unfilled li{border:1px solid var(--bad);border-left-width:4px;border-radius:8px;padding:6px 10px;color:var(--bad);font-size:.9rem}
.rota-offers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.rota-offer-item{border:1px solid var(--line);border-left-width:4px;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.rota-offer-item p{margin:0}
.rota-offer-item.accepted,.rota-offer-item.confirmed{border-left-color:var(--ok)}
.rota-offer-item.declined,.rota-offer-item.expired,.rota-offer-item.gone{border-left-color:var(--control)}
.rota-offer-item.offered{border-left-color:var(--accent)}