* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* The `hidden` attribute is only `display: none` in the UA stylesheet, so ANY
   author display rule (.findpanel is display:flex, dialog label.row too) beats
   it and the element stays on screen. This keeps hidden meaning hidden. */
[hidden] { display: none !important; }
body {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  color: #1c2430;
  background: #f4f6f8;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  /* the company's colour when one is set, the app's own navy otherwise */
  background: var(--brand-header, #1f3a5f);
  color: var(--brand-header-text, #fff); padding: 8px 14px;
  position: sticky; top: 0; z-index: 40;
}
.topbar .brand { display: inline-flex; align-items: center; gap: 8px; }
.brandlogo { height: 26px; width: auto; max-width: 160px; display: block; }
.authlogo { max-height: 56px; max-width: 100%; margin-bottom: 10px; }
.authsub { margin-top: -6px; font-size: 13px; }
.topbar a { color: #cfe0f5; text-decoration: none; }
.topbar .brand { font-weight: 600; font-size: 16px; color: #fff; }
.topbar .spacer { flex: 1; }
.topbar .muted { color: #9fb4cf; }
.dates { display: flex; align-items: center; gap: 6px; }
.navbtn {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  background: #2d517f; color: #fff !important; border: none;
  font: inherit; cursor: pointer; text-decoration: none !important;
}
.navbtn:hover { background: #3a659c; }
.navbtn.on { background: #e8b931; color: #1c2430 !important; font-weight: 600; }
.filtersel {
  font: inherit; font-size: 12.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid #2d517f; background: #2d517f; color: #fff; max-width: 170px;
}
.filtersel option { color: #1c2430; background: #fff; }

/* ---------- legend / brush toolbar ---------- */
.toolbar {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 14px; background: #fff; border-bottom: 1px solid #d8dee6;
  position: sticky; top: 44px; z-index: 39;
}
.toolbar .hint { color: #66707d; margin-right: 4px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  border: 2px solid transparent; border-radius: 6px;
  padding: 2px 8px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.chip span { font-size: 12px; }
.chip.armed { border-color: #1c2430; box-shadow: 0 0 0 2px #e8b931; }
.chip:disabled { cursor: default; }
.chip.eraser { background: #fff; border: 2px dashed #b8c0ca; }

/* ---------- the grid ---------- */
/* The plan page is a fixed-height column: the bars take what they need and the
   grid gets exactly the rest, so its horizontal scrollbar always sits on screen.
   A hardcoded max-height was wrong the moment the toolbar wrapped to two lines
   or the Who's-free panel opened - the scrollbar ended up below the fold. */
body.planpage { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
body.planpage > .topbar,
body.planpage > .toolbar,
body.planpage > .bookednote,
body.planpage > .filternote,
body.planpage > .findpanel { flex: 0 0 auto; }
body.planpage > .gridwrap { flex: 1 1 auto; min-height: 0; max-height: none; }

.gridwrap { overflow: auto; max-height: calc(100vh - 96px); scrollbar-gutter: stable; }
/* classic (always drawn) scrollbars rather than thin overlay ones that fade */
.gridwrap::-webkit-scrollbar { height: 15px; width: 15px; }
.gridwrap::-webkit-scrollbar-track { background: #e7ebf0; }
.gridwrap::-webkit-scrollbar-thumb {
  background: #8d9aab; border-radius: 8px;
  border: 3px solid #e7ebf0; background-clip: padding-box;
}
.gridwrap::-webkit-scrollbar-thumb:hover { background: #6f7f93; background-clip: padding-box; border: 3px solid #e7ebf0; }
.gridwrap::-webkit-scrollbar-corner { background: #e7ebf0; }
table.plan { border-collapse: separate; border-spacing: 0; }
table.plan th, table.plan td { border-right: 1px solid #e2e7ed; border-bottom: 1px solid #e2e7ed; }

table.plan thead th {
  position: sticky; background: #fff; z-index: 30;
  font-weight: 600; color: #3d4653;
}
table.plan thead tr.months th { top: 0; text-align: left; padding: 4px 8px; font-size: 13px; }
table.plan thead tr.daysrow th { top: 27px; width: 26px; min-width: 26px; padding: 2px 0; font-weight: 400; }
table.plan thead th.corner { left: 0; z-index: 35; background: #fff; }
.daysrow .dow { display: block; font-size: 9px; color: #8a93a0; text-transform: uppercase; }
.daysrow .dom { display: block; font-size: 12px; }
.daysrow th.we { background: #eef1f5; }
.daysrow th.today .dom { background: #1f3a5f; color: #fff; border-radius: 8px; }

tr.projhead td {
  position: sticky; left: 0;
  background: #dfe7f0; padding: 6px 10px; border-top: 2px solid #b9c6d6;
  max-width: 100vw; z-index: 20;
}
.projline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.projline strong { font-size: 14.5px; }
.projmeta { font-size: 12px; margin-top: 1px; }
.muted { color: #66707d; }

th.person {
  position: sticky; left: 0; z-index: 25;
  background: #fff; text-align: left; padding: 0;
  min-width: 190px; max-width: 190px;
}
.personbtn {
  display: block; width: 100%; border: none; background: none; font: inherit;
  text-align: left; padding: 3px 8px; cursor: pointer;
}
.personbtn:disabled { cursor: default; color: inherit; }
.personbtn .pname { display: block; font-weight: 600; font-size: 13px; }
.personbtn .prole { display: block; font-size: 11px; color: #8a93a0; }

td.cell {
  width: 26px; min-width: 26px; height: 30px;
  text-align: center; font-size: 11.5px; font-weight: 600;
  background: #fff; cursor: default; user-select: none;
  position: relative;
}
table.plan[data-editable] td.cell { cursor: pointer; }
td.cell.we { background: #eef1f5; }
td.cell.today { box-shadow: inset 2px 0 0 #1f3a5f, inset -2px 0 0 #1f3a5f; }
/* Bank holidays: non-working by default, shown as a red hatch. A status painted
   on top wins — /statuses.css is linked after this file, so its equally
   specific td.cell.st-* rule replaces the hatch when someone does work it. */
.hatch, td.cell.bh, td.findcell.bh {
  background-color: #fff5f5;
  background-image: repeating-linear-gradient(45deg,
    rgba(200, 0, 0, .28) 0, rgba(200, 0, 0, .28) 3px,
    transparent 3px, transparent 7px);
}
.daysrow th.bh { background-color: #fdeaea; }
.daysrow th.bh .dow, .daysrow th.bh .dom { color: #a81010; font-weight: 600; }

/* A status painted on a bank holiday replaces the hatch, so keep a red bar
   underneath it — otherwise a day worked (or marked Off Shift) stops looking
   like a bank holiday at all. */
td.cell.bh::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #c80000;
}

td.cell.clash::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 7px; height: 7px; border-radius: 50%;
  background: #d40000; border: 1px solid #fff;
}

/* Status colours are generated from the database and served as /statuses.css,
   linked AFTER this file so its `td.cell.st-*` rules win over `td.cell`'s
   white background. Edit them on the Key page, never here. */

/* ---------- who's free? ---------- */
tr.findrow th.findhead {
  color: #8a93a0; font-weight: 500; font-size: 12px; font-style: italic;
  padding: 2px 8px; background: #fafbfc;
}
td.findcell {
  width: 26px; min-width: 26px; height: 18px;
  background: #fafbfc; cursor: pointer; user-select: none; position: relative;
}
td.findcell.we { background: #eef1f5; }
td.findcell.today { box-shadow: inset 2px 0 0 #1f3a5f, inset -2px 0 0 #1f3a5f; }
/* A weekday up to the project's end date with nobody on a covering shift.
   Deliberately finer and quieter than the bank-holiday hatch - it is a prompt,
   not a warning. Selecting for Who's-free still wins the background. */
td.findcell.gap {
  background-color: #fff9ef;
  background-image: repeating-linear-gradient(45deg,
    rgba(200, 122, 0, .34) 0, rgba(200, 122, 0, .34) 1px,
    transparent 1px, transparent 6px);
}
td.findcell.bh.gap { background-color: #fff5f5; }
td.findcell.sel { background: #e8b931; background-image: none;
  box-shadow: inset 0 0 0 1px #b78d13; }
.gapcount { color: #a35c00; margin-left: .25rem; }

.findpanel {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; background: #fff8e3; border-bottom: 1px solid #e6d9a8;
  position: sticky; top: 44px; z-index: 38;
}
.findbtn {
  font: inherit; font-size: 12.5px; padding: 2px 10px; border-radius: 12px;
  border: 1px solid #b8c0ca; background: #fff; cursor: pointer;
}
.findbtn.full { border-color: #2e7d32; background: #e9f5ea; font-weight: 600; }
.findbtn:hover { background: #eef1f5; }
.findnote { font-size: 12px; }
/* the names are their own wrapping row, so each group heading can claim a
   full line of its own and its people start cleanly underneath it */
#findlist {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  width: 100%; margin: 2px 0;
}
.findgroup {
  flex-basis: 100%;
  font-size: 11px; font-weight: 700; color: #8a6d1a; text-transform: uppercase;
  letter-spacing: .04em; margin-top: 6px;
}
.findgroup:first-child { margin-top: 0; }

/* ---------- forms, dialogs, small pages ---------- */
button.small {
  font: inherit; font-size: 11.5px; padding: 1px 8px; border-radius: 5px;
  border: 1px solid #b8c0ca; background: #fff; cursor: pointer;
}
button.small:hover { background: #eef1f5; }

dialog {
  border: none; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
  padding: 18px 20px; width: 380px; max-width: 92vw;
}
dialog::backdrop { background: rgba(20, 30, 45, .45); }
dialog h3 { margin: 0 0 10px; }
dialog label { display: block; margin: 8px 0; font-size: 13px; color: #3d4653; }
dialog label.row { display: flex; gap: 6px; align-items: center; }
dialog input[type=text], dialog input[type=email], dialog input[type=password], dialog select {
  display: block; width: 100%; margin-top: 3px; padding: 6px 8px;
  border: 1px solid #b8c0ca; border-radius: 6px; font: inherit;
}
dialog fieldset { border: 1px solid #d8dee6; border-radius: 8px; margin-top: 10px; }
dialog legend { font-size: 12px; color: #66707d; padding: 0 6px; }
.btnrow { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.btnrow button {
  font: inherit; padding: 6px 14px; border-radius: 6px; border: none; cursor: pointer;
}
.btnrow button[type=submit] { background: #1f3a5f; color: #fff; }
.btnrow button.cancel { background: #e2e7ed; }
.btnrow button.danger { background: #fff; color: #b00000; border: 1px solid #d9a0a0; margin-right: auto; }

.authbox {
  max-width: 340px; margin: 12vh auto; background: #fff; padding: 26px 30px;
  border-radius: 12px; box-shadow: 0 6px 30px rgba(0,0,0,.12);
}
.authbox h1 { font-size: 20px; margin: 0 0 12px; color: #1f3a5f; }
.authbox label { display: block; margin: 10px 0; font-size: 13px; color: #3d4653; }
.authbox input { display: block; width: 100%; margin-top: 3px; padding: 7px 9px;
  border: 1px solid #b8c0ca; border-radius: 6px; font: inherit; }
.authbox button { margin-top: 14px; width: 100%; padding: 8px; border: none;
  border-radius: 6px; background: #1f3a5f; color: #fff; font: inherit; cursor: pointer; }
.authbox .err { color: #b00000; }

.page { max-width: 760px; margin: 24px auto; background: #fff; padding: 20px 26px;
  border-radius: 10px; }
table.simple { border-collapse: collapse; width: 100%; }
table.simple th, table.simple td { text-align: left; padding: 6px 10px;
  border-bottom: 1px solid #e2e7ed; font-size: 13.5px; }
.inline-form { display: flex; gap: 8px; flex-wrap: wrap; }
.linkrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- company branding ---------- */
.brandform { display: grid; gap: 10px; max-width: 520px; margin-top: 10px; }
.brandform label { font-size: 13px; color: #3d4653; display: grid; gap: 3px; }
.brandform input[type=text], .brandform input[type=email] {
  padding: 6px 8px; border: 1px solid #b8c0ca; border-radius: 6px; font: inherit;
}
.brandform input[type=color] {
  width: 64px; height: 30px; padding: 1px; border: 1px solid #b8c0ca;
  border-radius: 6px; background: #fff; cursor: pointer;
}
.dropzone {
  border: 2px dashed #b8c0ca; border-radius: 10px; padding: 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fbfcfd;
}
.dropzone.over { border-color: #1f3a5f; background: #eef4fb; }
.dropinner { cursor: pointer; flex: 1; min-width: 220px; }
.dropnote { display: block; font-size: 12px; color: #8a93a0; margin-top: 2px; }
.dropfile { display: block; font-size: 12.5px; color: #1f3a5f; margin-top: 6px; font-weight: 600; }
.logopreview { max-height: 54px; max-width: 190px; background: #fff;
  border: 1px solid #e2e7ed; border-radius: 6px; padding: 4px; }
.brandbtns { display: flex; gap: 8px; }
.inline-form input { padding: 6px 8px; border: 1px solid #b8c0ca; border-radius: 6px; font: inherit; }
.inline-form button, .page form button { font: inherit; padding: 6px 12px; border-radius: 6px;
  border: none; background: #1f3a5f; color: #fff; cursor: pointer; }
.page form button.small { background: #fff; color: #1c2430; border: 1px solid #b8c0ca; }
.page code { background: #eef1f5; padding: 3px 7px; border-radius: 5px; font-size: 13px; }
.page.wide { max-width: 1080px; }

/* ---------- resources page ---------- */
.resrow {
  /* fixed widths on the button columns so the header grid and every row grid
     resolve identical tracks — auto columns collapse in the (empty) header */
  display: grid; grid-template-columns: 1.3fr 1.5fr 1fr 1.3fr 0.9fr 52px 62px 178px;
  gap: 6px; align-items: center; margin: 4px 0;
}
.linkbtns { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.abtn {
  font-size: 11.5px; padding: 1px 8px; border-radius: 5px;
  border: 1px solid #b8c0ca; background: #fff; color: #1c2430; text-decoration: none;
}
.abtn:hover { background: #eef1f5; }
.sharebar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #f2f6fb; border: 1px solid #d5e0ee; border-radius: 8px;
  padding: 8px 12px; margin: 10px 0 16px;
}
.mailmsg { color: #2e7d32; font-weight: 600; }
.mailmsg.err { color: #b00000; }
.reshead { font-size: 12px; color: #8a93a0; text-transform: uppercase;
  letter-spacing: .03em; margin-top: 14px; }
.resrow input, .resrow select {
  padding: 5px 7px; border: 1px solid #d0d6de; border-radius: 6px;
  font: inherit; font-size: 13px; width: 100%;
}
button.small.danger { color: #b00000; border-color: #d9a0a0; }
.rolelist { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px; }
.rolechip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #eef1f5; border-radius: 14px; padding: 3px 6px 3px 12px; font-size: 13px;
}
.rolechip button { padding: 0 7px; border-radius: 10px; }

/* ---------- the key (statuses) page ---------- */
.strow {
  display: grid;
  grid-template-columns: 60px 1fr 56px 50px 50px 42px 60px 56px 44px 52px 50px 76px;
  gap: 6px; align-items: center; margin: 4px 0;
}
.strow input[type=text], .strow input[type=number] {
  padding: 5px 7px; border: 1px solid #d0d6de; border-radius: 6px;
  font: inherit; font-size: 13px; width: 100%;
}
.strow input[type=color] {
  width: 100%; height: 30px; padding: 1px; border: 1px solid #d0d6de;
  border-radius: 6px; background: #fff; cursor: pointer;
}
.strow input[type=checkbox] { justify-self: center; width: 16px; height: 16px; }
.strow .letterbox { text-align: center; font-weight: 700; }
.strow .usecount { text-align: center; font-size: 12px; }
.page .note { font-size: 12.5px; margin-top: 16px; }
.editkey { margin-left: 6px; }

/* bank holiday list on the key page */
.bhrow {
  display: grid; grid-template-columns: 168px 1fr 96px 90px;
  gap: 6px; align-items: center; margin: 3px 0;
}
.bhrow input[type=text], .bhrow input[type=date] {
  padding: 5px 7px; border: 1px solid #d0d6de; border-radius: 6px;
  font: inherit; font-size: 13px; width: 100%;
}
.bhswatch {
  display: inline-block; width: 34px; height: 18px; vertical-align: -4px;
  border: 1px solid #e0b4b4; border-radius: 4px; margin: 0 4px;
}
.bhpast { opacity: .55; }
.bhdate { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

.filternote {
  padding: 7px 14px; background: #eaf1fb; border-bottom: 1px solid #c3d6ee;
  font-size: 13px;
}
.filternote a { color: #1f3a5f; }

.bookednote {
  padding: 7px 14px; background: #eaf5ea; border-bottom: 1px solid #c6e0c6;
  font-size: 13px;
}