timecards.css

/* ── Layout and toolbar ─────────────────────────────────────────────────── */

#app { flex: 1; display: flex; flex-direction: column }
/* The slim toolbar: the team, and at the other end clocking in and the account. */
#toolbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 6px 20px;
  background: rgba(24, 27, 37, .94);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
#toolbar-start { min-width: 0 }
#week-nav, #toolbar-end, .status-total { display: flex; align-items: center; gap: 8px }
/* The week, its total and the weekly average, in one card centred at the top of the page. */
#status-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: fit-content;
  max-width: calc(100% - 24px);
  margin: 14px auto 2px;
  padding: 5px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.status-total { flex-direction: column; gap: 2px; padding-left: 14px; border-left: 1px solid var(--border) }
.weekly-avg-trigger { padding: 0 6px; font-size: .68rem }
.weekly-avg-trigger:hover:not(:disabled) { background: var(--accent-soft); color: var(--text) }
/* Small in the card's corner, so showing it moves nothing. */
#busy { position: absolute; top: 5px; right: 5px; width: 9px; height: 9px; margin: 0; border-width: 2px }
/* The team's name, and the way to change it: a pencil shows it can be. */
.team-button { max-width: 100%; padding: 4px 8px; color: var(--text); font-weight: 600 }
#toolbar-title { overflow: hidden; text-overflow: ellipsis }
.team-button::before { content: "⏱"; margin-right: 2px }
.team-button:not(:disabled)::after { content: "✎"; color: var(--text2); font-weight: 400 }
.team-button:hover:not(:disabled) { background: var(--surface2); color: var(--text) }
.team-button:disabled { opacity: 1 }
/* The date over the week it falls in, so the picker takes one line's height. */
.week-picker-stack { display: grid; justify-items: center; gap: 1px }
#week-picker { padding: 0 6px; font-size: .78rem; line-height: 1.5 }
#week-range-label { color: var(--text2); font-size: .66rem; white-space: nowrap }
#week-total {
  padding: 3px 12px;
  background: #1d4a2e;
  color: #d9ffe9;
  border-radius: 999px;
  font: 600 .85rem/1.2 var(--mono);
}
#btn-clock { min-width: 108px }
body.is-dragging { cursor: ew-resize; user-select: none }
body.is-saving #weeks :is(.tc-block, .break-overlay, .resize-handle) { cursor: progress }

#team-picker-select { width: 100% }

/* ── A day ─────────────────────────────────────────────────────────────── */

#weeks { padding: 8px 0 32px }
.day { padding: 14px 20px 10px; border-bottom: 1px solid var(--border) }
.day.is-past { opacity: .72; transition: opacity .15s }
.day.is-past:is(:hover, :focus-within) { opacity: 1 }
.day-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 22px }
.day-header h2 { font-size: .85rem; font-weight: 600 }
.day.is-today .day-header h2 { color: #b3b9ff }
.day.is-today .day-header h2::after {
  content: "today";
  margin-left: 8px;
  padding: 1px 7px;
  background: var(--accent-soft);
  color: #b3b9ff;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 500;
}
.day-total { margin-left: auto; color: var(--text2); font: .8rem var(--mono) }

.timeline {
  position: relative;
  height: 40px;
  min-width: 760px;
  border-radius: 8px;
  background:
    linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, .025)),
    repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / var(--hours, 24)));
}
.hour-label { position: absolute; top: -17px; transform: translateX(-50%); color: var(--text2); font-size: .6rem; white-space: nowrap }
.now-line { position: absolute; top: -4px; bottom: -4px; z-index: 3; width: 2px; margin-left: -1px; background: var(--danger); border-radius: 1px; pointer-events: none }
.now-line::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; background: var(--danger); border-radius: 50% }

.tc-block, .break-overlay { position: absolute; top: 5px; bottom: 5px; touch-action: none }
.tc-block {
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, #7682ff, #5563ea);
  box-shadow: 0 2px 8px rgba(40, 50, 160, .35);
}
/* Over 16 hours: most likely a forgotten clock-out. */
.tc-block.is-long { background: linear-gradient(180deg, #ff7f72, #d9473b); box-shadow: 0 2px 10px rgba(224, 92, 106, .5) }
.tc-label { overflow: hidden; padding: 0 7px; color: #fff; font-size: .66rem; font-weight: 600; white-space: nowrap; pointer-events: none }
.break-overlay {
  z-index: 2;
  top: 9px;
  bottom: 9px;
  background: repeating-linear-gradient(135deg, #f0a843 0 4px, #d68f2d 4px 8px);
  opacity: .92;
}
/* What a Ctrl+click would add, a break on a card or a card on free time: a faint dashed hint where
   it would go, armed (filled) while Ctrl is held. */
.ghost {
  --ghost: var(--warn);
  position: absolute;
  top: 9px;
  bottom: 9px;
  z-index: 2;
  display: flex;
  border: 1px dashed color-mix(in srgb, var(--ghost) 55%, transparent);
  pointer-events: none;
}
.card-ghost { --ghost: #8b96ff; top: 5px; bottom: 5px }
.ghost.is-armed { background: color-mix(in srgb, var(--ghost) 35%, transparent); border-color: var(--ghost) }
body.ctrl-held .timeline:not(:has(.is-dragging)) { cursor: copy }
.is-highlighted.tc-block, .is-highlighted.break-overlay { outline: 2px solid var(--success); outline-offset: 1px }
.is-dragging.tc-block, .is-dragging.break-overlay { filter: brightness(1.15) }
.is-dragging.break-overlay { z-index: 4 }
/* The part of a card past midnight, on the next day: worked on in the day it clocked in. */
.is-overflow { opacity: .3; box-shadow: none; animation: none; pointer-events: none }

/* A thin line standing out above and below its bar: precise to look at, wide to grab. */
.resize-handle { position: absolute; top: -5px; bottom: -5px; z-index: 1; width: 2px; background: rgba(255, 255, 255, .9); cursor: ew-resize }
.resize-handle::before { content: ""; position: absolute; inset: 0 -5px }
.resize-handle[data-edge="start"] { left: -1px }
.resize-handle[data-edge="end"] { right: -1px }

/* The handle pointed at, or dragged: a marker over its time at the top of the axis, like a tab
   stop on a ruler, in its span's colour; while dragged, a guide runs down through the axis. */
.edge-marker {
  --marker: #8b96ff;
  position: absolute;
  top: -10px;
  bottom: 0;
  z-index: 5;
  width: 0;
  pointer-events: none;
}
.edge-marker[data-tone="break"] { --marker: var(--warn) }
.edge-marker[data-tone="danger"] { --marker: #ff7f72 }
.edge-marker::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 10px;
  height: 9px;
  background: var(--marker);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
  animation: marker-in .12s ease-out;
}
.edge-marker.is-dragging::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 0;
  left: -.5px;
  border-left: 1px dashed color-mix(in srgb, var(--marker) 70%, transparent);
}
@keyframes marker-in { from { opacity: 0; transform: translateY(-3px) } }

/* The timeline's tip: at once, quiet, above the axis it speaks of. */
.timeline-tip {
  position: fixed;
  z-index: 9999;
  display: grid;
  gap: 3px;
  padding: 4px 9px;
  background: rgba(30, 33, 46, .97);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 7px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  color: var(--text);
  font-size: .72rem;
  white-space: nowrap;
  pointer-events: none;
  animation: tip-in .1s ease-out;
}
.timeline-tip[hidden] { display: none }
@keyframes tip-in { from { opacity: 0; transform: translateY(3px) } }
.tip-line { display: flex; align-items: baseline; gap: 7px }
.tip-text { font-weight: 600; font-variant-numeric: tabular-nums }
.tip-note { color: var(--text2) }
.tip-line kbd {
  padding: 0 4px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--text2);
  font: 600 .62rem var(--mono);
}
.tip-line[data-tone="card"] .tip-text { color: #b3b9ff }
.tip-line[data-tone="break"] .tip-text { color: var(--warn) }
.tip-line[data-tone="danger"] .tip-text { color: #ff9b94 }
.tip-line[data-tone="muted"] .tip-text { color: var(--text2); font-weight: 500 }

/* Still running, a card or a break alike: a sheen flows through it toward now, and it has no end
   handle (its end is the now line). A span whose times are all set stands still. */
.is-running::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent) 0 0 / 90px 100% repeat-x;
  animation: live 1.8s linear infinite;
  pointer-events: none;
}
.break-overlay.is-running::before { background-image: linear-gradient(90deg, transparent, rgba(255, 236, 200, .7), transparent) }
@keyframes live { to { background-position-x: 90px } }

/* ── Cards ─────────────────────────────────────────────────────────────── */

.card-list:empty { display: none }
.card-list { display: grid; gap: 6px; max-width: 600px; margin: 12px auto 0 }
.card { padding: 7px 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; transition: border-color .12s }
.card.is-highlighted { border-color: var(--success) }
.card.is-long { box-shadow: inset 3px 0 0 var(--danger) }
.card-long { padding: 1px 7px; background: rgba(224, 92, 106, .18); color: #ff9b94; border-radius: 999px; font-size: .7rem; font-weight: 600 }
/* Controls stay quiet until their card is pointed at, so the eye goes to the timeline. */
.card-actions, .break-row [data-action="delete-break"] { opacity: .4; transition: opacity .15s }
.card:is(:hover, :focus-within, .is-highlighted) :is(.card-actions, [data-action="delete-break"]) { opacity: 1 }
.card-row { display: flex; align-items: center; gap: 10px; font-size: .82rem }
.card-arrow, .break-length { color: var(--text2) }
.card-worked { min-width: 9ch; color: var(--text2); font: .8rem var(--mono) }
.card-notes { overflow: hidden; color: var(--text2); font-size: .76rem; font-style: italic; text-overflow: ellipsis; white-space: nowrap }
.card-actions { display: flex; gap: 4px; margin-left: auto }
.running-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--success); border-radius: 50%; animation: pulse 1.6s ease-in-out infinite }
@keyframes pulse { 50% { opacity: .35 } }
.breaks { display: grid; gap: 3px; margin: 6px 0 0 14px; padding-left: 12px; border-left: 2px solid rgba(240, 168, 67, .35) }
.break-row { display: flex; align-items: center; gap: 10px; color: var(--text2); font-size: .76rem }
.break-label { color: var(--warn) }
.break-times { min-width: 20ch }
.break-length { min-width: 6ch }

/* ── The edit dialog ───────────────────────────────────────────────────── */

.break-edit-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; margin-bottom: 8px }

/* ── The weekly average report ─────────────────────────────────────────── */

.weekly-avg-modal-shell { width: min(800px, 96vw) }
.weekly-avg-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px }
.weekly-avg-headline { font: 600 1rem/1.3 var(--mono) }
.weekly-avg-meta, .weekly-avg-note, .weekly-avg-week-state { margin-top: 6px; color: var(--text2); font-size: .76rem; line-height: 1.5 }
.weekly-avg-note { max-width: 68ch }
.weekly-avg-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 14px 0 10px }
.weekly-avg-field input[type="number"] { width: 100px }
.weekly-avg-workdays { border: 0; display: grid; gap: 6px }
.weekly-avg-workdays legend { color: var(--text2); font-size: .72rem }
.weekly-avg-workdays-grid { display: flex; gap: 6px }
.weekly-avg-day-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text2);
  font: 700 .8rem/1 var(--mono);
  cursor: pointer;
  transition: border-color .12s, background-color .12s;
}
.weekly-avg-day-chip:hover { border-color: var(--accent) }
.weekly-avg-day-chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer }
.weekly-avg-day-chip.is-selected { background: #286b47; border-color: #5bd68d; color: #f4fff8 }
.weekly-avg-day-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap }
.weekly-avg-loading, .weekly-avg-empty { margin-top: 12px; padding: 10px 0; color: var(--text2) }
.weekly-avg-table-wrap { margin-top: 14px; overflow: auto }
.weekly-avg-table { width: 100%; border-collapse: collapse; font-size: .8rem }
.weekly-avg-table th, .weekly-avg-table td { padding: 8px 14px; border-top: 1px solid var(--border); text-align: right; vertical-align: top }
.weekly-avg-table th { color: var(--text2); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase }
.weekly-avg-table :is(th, td):first-child { width: 1%; text-align: left; white-space: nowrap }
.weekly-avg-week-label { font-weight: 600; white-space: nowrap }
/* A week's label is a link to that week in the app. */
.weekly-avg-week-link { padding: 0; background: none; border: 0; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer }
.weekly-avg-week-link:hover { color: #b3b9ff; text-decoration: underline }
.weekly-avg-day-label { padding-left: 14px; font-weight: 400 }
.weekly-avg-day-label::before { content: "↳ "; color: var(--text2) }
.weekly-avg-mono { font-family: var(--mono); white-space: nowrap }
.weekly-avg-diff-negative { color: var(--danger) }
.weekly-avg-diff-positive { color: var(--success) }
.weekly-avg-row-current td { background: rgba(106, 86, 255, .19) }
.weekly-avg-row-detail td { padding-block: 5px; background: rgba(106, 86, 255, .12); font-size: .75rem }
.weekly-avg-row-detail-first td { border-top-width: 6px; border-top-color: transparent; background-clip: padding-box }
.weekly-avg-row-detail-off td { color: rgba(232, 234, 246, .55) }

/* ── A narrow screen (a phone) ─────────────────────────────────────────── */
/* Timelines fit the screen instead of scrolling, labelled every sixth hour; cards use the width
   and wrap. */

@media (max-width: 760px) {
  #toolbar { gap: 8px; padding: 6px 12px }
  #status-card { margin-top: 10px }
  #user-info { display: none }
  #btn-clock { min-width: 0 }
  .day { padding: 12px 12px 8px }
  .timeline { min-width: 0 }
  .hour-minor { display: none }
  .card-list { max-width: none }
  .card-row { flex-wrap: wrap; row-gap: 4px }
  .card-actions { margin-left: auto }
  .break-times { min-width: 0 }
  .form-row { grid-template-columns: 1fr }
}

/* ── A touch screen ────────────────────────────────────────────────────── */
/* Nothing to hover, so nothing waits to be pointed at; a finger needs a wider handle. */

@media (hover: none) {
  .card-actions, .break-row [data-action="delete-break"], .day.is-past { opacity: 1 }
}
@media (pointer: coarse) {
  .resize-handle::before { inset: 0 -12px }
}