:root {
--bg: #0f172a;
--panel: #111827;
--ink: #e5e7eb;
--muted: #9ca3af;
--accent: #38bdf8;
--border: #1f2937;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: var(--bg);
color: var(--ink);
min-height: 100vh;
}
.topbar {
display: flex;
align-items: baseline;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: var(--panel);
border-bottom: 1px solid var(--border);
}
main {
max-width: 960px;
margin: 0 auto;
padding: 1.5rem 1.25rem;
}
.card {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.75rem;
padding: 1.25rem 1.5rem;
}
h1 { margin: 0 0 0.5rem; font-size: 1.5rem; }
.muted { color: var(--muted); }
code {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.25rem;
padding: 0.1rem 0.35rem;
font-size: 0.9em;
}
a { color: var(--accent); }
ul { padding-left: 1.25rem; }
/* --- admin nav --- */
.adminnav {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1rem;
}
.adminnav a {
padding: 0.45rem 0.85rem;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.4rem;
text-decoration: none;
color: var(--ink);
}
.adminnav a:hover { border-color: var(--accent); }
/* --- Mobile hamburger menu ---
* Pure-CSS toggle using a hidden checkbox. On desktop the burger is
* hidden and the nav renders inline. On mobile (<= 720px) the nav
* collapses and the burger toggles it open/closed.
*
* Markup pattern (in every template that has an .adminnav):
*
*
*
*
* The label has 3 stacked spans (the ☰ bars), which animate to an ✕
* via CSS transforms when checked.
*/
.nav-burger { display: none; }
.nav-toggle-cb { display: none; }
@media (max-width: 720px) {
.nav-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 4px;
width: 2.6rem;
height: 2.6rem;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.4rem;
cursor: pointer;
padding: 0 0.7rem;
margin-bottom: 1rem;
user-select: none;
}
.nav-burger span {
display: block;
height: 2px;
background: var(--ink);
border-radius: 1px;
transition: transform 150ms ease, opacity 150ms ease;
transform-origin: center;
}
.nav-toggle-cb:checked ~ .nav-burger {
border-color: var(--accent);
}
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(1) {
transform: translateY(6px) rotate(45deg);
}
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
.nav-toggle-cb:checked ~ .nav-burger span:nth-child(3) {
transform: translateY(-6px) rotate(-45deg);
}
.adminnav {
display: none;
flex-direction: column;
gap: 0.4rem;
background: var(--panel);
padding: 0.5rem;
border-radius: 0.4rem;
margin: -0.5rem 0 1rem;
}
.nav-toggle-cb:checked ~ .adminnav {
display: flex;
}
.adminnav a {
padding: 0.6rem 0.85rem;
}
}
/* --- buttons --- */
.btn, .btn-secondary {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 0.4rem;
border: 1px solid var(--border);
background: var(--accent);
color: #0b1220;
font-weight: 600;
text-decoration: none;
cursor: pointer;
}
.btn-secondary {
background: transparent;
color: var(--ink);
}
button.link {
background: none;
border: none;
color: var(--accent);
cursor: pointer;
padding: 0;
font: inherit;
}
button.link.danger { color: #f87171; }
.inline { display: inline; }
/* --- card head --- */
.cardhead {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.cardhead h1 { margin: 0; }
/* --- tables --- */
table.grid {
width: 100%;
border-collapse: collapse;
}
table.grid th, table.grid td {
text-align: left;
padding: 0.5rem 0.6rem;
border-bottom: 1px solid var(--border);
}
table.grid th {
color: var(--muted);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
table.grid tr.inactive td { color: var(--muted); }
.row-actions { display: flex; gap: 0.75rem; align-items: center; flex-wrap: nowrap; }
.row-actions a { color: var(--accent); text-decoration: none; }
.row-action-primary { font-weight: 600; }
/* "More ▾" popover menu on /admin/staff. The cell stays at one-link
* width on a wide screen; clicking the summary reveals a stacked menu
* that floats above the table so it doesn't reflow surrounding rows. */
details.row-menu {
display: inline-block;
position: relative;
}
details.row-menu > summary {
list-style: none;
cursor: pointer;
color: var(--accent);
padding: 0.1rem 0.3rem;
border-radius: 0.3rem;
user-select: none;
}
details.row-menu > summary::-webkit-details-marker { display: none; }
details.row-menu[open] > summary {
background: rgba(56, 189, 248, 0.12);
}
.row-menu-popover {
position: absolute;
top: 100%;
right: 0;
margin-top: 0.3rem;
min-width: 11rem;
z-index: 50;
background: var(--panel, #0f172a);
border: 1px solid var(--border, #334155);
border-radius: 0.45rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
padding: 0.5rem 0.6rem;
display: flex;
flex-direction: column;
gap: 0.45rem;
white-space: nowrap;
}
.row-menu-popover form.inline { margin: 0; }
.row-menu-popover details { width: 100%; }
.row-menu-popover .link {
text-align: left;
padding: 0.1rem 0;
}
/* --- forms --- */
form.stack {
display: flex;
flex-direction: column;
gap: 0.85rem;
max-width: 480px;
}
form.stack label {
display: flex;
flex-direction: column;
gap: 0.3rem;
font-size: 0.9rem;
color: var(--muted);
}
form.stack input[type=text],
form.stack input[type=email],
form.stack input[type=tel],
form.stack input[type=number],
form.stack input[type=date],
form.stack input[type=time],
form.stack input[type=datetime-local],
form.stack textarea {
padding: 0.55rem 0.7rem;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
color: var(--ink);
font: inherit;
}
form.stack input[type=date]::-webkit-calendar-picker-indicator,
form.stack input[type=time]::-webkit-calendar-picker-indicator,
form.stack input[type=datetime-local]::-webkit-calendar-picker-indicator {
filter: invert(0.85);
cursor: pointer;
}
/* On desktop, our datepicker.js handles the click. Block the native
* calendar indicator's internal click handler from opening the OS
* popup — pointer-events:none lets the click fall through to the
* input body, where our mousedown listener fires. Mobile (coarse
* pointer) keeps the native picker, so we don't apply this there. */
@media (pointer: fine) {
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator {
pointer-events: none;
}
}
form.stack input[type=color] {
width: 4rem;
height: 2.2rem;
padding: 0;
background: transparent;
border: 1px solid var(--border);
border-radius: 0.4rem;
}
fieldset.rolelist {
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 0.75rem 1rem;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
fieldset.rolelist legend { padding: 0 0.4rem; color: var(--muted); }
.checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem; color: var(--ink) !important; }
.formactions { display: flex; gap: 0.75rem; justify-content: flex-end; }
/* --- stats --- */
dl.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
margin: 0;
}
dl.stats div {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 0.75rem 0.9rem;
}
dl.stats dt { color: var(--muted); font-size: 0.85rem; }
dl.stats dd { margin: 0.2rem 0 0; font-size: 1.5rem; font-weight: 600; }
/* --- color swatch --- */
.swatch {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
border-radius: 0.2rem;
border: 1px solid var(--border);
vertical-align: middle;
}
/* --- schedule grid --- */
.weeknav { display: flex; gap: 0.5rem; }
.weekgrid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem;
}
.daycol {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 0.5rem;
min-height: 8rem;
}
.daycol h3 {
margin: 0 0 0.5rem;
font-size: 0.85rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
ul.shifts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.shift {
border-left: 3px solid var(--accent);
background: #111827;
padding: 0.4rem 0.5rem;
border-radius: 0.3rem;
font-size: 0.85rem;
}
.shift.open { border-left-style: dashed; }
.shift-time { font-weight: 600; }
.shift-role { color: var(--muted); }
.shift-staff em { color: #fbbf24; font-style: normal; }
.tag-chip {
display: inline-block;
margin-left: 0.4rem;
padding: 0.1rem 0.4rem;
border-radius: 0.25rem;
font-size: 0.7rem;
color: #0b1220;
font-weight: 600;
}
/* --- hover-target utility ---
* Reusable dashed-outline-on-hover effect for any cell that's clickable
* but has no obvious affordance (empty grid squares, editable table cells,
* etc). Use the .hover-target class anywhere you want this behavior; the
* inline-edit selectors below compose against the same visual.
*/
.hover-target {
transition: background 120ms ease, outline 120ms ease;
}
.hover-target:hover {
background: rgba(56, 189, 248, 0.08);
outline: 1px dashed var(--accent);
outline-offset: -3px;
cursor: pointer;
}
/* --- inline editing --- */
td.editable {
cursor: text;
transition: background 120ms ease, outline 120ms ease;
}
td.editable:hover {
background: rgba(56, 189, 248, 0.08);
outline: 1px dashed var(--accent);
outline-offset: -3px;
}
td.editable input.inline-input {
width: 100%;
padding: 0.35rem 0.45rem;
background: #0b1220;
color: var(--ink);
border: 1px solid var(--accent);
border-radius: 0.3rem;
font: inherit;
box-sizing: border-box;
}
td.editable input.inline-input[type=color] {
width: 3rem;
height: 1.8rem;
padding: 0;
cursor: pointer;
}
td.flash-ok {
background: rgba(34, 197, 94, 0.18) !important;
}
td.flash-err {
background: rgba(239, 68, 68, 0.18) !important;
}
.editable-field {
cursor: pointer;
border-radius: 0.2rem;
padding: 0 0.2rem;
transition: background 120ms ease, outline 120ms ease;
}
.editable-field:hover {
background: rgba(56, 189, 248, 0.12);
outline: 1px dashed rgba(56,189,248,0.6);
outline-offset: 1px;
}
.editable-field input.inline-input,
.editable-field select.inline-input {
padding: 0.2rem 0.3rem;
background: #0b1220;
color: var(--ink);
border: 1px solid var(--accent);
border-radius: 0.25rem;
font: inherit;
width: auto;
max-width: 100%;
}
.editable-field.flash-ok { background: rgba(34, 197, 94, 0.25); }
.editable-field.flash-err { background: rgba(239, 68, 68, 0.25); }
.tag-add, .notes-add { color: var(--muted); font-style: italic; opacity: 0.7; }
.tag-add:hover, .notes-add:hover { opacity: 1; }
/* When both tag + note are empty placeholders, share one row to save
* vertical space inside the shift card. nowrap on the children so the
* "+ tag" / "+ note" tokens never split. */
.shift-add-row {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
font-size: 0.72rem;
line-height: 1.2;
overflow: hidden;
}
.shift-add-row .tag-add,
.shift-add-row .notes-add {
padding: 0;
white-space: nowrap;
}
/* Empty placeholders hide by default and only reveal on shift card hover —
* keeps the grid tight when not editing. Targets the three template paths
* that produce empty-state hints (combined row, standalone +tag span,
* standalone +note div). Real content (filled tag-chip / shift-notes) is
* unaffected. On touch (hover: none), always show so the placeholders are
* tappable without a hover gesture. */
.shift > .shift-add-row,
.shift > .tag-add,
.shift > .shift-notes.notes-add {
display: none;
}
.shift:hover > .shift-add-row { display: flex; }
.shift:hover > .tag-add,
.shift:hover > .shift-notes.notes-add { display: block; }
@media (hover: none) {
.shift > .shift-add-row { display: flex; }
.shift > .tag-add,
.shift > .shift-notes.notes-add { display: block; }
}
/* --- click-to-create popover --- */
.cell {
cursor: copy; /* hint: click empty area to add a shift */
}
.cell .shift {
cursor: grab;
}
.popover {
position: absolute;
z-index: 50;
background: #0b1220;
border: 1px solid var(--accent);
border-radius: 0.5rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
padding: 0.85rem 1rem;
width: min(360px, calc(100vw - 24px));
}
.popover.hidden { display: none; }
.popover-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.popover-head strong { font-size: 0.95rem; }
.popover-head .cancel-btn { margin-left: auto; }
.popover-fields {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem 0.7rem;
margin-bottom: 0.75rem;
}
.popover-fields label {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.8rem;
color: var(--muted);
}
.popover-fields label.span2 { grid-column: span 2; }
.popover-fields input[type=time],
.popover-fields input[type=text],
.popover-fields select {
padding: 0.4rem 0.5rem;
background: #111827;
border: 1px solid var(--border);
border-radius: 0.3rem;
color: var(--ink);
font: inherit;
}
.popover-fields input:focus,
.popover-fields select:focus {
outline: none;
border-color: var(--accent);
}
.popover-actions {
display: flex;
justify-content: flex-end;
gap: 0.5rem;
}
/* --- staff list auth bits --- */
.badge-admin {
display: inline-block;
margin-left: 0.4rem;
padding: 0.05rem 0.4rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
background: rgba(56, 189, 248, 0.18);
color: #38bdf8;
border: 1px solid rgba(56, 189, 248, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Location chip — only rendered for non-default locations (i.e. LA today).
* Same shape as .badge-admin but tinted violet so it visually differs at
* a glance. */
.badge-loc {
display: inline-block;
margin-left: 0.4rem;
padding: 0.05rem 0.4rem;
border-radius: 0.25rem;
font-size: 0.7rem;
font-weight: 600;
background: rgba(167, 139, 250, 0.18);
color: #a78bfa;
border: 1px solid rgba(167, 139, 250, 0.4);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.login-cell .status-set { color: #4ade80; font-size: 0.85rem; }
.login-cell .status-locked { color: #f87171; font-size: 0.85rem; }
details.pin-form { display: inline; }
details.pin-form summary {
cursor: pointer;
color: var(--accent);
list-style: none;
display: inline;
}
details.pin-form summary::-webkit-details-marker { display: none; }
.pin-inline {
display: inline-flex;
gap: 0.4rem;
margin-left: 0.4rem;
align-items: center;
}
.pin-inline input[type=password] {
padding: 0.25rem 0.4rem;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.25rem;
color: var(--ink);
font: inherit;
width: 7rem;
}
.login-card {
max-width: 28rem;
margin: 4rem auto;
}
.login-card h1 { margin-bottom: 0.5rem; }
.login-card .stack input[type=password],
.login-card .stack select {
padding: 0.55rem 0.7rem;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
color: var(--ink);
font: inherit;
}
.login-card .formactions { justify-content: stretch; }
.login-card .btn { width: 100%; padding: 0.7rem; }
.alert {
background: rgba(239, 68, 68, 0.12);
border: 1px solid rgba(239, 68, 68, 0.45);
color: #fca5a5;
padding: 0.6rem 0.8rem;
border-radius: 0.4rem;
margin: 0 0 0.75rem;
font-size: 0.9rem;
}
.login-cell .status-pending { color: #fcd34d; font-size: 0.85rem; }
details.invite-link { display: inline; }
details.invite-link summary {
cursor: pointer;
color: var(--accent);
list-style: none;
display: inline;
}
details.invite-link summary::-webkit-details-marker { display: none; }
.invite-box {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
margin-top: 0.4rem;
padding: 0.5rem;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
width: 100%;
max-width: 36rem;
}
.invite-box input[type=text] {
flex: 1 1 22rem;
min-width: 0;
padding: 0.4rem 0.5rem;
background: #111827;
border: 1px solid var(--border);
border-radius: 0.3rem;
color: var(--ink);
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.8rem;
}
.consent-card { max-width: 36rem; margin: 2rem auto; }
.consent-text {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 1rem 1.1rem;
margin: 1rem 0;
font-family: -apple-system, system-ui, sans-serif;
font-size: 0.92rem;
line-height: 1.45;
white-space: pre-wrap;
color: var(--ink);
}
.alert.success {
background: rgba(34, 197, 94, 0.12);
border-color: rgba(34, 197, 94, 0.45);
color: #86efac;
}
/* --- staff week grid (horizontal, mirrors /admin/schedule) --- */
.staff-week {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.4rem;
margin-top: 0.75rem;
}
.staff-week .day-col {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 0.45rem 0.5rem;
min-height: 7rem;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.staff-week .day-col h3 {
margin: 0 0 0.2rem;
font-size: 0.78rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: center;
}
.staff-week .day-col h3 .date {
display: block;
color: var(--ink);
font-weight: 600;
margin-top: 0.1rem;
text-transform: none;
letter-spacing: 0;
}
.staff-week .day-col.empty { opacity: 0.55; }
/* Per-day "+ propose a shift" button sits inside the header
* of each day column. Tiny, inline, only visible on hover/focus so
* it doesn't compete with the date label. */
.staff-week .day-col h3 .propose-btn {
font-size: 1rem;
line-height: 1;
padding: 0.1rem 0.4rem;
margin-left: 0.3rem;
color: var(--accent);
opacity: 0.65;
border-radius: 0.3rem;
}
.staff-week .day-col:hover h3 .propose-btn,
.staff-week .day-col h3 .propose-btn:focus {
opacity: 1;
background: rgba(56, 189, 248, 0.12);
}
/* On mobile the day stack puts the header full-width — keep button always visible */
@media (max-width: 720px) {
.staff-week .day-col h3 .propose-btn { opacity: 1; }
}
.staff-week .day-col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.staff-week .day-col .shift,
.staff-week .day-col .open-shift-card {
cursor: default;
background: #111827;
font-size: 0.82rem;
padding: 0.4rem 0.5rem;
}
/* On narrow screens (phones), drop to a single-column stack so cards stay
readable. The admin grid does its own thing via horizontal scroll. */
@media (max-width: 720px) {
.staff-week {
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
.staff-week .day-col { min-height: 0; }
.staff-week .day-col h3 { text-align: left; }
}
.adminnav .link {
margin-left: auto;
color: var(--accent);
}
/* --- /clock page --- */
.clock-card {
max-width: 28rem;
margin: 2rem auto;
text-align: center;
}
.clock-card h1 { margin-bottom: 0.4rem; }
.clock-card .btn-big {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.1rem;
margin: 1.25rem 0 0.5rem;
}
.todays-shifts {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
text-align: left;
}
.todays-shifts li {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.35rem;
padding: 0.5rem 0.7rem;
margin: 0.4rem 0;
font-size: 0.9rem;
}
#clock-status.warn { color: #fcd34d; }
#clock-status.err { color: #f87171; }
#clock-status.ok { color: #4ade80; }
/* --- Modal (in-app confirm; replaces native confirm for iOS PWA) --- */
.modal {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
padding: 1rem;
}
.modal.hidden { display: none; }
.modal-body {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1.25rem 1.4rem;
width: min(28rem, 100%);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.modal-body p { margin: 0 0 1rem; line-height: 1.45; }
.modal-actions {
display: flex;
gap: 0.6rem;
justify-content: flex-end;
}
/* --- who's on now --- */
.role-pill {
display: inline-block;
padding: 0.1rem 0.5rem;
border: 1px solid var(--border);
border-radius: 0.25rem;
font-size: 0.85rem;
}
.distance-ok { color: #4ade80; }
.distance-warn { color: #fcd34d; }
.distance-alert { color: #f87171; font-weight: 600; }
/* --- /open-shifts (and pending claims block on /my-schedule) --- */
.open-shift-list {
list-style: none;
padding: 0;
margin: 1rem 0 0;
display: flex;
flex-direction: column;
gap: 0.65rem;
}
.open-shift-card {
border-left: 3px solid var(--accent);
background: #0b1220;
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: 0.4rem;
padding: 0.7rem 0.9rem;
}
.open-shift-meta {
display: flex;
gap: 0.6rem;
align-items: baseline;
margin-bottom: 0.2rem;
}
.open-shift-role {
color: var(--ink);
margin-bottom: 0.4rem;
}
.open-shift-claims {
margin-bottom: 0.5rem;
}
.open-shift-actions {
display: flex;
gap: 0.6rem;
align-items: center;
flex-wrap: wrap;
}
.open-shift-actions .status-pending {
color: #fcd34d;
font-size: 0.9rem;
}
.open-shift-actions .status-mine {
color: #4ade80;
font-size: 0.9rem;
font-weight: 600;
}
.open-shift-actions .status-taken {
color: var(--muted);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.open-shift-card.state-taken {
opacity: 0.55;
border-left-style: dashed;
}
.open-shift-card.state-mine {
background: rgba(34, 197, 94, 0.08);
}
/* --- view toggle (Week / Month) --- */
.view-toggle {
display: inline-flex;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 0.15rem;
margin: 0.5rem 0 0.75rem;
}
.view-toggle a {
padding: 0.35rem 0.85rem;
border-radius: 0.3rem;
text-decoration: none;
color: var(--muted);
font-size: 0.85rem;
}
.view-toggle a.on {
background: var(--accent);
color: #0b1220;
font-weight: 600;
}
.view-toggle a:hover:not(.on) { color: var(--ink); }
/* --- month grid (admin schedule, my-schedule, open-shifts month view) --- */
.month-grid {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 1px;
background: var(--border);
border: 1px solid var(--border);
border-radius: 0.5rem;
overflow: hidden;
margin-top: 0.5rem;
}
.month-head {
background: #111827;
text-align: center;
padding: 0.5rem 0.4rem;
font-size: 0.78rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.month-cell {
background: #0b1220;
min-height: 7.5rem;
padding: 0.4rem 0.45rem;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.2rem;
text-decoration: none;
color: var(--ink);
transition: background 100ms ease;
}
.month-cell:hover { background: #111827; }
.month-cell.out-of-month { background: #070d18; opacity: 0.45; }
.month-cell.today .cell-date {
background: var(--accent);
color: #0b1220;
border-radius: 999px;
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.cell-date {
font-size: 0.78rem;
color: var(--muted);
margin-bottom: 0.2rem;
align-self: flex-end;
}
.month-cell.today .cell-date { align-self: flex-end; }
.cell-chip {
display: flex;
flex-direction: column;
gap: 0.05rem;
background: #111827;
border-left: 3px solid var(--accent);
padding: 0.2rem 0.35rem;
border-radius: 0.2rem;
font-size: 0.72rem;
line-height: 1.2;
overflow: hidden;
min-width: 0;
}
.chip-line-1, .chip-line-2, .chip-line-3 {
display: flex;
align-items: baseline;
gap: 0.3rem;
min-width: 0;
overflow: hidden;
white-space: nowrap;
}
.chip-time { color: var(--muted); flex-shrink: 0; }
.chip-hours {
color: var(--muted);
font-size: 0.62rem;
flex-shrink: 0;
}
.chip-role {
color: var(--ink);
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.chip-who {
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
flex: 1;
}
.chip-who.open { color: #fbbf24; }
.chip-who.mine { color: #4ade80; }
.chip-who.taken { color: #94a3b8; font-style: italic; }
/* Legacy initials badge (kept for the staff PWA's compact chip use) */
.chip-init {
background: rgba(56, 189, 248, 0.18);
color: #38bdf8;
border-radius: 0.2rem;
padding: 0 0.3rem;
font-size: 0.65rem;
font-weight: 700;
flex-shrink: 0;
}
.chip-init.open { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }
.chip-init.mine { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
.chip-init.taken { background: rgba(148, 163, 184, 0.15); color: #94a3b8; }
.cell-chip.state-taken { opacity: 0.55; border-left-style: dashed; }
.cell-chip.state-mine { background: rgba(34, 197, 94, 0.08); }
/* Draft chips in the admin month view — dashed surround + DRAFT pill */
.cell-chip.status-draft {
opacity: 0.75;
border-top: 1px dashed rgba(252, 211, 77, 0.45);
border-right: 1px dashed rgba(252, 211, 77, 0.45);
border-bottom: 1px dashed rgba(252, 211, 77, 0.45);
border-left-style: dashed;
}
.chip-draft-pill {
font-size: 0.55rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0 0.3rem;
border-radius: 3px;
text-transform: uppercase;
background: rgba(252, 211, 77, 0.2);
color: #fcd34d;
border: 1px solid rgba(252, 211, 77, 0.4);
flex-shrink: 0;
}
.staff-week .day-col .shift .shift-actions {
margin-top: 0.25rem;
}
.staff-week .day-col .shift .request-trade-btn {
font-size: 0.78rem;
}
/* --- email preview --- */
.email-preview-html {
background: #f8fafc;
color: #0f172a;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 1.25rem 1.5rem;
margin-top: 0.75rem;
max-width: 42rem;
}
.email-preview-html a { color: #0369a1; }
.email-preview-text {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 1rem 1.1rem;
margin-top: 0.5rem;
font-family: ui-monospace, SFMono-Regular, monospace;
font-size: 0.85rem;
line-height: 1.55;
white-space: pre-wrap;
color: var(--ink);
max-width: 60rem;
overflow-x: auto;
}
@media (max-width: 720px) {
.month-cell { min-height: 5rem; padding: 0.3rem; }
.cell-chip { font-size: 0.62rem; padding: 0.15rem 0.2rem; }
.chip-init { display: none; }
.chip-hours { display: none; }
}
.reveal-loc {
margin-left: 0.6rem;
font-size: 0.8rem;
color: var(--accent);
}
.loc-detail {
display: block;
margin-top: 0.3rem;
font-size: 0.8rem;
}
/* --- gameplan --- */
.progress-bar {
height: 0.5rem;
background: #0b1220;
border: 1px solid var(--border);
border-radius: 999px;
overflow: hidden;
margin: 0.75rem 0 0.5rem;
}
.progress-bar-fill {
height: 100%;
background: linear-gradient(90deg, #22c55e 0%, #38bdf8 100%);
transition: width 400ms ease;
}
.card + .card { margin-top: 1rem; }
.phase-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.25rem;
}
.phase-header h2 {
margin: 0;
font-size: 1.05rem;
display: flex;
align-items: baseline;
gap: 0.6rem;
}
.phase-week {
color: var(--muted);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
min-width: 5.5rem;
}
.phase-title { font-weight: 600; }
.phase-summary { margin: 0.25rem 0 0.75rem; }
.badge {
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0.2rem 0.55rem;
border-radius: 999px;
font-weight: 600;
}
.badge-done { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.badge-in_progress { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border: 1px solid rgba(251,191,36,0.4); }
.badge-todo { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.3); }
.badge-deferred { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border: 1px solid rgba(148,163,184,0.25); }
.phase-done { border-left: 3px solid #22c55e; }
.phase-in_progress { border-left: 3px solid #fbbf24; }
.phase-todo { border-left: 3px solid #475569; }
.phase-deferred { border-left: 3px solid #334155; opacity: 0.85; }
.checklist {
list-style: none;
padding: 0;
margin: 0.5rem 0 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.checklist .item {
display: flex;
gap: 0.6rem;
align-items: baseline;
font-size: 0.92rem;
}
.checklist .item-icon {
display: inline-block;
min-width: 1.1rem;
text-align: center;
font-weight: 700;
}
.item-done .item-icon { color: #4ade80; }
.item-in_progress .item-icon { color: #fcd34d; }
.item-todo .item-icon { color: #64748b; }
.item-deferred .item-icon { color: #475569; }
.item-done .item-text { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(148,163,184,0.3); }
.item-deferred .item-text { color: var(--muted); }
.item-note { display: block; font-size: 0.82rem; margin-top: 0.1rem; }
/* --- schedule grid v2 (Open + per-staff rows × 7 days) --- */
.schedule-toolbar {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0.75rem 0;
flex-wrap: wrap;
}
.newshift-form {
background: #0b1220;
border: 1px solid var(--border);
border-radius: 0.5rem;
padding: 1rem;
margin-bottom: 1rem;
}
.newshift-form.hidden { display: none; }
.grid-fields {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.grid-fields label {
display: flex;
flex-direction: column;
gap: 0.25rem;
font-size: 0.85rem;
color: var(--muted);
}
.grid-fields label.span2 { grid-column: span 2; }
.grid-fields select,
.grid-fields input[type=time],
.grid-fields input[type=text] {
padding: 0.5rem 0.6rem;
background: #111827;
border: 1px solid var(--border);
border-radius: 0.35rem;
color: var(--ink);
font: inherit;
}
.schedgrid {
border: 1px solid var(--border);
border-radius: 0.5rem;
overflow: hidden;
background: #0b1220;
}
.schedrow {
display: grid;
grid-template-columns: 9rem repeat(7, minmax(0, 1fr));
}
.schedrow > * {
border-top: 1px solid var(--border);
border-right: 1px solid var(--border);
padding: 0.4rem 0.45rem;
min-height: 4.5rem;
box-sizing: border-box;
}
.schedrow > *:last-child { border-right: none; }
.schedrow:first-child > * { border-top: none; }
.schedrow.head > * {
background: #111827;
color: var(--muted);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.04em;
text-align: center;
padding: 0.5rem 0.4rem;
min-height: 0;
}
.schedrow.head .rowlabel { text-transform: none; }
.daycol-head { line-height: 1.2; }
.rowlabel {
background: #111827;
color: var(--ink);
font-weight: 600;
display: flex;
align-items: center;
padding: 0.4rem 0.7rem;
}
.open-row .rowlabel { color: #fbbf24; }
.cell {
display: flex;
flex-direction: column;
gap: 0.3rem;
background: var(--bg);
/* Reserve clickable empty space at the bottom of every cell so admin
* can add another shift in a cell that already has cards. Without
* this, the cell auto-shrinks to its content and there's nowhere
* to click. */
min-height: 4.5rem;
padding-bottom: 1.25rem;
}
.cell.drop-active {
background: rgba(56, 189, 248, 0.10);
outline: 2px dashed var(--accent);
outline-offset: -3px;
}
.shift {
border-left: 3px solid var(--accent);
background: #111827;
padding: 0.35rem 0.45rem;
border-radius: 0.3rem;
font-size: 0.82rem;
cursor: grab;
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.shift:active { cursor: grabbing; }
.shift.unassigned { border-left-style: dashed; }
/* Draft shifts: visually downplayed (lower opacity, dashed top + bottom
* edges) and labeled with a DRAFT pill in .shift-head. Published shifts
* are the default look — no extra adornment, since most cards are live. */
.shift.status-draft {
opacity: 0.7;
background: #0f172a;
border-top: 1px dashed rgba(252, 211, 77, 0.5);
border-bottom: 1px dashed rgba(252, 211, 77, 0.5);
border-right: 1px dashed rgba(252, 211, 77, 0.5);
}
.shift-status-pill {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.08em;
padding: 0.1rem 0.35rem;
border-radius: 3px;
text-transform: uppercase;
}
.shift-status-pill.draft {
background: rgba(252, 211, 77, 0.2);
color: #fcd34d;
border: 1px solid rgba(252, 211, 77, 0.45);
}
/* PUNCH pill for orphan time_clock cards on the admin grid — same
* shape as DRAFT but slate-tinted so it reads as "this isn't a
* scheduled shift, it's an actual punch". */
.shift-status-pill.orphan {
background: rgba(148, 163, 184, 0.18);
color: #cbd5e1;
border: 1px solid rgba(148, 163, 184, 0.45);
}
/* NEEDS APPROVAL pill — amber-on-dark to read "review me before lock".
* Disappears once admin_reviewed_at is stamped, leaving just PUNCH. */
.shift-status-pill.needs-approval {
background: rgba(251, 191, 36, 0.22);
color: #fcd34d;
border: 1px solid rgba(251, 191, 36, 0.55);
}
/* Orphan-punch card on /admin/schedule. Dashed left edge + slate
* tint, distinct from regular shifts but living in the same cell. */
.shift.orphan-punch {
background: rgba(148, 163, 184, 0.06);
border-left-style: dashed;
}
.shift.orphan-punch:hover {
background: rgba(56, 189, 248, 0.10);
}
/* Cards that still need review get an amber halo so admin can scan a
* busy week and spot what to act on. The Approve button gets its own
* row at the bottom of the card. */
.shift.orphan-punch.needs-approval {
box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.45);
}
.shift.orphan-punch .orphan-approve-form {
margin-top: 0.25rem;
display: block;
}
.shift.dragging { opacity: 0.4; }
.shift.flash-ok { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.55); }
.shift.flash-err { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.55); }
.shift-head {
display: flex;
align-items: center;
gap: 0.4rem;
}
.shift-time { font-weight: 600; flex: 1; }
.shift-role { color: var(--muted); }
.shift-notes { font-style: italic; }
.shift-actions { display: flex; gap: 0.6rem; font-size: 0.78rem; }
.shift-cancel { margin-left: auto; }
.cancel-btn { color: #f87171; font-size: 0.9rem; line-height: 1; padding: 0; }
/* History affordance — small ⓘ button on each shift card. Sits to the
* left of the cancel ✕. Muted by default; brightens on hover so it
* doesn't compete with the time + role text. */
.shift-history-btn {
color: var(--muted);
font-size: 0.9rem;
line-height: 1;
padding: 0;
margin-left: auto;
}
.shift-history-btn:hover { color: var(--accent); }
/* When both the history button + cancel form are present, the cancel
* form already has margin-left:auto; reset the history button to a
* normal spacing so they sit adjacent rather than spread apart. */
.shift-head .shift-history-btn + .shift-cancel { margin-left: 0; }
/* Shift-history modal body (fetched fragment).
* Summary header sits above a vertical timeline of audit events. */
.shift-history-summary {
border: 1px solid var(--border);
border-radius: 0.4rem;
padding: 0.6rem 0.8rem;
margin: 0.5rem 0 0.75rem;
background: rgba(56, 189, 248, 0.04);
}
.shift-history-summary .role-pill {
display: inline-block;
border: 1px solid;
border-radius: 0.4rem;
padding: 0.05rem 0.45rem;
font-size: 0.78rem;
margin-right: 0.3rem;
}
.shift-history-timeline {
list-style: none;
padding: 0;
margin: 0;
border-left: 2px solid var(--border);
padding-left: 0.8rem;
}
.shift-history-timeline .history-event {
position: relative;
padding: 0.45rem 0;
display: flex;
gap: 0.6rem;
align-items: flex-start;
}
.history-event + .history-event {
border-top: 1px dashed rgba(148, 163, 184, 0.18);
}
.history-icon {
font-size: 1.05rem;
line-height: 1.3;
min-width: 1.4rem;
text-align: center;
}
.history-body { flex: 1; }
.history-headline { line-height: 1.3; }
.dot {
display: inline-block;
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #475569;
vertical-align: middle;
}
.dot-draft { background: #94a3b8; }
.dot-published { background: #22c55e; }
.muted-link { color: var(--muted) !important; }
.small { font-size: 0.85rem; }
/* Admin per-shift punch buttons on the schedule grid. The .shift-punch
* row sits at the bottom of the card; the actual button text is small
* and color-coded by action. Hidden until the card is hovered so the
* grid stays tight when not actively punching. */
.shift-punch {
display: none;
align-items: center;
gap: 0.4rem;
margin-top: 0.3rem;
padding-top: 0.3rem;
border-top: 1px dashed rgba(148, 163, 184, 0.18);
font-size: 0.72rem;
}
.shift:hover .shift-punch { display: flex; }
.punch-in-btn { color: #4ade80; font-weight: 600; }
.punch-out-btn { color: #fbbf24; font-weight: 600; }
.punch-done { color: #94a3b8; font-style: italic; }
@media (hover: none) {
.shift-punch { display: flex; }
}
/* Manual-punch form (free-form admin-created time_clock entries) */
.manual-punch-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
/* Payroll pending card — accumulated since last lock + future estimate.
* Amber border + tinted bg to telegraph "PENDING" at a glance. */
.pending-card {
border-left: 3px solid #fbbf24;
background: rgba(251, 191, 36, 0.04);
}
/* Rows in the pending card's tables are click-to-correct on /my-paystubs.
* The .tc-row class already exists for payroll-period editing; reusing it
* here gives staff the same hover affordance. */
.pending-card table tr.tc-row { cursor: pointer; }
.pending-card table tr.tc-row:hover {
background: rgba(56, 189, 248, 0.10);
}
.pending-card table tr.tc-row:focus {
outline: 2px solid #38bdf8;
outline-offset: -2px;
}
/* Location toggle on /admin/schedule — All · NY · LA. Sits below the
* week-nav. Active option gets a brighter background to read as
* selected, others stay muted. */
.loc-toggle {
display: flex;
gap: 0.35rem;
align-items: center;
margin: 0.4rem 0 0.75rem;
flex-wrap: wrap;
}
.loc-toggle .btn-secondary {
padding: 0.3rem 0.7rem;
font-size: 0.85rem;
}
.loc-toggle .btn-secondary.active {
background: rgba(56, 189, 248, 0.18);
color: #38bdf8;
border-color: rgba(56, 189, 248, 0.55);
}
/* Collapsible pending tables on /admin/payroll. The renders
* inline (title on the left, totals pushed to the right) so the
* collapsed state still shows the headline number. Hides default
* disclosure triangle in favor of a custom flex layout. */
.pending-card details > summary {
list-style: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.2rem 0;
}
.pending-card details > summary::-webkit-details-marker { display: none; }
.pending-card details > summary::before {
content: "▸";
display: inline-block;
margin-right: 0.4rem;
color: var(--muted);
transition: transform 0.15s;
}
.pending-card details[open] > summary::before { transform: rotate(90deg); }
.pending-summary-totals {
font-size: 0.95rem;
color: var(--ink);
}
/* Close-by callout — sits above the pending cards, tells admin the
* deadline to lock the books so Paychex has 3 biz days to process.
* Amber by default; flips red when today is on or past the close-by
* date (.overdue) so the user can't miss it. */
.close-by-callout {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.4rem;
padding: 0.65rem 0.9rem;
margin: 0 0 1rem;
border: 1px solid rgba(251, 191, 36, 0.45);
background: rgba(251, 191, 36, 0.08);
border-radius: 0.4rem;
font-size: 0.95rem;
}
.close-by-callout.overdue {
border-color: rgba(248, 113, 113, 0.55);
background: rgba(248, 113, 113, 0.10);
}
.close-by-callout strong { color: var(--ink); }
/* Flash banner — one-shot success/info message shown above a page after
* a redirect-with-message (e.g. 'Published 8 drafts' after Publish quietly).
* Reload of the page kills it since the ?flash= query is gone. */
.flash-banner {
background: rgba(34, 197, 94, 0.18);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.4);
border-radius: 0.4rem;
padding: 0.65rem 0.9rem;
margin: 0 0 1rem;
font-size: 0.95rem;
}
/* ----------------------------------------------------------------------
* Mobile responsive helpers (breakpoint: 720px)
*
* .desktop-only — visible only on desktop (hidden below 720px)
* .mobile-only — visible only on mobile (hidden at 721px+)
*
* Use these to swap content depending on screen size. The admin UI uses
* them for: hiding Payroll on mobile (data-heavy; meant for sit-down
* sessions), compacting Claims & Trades tables, and showing collapse
* affordances on Staff / Roles rows.
* -------------------------------------------------------------------- */
.mobile-only { display: none; }
@media (max-width: 720px) {
.desktop-only { display: none !important; }
.mobile-only { display: block; }
}
/* "Open on desktop" notice card shown on mobile in place of pages
* that aren't worth designing for phones (Payroll). */
.mobile-redirect-notice {
padding: 1rem;
border: 1px dashed var(--border);
border-radius: 0.5rem;
color: var(--muted);
text-align: center;
margin: 1rem 0;
}
.mobile-redirect-notice strong { color: var(--ink); display: block; margin-bottom: 0.25rem; }
/* Collapsed admin table rows on mobile (Staff, Roles).
* Each row gets a tap target — admin.js toggles .expanded on the row.
* In collapsed state, only the cells with .row-primary are visible.
* Expanded: all cells visible + the toggle indicator flips. */
@media (max-width: 720px) {
table.grid.collapsible tbody tr td:not(.row-primary):not(.row-expand) {
display: none;
}
/* When the row is expanded, hidden cells switch BACK to display:block
* (not table-cell — that'd put them on a horizontal table-row track
* pushing content off-screen on narrow widths). */
table.grid.collapsible tbody tr.expanded td:not(.row-expand) {
display: block;
}
table.grid.collapsible tbody tr.expanded {
background: rgba(56, 189, 248, 0.04);
}
.row-expand {
text-align: center;
color: var(--muted);
cursor: pointer;
user-select: none;
padding: 0.45rem 0.5rem !important;
border-top: 1px dashed rgba(148, 163, 184, 0.25);
margin-top: 0.25rem;
font-size: 0.75rem;
letter-spacing: 0.05em;
}
.row-expand::before {
content: "▾ more";
display: inline-block;
transition: transform 120ms ease;
}
tr.expanded .row-expand::before {
content: "▴ less";
}
/* Hide table header on mobile when in collapsed mode — labels live
* inside each cell via data-label instead. */
table.grid.collapsible thead { display: none; }
table.grid.collapsible tbody tr {
display: block;
border-bottom: 1px solid var(--border);
padding: 0.4rem 0;
}
table.grid.collapsible tbody tr td {
display: block;
padding: 0.25rem 0.5rem;
border: none;
}
table.grid.collapsible tbody tr td[data-label]::before {
content: attr(data-label) ": ";
color: var(--muted);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-right: 0.3rem;
}
table.grid.collapsible tbody tr td.row-primary {
font-size: 1rem;
padding: 0.5rem;
}
}
/* Approvals tables: drop secondary columns on mobile, leaving just the
* essential signal (staff + shift + action buttons). */
@media (max-width: 720px) {
.approvals-table th.col-secondary,
.approvals-table td.col-secondary { display: none; }
.approvals-table thead th { font-size: 0.7rem; padding: 0.3rem 0.4rem; }
.approvals-table td { padding: 0.4rem; vertical-align: top; }
.approvals-table .role-pill,
.approvals-table .tag-chip { font-size: 0.7rem; padding: 0.05rem 0.4rem; }
}
/* --- Mobile schedule (admin_schedule.html .mobile-only block) ---
* Vertical day stack matching the Homebase mobile pattern. Each day
* is a section with a + button to add a shift, and shifts inside are
* card rows with time | initials avatar | name + role + hours + status.
* Only renders below the 720px breakpoint. */
.mobile-day-list {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin-top: 0.75rem;
}
.mobile-day {
background: rgba(56, 189, 248, 0.02);
border-radius: 0.5rem;
padding: 0.75rem;
}
.mobile-day.today {
background: rgba(56, 189, 248, 0.08);
border: 1px solid rgba(56, 189, 248, 0.2);
}
.mobile-day-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
gap: 0.75rem;
}
.mobile-day-head h3 {
margin: 0;
font-size: 0.95rem;
color: var(--ink);
font-weight: 600;
}
.mobile-day-head .badge {
margin-left: 0.4rem;
font-size: 0.6rem;
}
.mobile-day-add {
background: rgba(56, 189, 248, 0.15);
color: var(--accent);
border: 1px solid rgba(56, 189, 248, 0.4);
width: 2rem;
height: 2rem;
border-radius: 0.4rem;
font-size: 1.2rem;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
padding: 0;
}
.mobile-day-add:hover { background: rgba(56, 189, 248, 0.25); }
.mobile-day-empty {
padding: 0.6rem 0.4rem;
font-style: italic;
margin: 0;
}
.mobile-shift-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mobile-shift {
display: grid;
grid-template-columns: 3.5rem 2.5rem 1fr auto;
gap: 0.6rem;
align-items: center;
background: var(--panel);
border-left: 3px solid var(--accent);
border-radius: 0.4rem;
padding: 0.6rem 0.7rem;
}
.mobile-shift.unassigned {
border-left-style: dashed;
}
.mobile-shift.status-draft {
opacity: 0.85;
background: rgba(0, 0, 0, 0.18);
}
.mobile-shift-time {
font-size: 0.85rem;
line-height: 1.2;
color: var(--ink);
text-align: right;
}
.mobile-shift-time .muted { font-size: 0.75rem; }
.mobile-shift-avatar {
width: 2.2rem;
height: 2.2rem;
border-radius: 50%;
background: rgba(56, 189, 248, 0.2);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.75rem;
letter-spacing: 0.02em;
}
.mobile-shift-body {
min-width: 0;
overflow: hidden;
}
.mobile-shift-name {
font-weight: 600;
color: var(--ink);
font-size: 0.92rem;
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.mobile-shift-role {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--muted);
margin-top: 0.15rem;
}
.mobile-shift-role .dot {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
flex-shrink: 0;
}
.mobile-shift-role .tag-chip {
font-size: 0.65rem;
padding: 0 0.35rem;
border-radius: 3px;
color: #0b1220;
}
.mobile-shift-hours {
margin-top: 0.15rem;
}
.mobile-shift-cancel { align-self: flex-start; }
.mobile-shift-cancel .cancel-btn {
color: #f87171;
font-size: 1rem;
padding: 0.2rem 0.4rem;
}
/* --- notifications page: per-kind expand/collapse rows --- */
.email-kind-list {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin-top: 0.5rem;
}
.email-kind {
border: 1px solid var(--border);
border-radius: 0.5rem;
background: rgba(56, 189, 248, 0.04);
overflow: hidden;
}
.email-kind > summary {
cursor: pointer;
padding: 0.7rem 0.9rem;
list-style: none;
display: flex;
align-items: center;
gap: 0.75rem;
user-select: none;
}
.email-kind > summary::-webkit-details-marker { display: none; }
.email-kind > summary::before {
content: "›";
color: var(--muted);
font-size: 1.1rem;
transition: transform 150ms ease;
display: inline-block;
width: 0.9rem;
text-align: center;
flex-shrink: 0;
}
.email-kind[open] > summary::before { transform: rotate(90deg); }
.email-kind > summary:hover { background: rgba(56, 189, 248, 0.09); }
.email-kind-name {
background: rgba(56, 189, 248, 0.15);
color: var(--accent);
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.78rem;
flex-shrink: 0;
}
.email-kind-subject { color: var(--ink); }
.email-kind[open] > summary { border-bottom: 1px solid var(--border); }
.email-kind .email-preview-html,
.email-kind .email-preview-text {
margin: 0;
border-radius: 0;
}
.email-kind > details, .email-kind > p { margin: 0; padding: 0.6rem 0.9rem; }
.email-kind > p { background: rgba(0, 0, 0, 0.15); }
/* --- custom date picker (datepicker.js) ---
* Replaces the tiny native macOS calendar popup with a big themed
* month grid. Mobile keeps the native picker — that's the better UX
* with a coarse pointer. */
.tas-datepicker {
position: absolute;
z-index: 200;
width: 320px;
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0.5rem;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
padding: 0.75rem;
color: var(--ink);
user-select: none;
}
.tas-dp-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-bottom: 0.6rem;
}
.tas-dp-title {
font-weight: 600;
font-size: 1rem;
text-align: center;
flex: 1;
}
.tas-dp-nav {
background: rgba(56, 189, 248, 0.1);
color: var(--accent);
border: 1px solid rgba(56, 189, 248, 0.35);
width: 2rem;
height: 2rem;
border-radius: 0.4rem;
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition: background 100ms ease;
}
.tas-dp-nav:hover { background: rgba(56, 189, 248, 0.22); }
.tas-dp-dow-row {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
margin-bottom: 4px;
}
.tas-dp-dow {
text-align: center;
font-size: 0.7rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
padding: 0.25rem 0;
}
.tas-dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.tas-dp-day {
aspect-ratio: 1 / 1;
background: rgba(56, 189, 248, 0.04);
color: var(--ink);
border: 1px solid transparent;
border-radius: 0.4rem;
cursor: pointer;
font-size: 0.95rem;
transition: background 100ms ease, border-color 100ms ease;
padding: 0;
}
.tas-dp-day:hover:not(.disabled) {
background: rgba(56, 189, 248, 0.18);
border-color: rgba(56, 189, 248, 0.5);
}
.tas-dp-day.out { color: var(--muted); opacity: 0.45; }
.tas-dp-day.today {
border-color: var(--accent);
color: var(--accent);
font-weight: 600;
}
.tas-dp-day.selected {
background: var(--accent);
color: #0b1220;
border-color: var(--accent);
font-weight: 600;
}
.tas-dp-day.disabled {
opacity: 0.3;
cursor: not-allowed;
}
.tas-dp-foot {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.6rem;
padding-top: 0.6rem;
border-top: 1px solid var(--border);
}
.tas-dp-foot-btn {
background: transparent;
color: var(--muted);
border: none;
cursor: pointer;
font-size: 0.85rem;
padding: 0.25rem 0.6rem;
border-radius: 0.3rem;
}
.tas-dp-foot-btn:hover { color: var(--ink); background: rgba(148,163,184,0.1); }
/* --- date-range row (payroll preview, etc.) ---
* Two date inputs side-by-side, scaled up so the native picker trigger
* is comfortable to tap. Stacks back to two rows under 540px. */
.date-range-row {
display: flex;
align-items: flex-end;
gap: 0.75rem;
flex-wrap: wrap;
}
.date-range-row .date-field {
flex: 1 1 13rem;
min-width: 12rem;
display: flex;
flex-direction: column;
}
.date-range-row .date-arrow {
font-size: 1.3rem;
padding: 0 0.2rem 0.6rem;
user-select: none;
}
.date-range-row input[type=date] {
font-size: 1.05rem;
padding: 0.7rem 0.85rem;
line-height: 1.2;
background: #0b1220;
color: var(--ink);
border: 1px solid var(--border);
border-radius: 0.4rem;
cursor: pointer;
transition: border-color 120ms ease, box-shadow 120ms ease;
}
.date-range-row input[type=date]:hover {
border-color: var(--accent);
}
.date-range-row input[type=date]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
/* Make the native calendar icon visible on dark themes (defaults to black
* SVG which is invisible against our dark input bg). */
.date-range-row input[type=date]::-webkit-calendar-picker-indicator {
filter: invert(0.85);
cursor: pointer;
padding: 0.15rem;
}
/* --- payroll tables --- */
table.data-table {
width: 100%;
border-collapse: collapse;
margin-top: 0.5rem;
}
table.data-table th, table.data-table td {
padding: 0.5rem 0.75rem;
text-align: left;
border-bottom: 1px solid #1e293b;
vertical-align: middle;
}
table.data-table th {
color: var(--muted);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
table.data-table td.r, table.data-table th.r { text-align: right; }
.badge.ok { background: rgba(34, 197, 94, 0.18); color: #4ade80; border: 1px solid rgba(34,197,94,0.4); }
.badge.warn { background: rgba(251, 191, 36, 0.18); color: #fcd34d; border: 1px solid rgba(251,191,36,0.4); }
.weekhrs {
display: inline-block;
font-size: 0.7rem;
color: var(--muted);
margin-left: 0.4rem;
padding: 0.1rem 0.4rem;
border-radius: 4px;
background: rgba(148, 163, 184, 0.12);
}
.weekhrs.over40 {
color: #fcd34d;
background: rgba(251, 191, 36, 0.18);
border: 1px solid rgba(251, 191, 36, 0.4);
font-weight: 600;
}
/* claims modal — opened by clicking an open published shift on the schedule grid */
.claims-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.btn-secondary.small, .link.small { padding: 0.2rem 0.55rem; font-size: 0.78rem; }
/* Orphan time_clock punches surfaced on /my-schedule + the month grid
* — clocked in without (or outside) a scheduled shift. Slate-tinted to
* stand apart from real shifts, but kept inline with them so the
* staffer doesn't lose track of when they worked. */
.staff-week .day-col .shift.orphan-punch {
background: rgba(148, 163, 184, 0.08);
border-left-style: dashed;
}
/* Actual in/out shown below scheduled times once a punch lands on a
* shift. Smaller + muted so the scheduled times remain the headline,
* with the actual numbers as confirmation. */
.shift-actual {
margin-top: 0.15rem;
font-size: 0.78rem;
}
/* Click-to-edit on the payroll preview + period detail pages. Rows in
* .tc-editable tables get a hover state + pointer to signal they're
* clickable. Inspired by Homebase's Pay period review screen. */
table.tc-editable tr.tc-row { cursor: pointer; }
table.tc-editable tr.tc-row:hover {
background: rgba(56, 189, 248, 0.08);
}
table.tc-editable tr.tc-row:focus {
outline: 2px solid #38bdf8;
outline-offset: -2px;
}
/* Read-only timeline rows — shift-only no-shows + locked-period rows.
* No pointer, no hover highlight. Shift-only rows are tinted slate so
* admin can spot "person was scheduled but never clocked in" at a glance. */
table.data-table tr.tc-row-readonly { cursor: default; }
table.data-table tr.tc-row-noshow {
background: rgba(148, 163, 184, 0.08);
}
table.data-table tr.tc-row-noshow td:first-child::before {
content: "·";
color: #94a3b8;
margin-right: 0.4rem;
font-weight: bold;
}
/* Unscheduled punches (clocked in but no matching shift) get an amber
* left edge to flag them — these are the rows admin most often wants
* to inspect (wrong shift assignment? legit overtime? new role?). */
table.data-table tr.tc-row-unscheduled {
box-shadow: inset 3px 0 0 #fbbf24;
}
/*