:root { --bg: #faf9f7; --card: #fff; --ink: #1c1917; --muted: #78716c; --line: #e7e5e4; --accent: #b45309; --accent-ink: #fff; --off: #dc2626; --off-bg: #fef2f2; --ok: #15803d; --yellow: #ca8a04; --radius: 12px; --tap: 44px; color-scheme: light; } /* Dark palette. Follows the system until the user picks a side with the header toggle, which stamps data-theme on . Duplicated rather than aliased — custom properties can't be conditionally re-pointed any other way. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #1c1917; --card: #292524; --ink: #f5f5f4; --muted: #a8a29e; --line: #44403c; --accent: #f59e0b; --accent-ink: #1c1917; --off: #f87171; --off-bg: #3b1a1a; --ok: #4ade80; --yellow: #eab308; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #1c1917; --card: #292524; --ink: #f5f5f4; --muted: #a8a29e; --line: #44403c; --accent: #f59e0b; --accent-ink: #1c1917; --off: #f87171; --off-bg: #3b1a1a; --ok: #4ade80; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; padding-bottom: env(safe-area-inset-bottom); } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--accent); } .wrap { max-width: 640px; margin: 0 auto; padding: 0 12px 96px; } header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-top)); padding-top: max(10px, env(safe-area-inset-top)); } header .bar { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 8px; } header h1 { font-size: 17px; margin: 0; flex: 1; font-weight: 650; letter-spacing: -0.01em; } header .sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); } .icon-btn { min-width: var(--tap); min-height: var(--tap); display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 10px; cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 600; } nav.tabs { display: flex; gap: 4px; max-width: 640px; margin: 8px auto 0; } nav.tabs button { flex: 1; min-height: 38px; border: 0; border-radius: 9px; cursor: pointer; background: transparent; color: var(--muted); font-size: 14px; font-weight: 600; } nav.tabs button[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / .08); } /* Toasts stack above the savebar and never take clicks — they're feedback, not UI. */ #toasts { position: fixed; z-index: 21; left: 12px; right: 12px; pointer-events: none; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; } body:has(.savebar:not([hidden])) #toasts { bottom: calc(76px + env(safe-area-inset-bottom)); } .toast { max-width: 420px; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 500; box-shadow: 0 4px 16px rgb(0 0 0 / .2); animation: toast-in .18s ease-out, toast-out .3s ease-in 2.9s forwards; } .toast.ok { background: var(--ok); color: #fff; } .toast.err { background: var(--off); color: #fff; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } .notice { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 12px 14px; margin: 12px 0; font-size: 14px; } .notice strong { display: block; margin-bottom: 2px; } /* The month info box takes its left-border colour from the month's state. */ .notice.warn { border-left-color: var(--off); } .notice.ok { border-left-color: var(--ok); } .notice.info { border-left-color: var(--yellow); } /* --- day list --- */ ul.days { list-style: none; margin: 12px 0 0; padding: 0; } li.day { display: flex; align-items: flex-start; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 6px; padding: 8px 10px; } li.day.weekend { background: color-mix(in srgb, var(--card) 92%, var(--accent)); } .date { width: 62px; flex: none; padding-top: 4px; } .date .dow { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .date .num { font-size: 19px; font-weight: 650; line-height: 1.1; } .shifts { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; } .shift { min-height: var(--tap); min-width: 88px; display: flex; flex-direction: column; justify-content: center; gap: 1px; padding: 4px 12px; cursor: pointer; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; } .shift .lbl { display: flex; align-items: center; gap: 4px; line-height: 1.2; } .shift .lbl sup { font-size: 9px; } .shift .who { font-size: 11px; font-weight: 500; color: var(--muted); } .shift[data-off="1"] { background: var(--off-bg); border-color: var(--off); color: var(--off); text-decoration: line-through; text-decoration-thickness: 1.5px; } /* A shift the logged-in employee is working reads green everywhere it appears. */ .shift[data-mine="1"] { border-color: var(--ok); background: color-mix(in srgb, var(--card) 82%, var(--ok)); } /* Published view: a shift the employee had marked unavailable stays flagged red. */ .shift[data-unavail="1"] { border-color: var(--off); background: var(--off-bg); } .shift[data-unavail="1"] .lbl { color: var(--off); } /* Only the slot name is struck — striking "Closed" or the note reads as a mistake. */ .shift[data-closed="1"] { opacity: .5; } .shift[data-closed="1"] .lbl { text-decoration: line-through; } .shift:disabled { cursor: default; } /* Shift a publish attempt rejected as unstaffed. */ .shift[data-missing="1"] { border-color: var(--off); background: var(--off-bg); color: var(--off); } .chips { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; } .chip { font-size: 11px; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); color: var(--muted); text-decoration: none; display: inline-block; } .chip.event { border-color: var(--accent); color: var(--accent); font-weight: 600; } .chip.event.tentative { border-style: dashed; } .chip.event.hidden-ev { opacity: .4; text-decoration: line-through; } .chip.note { font-style: italic; } /* --- mobile collapsible calendar --- */ .mini-cal { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin: 12px 0; padding: 5px 12px; } .mini-cal[open] { padding: 12px; } .mini-cal summary { list-style: none; cursor: pointer; padding: 10px 0; font-size: 14px; font-weight: 650; } .mini-cal summary::-webkit-details-marker { display: none; } .mini-cal summary::before { content: "▸"; color: var(--muted); margin-right: 6px; } .mini-cal[open] summary::before { content: "▾"; } .mini-head, .mini-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; list-style: none; margin: 0; padding: 0; } .mini-head { margin-bottom: 4px; text-align: center; font-size: 11px; font-weight: 650; text-transform: uppercase; color: var(--muted); } .mini-days > li:first-child { grid-column-start: var(--start); } /* Each day splits into a top (jour) and bottom (soir) half; a worked half goes green. */ .mini-day { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; min-height: 48px; } .mini-day .num { text-align: center; padding: 2px 0 1px; font-size: 10px; font-weight: 700; color: var(--muted); } .mini-day .h { flex: 1; min-height: 13px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; letter-spacing: .02em; overflow: hidden; } /* A worked half goes green and names itself (Lunch / Dinner) in tiny type. */ .mini-day .h.works { background: var(--ok); color: var(--bg); } /* A half the employee had marked unavailable stays red as a reminder. */ .mini-day .h.off { background: var(--off-bg); } .mini-day.today { outline: 2px solid var(--accent); outline-offset: -2px; } /* Desktop already shows the full month as a grid — no need for the mini one. */ @media (min-width: 900px) { .mini-cal { display: none; } } /* --- desktop calendar grid --- */ /* Mobile keeps the vertical day list; the weekday header only exists on wide screens. */ .dow-head { display: none; } @media (min-width: 900px) { .wrap { max-width: 1100px; } header .bar, nav.tabs, .savebar .inner { max-width: 1100px; } .dow-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; margin: 12px 0 6px; padding: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); text-align: center; } ul.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } /* Day 1 lands in its weekday column; consecutive days auto-flow left-to-right. */ ul.days > li:first-child { grid-column-start: var(--start); } li.day { flex-direction: column; align-items: stretch; gap: 6px; min-height: 118px; margin-bottom: 0; } .date { width: auto; padding-top: 0; } .date .dow { display: none; } /* the header row already names the weekday */ .shifts { width: 100%; flex-direction: column; flex-wrap: nowrap; } .shift { width: 100%; min-width: 0; } } /* --- sticky save bar --- */ .savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line); padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; } .savebar[hidden] { display: none; } .savebar .inner { max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 10px; width: 100%; } .savebar span { flex: 1; font-size: 13px; color: var(--muted); } .primary { min-height: var(--tap); padding: 0 22px; border: 0; border-radius: 10px; cursor: pointer; background: var(--accent); color: var(--accent-ink); font-weight: 650; font-size: 15px; } .primary:disabled { opacity: .45; cursor: default; } .ghost { min-height: var(--tap); padding: 0 16px; cursor: pointer; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 14px; } /* Weekday grid: pressed means "starts closed", so it wears the closed-shift look. */ .ghost.shut[aria-pressed="true"] { opacity: .5; text-decoration: line-through; } /* --- forms / config --- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 12px 0; } .card h2 { font-size: 15px; margin: 0 0 10px; } label { display: block; font-size: 13px; color: var(--muted); margin: 10px 0 4px; } input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { width: 100%; min-height: var(--tap); padding: 8px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; } textarea { min-height: 72px; resize: vertical; padding-top: 10px; } .row { display: flex; gap: 8px; align-items: center; } .row > * { flex: 1; } .row > .fit { flex: none; } .staff { padding: 10px 0; border-top: 1px solid var(--line); } /* let the fields shrink instead of pushing the ✕ out of the row — but not the ✕ itself */ .staff .row > input, .staff .row > select { min-width: 0; } .staff .email { color: var(--muted); text-overflow: ellipsis; } .del-btn { min-width: var(--tap); min-height: var(--tap); padding: 0 16px; cursor: pointer; border: 1px solid var(--off); border-radius: 10px; background: var(--off-bg); color: var(--off); font-size: 14px; font-weight: 600; } table.grid { width: 100%; border-collapse: collapse; font-size: 14px; } table.grid td { padding: 6px 4px; border-top: 1px solid var(--line); } table.grid td:first-child { width: 100%; } /* Checkboxes wearing the same pill as the staff toggles. */ .pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; min-height: 38px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; } .pill input { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); } .pill:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .pill:has(input:checked) input { accent-color: var(--accent-ink); } /* Nobody works a closed shift — hide the roster rather than tempt a click. The picks stay in the DOM, so unticking closed brings them back. */ .pills:has(#closed:checked) + .toggle, .sheet:has(#closed:checked) .avail { display: none; } .toggle { display: flex; flex-wrap: wrap; gap: 6px; } .toggle button { min-height: 38px; padding: 0 12px; cursor: pointer; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font-size: 13px; font-weight: 600; } .toggle button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); } .toggle button[data-busy="1"] { opacity: .4; text-decoration: line-through; } /* --- modal sheet --- */ dialog { border: 0; padding: 0; background: transparent; width: 100%; max-width: 640px; margin: auto auto 0; max-height: 88vh; } dialog::backdrop { background: rgb(0 0 0 / .45); } dialog .sheet { background: var(--card); color: var(--ink); border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; } dialog h2 { margin: 0 0 4px; font-size: 17px; } dialog .muted { color: var(--muted); font-size: 13px; margin: 0 0 12px; } .login { max-width: 380px; margin: 12vh auto; padding: 0 20px; text-align: center; } .login h1 { font-size: 22px; margin-bottom: 4px; } .login p { color: var(--muted); font-size: 14px; margin-top: 0; } .login form { display: grid; gap: 10px; } /* Google's button stays light in both themes — the mark needs a light background. */ .login .google { margin-top: 20px; min-height: var(--tap); padding: 0 16px; gap: 10px; display: flex; align-items: center; justify-content: center; text-decoration: none; background: #fff; color: #1f1f1f; border: 1px solid #dadce0; border-radius: 10px; font-size: 15px; font-weight: 600; } .muted { color: var(--muted); } .sep { color: var(--muted); font-size: 13px; margin: 14px 0 10px; } .err { color: var(--off); font-size: 14px; } /* --- hover --------------------------------------------------------------- All of it behind `hover: hover` so a tap on a phone doesn't leave the hovered look stuck on until you tap elsewhere. Tints are color-mix against --ink so one rule reads right in both themes: it darkens on light, lightens on dark. */ nav.tabs button, .primary, .ghost, .del-btn, .pill, .toggle button, .icon-btn, input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea { transition: background .12s, border-color .12s, color .12s; } .shift { transition: background .12s, border-color .12s, box-shadow .12s; } @media (hover: hover) { .icon-btn:hover { background: var(--line); color: var(--ink); } nav.tabs button:not([aria-current="true"]):hover { background: color-mix(in srgb, var(--bg) 88%, var(--ink)); color: var(--ink); } /* A ring, not a background: the shift's own colour already means something (off / mine / closed / missing) and hover must not paint over it. */ .shift:not(:disabled):hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); } .primary:not(:disabled):hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); } .ghost:not(:disabled):hover { background: color-mix(in srgb, var(--card) 90%, var(--ink)); border-color: var(--muted); } .del-btn:hover { background: var(--off); color: #fff; } .pill:not(:has(input:checked)):hover { border-color: var(--muted); color: var(--ink); } .toggle button:not([aria-pressed="true"]):hover { border-color: var(--muted); color: var(--ink); } .toggle button[aria-pressed="true"]:hover, .pill:has(input:checked):hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); } .mini-cal summary:hover { color: var(--accent); } .mini-cal summary:hover::before { color: var(--accent); } input[type=text]:hover, input[type=email]:hover, input[type=tel]:hover, input[type=number]:hover, select:hover, textarea:hover { border-color: var(--muted); } .login .google:hover { background: #f7f8f8; } } @media (prefers-reduced-motion: reduce) { nav.tabs button, .primary, .ghost, .del-btn, .pill, .toggle button, .icon-btn, .shift { transition: none; } }