/* This app's own styles (simmons-estate#122). The house look is css/style.css, copied from Shop Performance. */

.week-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-bottom: 14px; }
.week-field { margin-bottom: 0; }
.week-picker { display: flex; align-items: center; gap: 6px; }
.week-picker input { width: 180px; }
.week-picker .btn { min-width: 40px; font-size: 18px; }
.week-controls .check { margin-bottom: 8px; }

.week-table td.num, .week-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.week-table th.num .day-date { display: block; font-size: 11px; letter-spacing: 0; text-transform: none; }
.week-table td.has { font-weight: 600; color: var(--red); }
.week-table td.total, .week-table th.total { border-left: 1px solid var(--border); }
.week-table tr.shop-row td { background: var(--cream); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; border-top: 1px solid var(--border); }
.week-table tr.shop-row td.num { color: var(--dark); }
.week-table tbody tr.shop-row:hover td { background: var(--cream); }
.week-table tr.grand-row td { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; border-top: 2px solid var(--dark); }
/* The small grey second line in a cell - payroll number, "Still off", who checked it. On every table (Rupert, 9 Oct
   2026: it ran straight on after the bold text on SSP Notice Checks, where it was not switched on). */
.who-sub { display: block; font-size: 12px; font-weight: 400; color: var(--grey-text); margin-top: 3px; line-height: 1.35; }

.emp-table tr.shop-row td { background: var(--cream); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; }
.emp-table tbody tr.shop-row:hover td { background: var(--cream); }

.week-table td.has-ok { font-weight: 600; color: var(--ok); }
/* How a sick day was paid (holiday-sickness#6). */
.pay-tag { display: block; width: max-content; margin: 3px 0 0 auto; padding: 1px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; border: 1px solid; white-space: nowrap; }
.pay-unpaid { background: var(--cream); color: var(--grey-text); border-color: var(--border); }
.pay-csp { background: var(--ok-bg); color: var(--ok); border-color: #A5D6A7; }
.pay-ssp { background: var(--warn-bg); color: var(--warn); border-color: #FFE08A; }
.pay-both { background: #E3F2FD; color: #1565C0; border-color: #90CAF9; }
.pay-other { background: #FFEBEE; color: #B71C1C; border-color: #FFCDD2; }
.legend .pay-tag { display: inline-block; margin: 0; }
/* Names that open a record, and the SSP notice log (holiday-sickness#8). */
a.emp-link, .ssp-table a, .data-table td a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
a.emp-link:hover, .ssp-table a:hover, .data-table td a:hover { color: var(--red); text-decoration-color: var(--red); }
.ssp-note { width: 100%; min-width: 180px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface); font-size: 14px; margin-bottom: 6px; }
.ssp-btns { flex-wrap: nowrap; }
.ssp-table tr.ssp-done td { background: var(--cream); }
.ssp-table .note-del { margin-left: 0; padding: 4px 0 0; display: block; }
.clickable-row { cursor: pointer; }
.emp-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; flex: 1; }
.emp-filter { margin-bottom: 0; min-width: 240px; }
.emp-filters .check { margin-bottom: 8px; }
/* Every control in a filter row sits on the same line (Rupert, 13 Oct 2026: the Return to Work dates sat higher than
   Show and the search, carrying .field's bottom margin). */
.emp-filters .field { margin-bottom: 0; }
.emp-filters .field select, .emp-filters .field input, .emp-filters .search { height: 40px; }
.emp-filter-date { width: 170px; }
.rq-choices.rq-choices-sites { grid-template-columns: repeat(3, 1fr); }
.rq-choices-sites .rq-choice { padding: 20px 8px; font-size: 20px; }
.inst-many { color: #B71C1C; font-weight: 700; }
.contract-grid { display: grid; grid-template-columns: repeat(8, minmax(52px, 1fr)); gap: 6px; max-width: 640px; }
.contract-grid div { background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 6px 8px; text-align: center; }
.contract-grid span { display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); }
.contract-grid strong { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; }
.contract-grid .off strong { color: var(--grey-text); font-weight: 600; }
.note { border-top: 1px solid var(--cream); padding: 10px 0; }
.note:first-child { border-top: none; }
.note-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--grey-text); margin-bottom: 4px; }
.note-text { white-space: pre-wrap; line-height: 1.45; }
.note-del { margin-left: auto; background: none; border: none; color: var(--red); cursor: pointer; font-size: 13px; }
.login-box { max-width: 420px; margin: 60px auto; padding: 0 16px; }
.nav-signout { color: rgba(255,255,255,0.6); }
.sick-list td { vertical-align: middle; }
.freq-wrap { max-height: 420px; }

/* The holiday request form (holiday-sickness#2): one question per card, as a Jotform does. */
.rq-wrap { max-width: 620px; margin: 0 auto; padding: 56px 16px 60px; } /* clear of the dark-mode button */
.rq-progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.rq-progress-bar { height: 100%; width: 0; background: var(--red); transition: width 0.3s ease; }
.rq-step-label { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-text); margin: 10px 0 14px; min-height: 16px; }
.rq-card { background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--red); border-radius: 8px; padding: 30px 28px; box-shadow: 0 6px 24px rgba(0,0,0,0.06); animation: rq-in 0.25s ease; }
@keyframes rq-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rq-q { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 30px; letter-spacing: 0.02em; line-height: 1.15; margin-bottom: 6px; }
.rq-help { color: var(--grey-text); font-size: 16px; line-height: 1.45; margin-bottom: 18px; }
.rq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rq-choice { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 12px; border: 2px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; transition: border-color 0.12s, background 0.12s; }
.rq-choice:hover, .rq-choice:focus-visible { border-color: var(--red); background: var(--hover); outline: none; }
.rq-choice-icon { font-size: 40px; line-height: 1; }
.rq-input { width: 100%; font-family: 'Barlow Condensed', sans-serif; font-size: 34px; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 14px; border: 2px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--dark); }
.rq-input:focus { outline: none; border-color: var(--red); }
.rq-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }
.rq-nav-centre { justify-content: center; }
.rq-person { background: var(--cream); border-radius: 6px; padding: 18px 20px; margin: 8px 0 4px; }
.rq-person-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; }
.rq-person-where { color: var(--grey-text); font-size: 16px; margin-top: 2px; }
.rq-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rq-summary { margin: 4px 0 8px; font-size: 16px; }
.rq-days { max-height: 260px; }
.rq-days td { padding: 7px 12px; }
.rq-done { text-align: center; }
.rq-tick { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.req-days { font-size: 12px; color: var(--grey-text); white-space: normal; }
.req-days b { color: var(--dark); font-weight: 600; }
.badge-pending { background: #E3F2FD; color: #1565C0; border-color: #90CAF9; }

/* The Return to Work form (holiday-sickness#15), on top of the request form's cards. */
.rq-yesno .rq-choice { padding: 18px 12px; }
.rq-choice.rq-picked { border-color: var(--red); background: var(--hover); }
.rq-details { margin-top: 18px; }
.rq-wrap textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--dark); font: inherit; font-size: 16px; line-height: 1.45; resize: vertical; }
.rq-wrap textarea:focus { outline: none; border-color: var(--red); }
.rq-add-file { display: inline-block; margin-top: 12px; cursor: pointer; }
.rq-files { margin-top: 10px; }
.rq-file { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cream); font-size: 15px; word-break: break-all; }
.rq-file:first-child { border-top: none; }
/* Signatures are drawn dark on white in either theme, as they will be read. */
.sig-pad { display: block; width: 100%; height: auto; aspect-ratio: 600 / 180; background: #fff; border: 2px solid var(--border); border-radius: 6px; touch-action: none; cursor: crosshair; }
.sig-clear { margin: 4px 0 0; padding: 0; }
/* The Return to Work log and one form. */
.rtw-answers { display: grid; grid-template-columns: minmax(180px, 1fr) 2fr; gap: 0; }
.rtw-answers > div { padding: 10px 12px; border-top: 1px solid var(--cream); }
.rtw-answers > .rtw-q { color: var(--grey-text); font-size: 14px; }
.rtw-answers > .rtw-a { white-space: pre-wrap; line-height: 1.45; }
.rtw-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rtw-sigs img { width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.rtw-files a { display: inline-block; margin: 0 12px 6px 0; }
.rtw-thumbs img { max-width: 220px; max-height: 220px; border: 1px solid var(--border); border-radius: 4px; margin: 0 10px 10px 0; background: #fff; }
.from-eliza { font-size: 11px; color: var(--grey-text); margin-left: 6px; }

/* "All apps", back to the Simmons Apps landing page (holiday-sickness#21), beside the menu button. */
.topbar-left { display: flex; align-items: center; gap: 14px; }
.apps-link { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); text-decoration: none; white-space: nowrap; }
.apps-link:hover { color: var(--red); }
.apps-link:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.apps-link[hidden] { display: none; }
@media (max-width: 640px) {
  .rtw-answers { grid-template-columns: 1fr; }
  .rtw-answers > .rtw-a { border-top: none; padding-top: 0; }
  .rtw-sigs { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rq-card { padding: 22px 18px; }
  .rq-q { font-size: 25px; }
  .rq-dates { grid-template-columns: 1fr; }
  .rq-choices.rq-choices-sites { grid-template-columns: 1fr 1fr; }
  .contract-grid { grid-template-columns: repeat(4, 1fr); }
  .week-picker input { width: auto; flex: 1; }
  .week-field { width: 100%; }
}

/* A filter under every column heading (public/js/colfilter.js, holiday-sickness#23). */
.data-table .cf-row th { position: static; padding: 4px 6px 8px; text-transform: none; letter-spacing: 0; }
.cf-ctl { width: 100%; min-width: 72px; height: 30px; padding: 2px 6px; font-family: inherit; font-size: 13px; color: var(--dark); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; }
.cf-ctl.cf-on { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cf-bar { display: flex; gap: 14px; align-items: center; margin: 0 0 8px; font-size: 14px; color: var(--grey-text); }
.cf-bar[hidden] { display: none; }
.cf-bar button { padding: 0; font: inherit; color: var(--red); text-decoration: underline; background: none; border: none; cursor: pointer; }
.data-table tr.cf-hidden { display: none !important; }
/* Click a heading to sort (holiday-sickness#54): an arrow shows the column and the way. */
.data-table th.cf-sort { cursor: pointer; user-select: none; }
.data-table th.cf-sort:hover, .data-table th.cf-sort:focus-visible { color: var(--dark); }
.data-table th.cf-sort::after { content: "\2195"; display: inline-block; margin-left: 4px; opacity: 0.35; }
.data-table th.cf-sort[aria-sort="ascending"]::after { content: "\25B2"; opacity: 1; color: var(--red); }
.data-table th.cf-sort[aria-sort="descending"]::after { content: "\25BC"; opacity: 1; color: var(--red); }
@media (max-width: 640px) {
  /* A stacked table hides its headings; its filters become one panel above the rows. */
  .data-table.stack thead { display: block; }
  .data-table.stack thead tr:not(.cf-row) { display: none; }
  .data-table.stack thead tr.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .data-table.stack .cf-row th { display: block; padding: 0; border: none; background: none; }
  .data-table.stack .cf-row th:empty { display: none; }
  .data-table.stack .cf-row th::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey-text); }
  .cf-ctl { height: 40px; font-size: 15px; }
}

/* The HR forms (public/form.html, public/forms.html; holiday-sickness#28): sized for a tablet held upright. */
.rq-wrap.rq-tablet { max-width: 780px; }
.rq-tablet .rq-q { font-size: 34px; }
.rq-tablet .rq-help { font-size: 18px; }
.fm-q { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 1.2; margin: 0 0 12px; }
.fm-single .fm-q { font-size: 32px; }
.fm-fields > * + * { margin-top: 22px; }
.rq-tablet .field label { font-size: 16px; }
.rq-tablet .field input, .rq-tablet .field textarea { min-height: 58px; padding: 14px; font-size: 20px; border: 2px solid var(--border); border-radius: 6px; }
.rq-tablet .field input:focus, .rq-tablet .field textarea:focus { outline: none; border-color: var(--red); }
.rq-tablet .btn { min-height: 58px; padding: 0 30px; font-size: 18px; }
.rq-tablet .rq-choice { min-height: 80px; justify-content: center; font-size: 22px; }
.fm-options { grid-template-columns: 1fr 1fr; }
.rq-tablet .fm-multi, .rq-tablet .fm-agree { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 18px 20px; text-align: left; font-size: 20px; }
.fm-agree { width: 100%; }
.fm-tick { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border: 2px solid var(--border); border-radius: 6px; font-size: 22px; color: var(--red); }
.rq-picked .fm-tick { border-color: var(--red); }
.fm-info { font-size: 19px; line-height: 1.5; }
.fm-info p + p { margin-top: 12px; }
.fm-warn { margin-bottom: 16px; padding: 14px 16px; font-size: 17px; color: var(--warn); background: var(--warn-bg); border: 1px solid #FFE08A; border-radius: 6px; }
.rq-tablet .sig-pad { aspect-ratio: 900 / 260; }
.fm-all { color: var(--grey-text); text-decoration: underline; }
.fm-index-title { margin-bottom: 18px; }
.fm-index { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* The Forms page's tiles, as the Simmons Apps landing page's: light, left aligned, the icon in a small square, an
   arrow at the foot (Rupert, 19 Oct 2026, holiday-sickness#69). */
.fm-index { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.fm-tile { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 160px; padding: 22px 22px 36px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px; color: var(--dark); text-decoration: none;
  transition: border-color .12s, box-shadow .12s, transform .12s; }
.fm-tile:hover { border-color: var(--red); box-shadow: 0 4px 14px rgba(184,39,44,0.1); transform: translateY(-1px); }
.fm-tile:active { transform: scale(0.98); }
.fm-tile:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.fm-tile-icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 2px;
  border-radius: 10px; background: var(--hover); font-size: 24px; line-height: 1; }
.fm-tile-name { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.03em;
  text-transform: uppercase; line-height: 1.2; }
.fm-tile-desc { font-size: 14px; line-height: 1.4; color: var(--grey-text); padding-right: 20px; }
.fm-tile-arrow { position: absolute; right: 16px; bottom: 14px; color: var(--red); font-size: 22px; font-weight: 700; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .fm-tile { transition: none; } .fm-tile:hover, .fm-tile:active { transform: none; } }
/* For Employees / For Management (holiday-sickness#69): Maintenance's dashboard switch (its mt.css .vs) - a pill whose
   red thumb sits under the list you are on and slides across. */
.fm-switch-band { display: flex; justify-content: center; margin-bottom: 20px; }
.fm-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 420px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.fm-switch-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--red);
  box-shadow: 0 2px 6px rgba(184,39,44,0.35); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.fm-switch[data-on="management"] .fm-switch-thumb { transform: translateX(100%); }
.fm-switch-opt { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px;
  padding: 0 14px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 16px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; color: var(--grey-text);
  transition: color 0.2s; }
.fm-switch-opt:hover { color: var(--dark); }
.fm-switch-opt.rq-picked, .fm-switch-opt.rq-picked:hover { color: #fff; }
.fm-switch-opt:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 640px) { .fm-switch-opt { padding: 0 6px; gap: 5px; font-size: 14px; letter-spacing: 0.03em; } }
@media (prefers-reduced-motion: reduce) { .fm-switch-thumb, .fm-switch-opt { transition: none; } }
.fm-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-top: 28px; font-size: 17px; }
.fm-links a { color: var(--dark); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.fm-links a:hover { color: var(--red); text-decoration-color: var(--red); }
.fm-switch-band[hidden], .fm-links[hidden] { display: none; }
@media (max-width: 640px) {
  .fm-options, .fm-index { grid-template-columns: 1fr; }
  .rq-tablet .rq-q { font-size: 27px; }
}
.hr-section { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 30px 0 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; }

.fm-hours { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.fm-hours .field { margin: 0; }
.fm-hours .field label { text-align: center; }
.rq-tablet .fm-hours input { padding: 10px 4px; text-align: center; }
.fm-hours-total { margin-top: 8px; font-size: 17px; color: var(--grey-text); }
/* The earlier flexible working request, shown before "Is this the same request?" (holiday-sickness#74). */
.fm-previous { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--cream); font-size: 17px; }
.fm-previous-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.fm-previous dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.fm-previous dt { color: var(--grey-text); }
.fm-previous dd { margin: 0; }
/* A repeat: one box per entry, with Add another (holiday-sickness#71). */
.fm-repeat-item { padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.fm-repeat-item + .fm-repeat-item { margin-top: 12px; }
.fm-repeat-item .field + .field { margin-top: 12px; }
.fm-repeat-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; }
.fm-repeat-add { margin-top: 12px; }
@media (max-width: 640px) { .fm-hours { grid-template-columns: repeat(4, 1fr); } }

.rq-tablet .field select { min-height: 58px; padding: 12px; font-size: 20px; border: 2px solid var(--border); border-radius: 6px; }
.fm-back { text-decoration: none; }
.fm-back[hidden] { display: none; }