/* Resto design system — shared CSS (tokens, components). Linked by index.html and the standalone pages. */ :root{ --ink:#182018; --ink-soft:#4B564D; --ink-faint:#7C8678; --paper:#EEF0EA; --surface:#FFFFFF; --surface-2:#F5F6F1; --border:#DBDED4; --border-strong:#C4C9BB; --brand:#2F4F3E; --brand-ink:#FFFFFF; --brand-soft:#E3EBE4; --accent:#A97F2E; --accent-ink:#241C08; --accent-soft:#F3E7CC; --success:#316B41; --success-bg:#E1F0E4; --warning:#A97F2E; --warning-bg:#F5EBD3; --danger:#A34430; --danger-bg:#F6E1DA; --focus:#2F4F3E; --neutral:#4B564D; --neutral-bg:#E8EBE2; --toast-bg:#20261F; --toast-ink:#F2F4EE; --toast-error-bg:#7A2E1E; --toast-ok-bg:#22492F; --toast-line:rgba(242,244,238,.5); --toast-hover:rgba(242,244,238,.14); --on-brand-line:rgba(255,255,255,.55); --scrim:rgba(10,14,10,.35); --scrim-strong:rgba(10,14,10,.55); --scrim-media:rgba(10,14,10,.85); --print-paper:#FFFFFF; --print-ink:#000000; --font-display:'Fraunces', Georgia, 'Times New Roman', serif; --font-ui:'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; /* ---- type scale: five steps. Phone (<=820px) lifts body text to 15px and fields to 16px ---- */ --fs-xs:13px; /* captions, hints, grid cells */ --fs-base:14px; /* body text, buttons, inputs */ --fs-md:17px; /* card subheadings */ --fs-lg:22px; /* section headings */ --fs-xl:30px; /* page titles */ /* ---- spacing: 4px step ---- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:32px; /* ---- radii ---- */ --r-sm:8px; /* inputs, buttons */ --r-md:12px; /* cards, panels */ --r-pill:99px; /* ---- controls ---- */ --h-btn:40px; --h-btn-sm:32px; --h-touch:44px; --shadow-1: 0 1px 2px rgba(24,32,24,0.06), 0 1px 1px rgba(24,32,24,0.04); --shadow-2: 0 10px 28px rgba(24,32,24,0.16), 0 2px 6px rgba(24,32,24,0.08); --shadow-toast: 0 10px 28px rgba(24,32,24,0.28); color-scheme: light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --ink:#E7EAE1; --ink-soft:#AAB3A4; --ink-faint:#78826F; --paper:#12160F; --surface:#1A201A; --surface-2:#20261F; --border:#2C342A; --border-strong:#3B4536; --brand:#82B896; --brand-ink:#0E1710; --brand-soft:#223229; --accent:#D9B36B; --accent-ink:#241C08; --accent-soft:#332911; --success:#6FBE85; --success-bg:#1E3324; --warning:#D9B36B; --warning-bg:#332911; --danger:#E08669; --danger-bg:#3A241C; --focus:#82B896; --neutral:#AAB3A4; --neutral-bg:#2A3228; --toast-bg:#2F382D; --toast-ok-bg:#25502F; --toast-error-bg:#8A3322; color-scheme: dark; } } :root[data-theme="dark"]{ --ink:#E7EAE1; --ink-soft:#AAB3A4; --ink-faint:#78826F; --paper:#12160F; --surface:#1A201A; --surface-2:#20261F; --border:#2C342A; --border-strong:#3B4536; --brand:#82B896; --brand-ink:#0E1710; --brand-soft:#223229; --accent:#D9B36B; --accent-ink:#241C08; --accent-soft:#332911; --success:#6FBE85; --success-bg:#1E3324; --warning:#D9B36B; --warning-bg:#332911; --danger:#E08669; --danger-bg:#3A241C; --focus:#82B896; --neutral:#AAB3A4; --neutral-bg:#2A3228; --toast-bg:#2F382D; --toast-ok-bg:#25502F; --toast-error-bg:#8A3322; color-scheme: dark; } *{ box-sizing:border-box; } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-ui); font-size:var(--fs-base); line-height:1.5; } h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; text-wrap:balance; } button, input, select, textarea{ font-family:inherit; font-size:inherit; color:inherit; } table{ border-collapse:collapse; } ::selection{ background:var(--brand-soft); } :focus-visible{ outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; } .eyebrow{ font-family:var(--font-ui); font-size:var(--fs-xs); font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); } .num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ---------- layout ---------- */ .app{ display:grid; grid-template-columns:236px 1fr; min-height:100vh; } .sidebar{ background:var(--surface); border-right:1px solid var(--border); display:flex; flex-direction:column; padding:20px 14px; gap:18px; } .brand{ display:flex; align-items:baseline; gap:2px; padding:2px 8px 4px; } .brand-mark{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg); color:var(--ink); } .brand-mark-2{ font-family:var(--font-display); font-weight:400; font-style:italic; font-size:var(--fs-lg); color:var(--brand); } .venue-box{ padding:10px 12px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); } .venue-box .eyebrow{ margin-bottom:3px; } #venueName{ font-weight:600; font-size:var(--fs-base); } .nav{ display:flex; flex-direction:column; gap:2px; } .nav-item{ display:flex; align-items:center; gap:10px; justify-content:flex-start; text-align:left; padding:9px 10px; border-radius:var(--r-sm); border:none; background:transparent; cursor:pointer; color:var(--ink-soft); font-weight:500; font-size:var(--fs-base); } .nav-item:hover{ background:var(--surface-2); color:var(--ink); } .nav-item.active{ background:var(--brand-soft); color:var(--brand); font-weight:600; } .nav-item .ic{ width:18px; text-align:center; opacity:.85; } .nav-item .badge{ margin-left:auto; } .sidebar-foot{ margin-top:auto; padding:8px; font-size:var(--fs-xs); color:var(--ink-faint); } /* Wraps venue-box/staffWhoBox/nav so the mobile dropdown (below) can show or hide all three as one block without touching the `hidden` attribute JS already manages on #staffWhoBox independently. At desktop widths this is just a plain flex column mirroring the parent .sidebar's own layout, so it's visually a no-op there. */ .sidebar-menu{ display:flex; flex-direction:column; gap:18px; } .mobile-menu-toggle{ display:none; } .main{ display:flex; flex-direction:column; min-width:0; } /* Page header pattern: title (Fraunces, --fs-xl), one-line hint, main action on the right. On phone the action drops under the title at full width. .topbar / .topbar-actions are the same thing under their older names. */ .page-head, .topbar{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); padding:var(--sp-5) var(--sp-8) var(--sp-4); border-bottom:1px solid var(--border); } .page-head h1, .topbar h1{ font-size:var(--fs-xl); line-height:1.15; } .page-head-actions, .topbar-actions{ display:flex; gap:var(--sp-2); align-items:center; } .content{ padding:26px 32px 60px; display:flex; flex-direction:column; gap:22px; } .panel{ display:flex; flex-direction:column; gap:22px; } .page-hint, .panel-lead{ color:var(--ink-soft); font-size:var(--fs-base); max-width:72ch; margin:calc(-1 * var(--sp-2)) 0 0; } /* ---------- buttons ---------- .btn (normal) · .btn-primary (the main action) · .btn-danger (destructive) · .btn-ghost (quiet text button). 40px tall on desktop, 44px on phone. .btn-sm (32px) is for tables and grids only. */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); min-height:var(--h-btn); padding:0 var(--sp-4); border-radius:var(--r-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); cursor:pointer; font-weight:600; font-size:var(--fs-base); line-height:1.2; white-space:nowrap; text-decoration:none; } .btn:hover{ border-color:var(--ink-faint); } .btn-primary, .btn-success{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .btn-primary:hover, .btn-success:hover{ border-color:var(--brand); filter:brightness(1.07); } .btn-ghost{ border-color:transparent; background:transparent; } .btn-ghost:hover{ background:var(--surface-2); border-color:transparent; } .btn-danger{ color:var(--danger); } .btn-danger:hover{ background:var(--danger-bg); border-color:var(--danger); } .btn-sm{ min-height:var(--h-btn-sm); padding:0 var(--sp-3); font-size:var(--fs-xs); } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn .icon, .icon-btn .icon{ flex:none; } .icon-btn{ width:var(--h-btn); height:var(--h-btn); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; cursor:pointer; color:var(--ink-soft); font-size:var(--fs-md); } .icon-btn:hover{ background:var(--surface-2); color:var(--ink); } /* ---------- icons (see icon() in index.html) ---------- */ .icon{ width:1.15em; height:1.15em; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; vertical-align:-.2em; } .icon-btn .icon{ width:18px; height:18px; } .icon-btn-danger{ color:var(--danger); } .icon-btn-danger:hover{ background:var(--danger-bg); color:var(--danger); } /* ---------- cards / stats ---------- */ .stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; } .stat-row.cols-2{ grid-template-columns:repeat(2,minmax(120px,220px)); } .stat-tile{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 18px; display:flex; flex-direction:column; gap:6px; box-shadow:var(--shadow-1); } .stat-tile .stat-value{ font-family:var(--font-display); font-size:var(--fs-xl); font-weight:600; } .stat-tile .stat-label{ font-size:var(--fs-xs); color:var(--ink-soft); } .card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-1); } .card-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; border-bottom:1px solid var(--border); } .card-head h3{ font-size:var(--fs-md); } .card-body{ padding:16px 18px; display:flex; flex-direction:column; gap:12px; } .card-body.tight{ gap:0; padding:6px 0; } .grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; } .entity-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:14px 16px; display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow-1); } .entity-card .row-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .entity-card .name{ font-weight:600; font-size:var(--fs-base); } .entity-card .meta{ font-size:var(--fs-xs); color:var(--ink-soft); display:flex; flex-direction:column; gap:3px; } .entity-card .tags{ display:flex; flex-wrap:wrap; gap:5px; } .entity-card .actions{ display:flex; gap:6px; margin-top:2px; } /* ===== forced first-run onboarding gate (new venues + the three stuck pilot testers via migration backfill) — body.onboarding-active hides the sidebar and collapses .app to one column, so .onboarding-bar (fixed above
) is the only way forward. See renderOnboardingGate()/onboardingActive() in the script below. */ body.onboarding-active .sidebar{ display:none; } body.onboarding-active .app{ grid-template-columns:1fr; } .onboarding-bar{ display:none; } body.onboarding-active .onboarding-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 24px; background:var(--surface); border-bottom:1px solid var(--border); box-shadow:var(--shadow-1); } .onboarding-steps{ display:flex; align-items:center; gap:6px; flex:none; } .onboarding-step-dot{ width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:var(--fs-xs); font-weight:700; background:var(--surface-2); color:var(--ink-faint); border:1px solid var(--border-strong); } .onboarding-step-dot.active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); } .onboarding-step-dot.done{ background:var(--brand-soft); color:var(--brand); border-color:var(--brand-soft); } .onboarding-step-sep{ width:16px; height:2px; background:var(--border-strong); } .onboarding-text{ flex:1 1 220px; min-width:180px; } .onboarding-text h3{ margin:0 0 2px; font-size:var(--fs-md); } .onboarding-text p{ margin:0; font-size:var(--fs-xs); color:var(--ink-soft); } .onboarding-actions{ display:flex; align-items:center; gap:10px; flex:none; } @media (max-width:820px){ body.onboarding-active .onboarding-bar{ padding:10px 14px; } .onboarding-text{ order:3; flex-basis:100%; } } /* ---------- badge: one component, four tones ---------- New markup: . The older class names are aliases so existing markup keeps working. */ .badge, .tag, .pill{ display:inline-flex; align-items:center; font-size:var(--fs-xs); font-weight:600; line-height:1.3; padding:var(--sp-1) 10px; border-radius:var(--r-pill); letter-spacing:.01em; border:1px solid transparent; white-space:nowrap; } .badge-neutral, .pill-neutral, .tag{ background:var(--neutral-bg); color:var(--neutral); border-color:var(--border); } .badge-ok, .pill-ok, .pill-approved{ background:var(--success-bg); color:var(--success); border-color:transparent; } .badge-warn, .pill-warn, .pill-pending, .tag-warn, .tag-left{ background:var(--warning-bg); color:var(--warning); border-color:transparent; } .badge-bad, .pill-bad, .pill-denied{ background:var(--danger-bg); color:var(--danger); border-color:transparent; } .tag-role{ background:var(--brand-soft); color:var(--brand); border-color:transparent; } /* a person's role: brand chip, not a status */ .pill{ font-weight:700; } .badge .icon{ width:1em; height:1em; margin-right:var(--sp-1); vertical-align:-.15em; } .list-row{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--border); } .list-row:last-child{ border-bottom:none; } .list-row .grow{ flex:1; min-width:0; } .list-row .title{ font-weight:600; font-size:var(--fs-base); } .list-row .sub{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:1px; } /* 27.09.2026 — candidates in openCoverageModal's collapsed "show more" section (soft-preference misses only: blocked weekday, availability window, weekly shift/hour cap, min/max shift length) get the reason(s) in the warning colour instead of the neutral ink-soft used for the main list's "N/N shifts so far" line — a visual cue for the manager, not a block. */ .list-row .sub-warn{ color:var(--warning); } .soft-fail-toggle{ margin-top:10px; border-top:1px dashed var(--border); padding-top:8px; } .soft-fail-toggle summary{ cursor:pointer; font-size:var(--fs-xs); color:var(--ink-soft); user-select:none; } .soft-fail-toggle summary:hover{ color:var(--ink); } /* ---------- shared states: loading (.skeleton, below), empty, error ---------- .empty-state: one line, optionally one button. .error-state: what went wrong + a "Try again" button. */ .empty-state, .error-state{ text-align:center; padding:var(--sp-8) var(--sp-5); color:var(--ink-soft); font-size:var(--fs-base); border:1px dashed var(--border-strong); border-radius:var(--r-md); } .empty-state strong, .error-state strong{ display:block; color:var(--ink); font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; margin-bottom:var(--sp-1); } .empty-state .btn, .error-state .btn{ margin-top:var(--sp-3); } .error-state{ border-style:solid; border-color:var(--danger); background:var(--danger-bg); color:var(--danger); } .error-state strong{ color:var(--danger); } .loading-state{ color:var(--ink-faint); font-size:var(--fs-base); padding:var(--sp-4) 0; } /* ---------- forms ---------- */ label.field{ display:flex; flex-direction:column; gap:5px; font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); } label.field .hint{ font-weight:400; font-size:var(--fs-xs); color:var(--ink-faint); } input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=password], input[type=search], input[type=tel], select, textarea{ font-size:var(--fs-base); padding:8px 10px; border-radius:var(--r-sm); border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); width:100%; } input:not([type=checkbox]):not([type=radio]):not([type=file]), select{ min-height:var(--h-btn); } textarea{ resize:vertical; min-height:60px; } input[type=checkbox]{ accent-color:var(--brand); width:15px; height:15px; } /* Custom time combo box: a plain text input (so any value can be typed and saved, never restricted to the list) with a JS-rendered suggestion list. Shows the FULL list on focus — unlike a native datalist, which filters to only entries matching whatever is already typed, hiding most of the list the moment a field is pre-filled. */ .combo-wrap{ position:relative; } .combo-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-sm); box-shadow:var(--shadow-2); max-height:180px; overflow-y:auto; z-index:60; display:none; } .combo-item{ padding:7px 10px; font-size:var(--fs-xs); font-weight:400; color:var(--ink); cursor:pointer; } .combo-item:hover{ background:var(--surface-2); } .combo-empty{ padding:7px 10px; font-size:var(--fs-xs); color:var(--ink-faint); } .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .form-grid.cols-3{ grid-template-columns:1fr 1fr 1fr; } .form-grid.cols-4{ grid-template-columns:auto 1fr 1fr auto; } .checks{ display:flex; flex-wrap:wrap; gap:10px; } .check-chip{ display:flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:500; padding:6px 9px; border:1px solid var(--border-strong); border-radius:var(--r-sm); background:var(--surface); } fieldset{ border:1px solid var(--border); border-radius:var(--r-md); padding:12px; margin:0; } legend{ font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-faint); padding:0 5px; } /* ---------- drawer ---------- */ .drawer-backdrop{ position:fixed; inset:0; background:var(--scrim); z-index:40; } .drawer{ position:fixed; top:0; right:0; bottom:0; width:min(460px,92vw); background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-2); z-index:41; display:flex; flex-direction:column; transition:width .15s ease; } .drawer.drawer-wide{ width:min(1760px,98vw); } .drawer.drawer-mid{ width:min(760px,96vw); } .drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); } .drawer-head h2{ font-size:var(--fs-md); } .drawer-body{ padding:18px 20px 26px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:14px; } .drawer-foot{ display:flex; justify-content:flex-end; gap:8px; padding-top:6px; } /* Weekday strip inside the template drawer — Mon..Sun as equal columns that share whatever width the (now very wide) drawer has, so on a normal desktop window all 7 fit at once with nothing to scroll. Each column has a 150px floor: below that (a narrow window) the grid can't shrink further and overflow-x takes over as a fallback instead of squashing the fields unreadably. */ .tpl-days-scroll{ display:grid; grid-template-columns:repeat(7,minmax(150px,1fr)); align-items:start; gap:14px; overflow-x:auto; padding-bottom:10px; -webkit-overflow-scrolling:touch; } .tpl-day-col{ min-width:0; } /* Inside a day column there isn't room for Time/People/Zone side by side (that 3-across grid is fine at full drawer width elsewhere) — put Time on its own row so the text isn't clipped, People+Zone share the row below. */ .tpl-day-col .form-grid.cols-3{ grid-template-columns:1fr 1fr; gap:6px; } .tpl-day-col .form-grid.cols-3>:first-child{ grid-column:1 / -1; } .tpl-min-staff{ border:1px solid var(--border); border-radius:var(--r-md); padding:12px; background:var(--surface-2); display:flex; flex-direction:column; gap:6px; } .tpl-min-staff-row{ font-size:var(--fs-xs); color:var(--ink-soft); display:flex; align-items:center; gap:6px; flex-wrap:wrap; } .tpl-min-staff-row input{ width:56px; padding:4px 6px; min-height:var(--h-btn-sm); } .tpl-min-staff-result{ font-size:var(--fs-xs); color:var(--ink); } .tpl-min-staff-result strong{ font-size:var(--fs-md); color:var(--brand); } .tpl-staff-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:10px; } .tpl-staff-caption{ margin-bottom:3px; } .tpl-staff-nums{ display:flex; align-items:flex-end; gap:16px; } .tpl-staff-num{ display:flex; flex-direction:column; align-items:flex-start; } .tpl-staff-num .figure{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:700; line-height:1; color:var(--ink); } .tpl-staff-num .figure.optimal{ color:var(--success); } .tpl-staff-num .lbl{ font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; } .tpl-staff-buffer-note{ font-size:var(--fs-xs); color:var(--ink-faint); text-align:right; max-width:130px; } .entity-card .tpl-staff-row{ padding-top:9px; margin-top:2px; border-top:1px solid var(--border); } /* small modal (cell editor) */ .modal{ position:fixed; z-index:51; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:16px; width:270px; } .modal h3{ font-size:var(--fs-base); margin-bottom:10px; } .modal-foot{ display:flex; justify-content:space-between; gap:8px; margin-top:12px; } /* confirm/alert dialog — a centred variant of the same modal, used instead of window.confirm()/alert(): a sandboxed artifact iframe blocks native browser dialogs outright, so those calls silently do nothing and leave a button looking unresponsive. This is plain DOM, so it always works. */ .modal-overlay{ position:fixed; inset:0; background:var(--scrim); z-index:50; } .modal-center{ top:50%; left:50%; transform:translate(-50%,-50%); width:min(340px,86vw); } .modal-center p{ margin:0 0 14px; font-size:var(--fs-base); line-height:1.5; color:var(--ink); } /* ---------- schedule grid ---------- */ .week-nav{ display:flex; align-items:center; gap:10px; } .week-label{ font-family:var(--font-display); font-size:var(--fs-md); font-weight:600; min-width:210px; } .view-toggle{ display:flex; margin-left:auto; border:1px solid var(--border-strong); border-radius:var(--r-sm); overflow:hidden; } .view-toggle-btn{ min-height:var(--h-btn-sm); padding:0 var(--sp-3); font-size:var(--fs-xs); font-weight:600; border:none; background:var(--surface); color:var(--ink-soft); cursor:pointer; } .view-toggle-btn+.view-toggle-btn{ border-left:1px solid var(--border-strong); } .view-toggle-btn.active{ background:var(--brand); color:var(--brand-ink); } .grid-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); } /* 02.10.2026 — Nikita's fix for "the schedule grid is unusable on a phone": keep the same table (the name column is already position:sticky below — this was never broken, just not proven), just make the horizontal scroll itself discoverable and pleasant. The fade lives in a non-scrolling wrapper SIBLING to .grid-scroll (not inside it) specifically so it stays pinned to the right edge while the table underneath scrolls — a fade placed inside the scrolling element would just scroll away with everything else. wireScrollFade() in the main script toggles .scroll-fade-hidden once there's nothing left to scroll to, so it never sits there as a dead hint on a table that already fits, or on a desktop screen wide enough to show the whole week at once. */ .grid-scroll-wrap{ position:relative; } .scroll-fade{ position:absolute; top:0; right:0; bottom:0; width:28px; pointer-events:none; background:linear-gradient(to right, transparent, var(--surface)); border-radius:0 12px 12px 0; opacity:1; transition:opacity .15s ease; } .scroll-fade.scroll-fade-hidden{ opacity:0; } table.rota{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-xs); } table.rota th, table.rota td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:0; } table.rota th{ background:var(--surface-2); font-weight:600; padding:8px 6px; text-align:center; } table.rota td.rowhead, table.rota th.corner{ position:sticky; left:0; z-index:3; background:var(--surface-2); text-align:left; padding:8px 10px; min-width:170px; } .rowhead-name{ font-weight:600; } .rowhead-role{ font-weight:500; font-size:var(--fs-xs); color:var(--brand); margin-top:1px; } .role-filter{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 2px; } .role-chip{ padding:4px 11px; font-size:var(--fs-xs); font-weight:600; border:1px solid var(--border-strong); border-radius:99px; background:var(--surface); color:var(--ink-soft); cursor:pointer; } .role-chip.active{ background:var(--brand); color:var(--brand-ink); border-color:var(--brand); } .role-filter .sf-chips{ display:flex; flex-wrap:wrap; gap:6px; } .role-filter{ align-items:center; } .role-filter .sf-tools{ display:flex; gap:6px; margin-left:auto; } .sf-pub{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--success); margin-right:6px; vertical-align:middle; } .role-chip.active .sf-pub{ background:var(--brand-ink); } .sf-menu{ position:relative; } .sf-menu > summary{ list-style:none; } .sf-menu > summary::-webkit-details-marker{ display:none; } .sf-menu > summary::after{ content:'▾'; font-size:var(--fs-xs); margin-left:4px; opacity:.7; } .sf-count{ margin-left:var(--sp-1); padding:0 6px; } .sf-pop{ position:absolute; top:calc(100% + 4px); right:0; z-index:30; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:var(--sp-2) var(--sp-3); min-width:240px; max-height:60vh; overflow:auto; } .sf-sec + .sf-sec{ border-top:1px solid var(--border); margin-top:var(--sp-2); padding-top:var(--sp-2); } .sf-sec-h{ font-size:var(--fs-xs); font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--sp-1); } .sf-opt{ display:flex; align-items:flex-start; gap:var(--sp-2); padding:6px 2px; font-size:var(--fs-base); cursor:pointer; } .sf-opt input{ margin-top:3px; accent-color:var(--brand); } .sf-hint{ display:block; font-size:var(--fs-xs); color:var(--ink-faint); } .sf-foot{ border-top:1px solid var(--border); margin-top:var(--sp-2); padding-top:var(--sp-2); display:flex; justify-content:flex-end; gap:var(--sp-2); } .sf-showing{ flex-basis:100%; font-size:var(--fs-xs); color:var(--ink-soft); } .sf-link{ background:none; border:none; padding:0; font:inherit; color:var(--brand); text-decoration:underline; cursor:pointer; } table.rota td.sf-empty{ padding:var(--sp-5) var(--sp-3); text-align:center; color:var(--ink-soft); } @media (max-width:820px){ .role-filter .sf-tools{ margin-left:0; flex-basis:100%; } .sf-menu > summary{ min-height:44px; } .sf-pop{ position:fixed; left:0; right:0; bottom:0; top:auto; max-height:70vh; border-radius:var(--r-md) var(--r-md) 0 0; padding-bottom:var(--sp-5); } .sf-opt{ min-height:44px; align-items:center; } .sf-opt input{ margin-top:0; width:20px; height:20px; } .sf-link{ min-height:44px; } } table.rota td.dept-head{ background:var(--brand-soft); color:var(--brand); font-weight:700; font-size:var(--fs-xs); letter-spacing:.04em; text-transform:uppercase; padding:5px 10px; text-align:left; position:sticky; left:0; } .rowhead-zones{ font-weight:400; font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; white-space:normal; } table.rota.month-view .cell{ width:52px; font-size:var(--fs-xs); padding:2px; } table.rota.month-view th{ padding:6px 2px; font-size:var(--fs-xs); } table.rota.month-view td.needs{ padding:6px 2px; font-size:var(--fs-xs); } table.rota th.corner{ z-index:4; } table.rota td.needs{ background:var(--surface-2); text-align:center; font-family:var(--font-mono); color:var(--ink-soft); padding:6px 4px; font-size:var(--fs-xs); } table.rota td.needs-missing{ background:var(--danger-bg); color:var(--danger); font-weight:700; } .needs-missing-list{ font-family:var(--font-ui); font-weight:500; font-size:var(--fs-xs); line-height:1.35; margin-top:3px; opacity:.9; white-space:normal; } /* 27.09.2026 — each missing slot is its own clickable line (see openShortfallFinder), so a manager can jump straight to "who could fill this" instead of hunting down a matching empty cell by hand. */ .needs-missing-item{ cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; } .needs-missing-item:hover{ opacity:1; filter:brightness(1.2); } .needs-missing-item.needs-missing-ro{ cursor:default; text-decoration:none; opacity:.75; } .rowhead-ro{ font-weight:500; font-size:var(--fs-xs); color:var(--ink-faint); margin-top:2px; font-style:italic; } table.rota .cell.cell-ro{ cursor:default; } body.staff-mode .needs-missing-item{ cursor:default; text-decoration:none; } body.staff-mode .needs-missing-item:hover{ filter:none; } table.rota .cell{ width:104px; min-height:46px; text-align:center; font-family:var(--font-mono); font-size:var(--fs-xs); cursor:pointer; padding:4px; white-space:nowrap; } table.rota .cell:hover{ filter:brightness(0.97); } body.staff-mode table.rota .cell{ cursor:default; } body.staff-mode table.rota .cell:hover{ filter:none; } /* While picking shifts to swap, cells are clickable again (staff-mode's default cursor:default above is for the ordinary view-only case) and the requester's own chosen shift gets a visible outline so it's clear what's already picked while they go find the colleague's shift. */ body.staff-mode.swap-picking table.rota .cell{ cursor:pointer; } table.rota .cell.cell-swap-picked{ outline:2px solid var(--brand); outline-offset:-2px; } /* ---- moving a shift: drag (mouse / pen) and pick mode (touch). Green = allowed, amber = asks first, grey = blocked. ---- */ table.rota .cell.cell-draggable{ cursor:grab; } body.dnd-active, body.dnd-active table.rota .cell, body.dnd-active table.rota .cell.cell-draggable{ cursor:grabbing !important; user-select:none; } table.rota .cell.dnd-source{ opacity:.5; outline:2px dashed var(--brand); outline-offset:-2px; } table.rota .cell.dnd-ok, table.rota .cell.dnd-warn, table.rota .cell.dnd-block{ position:relative; outline-offset:-2px; } table.rota .cell.dnd-ok{ outline:2px solid var(--success); } table.rota .cell.dnd-warn{ outline:2px solid var(--warning); } table.rota .cell.dnd-block{ outline:2px dashed var(--ink-soft); } @media (max-width:820px){ table.rota .cell.dnd-ok, table.rota .cell.dnd-warn, table.rota .cell.dnd-block{ outline-width:1px; } } table.rota .cell.dnd-ok::after, table.rota .cell.dnd-warn::after, table.rota .cell.dnd-block::after{ content:''; position:absolute; inset:0; pointer-events:none; } table.rota .cell.dnd-ok::after{ background:var(--success); opacity:.16; } table.rota .cell.dnd-warn::after{ background:var(--warning); opacity:.26; } table.rota .cell.dnd-block::after{ background:var(--ink-faint); opacity:.32; } body.dnd-active table.rota .cell.dnd-block, body.dnd-active table.rota .cell.dnd-block.cell-draggable{ cursor:not-allowed !important; } .dnd-ghost{ position:fixed; z-index:70; pointer-events:none; display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:var(--r-sm); background:var(--surface); color:var(--ink); border:1px solid var(--brand); box-shadow:var(--shadow-2); font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:600; transform:rotate(-2deg); white-space:nowrap; } .dnd-ghost-name{ font-family:var(--font-ui); color:var(--brand); } .dnd-ghost-badge{ background:var(--brand); color:var(--brand-ink); border-radius:99px; padding:1px 7px; font-size:var(--fs-xs); font-family:var(--font-ui); } .dnd-hint{ position:fixed; z-index:71; pointer-events:none; max-width:260px; padding:6px 10px; border-radius:var(--r-sm); font-size:var(--fs-xs); line-height:1.35; font-weight:600; box-shadow:var(--shadow-2); border:1px solid transparent; } .dnd-hint[hidden]{ display:none; } .dnd-hint-ok{ background:var(--success-bg); color:var(--success); border-color:var(--success); } .dnd-hint-warn{ background:var(--warning-bg); color:var(--warning); border-color:var(--warning); } .dnd-hint-block{ background:var(--surface-2); color:var(--ink-soft); border-color:var(--border-strong); } .modal-move{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; } .modal-move .btn{ flex:1 1 auto; justify-content:center; } .move-pick-bar{ position:fixed; left:12px; right:12px; bottom:12px; z-index:55; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 14px; background:var(--brand); color:var(--brand-ink); border-radius:var(--r-md); box-shadow:var(--shadow-2); font-size:var(--fs-xs); line-height:1.4; } .move-pick-bar[hidden]{ display:none; } .move-pick-bar > span{ flex:1; } .move-pick-bar .btn{ flex:none; background:transparent; color:var(--brand-ink); border-color:var(--on-brand-line); } body.move-picking table.rota .cell{ cursor:pointer; } body.move-picking .content{ padding-bottom:96px; } .cell-role{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.01em; opacity:.85; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; } .month-view .cell-role{ display:none; } .cell-zone{ font-size:var(--fs-xs); font-weight:600; opacity:.72; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; } .cell-event{ font-size:var(--fs-xs); font-weight:700; color:var(--brand); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:1px; } .cell-empty{ color:var(--ink-faint); } .cell-baseline{ background:var(--surface-2); color:var(--ink); } .cell-protected{ background:var(--danger-bg); color:var(--danger); font-weight:600; } .cell-timeoff{ background:var(--border-strong); color:var(--ink); font-weight:600; } .cell-approved{ background:var(--success-bg); color:var(--success); font-weight:600; } .cell-draft{ background:var(--accent-soft); color:var(--accent); font-weight:600; box-shadow:inset 0 0 0 1px var(--accent); } .cell-left{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, var(--border) 5px, var(--border) 9px); color:var(--ink-faint); cursor:not-allowed; } .cell-unpublished{ background:var(--surface-2); color:var(--ink-faint); font-style:italic; } /* Closed days (Settings → Closed days): the header says so, an empty cell is hatched, a shift that was already saved stays and is outlined in red */ table.rota th.th-closed{ background:var(--danger-bg); color:var(--danger); } .closed-tag{ display:block; font-size:var(--fs-xs); font-weight:700; letter-spacing:.02em; text-transform:uppercase; margin-top:2px; line-height:1.2; white-space:normal; } table.rota.month-view .closed-tag{ font-size:var(--fs-xs); } .cell-closed-day{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, var(--border) 5px, var(--border) 9px); color:var(--ink-faint); font-weight:600; } .cell-closed-conflict{ box-shadow:inset 0 0 0 2px var(--danger); } table.rota td.needs.needs-closed{ background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, var(--border) 5px, var(--border) 9px); color:var(--ink-faint); font-weight:600; } .closed-note{ background:var(--danger-bg); color:var(--danger); border-radius:var(--r-sm); padding:8px 10px; font-size:var(--fs-xs); line-height:1.35; margin:8px 0 2px; } th.hours-col, td.hours-col{ background:var(--surface-2); text-align:center; font-family:var(--font-mono); } th.hours-col{ font-weight:600; } td.hours-col{ font-weight:700; color:var(--ink-soft); font-size:var(--fs-xs); } tr.events-row td.event-cell{ background:var(--brand-soft); color:var(--brand); font-weight:600; text-align:center; font-size:var(--fs-xs); padding:5px 6px; line-height:1.25; } table.rota.month-view td.event-cell{ padding:3px 2px; font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:52px; } .legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:var(--fs-xs); color:var(--ink-soft); align-items:center; } .legend .sw{ display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px; } /* Timesheets (manager-only, task #64) — scheduled-vs-actual grid, reuses .week-nav for its date navigation but gets its own lighter table style since it has none of the rota's draft/approved/zone colour coding. */ table.timesheet{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--fs-xs); } table.timesheet th, table.timesheet td{ border-bottom:1px solid var(--border); border-right:1px solid var(--border); padding:0; } table.timesheet th{ background:var(--surface-2); font-weight:600; padding:8px 6px; text-align:center; } table.timesheet td.rowhead, table.timesheet th.corner{ position:sticky; left:0; z-index:3; background:var(--surface-2); text-align:left; padding:8px 10px; min-width:170px; } table.timesheet th.corner{ z-index:4; } table.timesheet td.total-col, table.timesheet th.total-col{ font-family:var(--font-mono); font-weight:700; } table.timesheet .ts-cell{ width:112px; min-height:46px; text-align:center; font-family:var(--font-mono); font-size:var(--fs-xs); cursor:pointer; padding:5px 4px; vertical-align:top; } table.timesheet .ts-cell:hover{ filter:brightness(0.97); } table.timesheet .ts-scheduled{ color:var(--ink-faint); } table.timesheet .ts-actual{ margin-top:2px; font-weight:600; } table.timesheet .ts-cell.ts-status-ok{ background:var(--success-bg); } table.timesheet .ts-cell.ts-status-open{ background:var(--accent-soft); } table.timesheet .ts-cell.ts-status-missing{ background:var(--danger-bg); } table.timesheet .ts-cell.ts-status-stale{ background:var(--warning-bg); box-shadow:inset 0 0 0 2px var(--warning); } table.timesheet .ts-open-warn{ margin-top:3px; color:var(--warning); font-weight:700; font-family:var(--font-ui); font-size:var(--fs-xs); line-height:1.25; } table.timesheet .ts-cell.ts-future{ background:var(--surface-2); } table.timesheet .ts-cell.ts-future .ts-scheduled{ color:var(--ink-faint); } table.timesheet .ts-upcoming{ margin-top:var(--sp-1); font-family:var(--font-ui); } table.timesheet td.ts-none{ padding:var(--sp-4); text-align:left; color:var(--ink-soft); font-family:var(--font-ui); font-size:var(--fs-base); cursor:default; } /* Timesheets: the summary of the week's problems and the "Problems only" switch */ .ts-problems{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--sp-3); } .ts-problems .badge{ white-space:normal; border-radius:var(--r-md); font-size:var(--fs-base); padding:var(--sp-2) var(--sp-3); } #tsOpenNotice{ margin:10px 0 0; } .tp-row{ border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px; display:flex; flex-direction:column; gap:10px; background:var(--surface-2); } .tp-row[hidden]{ display:none; } .tp-row-head{ display:flex; justify-content:space-between; align-items:center; } /* ---------- Team list (index.html renderEmployeesList): a table on a desktop, stacked rows on a phone ---------- */ .team-tools{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--sp-3); margin-bottom:var(--sp-4); } .team-tools .field{ flex:0 1 200px; } .team-tools .team-search{ flex:1 1 260px; max-width:360px; } .team-tools .team-sort-field{ display:none; } .team-tools[hidden]{ display:none; } .team-count{ margin-left:auto; align-self:center; white-space:nowrap; } .team-table{ width:100%; border-collapse:separate; border-spacing:0; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden; } .team-table th{ background:var(--surface-2); text-align:left; font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); padding:var(--sp-1) var(--sp-3); border-bottom:1px solid var(--border); white-space:nowrap; } .team-table td{ padding:var(--sp-3); border-bottom:1px solid var(--border); vertical-align:top; font-size:var(--fs-base); } .team-table tbody tr:last-child td{ border-bottom:none; } .team-table tbody tr{ cursor:pointer; } .team-table tbody tr:hover td{ background:var(--surface-2); } .team-th{ border:none; background:transparent; color:inherit; font:inherit; cursor:pointer; padding:var(--sp-2) 0; min-height:var(--h-btn-sm); } .team-th:hover{ color:var(--ink); } .team-name{ border:none; background:transparent; padding:0; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; } .team-name:hover{ color:var(--brand); text-decoration:underline; } .team-sub{ font-size:var(--fs-xs); color:var(--ink-soft); margin-top:2px; overflow-wrap:anywhere; } .team-tags{ display:flex; flex-wrap:wrap; gap:var(--sp-1); } .team-c-act{ width:1%; white-space:nowrap; } .team-c-act .actions{ display:flex; gap:var(--sp-1); justify-content:flex-end; } .team-table .sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; } @media (max-width:820px){ .team-tools .field{ flex:1 1 calc(50% - var(--sp-2)); min-width:0; } .team-tools .team-search{ flex:1 1 100%; max-width:none; } .team-tools .team-sort-field{ display:flex; } .team-count{ margin-left:0; flex:1 1 calc(50% - var(--sp-2)); } .team-table, .team-table tbody{ display:block; background:transparent; border:none; border-radius:0; } .team-table thead{ display:none; } .team-table tbody tr{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; column-gap:var(--sp-2); padding:var(--sp-3); margin-bottom:var(--sp-3); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); } .team-table td{ display:block; padding:0; border-bottom:none; } .team-table tbody tr:hover td{ background:transparent; } .team-c-name{ grid-column:1; grid-row:1; } .team-c-act{ grid-column:2; grid-row:1; width:auto; } .team-c-role, .team-c-dept, .team-c-status{ grid-column:1 / -1; margin-top:var(--sp-2); } .team-c-dept{ font-size:var(--fs-xs); color:var(--ink-soft); } .team-c-role:empty, .team-c-status:empty{ display:none; } .team-name{ min-height:var(--h-touch); display:inline-flex; align-items:center; } } .report-box{ display:flex; flex-wrap:wrap; gap:18px; padding:14px 16px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); font-size:var(--fs-xs); } .report-box .metric b{ font-family:var(--font-mono); font-size:var(--fs-base); } .report-list{ font-size:var(--fs-xs); color:var(--ink-soft); } .toast-host{ position:fixed; bottom:18px; right:18px; z-index:60; display:flex; flex-direction:column; gap:8px; max-width:340px; } /* "Add to home screen" nudge — JS (isMobileViewport/maybeShowInstallBanner) is what actually restricts this to phones/tablets; the CSS here just positions it. Sits above the toast host (60) so a toast never hides it, but well below the tour overlay (9000) — the tour deliberately takes priority, see endTour()/maybeShowInstallBanner(). env(safe-area-inset-*) keeps it clear of the home-indicator bar on notched iPhones. */ .install-banner{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); z-index:65; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:12px 14px; display:flex; align-items:center; gap:10px; } .install-banner-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .install-banner-text strong{ font-family:var(--font-display); font-size:var(--fs-base); font-weight:600; color:var(--ink); } .install-banner-text span{ font-size:var(--fs-xs); color:var(--ink-soft); line-height:1.4; } .install-banner-actions{ display:flex; align-items:center; gap:4px; flex:0 0 auto; } .topbar-title{ display:flex; align-items:center; gap:10px; } /* Onboarding tour — a short, role-specific walkthrough that highlights one real nav item or button at a time. Deliberately sits well above every other overlay in the app (drawers/modals/toasts top out around z-index 60) since it's meant to be the only thing a person can interact with while it's running. */ .tour-overlay{ position:fixed; inset:0; z-index:9000; background:var(--scrim); } .tour-spot{ position:fixed; z-index:9001; border-radius:var(--r-md); box-shadow:0 0 0 9999px var(--scrim-strong), 0 0 0 3px var(--brand); pointer-events:none; display:none; } .tour-card{ position:fixed; z-index:9002; width:300px; max-width:calc(100vw - 24px); background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:16px; } .tour-card.tour-center{ left:50%; top:50%; transform:translate(-50%,-50%); width:320px; text-align:center; } .tour-card h4{ margin:0 0 6px; font-family:var(--font-display); font-size:var(--fs-md); color:var(--ink); } .tour-card p{ margin:0 0 14px; font-size:var(--fs-base); line-height:1.5; color:var(--ink-soft); } .tour-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; } .tour-card.tour-center .tour-foot{ justify-content:center; } .tour-progress{ font-size:var(--fs-xs); color:var(--ink-faint); font-family:var(--font-mono); } .tour-card.tour-center .tour-progress{ display:none; } .tour-actions{ display:flex; gap:8px; } .toast{ background:var(--toast-bg); color:var(--toast-ink); padding:var(--sp-3) 14px; border-radius:var(--r-md); font-size:var(--fs-xs); line-height:1.4; box-shadow:var(--shadow-toast); } .toast-error{ background:var(--toast-error-bg); } .toast-ok{ background:var(--toast-ok-bg); } .toast-has-action{ display:flex; align-items:center; gap:var(--sp-3); } .toast-has-action > span{ flex:1; } .toast-action{ flex:none; border:1px solid var(--toast-line); background:transparent; color:var(--toast-ink); font:inherit; font-weight:700; padding:6px var(--sp-3); border-radius:var(--r-sm); cursor:pointer; min-height:var(--h-btn-sm); } .toast-action:hover{ background:var(--toast-hover); } [hidden]{ display:none !important; } /* ---------- UX audit 20.10.2026 ---------- */ /* Schedule: main actions right under the week navigation, status as a sentence */ .schedule-actions{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; } .export-menu{ position:relative; } .export-menu > summary{ list-style:none; } .export-menu > summary::-webkit-details-marker{ display:none; } .export-menu > summary::after{ content:'▾'; font-size:var(--fs-xs); margin-left:2px; opacity:.7; } .export-menu-list{ position:absolute; top:calc(100% + 4px); left:0; z-index:30; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:6px; display:flex; flex-direction:column; min-width:170px; } .export-menu-list .btn{ justify-content:flex-start; } .week-status{ display:flex; align-items:center; gap:8px; font-size:var(--fs-base); color:var(--ink-soft); margin-top:-10px; } .week-status strong{ color:var(--ink); } .week-status-dot{ width:9px; height:9px; border-radius:50%; flex:none; margin-top:1px; } .week-status-ok .week-status-dot{ background:var(--success); } .week-status-warn .week-status-dot{ background:var(--warning); } .legend .sw-outline-danger{ background:transparent; box-shadow:inset 0 0 0 2px var(--danger); } /* "6 open" instead of "15 / 6"; the list of open slots shows on tap */ table.rota td.needs{ font-family:var(--font-ui); } .needs-toggle{ border:none; background:transparent; color:inherit; font:inherit; font-weight:700; cursor:pointer; padding:2px 4px; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; } .needs-full{ color:var(--ink-faint); font-weight:500; } table.rota td.needs .needs-missing-list{ display:none; } table.rota td.needs.needs-expanded .needs-missing-list{ display:block; font-size:var(--fs-xs); } /* ---------- Schedule, "Week summary" panel above the grid (scheduleweek.js). Desktop, manager. Hidden on a phone, which has its own Day view. ---------- */ .wk-sum{ border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); } .wk-sum[hidden]{ display:none; } .wk-sum-head{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-btn); padding:var(--sp-2) var(--sp-4); border:none; background:transparent; color:var(--ink); font:inherit; font-weight:700; text-align:left; cursor:pointer; } .wk-sum-head::after{ content:'▾'; margin-left:auto; color:var(--ink-soft); } .wk-sum-head[aria-expanded="false"]::after{ transform:rotate(-90deg); } .wk-sum-body{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--sp-4); padding:var(--sp-3) var(--sp-4) var(--sp-4); border-top:1px solid var(--border); } .wk-sum-body[hidden]{ display:none; } .wk-sum-ok{ grid-column:1 / -1; margin:0; color:var(--success); font-weight:600; } .wk-sum-block{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); min-width:0; } .wk-sum-h{ margin:0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); } .wk-sum-line, .wk-sum-none, .wk-sum-sub{ margin:0; } .wk-sum-none, .wk-sum-sub{ color:var(--ink-soft); font-size:var(--fs-xs); } .wk-sum-line strong{ font-size:var(--fs-md); } .wk-sum-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2); width:100%; } .wk-sum-day{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; } .wk-sum-past{ opacity:.7; } .wk-sum-link, .wk-sum-slot{ border:none; background:transparent; padding:0; color:var(--danger); font:inherit; text-align:left; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; } .wk-sum-link{ font-weight:700; } .wk-sum-slots{ display:flex; flex-wrap:wrap; gap:0 var(--sp-3); font-size:var(--fs-xs); } .wk-sum-slot-ro{ cursor:default; text-decoration:none; opacity:.75; } .wk-sum-daytoggle::before{ content:'▸'; display:inline-block; width:1em; text-decoration:none; } .wk-sum-daytoggle[aria-expanded="true"]::before{ content:'▾'; } .wk-sum-day .wk-sum-slots{ padding-left:1em; } .wk-sum-jump{ border:none; background:transparent; padding:0; font:inherit; color:var(--ink-soft); text-decoration:underline; cursor:pointer; } .wk-sum-hours li{ display:flex; justify-content:space-between; gap:var(--sp-3); font-size:var(--fs-xs); color:var(--ink-soft); } table.rota th.wk-flash, table.rota td.wk-flash{ outline:2px solid var(--brand); outline-offset:-2px; } @media (max-width:820px){ .wk-sum{ display:none; } } /* ---------- Overview, "Needs attention" (overviewattention.js). One row per thing to deal with; the row opens the screen where it is dealt with. ---------- */ .ov-attn[hidden]{ display:none; } .ov-list{ display:flex; flex-direction:column; gap:var(--sp-2); } .ov-item{ display:flex; align-items:center; gap:var(--sp-3); width:100%; min-height:var(--h-touch); padding:var(--sp-2) var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; } .ov-item:hover{ background:var(--surface-2); } .ov-count{ min-width:var(--sp-8); justify-content:center; font-size:var(--fs-md); } .ov-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; } .ov-title{ font-weight:600; overflow-wrap:anywhere; } .ov-detail{ color:var(--ink-soft); font-size:var(--fs-xs); overflow-wrap:anywhere; } .ov-go{ color:var(--ink-soft); font-size:var(--fs-xs); font-weight:600; white-space:nowrap; } .ov-go::after{ content:' \203A'; } .ov-ok{ display:flex; align-items:center; gap:var(--sp-3); margin:0; color:var(--success); font-weight:600; } .ov-loading{ margin:0; color:var(--ink-soft); } @media (max-width:820px){ .ov-go{ display:none; } } /* ---------- Schedule, phone "Day" view (scheduleday.js). Shown only at <=820px, for the manager; the week grid is hidden while it is on. ---------- */ .sched-mode{ margin-bottom:var(--sp-3); } .sched-day .grid-scroll-wrap{ display:none; } .day-view{ display:flex; flex-direction:column; gap:var(--sp-3); } .day-view[hidden]{ display:none; } .day-strip{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--sp-1); } .day-chip{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; min-height:var(--h-touch); min-width:0; padding:var(--sp-1) 0; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font:inherit; cursor:pointer; } .day-chip-w{ font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); line-height:1.1; } .day-chip-n{ font-size:var(--fs-base); font-weight:700; line-height:1.1; } .day-chip-dot{ width:6px; height:6px; border-radius:50%; background:transparent; } .day-chip-dot.on{ background:var(--warning); } .day-chip.today .day-chip-n{ color:var(--brand); } .day-chip.closed{ background:var(--danger-bg); } .day-chip.active{ background:var(--brand); border-color:var(--brand); color:var(--brand-ink); } .day-chip.active .day-chip-w, .day-chip.active .day-chip-n{ color:var(--brand-ink); } .day-chip.active .day-chip-dot.on{ background:var(--brand-ink); } .day-nav{ display:flex; align-items:center; gap:var(--sp-2); } .day-title{ flex:1; min-width:0; text-align:center; font-weight:700; font-size:var(--fs-md); } .day-events, .day-open{ background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--sp-3); font-size:var(--fs-base); } .day-open{ background:var(--danger-bg); border-color:transparent; color:var(--danger); } .day-block-head{ font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:var(--sp-1); } .day-event-times{ color:var(--ink-soft); font-size:var(--fs-xs); } .day-open-item{ display:block; width:100%; min-height:var(--h-touch); padding:0; border:none; background:transparent; color:inherit; font:inherit; font-weight:600; text-align:left; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; cursor:pointer; } .day-open-item.day-open-ro{ cursor:default; text-decoration:none; opacity:.75; } .day-summary{ margin:0; font-size:var(--fs-xs); color:var(--ink-soft); } .day-empty{ padding:var(--sp-5) var(--sp-3); text-align:center; color:var(--ink-soft); border:1px dashed var(--border-strong); border-radius:var(--r-md); } .day-group{ display:flex; flex-direction:column; gap:var(--sp-2); } .day-group-head{ display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-2) 0 0; font-size:var(--fs-xs); font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); } .day-group-count{ background:var(--brand-soft); color:var(--brand); border-radius:var(--r-pill); padding:0 var(--sp-2); font-size:var(--fs-xs); } .day-row{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); width:100%; min-height:var(--h-touch); padding:var(--sp-3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface); color:var(--ink); font:inherit; text-align:left; cursor:pointer; position:relative; } .day-row-main{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; } .day-row-name{ font-weight:700; font-size:var(--fs-base); overflow:hidden; text-overflow:ellipsis; } .day-row-sub{ font-size:var(--fs-xs); color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; } .day-row-badges{ display:flex; flex-wrap:wrap; gap:var(--sp-1); margin-top:2px; } .day-row-when{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:none; min-width:96px; padding:var(--sp-2); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:var(--fs-xs); text-align:center; } .day-row-time{ white-space:nowrap; } .day-row-hours{ font-size:var(--fs-xs); opacity:.8; } .day-row-ro, .day-row-left{ cursor:default; } .day-row-left{ color:var(--ink-faint); } .day-row.dnd-source{ opacity:.5; outline:2px dashed var(--brand); outline-offset:-2px; } .day-row.dnd-ok{ outline:2px solid var(--success); outline-offset:-2px; } .day-row.dnd-warn{ outline:2px solid var(--warning); outline-offset:-2px; } .day-row.dnd-block{ outline:2px dashed var(--ink-soft); outline-offset:-2px; } body.move-picking .day-row{ cursor:pointer; } /* Staff: "My shifts" / "Team" */ .seg-tabs{ display:flex; gap:4px; padding:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-md); max-width:520px; } /* the install banner floats over the bottom of the page: leave room so it never hides the last rows */ body.install-banner-on .content{ padding-bottom:140px; } .seg-tab{ flex:1; min-height:40px; border:none; border-radius:var(--r-sm); background:transparent; color:var(--ink-soft); font-weight:600; font-size:var(--fs-base); cursor:pointer; } .seg-tab.active{ background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1); } .next-shift{ background:var(--success-bg); color:var(--success); border-radius:var(--r-md); padding:16px 18px; max-width:520px; } .next-shift-empty{ background:var(--surface-2); color:var(--ink-soft); border:1px solid var(--border); } .next-shift-label{ font-size:var(--fs-xs); font-weight:600; } .next-shift-time{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; line-height:1.25; margin:2px 0; color:var(--ink); } .next-shift-sub{ font-size:var(--fs-base); } .calfeed-row{ max-width:520px; } .calfeed-row .btn{ width:100%; } .calfeed-sheet .actions{ display:flex; flex-wrap:wrap; gap:var(--sp-2); } .calfeed-sheet input[readonly]{ width:100%; box-sizing:border-box; } .calfeed-sec{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--sp-2); padding-top:var(--sp-3); border-top:1px solid var(--border); } .calfeed-sec .alert{ align-self:stretch; } .calfeed-h{ font-size:var(--fs-md); font-weight:600; margin:0; } .calfeed-steps{ margin:0; padding-left:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-base); } .calfeed-emp{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; font-size:var(--fs-base); } .calfeed-emp[hidden]{ display:none; } .my-week{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); max-width:520px; } .my-week-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); font-size:var(--fs-base); } .my-week-row:last-child{ border-bottom:none; } .my-week-day{ white-space:nowrap; color:var(--ink-soft); } .my-week-what{ text-align:right; display:flex; flex-direction:column; align-items:flex-end; } .my-week-shift .my-week-what{ font-weight:600; color:var(--ink); } .my-week-off .my-week-what{ color:var(--danger); font-weight:600; } .my-week-timeoff .my-week-what, .my-week-sick .my-week-what{ color:var(--ink-soft); } .my-week-none .my-week-what{ color:var(--ink-faint); } .my-week-event{ font-size:var(--fs-xs); font-weight:600; color:var(--brand); } .my-week-today{ background:var(--brand-soft); } .my-week-today .my-week-day{ color:var(--ink); font-weight:600; } .my-week-tag{ font-size:var(--fs-xs); font-weight:700; color:var(--brand); text-transform:uppercase; letter-spacing:.05em; margin-left:4px; } .my-week-past{ opacity:.6; } #panel-schedule.staff-tab-mine .grid-scroll-wrap, #panel-schedule.staff-tab-mine .legend, #panel-schedule.staff-tab-mine #roleFilter{ display:none !important; } /* Clock in / out */ .clock-card{ max-width:420px; gap:6px; } .clock-label{ font-size:var(--fs-xs); font-weight:600; color:var(--ink-soft); } .clock-when{ font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; } .clock-warn{ background:var(--warning-bg); color:var(--warning); border-radius:var(--r-sm); padding:10px 12px; font-weight:600; font-size:var(--fs-base); margin-top:4px; } .clock-btn{ width:100%; justify-content:center; min-height:48px; font-size:var(--fs-md); margin-top:8px; } /* Header: Tour and Feedback are the same quiet buttons */ .topbar-help{ display:flex; gap:6px; align-items:center; } .topbar-help .btn{ color:var(--ink-soft); font-weight:500; text-decoration:none; } .topbar-help .btn:hover{ color:var(--ink); } /* Menu icons (inline SVG, one line set) */ .nav-item .ic{ display:inline-flex; align-items:center; justify-content:center; } .nav-item .ic svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* Delete inside an editor, away from the edit button */ .drawer-danger-zone{ border-top:1px solid var(--border); padding-top:14px; margin-top:4px; display:flex; justify-content:flex-start; } /* Overview while data is still loading: grey placeholders, not "0" */ .skeleton{ display:inline-block; min-width:2.2em; height:.9em; border-radius:var(--r-sm); background:var(--surface-2); background:linear-gradient(90deg,var(--surface-2),var(--border),var(--surface-2)); background-size:200% 100%; animation:skeleton 1.2s ease-in-out infinite; vertical-align:middle; } @keyframes skeleton{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } } @media (prefers-reduced-motion: reduce){ .skeleton{ animation:none; } } @media (max-width: 820px){ /* One mobile breakpoint. Body text 15px, fields 16px (iPhone stops zooming the page on every tap), touch targets 44px. Payroll and the Wage tracker are covered too (design system PR 3). */ :root{ --fs-base:15px; } .btn, .icon-btn, .view-toggle-btn, .nav-item{ min-height:var(--h-touch); } .icon-btn{ min-width:var(--h-touch); } .btn-sm{ padding:0 var(--sp-3); } input[type=text], input[type=email], input[type=number], input[type=date], input[type=time], input[type=search], input[type=password], select, textarea{ font-size:16px; } input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea{ font-size:16px; min-height:var(--h-touch); } /* same selector as the base rule (40px on desktop), so it wins */ input[type=checkbox]{ width:22px; height:22px; } .check-chip{ min-height:var(--h-touch); } /* tick-box chips: the whole chip is the target */ .toast-action{ min-height:var(--h-touch); padding:0 var(--sp-4); } .mobile-menu-toggle{ width:var(--h-touch); height:var(--h-touch); } /* Header in two rows: title (+ Tour, Feedback), then the screen's main button at full width — "+ New request" no longer runs off the edge */ .page-head, .topbar{ flex-wrap:wrap; padding:var(--sp-4) var(--sp-4) var(--sp-3); gap:var(--sp-3); } .topbar-title{ flex-wrap:wrap; row-gap:4px; min-width:0; flex:1 1 100%; justify-content:space-between; } .page-head-actions:not(:empty), .topbar-actions:not(:empty){ flex:1 1 100%; flex-wrap:wrap; } .page-head-actions .btn-primary, .topbar-actions .btn-primary{ flex:1 1 auto; justify-content:center; } .content{ padding:18px 16px 60px; } .schedule-actions .btn-primary, .schedule-actions .btn-success{ flex:1 1 auto; justify-content:center; } .seg-tabs{ max-width:none; } .seg-tab{ min-height:var(--h-touch); } } @media (max-width: 820px){ /* align-content:start matters as soon as .app drops to a single column: .app{min-height:100vh} plus two auto-sized grid rows (sidebar, main) means the browser's default row-stretch behaviour splits any leftover vertical space BETWEEN the two rows whenever their combined natural content is shorter than the viewport (e.g. the short Clock in/out panel) — inflating the sidebar into a tall blank bar instead of the slim strip it actually renders as. Pinning both rows to the top and letting any leftover space sit below .main (normal, unremarkable) fixes it without touching either row's own sizing. */ .app{ grid-template-columns:1fr; align-content:start; } /* Was a horizontally-scrolling strip (the venue box, "signed in as" box and every nav item in one scrolling row) — items past the first screenful were just clipped off-screen with no visible hint there was more, which is what made it feel broken. Now a slim bar with a dropdown instead: nothing is ever off-screen or scroll-only. */ .sidebar{ position:relative; flex-direction:row; align-items:center; justify-content:space-between; padding:10px 14px; gap:10px; border-right:none; border-bottom:1px solid var(--border); } .sidebar-foot{ display:none; } .mobile-menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:var(--h-touch); height:var(--h-touch); flex:none; border-radius:var(--r-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--ink); cursor:pointer; } .sidebar-menu{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:14px; padding:14px; background:var(--surface); border:1px solid var(--border); border-top:none; box-shadow:var(--shadow-2); max-height:calc(100vh - 58px); overflow-y:auto; z-index:40; } .sidebar.menu-open .sidebar-menu{ display:flex; } .nav{ flex-direction:column; } /* .week-nav (Schedule/Timesheets date row: ← label → Today, plus on Schedule an "Approved" pill and two view-toggle groups) is a single nowrap flex row — on a 375px screen its items add up to well past the viewport, which doesn't clip, it pushes the whole PAGE wider and makes it scroll sideways, with the tail end (the Approved pill) cut off at the fold. Wrapping it is enough: nothing is hidden, nothing needs its own extra scrollbar. */ .week-nav{ flex-wrap:wrap; row-gap:8px; } .week-label{ min-width:0; } .view-toggle{ margin-left:0; } .stat-row{ grid-template-columns:repeat(2,1fr); } .form-grid, .form-grid.cols-3, .form-grid.cols-4{ grid-template-columns:1fr; } /* Narrower (still legible) name column and day-cell width means more days are visible before a swipe is needed — at 375px this goes from "2.5 of 7 days visible" to roughly 3 full days. scroll-snap makes each swipe land cleanly on a day boundary instead of stopping mid-column. */ table.rota td.rowhead, table.rota th.corner, table.timesheet td.rowhead, table.timesheet th.corner{ min-width:118px; padding:8px 6px; } table.rota .cell{ width:98px; } table.rota.month-view .cell{ width:42px; } table.timesheet .ts-cell{ width:100px; } .grid-scroll{ scroll-snap-type:x proximity; } table.rota .cell, table.rota th:not(.corner), table.timesheet .ts-cell, table.timesheet th:not(.corner){ scroll-snap-align:start; } } @media print{ .sidebar, .topbar-actions, .btn, .week-nav .icon-btn, .legend, .report-box, .panel-lead, .page-hint, .scroll-fade{ display:none !important; } body{ background:var(--print-paper); color:var(--print-ink); } .content{ padding:0; } .grid-scroll{ border:none; } } /* ================================================================================================================== Events and Learn (design system PR 2). One section per module, same prefixes as before; the modules no longer inject