/* Clockwork — one screen, so one small stylesheet.
   Quiet by default: the numbers are the content, everything else gets out of
   their way. Structure comes from weight and space, not from borders. */

:root {
    --bg: #ffffff;
    --raised: #fafbfc;          /* toolbars, panels — barely off-white */
    --line: #e8eaee;
    --line-soft: #f1f3f5;
    --text: #16191f;
    --muted: #7c8593;
    --faint: #b6bcc6;
    --accent: #5b5ea6;
    --accent-soft: rgba(91, 94, 166, .09);
    --warn: #a5670c;
    --warn-soft: rgba(200, 128, 16, .10);
    --radius: 7px;
    --ease: .12s ease;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}
body.app { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

button, input, select { font: inherit; color: inherit; }

/* ── Sign-in ─────────────────────────────────────────────────────────────── */
.landing { max-width: 22em; margin: 16vh auto; padding: 0 1.5em; text-align: center; }
.landing h1 { font-size: 1.9em; margin: 0 0 .35em; letter-spacing: -.02em; }
.landing > p { color: var(--muted); margin: 0 0 2.2em; }
.btn {
    display: block; padding: .8em 1.4em; border-radius: var(--radius);
    border: 1px solid var(--line); background: var(--bg); color: var(--text);
    text-decoration: none; cursor: pointer; text-align: center;
    transition: border-color var(--ease), background var(--ease);
}
.btn:hover { border-color: var(--faint); background: var(--raised); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: var(--accent); filter: brightness(1.07); }
.signins { display: flex; flex-direction: column; gap: .55em; }
.landing-note { color: var(--muted); font-size: .87em; margin: 1.4em 0 0; line-height: 1.5; }
.landing-note a { color: var(--accent); }
.landing-note code { font-size: .95em; background: var(--raised); padding: .1em .35em; border-radius: 4px; }

/* ── Top bar ─────────────────────────────────────────────────────────────── */
.topbar {
    flex: 0 0 auto; display: flex; align-items: center; gap: 1.4em;
    padding: .7em 1.4em; background: var(--raised);
    border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.brand { font-weight: 700; letter-spacing: -.01em; }

.range { display: flex; align-items: center; gap: .8em; }
/* One control, three buttons — reads as navigation rather than three actions. */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--bg); }
.seg button { border: 0; background: none; padding: .35em .7em; cursor: pointer; color: var(--muted); transition: background var(--ease), color var(--ease); }
.seg button:hover { background: var(--raised); color: var(--text); }
.seg button + button { border-left: 1px solid var(--line); }
.range-label { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
/* How long a range is. The chosen one is filled in, so the control says which
   view you are in without a second label repeating it. */
.views button { font-size: .9em; }
.views button.on { background: var(--accent); color: #fff; }
.views button.on:hover { background: var(--accent); color: #fff; }

.actions { display: flex; align-items: center; gap: .4em; margin-left: auto; }
.actions button {
    border: 1px solid transparent; background: none; color: var(--muted);
    padding: .4em .75em; border-radius: var(--radius); cursor: pointer;
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.actions button:hover:not(:disabled) { background: var(--bg); border-color: var(--line); color: var(--text); }
.actions button:disabled { opacity: .45; cursor: default; }
.actions button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.actions button.primary:hover:not(:disabled) { filter: brightness(1.07); }
.actions button.primary:disabled { background: var(--line); border-color: var(--line); color: var(--muted); }

.who { display: flex; align-items: center; gap: .7em; font-size: .9em; }
.uname { color: var(--muted); }
.logout { color: var(--muted); text-decoration: none; }
.logout:hover { color: var(--text); }

/* ── The grid ────────────────────────────────────────────────────────────── */
.week { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0; }
.empty { color: var(--muted); padding: 3.5em 1.4em; max-width: 34em; line-height: 1.6; }

.grid { border-collapse: collapse; width: max-content; min-width: 100%; }
.grid th, .grid td {
    padding: .42em .5em; font-weight: 400; text-align: center; vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
}

/* Sticky day header, name column and totals — the three things you need on
   screen while reading anywhere in the grid. */
.grid thead th {
    position: sticky; top: 0; z-index: 2; background: var(--bg);
    padding-top: .9em; padding-bottom: .7em; box-shadow: inset 0 -1px 0 var(--line);
}
.day { color: var(--muted); font-size: .8em; min-width: 3.6em; }
.day .dow { font-weight: 600; letter-spacing: .02em; }
.day .dnum { color: var(--faint); }
.day.today .dow, .day.today .dnum { color: var(--accent); }

/* Two things every sticky cell has to do for itself.
   Its own background paints over the collapsed border, so the row line has to
   be redrawn as an inset shadow or it stops dead at the first sticky column.
   And its gutter has to be padding *inside* the cell, not on the scroll
   container, or rows show through the gap while scrolling past. */
/* .grid th wins over a bare .name-col on specificity, which left the "Project"
   and "All" headings centred while the rows beneath them were flush left. */
.grid .name-col {
    position: sticky; left: 0; z-index: 1; background: var(--bg);
    box-shadow: inset 0 -1px 0 var(--line-soft);
    text-align: left; min-width: 17em; max-width: 32em; padding-left: 1.4em;
}
.grid thead th.name-col { box-shadow: inset 0 -1px 0 var(--line); }
.grid thead th.name-col, .grid tfoot th.name-col { z-index: 3; }
.total-col {
    position: sticky; right: 0; z-index: 1; background: var(--bg);
    box-shadow: inset 1px 0 0 var(--line-soft), inset 0 -1px 0 var(--line-soft);
    min-width: 4.4em; padding-right: 1.4em;
}
.grid thead th.total-col { box-shadow: inset 1px 0 0 var(--line-soft), inset 0 -1px 0 var(--line); }
.week.scrolled-x .name-col { box-shadow: inset 0 -1px 0 var(--line-soft), 6px 0 8px -6px rgba(20, 24, 40, .16); }

/* ── Rows ────────────────────────────────────────────────────────────────── */
.name { display: flex; align-items: center; gap: .45em; min-height: 1.6em; }
.label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.label.editing {
    outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px;
    background: var(--bg); cursor: text; overflow: visible; white-space: nowrap;
    min-width: 3em;
}
.row.group > .name-col .label { font-weight: 650; }
.row.project > .name-col .label { font-weight: 450; }

.row:hover > th, .row:hover > td { background: var(--raised); }
/* Same treatment down a column, so the two bands cross on the cell you point
   at. Listed with the sticky columns' own selectors so the totals column and
   the day header take it too instead of keeping their opaque background. */
.grid td.col-hover, .grid th.col-hover,
.grid thead th.col-hover, .grid .total-col.col-hover { background: var(--raised); }
.row.toggles { cursor: pointer; }
/* The name column's header folds every group at once. */
.grid thead th.name-col.toggles { cursor: pointer; }
.row.dragging { opacity: .35; }
/* Picked for the next drag. The bar down the name column is what carries it —
   a tint alone is too close to the hover and the drop highlight. */
.row.selected > th, .row.selected > td { background: var(--accent-soft); }
.row.selected > .name-col { box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--line-soft); }
.row.drop > th, .row.drop > td { background: var(--accent-soft); }
.row.drop > .name-col { box-shadow: inset 0 -1px 0 var(--line-soft), inset 2px 0 0 var(--accent); }

.twisty, .row-btn {
    background: none; border: 0; padding: 0 .15em; color: var(--faint);
    cursor: pointer; line-height: 1;
}
.twisty { font-size: .8em; }
.twisty:hover, .row-btn:hover { color: var(--text); }
.twisty-space { display: inline-block; width: .9em; }
.count {
    color: var(--muted); font-size: .74em; background: var(--line-soft);
    border-radius: 999px; padding: .05em .5em;
}
.row-btn { visibility: hidden; margin-left: auto; padding-left: .5em; }
.row:hover .row-btn { visibility: visible; }

/* Expanded project: the sources it is made of. Quieter than the project, but
   with real numbers — they say where the time came from. */
/* Collapsed: the group keeps its own row (and its rolled-up numbers), only
   what is filed inside it goes away. */
.row.collapsed { display: none; }
.row.member > .name-col { background: var(--bg); }
.row.member .label { color: var(--muted); font-size: .92em; }
.row.member > td { color: var(--muted); }
.row.member .cell .n.act, .row.member .cell .n.log { font-size: .78em; }
.src { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); display: inline-block; flex: 0 0 auto; }
.src-wakatime { background: #3ba55d; }
.src-wakatime-ai { background: #2aa198; }
.src-wrike { background: #5b5ea6; }
.src-phone { background: #d08a1e; }
.src-teams { background: #6264a7; }

/* Which source a member row came from — and the way to its path. Always
   clickable: a row with no path recorded still has an answer worth opening. */
.row.member .ident {
    color: var(--faint); font-size: .82em; background: none; border: 0;
    padding: .05em .4em; border-radius: 999px; cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.row.member .ident:hover { color: var(--accent); background: var(--accent-soft); }

/* ── Cells ───────────────────────────────────────────────────────────────── */
/* Activity, logged, and the gap between them. Order and weight carry it, so
   there are no labels: measured on top, logged beneath, gap only when there
   is one. */
.cell { font-variant-numeric: tabular-nums; line-height: 1.25; }
.cell .n { display: block; font-size: .85em; }
/* Wrike is the black number wherever it appears, measured activity the grey one
   — whichever source that activity came from. */
.cell .n.act { color: var(--muted); }
.cell .n.log { color: var(--text); font-size: .78em; }
.cell .n.delta { font-size: .78em; font-weight: 600; color: transparent; }
/* Δ is signed from Wrike's side: MINUS is measured time that never reached a
   worklog, PLUS is more logged than measured. The gap used to tint the whole
   cell, which turned a normal week into a wall of amber — unlogged time is the
   common case, so it cannot be an alarm. The number alone carries it. */
.cell.gap .n.delta { color: var(--warn); }
/* Overhead is normal for a day of meetings, so it is stated, not flagged. */
.cell.over .n.delta { color: var(--muted); }
.cell.none { color: var(--faint); }

/* Room for the last row to clear the sticky totals — inside the table, so the
   totals still pin flush to the bottom edge. */
.grid tbody tr:last-child > th, .grid tbody tr:last-child > td { padding-bottom: 3.2em; }

.grid tfoot th.name-col { font-weight: 600; }
.grid tfoot th, .grid tfoot td {
    position: sticky; bottom: 0; z-index: 2; background: var(--bg);
    box-shadow: inset 0 1px 0 var(--line); font-weight: 600; border-bottom: 0;
}
.grid tfoot th.name-col, .grid tfoot th.total-col { box-shadow: inset 0 1px 0 var(--line); }

/* Ungroup target — only while something is being dragged. */
.rootstrip {
    /* A floating pill rather than a full-width bar: it appears over the totals
       row for the length of a drag, and rounded-and-shadowed reads as a layer
       on top instead of a row that got cut in half. */
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 1.2em; z-index: 20;
    padding: .8em 1.6em; text-align: center; white-space: nowrap;
    color: var(--muted); font-size: .88em; background: var(--bg);
    border: 1px dashed var(--line); border-radius: 999px;
    box-shadow: 0 6px 20px rgba(16, 19, 26, .12);
    opacity: 0; pointer-events: none; transition: opacity var(--ease);
}
.week.dragging-now ~ .rootstrip { opacity: 1; pointer-events: auto; }
.rootstrip.drop { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* What is picked, and what to do with it. Bottom left so it never sits under
   the drop pill, which appears in the middle for the length of a drag. */
.selbar {
    position: fixed; left: 1.2em; bottom: 1.2em; z-index: 21;
    padding: .7em 1.1em; font-size: .85em; color: var(--text);
    background: var(--bg); border: 1px solid var(--accent); border-radius: 999px;
    box-shadow: 0 6px 20px rgba(16, 19, 26, .12);
    pointer-events: none;
}

/* ── Sources sheet ──────────────────────────────────────────────────────── */
/* One provider per row, not a wrapping grid: a dialog reads top to bottom. */
.sources-list { display: block; }
.source { padding: .85em 0; border-top: 1px solid var(--line-soft); }
.source:first-child { border-top: 0; padding-top: .2em; }
.source-head { display: flex; align-items: baseline; gap: .5em; padding-bottom: .3em; }
.source-name { font-weight: 600; }
.signin-tag {
    font-weight: 400; font-size: .7em; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent); background: var(--accent-soft);
    border-radius: 999px; padding: .1em .5em;
}
.account {
    display: flex; align-items: center; gap: .6em;
    padding: .22em 0 .22em 1.15em; font-size: .93em;
}
.account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account.stale .account-name { color: var(--warn); }
.stale-tag {
    font-size: .7em; text-transform: uppercase; letter-spacing: .05em;
    color: var(--warn); background: var(--warn-soft); border-radius: 999px;
    padding: .1em .5em; cursor: help;
}
.account.add { padding-top: .4em; }
.account.add .btn-small, .account.add .link-btn { margin-left: 0; }
.source-note { color: var(--muted); margin-left: auto; font-size: .85em; }
.btn-small, .link-btn {
    margin-left: auto; font-size: .87em; cursor: pointer; border: 0; background: none;
    color: var(--accent); text-decoration: none; padding: .25em .7em; border-radius: var(--radius);
}
.btn-small { background: var(--accent); color: #fff; font-weight: 600; }
.btn-small:hover { filter: brightness(1.07); }
.link-btn { color: var(--muted); }
.link-btn:hover { color: var(--text); background: var(--line-soft); }
.source-foot { color: var(--muted); font-size: .84em; margin: 1.1em 0 1.3em; }

/* ── Path overlay ────────────────────────────────────────────────────────── */
.overlay {
    position: fixed; inset: 0; z-index: 300; display: flex;
    align-items: center; justify-content: center; padding: 1.5em;
    background: rgba(16, 19, 26, .32);
}
.sheet {
    background: var(--bg); border-radius: 10px;
    box-shadow: 0 18px 55px rgba(16, 19, 26, .25);
    max-width: 46em; width: 100%; max-height: 80vh; overflow: auto; padding: 1.5em 1.7em;
}
.sheet-head h2 { margin: 0; font-size: 1.1em; letter-spacing: -.01em; }
.sheet-sub { color: var(--muted); font-size: .85em; margin-top: .2em; }
.origin-path {
    margin: 1.3em 0 1em; padding: .85em; background: var(--raised);
    border-radius: var(--radius); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .88em; line-height: 1.5; word-break: break-word;
}
.origin-id { display: flex; align-items: baseline; gap: .6em; margin: 0 0 1.3em; font-size: .82em; }
.origin-id-label { color: var(--muted); }
.origin-id code { color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; }
/* ── Logging time to Wrike ───────────────────────────────────────────────── */
/* A cell you can book: only marked on hover, because every measured cell can be
   booked and a permanent marker on all of them says nothing. */
.cell.loggable { cursor: pointer; }
.row:hover .cell.loggable:hover { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 3px; }

.task-search {
    width: 100%; margin: 1.2em 0 .8em; padding: .55em .7em; font: inherit;
    border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--text);
}
.task-search:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.task-results { max-height: 17em; overflow-y: auto; margin-bottom: 1.2em; }
.task {
    display: block; width: 100%; text-align: left; border: 1px solid transparent;
    background: none; color: inherit; font: inherit; cursor: pointer;
    padding: .5em .6em; border-radius: var(--radius);
}
.task:hover { background: var(--raised); }
.task.chosen { background: var(--accent-soft); border-color: var(--accent); }
.task-path { display: block; font-size: .78em; color: var(--faint); }
.task-line { display: flex; align-items: baseline; gap: .5em; flex-wrap: wrap; }
.task-title { font-size: .95em; }
.task-badge {
    font-size: .72em; color: var(--muted); border: 1px solid var(--line);
    border-radius: 999px; padding: 0 .5em; white-space: nowrap;
}
.task-badge.on { color: var(--accent); border-color: var(--accent); }
.task-age { margin-left: auto; font-size: .72em; color: var(--faint); white-space: nowrap; }

/* The two numbers in a cell do different things, so they say so on hover: the
   measured one books missing time, the logged one opens what is already there. */
.cell.loggable .n.clickable { cursor: pointer; }
.cell.loggable .n.clickable:hover { text-decoration: underline; text-underline-offset: 2px; }

.entries { margin: 1.2em 0; }
.entry { padding: .7em 0; border-top: 1px solid var(--line-soft); }
.entry:first-child { border-top: 0; }
.entry.gone { opacity: .5; }
.entry-head { margin-bottom: .4em; }
.entry-fields { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.entry-fields .log-note { flex: 1 1 12em; width: auto; }
.entry-status { font-size: .82em; color: var(--muted); margin-top: .35em; }
.link-btn.danger:hover { color: var(--warn); }
.link-btn.armed { color: var(--warn); font-weight: 600; }

.log-fields { display: flex; gap: 1em; flex-wrap: wrap; align-items: flex-end; margin-bottom: 1.3em; }
.log-field { display: flex; flex-direction: column; gap: .3em; }
.log-field-wide { flex: 1 1 18em; }
.log-field-label { font-size: .8em; color: var(--muted); }
.log-hours, .log-note {
    font: inherit; padding: .45em .6em; border: 1px solid var(--line);
    border-radius: var(--radius); background: var(--bg); color: var(--text);
}
.log-hours { width: 5.5em; font-variant-numeric: tabular-nums; }
.log-note { width: 100%; }
.log-hours:focus, .log-note:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

.sheet-note { color: var(--muted); font-size: .88em; margin: 0 0 1.3em; line-height: 1.5; }
.sheet-actions { display: flex; align-items: center; gap: .8em; }
.sheet-actions .btn { display: inline-block; padding: .55em 1.2em; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.toast {
    position: fixed; bottom: 1.4em; right: 1.4em; z-index: 400;
    max-width: 26em; padding: .85em 1.1em; cursor: pointer; line-height: 1.45;
    background: var(--text); color: #fff; font-size: .9em;
    border-radius: var(--radius); box-shadow: 0 10px 32px rgba(16, 19, 26, .22);
}