/* ══════════════════════════════════════════════════════════════════════ wk-my-timesheet.css — My Timesheet (Week / Day) Tokens only, no new palette: --c-blue / the --ink ramp / --shadow-* / --radius all come from work.css. Light theme only, because work.css defines no dark palette and inventing one here would misrepresent the product. The dialog deliberately borrows work.css's `wk-qa-*` popup furniture (overlay, popup, head/body/foot, label, input, btn) rather than growing its own — it is the SAME popup object the rest of Work uses, with three extra pieces on top: the context strip, the "already logged here" list, and the refusal line. Two colours carry meaning and are used for nothing else: purple (--c-purple) = a machine produced this, no human confirmed it amber (--c-yellow) = we did NOT hear this, and will not guess it ══════════════════════════════════════════════════════════════════════ */ .mts-root { display: flex; flex-direction: column; gap: 10px; } /* ═════════════════════════════════════════════════════════════════════ WHOSE SHEET THIS IS — A CHIP, NOT A BANNER This was a full-width band with a gradient, a blue left rule, a 15px **My hours only** and a *Private to you* lock badge. Tyler, 2026-08-26: *"It should not say Private to you at the top because it's just your hours. Don't say My hours only… you're almost just making it too obvious."* The answer is not to delete the answer. It is to stop shouting it: your face at 24px, your name, and the words *your hours* at label size, first in the toolbar. Still unmissable, no longer a proclamation. ═════════════════════════════════════════════════════════════════════ */ .mts-who { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--border-s); border: 1px solid var(--border); max-width: 260px; min-width: 0; } .mts-who-face { flex: 0 0 auto; display: inline-flex; } .mts-who-face .ep-circle { border-radius: 50%; overflow: hidden; border: 1.5px solid #fff; } .mts-who-nm { font-size: 12.5px; font-weight: 650; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mts-who-sub { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; color: var(--ink3); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } /* ── toolbar ───────────────────────────────────────────────────────── */ .mts-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; box-shadow: var(--shadow-sm); } .mts-seg { display: inline-flex; background: var(--border-s); border-radius: 999px; padding: 3px; } .mts-seg button { font-size: 13px; font-weight: 600; color: var(--ink2); padding: 6px 16px; border-radius: 999px; transition: all .18s var(--ease-spring); } .mts-seg button.is-on { background: var(--surf); color: var(--c-blue); box-shadow: var(--shadow-sm); } /* ⚠️ THE ARROWS ARE ADDRESSED BY NAME, not as `.mts-datenav button`. The month picker lives inside this nav (it is anchored to it), so a descendant selector here would make every day of every month a 30px square icon button. */ .mts-datenav { display: inline-flex; align-items: center; gap: 6px; position: relative; } .mts-datenav > button[data-mts-nav] { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--ink2); transition: background .15s; } .mts-datenav > button[data-mts-nav]:hover { background: var(--border-s); color: var(--ink); } .mts-datenav > button[data-mts-nav] svg { width: 16px; height: 16px; } /* The period on screen is a BUTTON onto the month picker, so it looks like one: a hover, a pressed state, and a calendar glyph saying what it opens. A bare span here read as a caption and nobody found the picker behind it. */ .mts-datelbl { font-size: 14px; font-weight: 650; min-width: 172px; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 5px 12px; border-radius: 10px; border: 1px solid transparent; transition: background .15s, border-color .15s; } .mts-datelbl svg { width: 14px; height: 14px; color: var(--ink3); flex: 0 0 auto; } .mts-datelbl:hover { background: var(--border-s); } .mts-datelbl:hover svg { color: var(--c-blue); } .mts-datelbl.is-open { background: var(--c-blue-bg); border-color: var(--c-blue-soft); color: var(--c-blue); } .mts-datelbl.is-open svg { color: var(--c-blue); } /* ════════════════════════════════════════════════════════════════════ THE MONTH PICKER Anchored to the nav, not portaled to — it must die when the sheet does. Monday-first, and it carries a WEEK column, because the week grain travels by week and “which week was that” is the question being asked. ════════════════════════════════════════════════════════════════════ */ .mts-cal { position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%); z-index: 60; width: 318px; background: var(--surf); border: 1px solid var(--border); border-radius: 14px; padding: 11px; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 7px; animation: wkFadeUp .16s var(--ease-spring); } .mts-cal-head { display: flex; align-items: center; gap: 6px; } .mts-cal-nav { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--ink2); flex: 0 0 auto; transition: background .14s; } .mts-cal-nav:hover { background: var(--border-s); color: var(--ink); } .mts-cal-nav svg { width: 14px; height: 14px; } .mts-cal-title { flex: 1 1 auto; text-align: center; font-size: 13.5px; font-weight: 750; color: var(--ink); letter-spacing: -.01em; } .mts-cal-dow, .mts-cal-wk { display: grid; grid-template-columns: repeat(7, 1fr) 42px; gap: 2px; align-items: center; } .mts-cal-dow span { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink4); text-transform: uppercase; letter-spacing: .06em; } .mts-cal-dowt { color: var(--ink4); } .mts-cal-grid { display: flex; flex-direction: column; gap: 2px; } /* The whole week shades, because in the week grain that is the unit you are about to travel to. */ .mts-cal-wk { border-radius: 9px; padding: 1px; } .mts-cal-wk:hover { background: var(--border-s); } .mts-cal-wk.is-on { background: var(--c-blue-bg); } .mts-cal-d { position: relative; height: 32px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1; transition: background .13s, color .13s; } .mts-cal-d:hover { background: var(--surf); box-shadow: inset 0 0 0 1px var(--border); } .mts-cal-d.is-off { color: var(--ink4); font-weight: 500; } .mts-cal-d.is-today { color: var(--c-blue); font-weight: 800; } .mts-cal-d.is-sel { background: var(--c-blue); color: #fff; font-weight: 750; box-shadow: 0 2px 8px rgba(37, 99, 235, .3); } .mts-cal-d.is-sel:hover { background: var(--c-blue); box-shadow: 0 2px 8px rgba(37, 99, 235, .3); } /* A day ahead of today is reachable — you may look at next week — but it is dimmed, because nothing can be logged into it. */ .mts-cal-d.is-future { opacity: .45; } .mts-cal-n { display: block; } .mts-cal-dot { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--c-blue); } .mts-cal-d.is-sel .mts-cal-dot { background: #fff; } .mts-cal-wt { text-align: right; padding-right: 4px; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink2); } .mts-cal-wt.is-zero { color: var(--ink4); font-weight: 500; } .mts-cal-foot { display: flex; align-items: center; gap: 9px; padding-top: 8px; border-top: 1px solid var(--border-s); } .mts-cal-note { flex: 1 1 auto; font-size: 11px; color: var(--ink3); line-height: 1.4; } .mts-cal-today { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; background: var(--c-blue); padding: 6px 13px; border-radius: 9px; transition: filter .14s; } .mts-cal-today:hover { filter: brightness(1.12); } .mts-cal-today svg { width: 13px; height: 13px; } .mts-today { font-size: 12px; font-weight: 600; color: var(--c-blue); background: var(--c-blue-bg); padding: 5px 11px; border-radius: 999px; } /* ══ SEARCH + NEW ENTRY — THE APP'S OWN CLOTHES, NOT THIS PAGE'S ══════ Tyler, 2026-08-26: *"the search bar at the top, next to the date changer where it says New entry, should match the same design as all of our other buttons. That one is way too big… Overall, just match the same design as other stuff in the Work Hub."* So neither of these is styled here. The search box wears `.wk-focus-search-wrap` and the button wears `.wk-focus-new-btn`, both out of work.css — the same two controls every focus-panel header in this app already uses. The old `.mts-add-main` was 13px/9px×16px/10px-radius against the house 11.5px/5px×12px/8px, which is why it read as the biggest thing on the page. All that is left here is where they sit. ═════════════════════════════════════════════════════════════════════ */ .mts-bar .mts-search { flex: 1 1 190px; min-width: 140px; max-width: 320px; margin-left: 2px; } .mts-bar .mts-search input[type="search"]::-webkit-search-cancel-button { cursor: pointer; } .mts-bar .mts-new { margin-left: 0; } /* ══ ONE BUTTON, AND NOTHING BESIDE IT ═════════════════════════ This was a SPLIT button for one day — a face plus a ▾ carrying three ways to add time (Troy's concept, 2026-08-26). Tyler took the ▾ off on 2026-08-27: *"we dont need the dropdown next to new entry… it's the same button and it shows the Log Time popup, they can decide from there."* 🚨 SO THERE IS NOTHING LEFT TO STYLE, AND THAT IS THE FIX. The split button squared off the face's right-hand corners (`border-top-right-radius: 0`) so the two halves could share one outline. With the ▾ gone that override would leave a pill flat on one side for no reason — a button that looks clipped. `.wk-focus-new-btn` rounds all four corners itself, so the only correct amount of CSS here is none: the button now wears the app's own clothes with nothing on top of them. ⚠️ `.wk-focus-new-btn` ships `margin-left: auto` (it is normally the last thing in a header). In this bar it is the FIRST thing, which is why the `.mts-bar .mts-new` override above exists and must stay. ════════════════════════════════════════════════════════════════════ */ /* 🚨 "what if I want to see just my full list" — the Entries grain, narrowed to you, over all time. It is deliberately quiet: it navigates, it does not write. Same 11.5px/5px×12px house metrics as `.wk-focus-new-btn`. ⚠️ IT NO LONGER SITS BESIDE the Log time button. Troy moved that to the far left on 2026-08-26; this now sits on the right-hand end with the two read-only controls, which is where a thing that only changes your view belongs. */ .mts-full { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: var(--ink2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; display: inline-flex; align-items: center; gap: 6px; background: var(--surf); white-space: nowrap; transition: all .15s; } .mts-full:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); } .mts-full svg { width: 13px; height: 13px; } /* The filter, said out loud. It narrows the strip as well as the grid, so if it were silent the day totals would look wrong rather than filtered. */ .mts-filternote { display: flex; align-items: center; gap: 9px; background: var(--c-blue-bg); border: 1px solid var(--c-blue-soft); border-radius: var(--radius); padding: 9px 14px; font-size: 12.5px; color: var(--ink2); line-height: 1.4; } .mts-filternote svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--c-blue); } .mts-filternote b { color: var(--ink); font-weight: 750; } .mts-filternote > span { flex: 1 1 auto; min-width: 0; } .mts-filternote button { flex: 0 0 auto; font-size: 12px; font-weight: 650; color: var(--c-blue); background: var(--surf); border: 1px solid var(--c-blue-soft); padding: 5px 11px; border-radius: 999px; transition: all .15s; } .mts-filternote button:hover { background: var(--c-blue); color: #fff; border-color: var(--c-blue); } /* ── week strip — THE DAY GRAIN'S ONLY, since 2026-08-31 ─────────────── */ /* 🚨 THE WEEK AND THE FORTNIGHT DO NOT USE THIS ANY MORE. It is a CSS grid OUTSIDE the table, so its day tiles could never line up with the grid's day columns — which is how the sheet ended up with two rows of weekday headings, only one of them aligned. render() hides it in those two grains and the table carries its own / . Day view is unchanged. ⚠️ `[hidden]` has to out-specify `display: grid`, hence the attribute selector rather than a bare `[hidden] { display: none }`. */ .mts-strip[hidden] { display: none; } .mts-strip { display: grid; grid-template-columns: repeat(7, 1fr) 128px; gap: 6px; background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; box-shadow: var(--shadow-sm); } /* == THE PAY PERIOD: the same strip, fourteen days wide ==================== ⚠️ `minmax(0, 1fr)`, not `1fr`. A grid track's default minimum is its own content, which was harmless at seven tiles and is not at fourteen: they refuse to shrink and shove the total column off the panel. Letting them compress, with tighter type so they stay readable while they do. */ .mts-root.is-pay .mts-strip { grid-template-columns: repeat(14, minmax(0, 1fr)) 96px; gap: 4px; } .mts-root.is-pay .mts-wd { padding: 8px 2px; } .mts-root.is-pay .mts-wd-name { font-size: 9.5px; letter-spacing: 0; } .mts-root.is-pay .mts-wd-hrs { font-size: 11.5px; } .mts-root.is-pay .mts-wd-name svg { display: none; } /* The seam between week one and week two. Fourteen identical tiles read as one very long week; one rule down the middle is the cheapest thing that makes it two — and it is an inset shadow on the eighth tile rather than a gap, so the track sizing above is untouched. */ .mts-root.is-pay .mts-wd.is-wkbreak { box-shadow: inset 2px 0 0 -1px var(--border); } .mts-wd { display: flex; flex-direction: column; gap: 3px; align-items: center; padding: 9px 4px; border-radius: 11px; border: 1px solid transparent; transition: all .16s var(--ease-spring); } .mts-wd:hover { background: var(--border-s); } .mts-wd.is-sel { background: var(--c-blue-bg); border-color: var(--c-blue-soft); } .mts-wd.is-today .mts-wd-name { color: var(--c-blue); font-weight: 750; } .mts-wd.is-weekend { opacity: .72; } /* A day that has not happened yet is not a place to put hours. */ .mts-wd.is-future { opacity: .42; } .mts-wd.is-future .mts-wd-hrs { color: var(--ink4); } .mts-wd-name { font-size: 11px; font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 4px; } .mts-wd-name svg { width: 10px; height: 10px; color: var(--c-blue); } .mts-wd-hrs { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .mts-wd-hrs.is-zero { color: var(--ink4); font-weight: 500; } /* A WORKING DAY THAT IS OVER WITH NOTHING ON IT — the one thing a timesheet exists to tell you, and it was a grey 0:00 among six other grey 0:00s. Not today (today is not over) and never the weekend. */ /* Flagged, not highlighted. A full --c-yellow-bg block turned three of five weekdays into a wall of amber - measured in a browser, not guessed. This is the same signal at a whisper, with the weight on a hairline and the figure rather than on the fill. */ .mts-wd.is-gap { background: #fffbeb; box-shadow: inset 0 0 0 1px #fde68a; } .mts-wd.is-gap:hover { background: #fef6dd; } .mts-wd.is-gap .mts-wd-name { color: #a16207; } .mts-wd.is-gap .mts-wd-hrs { color: #b45309; font-weight: 700; } .mts-wd-total { background: var(--border-s); cursor: default; } .mts-wd-total:hover { background: var(--border-s); } /* ── views ─────────────────────────────────────────────────────────── */ .mts-view { display: none; } .mts-view.is-on { display: block; animation: wkFadeUp .22s var(--ease-spring); } /* ════════════════════════════════════════════════════════════════════ ROTATING THROUGH THE WEEKS READS AS ROTATING The SAME gesture as the capacity wizard's period rotation — same distance, same duration, same spring (`.wkal-screen.is-slide-*` in wk-allocate.css) — because it is the same act. Two dialects of one movement is how an app stops feeling like one app. The grid, the day strip and the label all travel, or the numbers slide while the date they are about sits perfectly still. ════════════════════════════════════════════════════════════════════ */ .mts-view.is-on.is-slide-next { animation: mtsSlideNext .38s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } .mts-view.is-on.is-slide-prev { animation: mtsSlidePrev .38s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } .mts-strip.is-slide-next { animation: mtsSlideNext .38s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } .mts-strip.is-slide-prev { animation: mtsSlidePrev .38s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } @keyframes mtsSlideNext { from { opacity: .3; transform: translateX(40px); } to { opacity: 1; transform: none; } } @keyframes mtsSlidePrev { from { opacity: .3; transform: translateX(-40px); } to { opacity: 1; transform: none; } } /* The label moves a shorter distance than the numbers do — it is the thing they are about, not another one of them. */ [data-mts-lbl].is-in-next { animation: mtsLblNext .3s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } [data-mts-lbl].is-in-prev { animation: mtsLblPrev .3s var(--ease-spring, cubic-bezier(.22,1,.36,1)); } @keyframes mtsLblNext { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes mtsLblPrev { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mts-view.is-on.is-slide-next, .mts-view.is-on.is-slide-prev, .mts-strip.is-slide-next, .mts-strip.is-slide-prev, [data-mts-lbl].is-in-next, [data-mts-lbl].is-in-prev, .mts-cal { animation: none; } } .mts-card { background: var(--surf); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════ DAY VIEW — NOTHING. AND THAT IS THE POINT. 🚨 THERE IS DELIBERATELY NO RULE FOR `.mts-tb` HERE. The day grain is built by financials.js's own `WkFinEntriesTable`, with the same seven columns as the Entries grain, so fin-rollups.css already sizes it correctly and every override would be this page disagreeing with the table it asked to borrow. `.mts-tb` survives only as a scope hook for a harness. An earlier build carried six column widths, a WHAT YOU DID column of its own, an amber "no description" flag and a status badge. Tyler, 2026-08-26: *"It's literally just use the same exact entry that we have in the Entries tab for the day view. How many times do I have to tell you that?"* — so they went, along with the quick-add box, its mic and its suggestion list. ══════════════════════════════════════════════════════════════════════ */ /* ONE door under the day: Add an entry. "Log my whole day" was withdrawn from this page — it is the Log Time popup's own hero and it is in the rail. */ .mts-day-acts, .mts-empty-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--border-s); background: var(--surf); } .mts-empty-acts { justify-content: center; border-top: none; padding-top: 16px; } /* ⚠️ `.mts-day-tot` is gone. The day table already footers its own total in the Entries table's own footer row, one line above where this sat. */ .mts-empty { padding: 44px 20px; text-align: center; } .mts-empty svg { width: 34px; height: 34px; color: var(--ink4); margin-bottom: 10px; } .mts-empty-t { font-size: 14px; font-weight: 650; color: var(--ink2); } .mts-empty-s { font-size: 12.5px; color: var(--ink3); margin-top: 4px; } .mts-empty-acts svg { width: 15px; height: 15px; margin: 0; color: inherit; } /* 🚨 You cannot log time ahead of today, and the day view says so rather than quietly withdrawing its controls. */ .mts-future-note { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--c-yellow-bg); border-bottom: 1px solid var(--c-yellow); font-size: 12.5px; color: #92400e; line-height: 1.45; } .mts-future-note svg { width: 16px; height: 16px; flex: 0 0 auto; } .mts-future-note b { font-weight: 700; } /* ══════════════════════════════════════════════════════════════════════ WEEK GRID — one row per work stream One row kind. It used to be three — company, project, work stream — and the two above the leaf existed only to name a group and total it. They went on 2026-08-31 (see renderWeek): the names moved onto the leaf row and the totals into the . What is left is a header of days, a body of work streams, and a foot of day totals. ══════════════════════════════════════════════════════════════════════ */ .mts-grid-wrap { overflow-x: auto; } .mts-grid { width: 100%; border-collapse: collapse; min-width: 920px; } /* Fourteen day columns plus the scope column need more than 920px before they start crushing. The wrap already scrolls horizontally, so the honest answer is a wider minimum rather than columns too narrow to read. */ /* 🚨 MEASURED, NOT GUESSED. At `min-width: 1180px` with a 260px scope column the fourteenth day and the Total column sat off the right edge of an 1180px panel — the strip above showed all fourteen days while the grid appeared to stop on the Thursday, which reads as a broken table rather than as a scroll. 16 columns have to fit the panel unaided: 200 scope + 14 × 46 + 58 total. */ .mts-root.is-pay .mts-grid { min-width: 902px; table-layout: fixed; } .mts-root.is-pay .mts-grid thead th.mts-th-scope { min-width: 200px; width: 200px; } .mts-root.is-pay .mts-grid thead th.mts-th-total { width: 58px; } .mts-root.is-pay .mts-grid > thead > tr > th { padding: 9px 2px; font-size: 9.5px; letter-spacing: 0; } /* `table-layout: fixed` needs the day columns told a width, or the scope cell's content still dictates the track. */ .mts-root.is-pay .mts-grid > thead > tr > th:not(.mts-th-scope):not(.mts-th-total) { width: 46px; } .mts-root.is-pay .mts-cellb, .mts-root.is-pay .mts-co-d, .mts-root.is-pay .mts-prj-d { font-size: 11px; } /* The seam runs the full height of the table, not just its header. */ .mts-root.is-pay .mts-grid thead th.is-wkbreak, .mts-root.is-pay .mts-grid > tbody > tr > td.is-wkbreak { border-left: 1px solid var(--border); } /* The scope column must not be squeezed to nothing by the fixed layout — its text wraps rather than pushing the day columns around. */ .mts-root.is-pay .mts-scope-in { min-width: 0; } .mts-root.is-pay .mts-co-nm, .mts-root.is-pay .mts-prj-nm, .mts-root.is-pay .mts-leaf-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The chips beside a name are the first thing to go when there is no room — the NAME is what the row is for. */ .mts-root.is-pay .mts-co-meta, .mts-root.is-pay .mts-prj-tag, .mts-root.is-pay .mts-leaf-tag { display: none; } /* 🚨 DIRECT CHILDREN, NOT DESCENDANTS — AND THIS IS THE WHOLE REASON THE LIST LOOKED PACKED. The entries table a cell opens is a inside a `, NEVER ON THE ``, so it stays the bottom of the table, and it inherits the same weekend / future / today / seam shading as the column above it — the foot has to look like the end of its own column, not like a strip that happens to sit under one. */ .mts-tr-foot > td { border-top: 2px solid var(--border); background: var(--border-s); padding: 11px 8px; } .mts-td-foot { padding-left: 16px !important; text-align: left; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink3); } .mts-foot-d, .mts-foot-t { text-align: center; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); } .mts-foot-d.is-weekend { background: #eef2f6; } .mts-foot-d.is-future { color: var(--ink4); } .mts-foot-d.is-today { color: var(--c-blue); } .mts-foot-t { font-size: 14.5px; } /* The fortnight seam runs the full height of the table — header, body AND foot. It is listed for tbody up in the `is-pay` block; the foot is here because the foot is here. */ .mts-root.is-pay .mts-grid > tfoot > tr > td.is-wkbreak { border-left: 1px solid var(--border); } .mts-root.is-pay .mts-foot-d { font-size: 11px; } .mts-root.is-pay .mts-tr-foot > td { padding: 9px 2px; } .mts-root.is-pay .mts-td-foot { font-size: 9.5px; letter-spacing: 0; } .mts-grid-total { text-align: center; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; } .mts-th-total { min-width: 78px; } /* 🚨 THE `.mts-usual*` RULES ARE GONE (2026-08-26) along with the strip they dressed — see the tombstone in wk-my-timesheet.js. `.mts-grid-note` went the day before them. The foot of the grid is the foot of the grid. */ /* ── buttons ─────────────────────────────────────────────────────── */ /* ⚠️ `.mts-foot`, `.mts-foot-right` and `.mts-foot-total` are gone. The footer held Copy from yesterday, Submit week and a week total; the first two were withdrawn and the third is in the strip at the top of the page. `.mts-btn` survives because the day view's two doors still wear it. */ .mts-btn { font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; transition: all .15s; } .mts-btn svg { width: 15px; height: 15px; } .mts-btn--ghost { color: var(--ink2); border: 1px solid var(--border); } .mts-btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); background: var(--c-blue-bg); } .mts-btn--primary { background: var(--c-blue); color: #fff; } .mts-btn--primary:hover { filter: brightness(1.14); } .mts-btn:disabled { opacity: .45; cursor: not-allowed; filter: none; } .mts-saved { font-size: 12px; color: var(--ink3); flex: 0 0 auto; } .mts-saved.is-flash { color: var(--c-green); font-weight: 650; } /* ══════════════════════════════════════════════════════════════════════ THERE IS NO DIALOG HERE ANY MORE This file used to carry a `.mts-dlg-*` entry form. It is gone, and so is every rule that dressed it. Logging one entry opens THE app's Log Time popup (`wk-qa-*` in work.css) with the company, project and work stream already filled in; editing one opens the app's time-entry popup. Both are surfaces this page does not own and must not restyle — a second copy of a form is a second place for the rules to drift. ══════════════════════════════════════════════════════════════════════ */ /* ── mobile ────────────────────────────────────────────────────────── */ @media (max-width: 720px) { .mts-strip { grid-template-columns: repeat(4, 1fr); } .mts-wd-total { grid-column: span 4; flex-direction: row; justify-content: space-between; padding: 8px 12px; } .mts-datelbl { min-width: 0; flex: 1 1 auto; } .mts-bar { gap: 8px; } /* ⚠️ NO `order: -1` HERE ANY MORE. The identity badge used to be first in the DOM and this pulled it onto its own line; it is now the last thing in the bar on purpose, and re-ordering it back to the top on a narrow screen undid the thing the desktop layout was changed to say. */ .mts-who { max-width: 100%; } .mts-bar .mts-search { flex: 1 1 100%; max-width: none; margin-left: 0; } .mts-day-acts { padding: 12px; } .mts-filternote { flex-wrap: wrap; } } /* ══════════════════════════════════════════════════════════════════════════ THE [hidden] FLAGS THIS FEATURE SETS, MADE REAL ⚠️ `!important`, and not a debate — the same trap work.css already documents beside `.ax-cards-row[hidden]`. Every one of these declares `display` at a specificity the UA's `[hidden]{display:none}` cannot reach, so without these rules the Time & Billing toolbar and its count stay on screen in My Timesheet view — and, inside the dialog, the context strip, the picker, the "already logged" list and the error line would ALL be permanently visible because each of them is display:flex or display:block. `.ax-cards-row[hidden]` is NOT repeated here: work.css already has it, which is what lets the two scorecard rows above the panel disappear. ══════════════════════════════════════════════════════════════════════════ */ #finTcCount[hidden], #wkMyTimesheetMountFin[hidden] { display: none !important; } /* This page's own flex element with a `hidden` flag — same trap, same fix. */ .mts-filternote[hidden] { display: none !important; } /* The month picker declares `display:flex`, so the UA's own `[hidden]{display:none}` cannot reach it and the flag would be purely decorative — it would sit open under the toolbar forever. */ .mts-cal[hidden] { display: none !important; } /* The toolbar, wherever the header restructure has put it by now. */ .wk-focus-action-row[hidden], .wk-focus-right[hidden] { display: none !important; } /* 🚨 THIS ONE IS A PRE-EXISTING BUG ON LIVE, NOT A NEED OF THIS FEATURE. `.fin-tb-select-btn { display: inline-flex }` had no [hidden] partner, so every `btn.hidden = true` on Time & Billing has been decorative since the day it was written: · Time cards view sets `finTimeSelectBtn.hidden = true` and the Select button stayed on screen, pressable, over a grid of cards it cannot act on — the exact "a tile that looks pressable and does nothing" the cards view went out of its way to avoid for the scorecards beside it; · Entries view sets `finTimeRulesBtn.hidden = true` and "Hours rules" stayed on screen in a view that has no rules. Verified by computed style in a real browser across all three views. The earlier harness asserted the `.hidden` PROPERTY, which was true the whole time — which is how it survived: the code was right and the pixels were not. Fixed here because My Timesheet withdraws both of them too, and shipping a third view that relies on a flag known not to work would be building on sand. */ .fin-tb-select-btn[hidden] { display: none !important; } /* A cell behind more than one entry. The badge already counts; this makes the cell itself readable as a stack rather than as one long entry. */ .mts-cellb.is-many { box-shadow: inset 0 0 0 1px var(--c-blue-soft); } /* ── WHAT IS IN THE CELL — the list, as a row of the grid ───────────────── ⚠️ `mts-clist-*`, not `mts-open-*`: `.mts-open` is already the class on a row NAME that opens a record, and reusing it here would style two unrelated things at once. The rows inside are financials.js's own `.fin-tb-*` entry rows — the same table the Entries tab draws — so there is nothing here to style about them. What is here is the strip that says WHICH cell you opened, and the two buttons. */ button.mts-cellb.is-open, button.mts-cellb.is-open:hover { background: var(--c-blue); border-color: var(--c-blue); color: #fff; transform: none; box-shadow: none; } button.mts-cellb.is-open .mts-cellb-n { background: #fff; color: var(--c-blue); border-color: var(--c-blue); } .mts-tr-clist > td { padding: 0 !important; text-align: left; background: var(--c-blue-bg); border-top: 1px solid var(--c-blue-soft); border-bottom: 1px solid var(--c-blue-soft); } /* Sticky to the left of the scroll container, and sized to it by sizeCellList() — see the note there. Without both halves the buttons at its right end live off the edge of a narrow screen. */ .mts-clist { padding: 15px 16px 17px; position: sticky; left: 0; box-sizing: border-box; } .mts-clist-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 13px; } .mts-clist-ic { display: inline-flex; color: var(--c-blue); flex: 0 0 auto; } .mts-clist-ic svg { width: 15px; height: 15px; } .mts-clist-ttl { font-size: 13px; font-weight: 750; color: var(--ink); } .mts-clist-when { font-size: 12px; font-weight: 600; color: var(--ink2); white-space: nowrap; } .mts-clist-sp { flex: 1 1 auto; } .mts-clist-add { font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; white-space: nowrap; transition: all .14s; color: #fff; background: var(--c-blue); border: 1px solid var(--c-blue); flex: 0 0 auto; } .mts-clist-add svg { width: 13px; height: 13px; } .mts-clist-add:hover { filter: brightness(1.08); box-shadow: var(--shadow-sm); } .mts-clist-locked { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: 0 0 auto; font-size: 11.5px; font-weight: 650; color: #046c4e; background: var(--c-green-bg); border: 1px solid var(--c-green-soft, #a7f3d0); padding: 5px 10px; border-radius: 9px; } .mts-clist-locked svg { width: 13px; height: 13px; } .mts-clist-x { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--ink3); background: var(--surf); border: 1px solid var(--border); transition: all .14s; flex: 0 0 auto; } /* A plus, turned a quarter turn, is a cross — one icon, two jobs. */ .mts-clist-x svg { width: 13px; height: 13px; transform: rotate(45deg); } .mts-clist-x:hover { color: var(--ink); border-color: var(--ink4); } /* The Entries table sits on white inside the tinted strip, so it reads as the thing that was pulled out of the cell rather than as more of the strip. */ .mts-clist .fin-tb-scroll { background: var(--surf); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); } /* The sheet fills the focus panel it is mounted in. */ #wkMyTimesheetMountFin > .mts-root { width: 100%; }
of THIS grid, so `.mts-grid td` and `.mts-grid thead th` reached straight into it: every borrowed row was served `padding: 0` (they beat `.fin-tb-table td` on document order at equal specificity, so the rows had NO air at all and stood 31px high), and the borrowed header was served this grid's own 11px/8px, centred, uppercase, grey band — i.e. the one page that must not restyle the table it borrowed was restyling it by accident. Tyler, 2026-08-27: *"space it out better so it doesn't look so packed."* The fix is not a `.mts-tb` override (that would be this page disagreeing with the table on purpose instead of by accident) — it is for these two rules to stop leaving the grid. The variants below keep descendant selectors deliberately: every one of them is hooked on a class only a grid header carries. */ .mts-grid > thead > tr > th, .mts-grid > tbody > tr > td, .mts-grid > tbody > tr > th, .mts-grid > tfoot > tr > td { padding: 0; } .mts-grid > thead > tr > th { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2-4); padding: 11px 8px; text-align: center; background: var(--border-s); border-bottom: 1px solid var(--border); } /* 🚨 THE SCOPE HEADER IS EMPTY ON PURPOSE, AND IT STILL HAS A WIDTH. Troy, 2026-08-31: *"we do not need the headers Company · Project · Work stream or the Collapse all button."* The cell stays because the `min-width` on it is what pushes the day columns to the right and leaves room for the names — *"shifted to the right to allow appropriate space for the categorization info on the left."* Delete the cell and the days slide back over the names. Its label survives for screen readers only (`.mts-sr`). ⚠️ The fortnight overrides this to a fixed 200px up in the `is-pay` block — change one and look at the other. */ .mts-grid thead th.mts-th-scope { text-align: left; padding-left: 16px; min-width: 340px; } .mts-grid thead th.is-today { color: var(--c-blue); } .mts-grid thead th.is-future { color: var(--ink4); } .mts-grid thead th.is-weekend { background: #f1f5f9; } /* Named for a reader that cannot see the column it is standing in. Not `display: none` and not `visibility: hidden` — both take it out of the accessibility tree, which is the one place it is meant to be. */ .mts-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ══ THE DAY HEADINGS ════════════════════════════════════════════════ Two lines, `Mon` over `31 Aug`, which is the shape the strip tile had minus its total — the total moved to the foot. The whole heading is one button: click a day, open that day. */ .mts-grid > thead > tr > th.mts-th-day { padding: 6px 4px; } .mts-dayh { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px; border-radius: 9px; border: 1px solid transparent; background: transparent; font: inherit; color: inherit; cursor: pointer; transition: all .15s; } .mts-dayh:hover { background: var(--surf); border-color: var(--border); } .mts-dayh:focus-visible { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-bg); } .mts-dayh-n { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: inherit; } /* The date is NOT uppercase and NOT letter-spaced — it inherits both off the `` rule, and "31 AUG" tracked out is a heading, not a date. */ .mts-dayh-d { font-size: 11px; font-weight: 600; color: var(--ink3); text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; } .mts-grid thead th.is-today .mts-dayh { border-color: var(--c-blue-soft); background: var(--c-blue-bg); } .mts-grid thead th.is-today .mts-dayh-n { color: var(--c-blue); font-weight: 800; } .mts-grid thead th.is-future .mts-dayh { opacity: .5; } /* Fourteen columns are 46px. The heading has to give back the padding the week grain can afford. */ .mts-root.is-pay .mts-dayh { padding: 3px 1px; border-radius: 7px; } .mts-root.is-pay .mts-dayh-n { font-size: 9.5px; letter-spacing: 0; } .mts-root.is-pay .mts-dayh-d { font-size: 10px; } /* ⚠️ The flexbox lives on a SPAN inside the cell, never on the ``. A td with `display:flex` stops being a table-cell; the browser wraps it in an anonymous one and the column widths drift out of step with the header row — which reads as a broken grid, not as a styling choice. */ .mts-scope-in { display: flex; align-items: center; gap: 9px; min-width: 0; } /* 🚨 A NAME IS A DOOR. Every level of the tree opens the record it names, so each name is a real
`. A `` background is painted OVER the row's, which is exactly what the weekend column, the hatched future column and the hover state need — they are `` rules. Put a row tint on a `` instead and it wins on specificity, and the whole future/weekend shading silently disappears. ═══════════════════════════════════════════════════════════════════ */ /* The two-line name block. `min-width: 0` so a long work-stream name is ellipsised inside the column instead of widening the table — the grid scrolls sideways, and a name is not worth a scrollbar. */ .mts-idy { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .mts-idy-top { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0; } .mts-idy-bot { display: flex; align-items: center; gap: 8px; min-width: 0; } /* ── THE RUNG TAGS, SIZED FOR A DENSE GRID ─────────────────────────────────── Both lines carry one (Project|Area above, Work stream|Category below) so a week of names is readable as a week of KINDS. `.fin-tb-scope-tag` is shared with the scope picker and the time-log rows — same word, same colour, one definition — but at its native 9px with 2px/6px padding, on two lines of every row, it competes with the names it is annotating. Here it is a quiet marker: smaller, tighter, and it never grows or shrinks the row. */ .mts-idy-top .fin-tb-scope-tag, .mts-idy-bot .fin-tb-scope-tag { flex: 0 0 auto; font-size: 8px; letter-spacing: .05em; padding: 1px 4px; border-radius: 4px; line-height: 1.35; } /* PROJECT — the line above, and still a door onto the project record. */ .mts-prj-nm { font-size: 12.5px; font-weight: 750; color: var(--ink); text-align: left; letter-spacing: -.01em; } /* COMPANY — parenthesised beside it, deliberately the quietest thing on the row. It repeats on every line of a project, so it has to be readable at a glance and invisible when you are not looking for it. */ .mts-co-nm { font-size: 12px; font-weight: 600; color: var(--ink3); text-align: left; } /* WORK STREAM — the line below, and the only row the grid has. The permanent teal band the leaf used to wear is gone with the two row kinds it was distinguishing itself FROM; on a grid of one row kind a tint on every row is just a coloured table. Hover still lights the row, because hover is about WHICH row, which is a question that still exists. */ .mts-tr-leaf > td { border-top: 1px solid var(--border-s); } .mts-tr-leaf:hover { background: #f7fcfb; } .mts-td-leaf { padding: 10px 8px 10px 16px !important; text-align: left; } .mts-leaf-nm { font-size: 13.5px; font-weight: 650; color: var(--ink); text-align: left; letter-spacing: -.01em; } /* 🚨 `.mts-leaf-kind` (the teal "Work stream" pill) and `.mts-prj-kind` (the blue "Project" pill) are gone. On the flat row the two names are told apart by POSITION — project above, work stream below — and a pill on each line would label what the layout already says. */ /* 🚨 THE CELL IS A BUTTON. It never accepts a bare number — clicking it opens the entry, which refuses to save without a sentence. */ .mts-cell { width: 88px; text-align: center; padding: 5px 4px !important; } .mts-cell.is-weekend { background: #fafafa; } .mts-cell.is-future { background: repeating-linear-gradient(135deg, #fafafa 0 6px, #f4f4f5 6px 12px); } .mts-cellb { width: 72px; height: 34px; margin: 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; position: relative; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink4); border: 1px solid transparent; border-radius: 9px; background: transparent; transition: all .14s; } .mts-cellb.has { color: var(--ink); background: var(--surf); border-color: var(--border); } button.mts-cellb:hover { border-color: var(--c-blue); background: var(--c-blue-bg); color: var(--c-blue); transform: translateY(-1px); box-shadow: var(--shadow-sm); } button.mts-cellb:focus-visible { outline: none; border-color: var(--c-blue); box-shadow: 0 0 0 3px var(--c-blue-bg); } .mts-cellb-add { display: inline-flex; opacity: 0; transition: opacity .14s; } .mts-cellb-add svg { width: 13px; height: 13px; } button.mts-cellb:hover .mts-cellb-add, .mts-tr-leaf:hover .mts-cellb-add { opacity: 1; } /* Two or more entries behind one cell — clicking it lists them all in a row of the grid directly underneath. See .mts-clist below. */ .mts-cellb-n { position: absolute; top: -3px; right: -3px; min-width: 15px; height: 15px; display: grid; place-items: center; padding: 0 3px; font-size: 9.5px; font-weight: 800; line-height: 1; color: #fff; background: var(--c-blue); border-radius: 999px; border: 1.5px solid var(--surf); } .mts-cellb.is-future { color: var(--ink4); opacity: .5; cursor: not-allowed; } /* 🚨 AN HOUR WITH NO SENTENCE BESIDE IT, VISIBLE FROM THE WEEK. The day grain has always flagged it in amber; the week grid showed a perfectly ordinary total and you had to open the cell to find out. A dot, in the same amber the day view uses, on the corner the count badge does not occupy. */ .mts-cellb.is-bare::after { content: ''; position: absolute; left: 4px; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--c-yellow, #f59e0b); box-shadow: 0 0 0 1.5px var(--surf); } /* Approved is not editable, but it IS readable — the cell opens its list. */ button.mts-cellb.is-locked { cursor: pointer; } .mts-cellb.is-locked { color: var(--ink2); background: var(--c-green-bg); border-color: var(--c-green-soft, #a7f3d0); cursor: not-allowed; } /* ══ THE FOOT — A DAY TOTAL PER COLUMN, AND THE PERIOD ═══════════════ A tfoot came back on 2026-08-31, after Tyler removed one on 2026-08-26 as repetitive. It is not repetitive now: the strip that was saying those same numbers above the grid no longer appears in this view. Read the note in renderWeek() before taking either of them away. A real `