/* Time Tracker - page.css
   Layout/spacing conventions (rounded cards, soft shadow, day-grid) adapted
   from a live look at https://onestonesoup.org/MealPlanner#Weekly%20Planner
   (a cream/white card-per-day board with rounded corners and soft shadows),
   per TT-T-002 - but with the accent swapped from MealPlanner's green (and
   Wet-Wired Tools' usual purple, see Web Links' page.css) to blue. */
:root {
  --tt-bg: #f6f3ec;
  --tt-ink: #2f2a24;
  --tt-muted: #746b61;
  --tt-accent: #3b7dc4;
  --tt-accent-strong: #2a5680;
  --tt-accent-soft: #e3edf8;
  --tt-line: #ded5ca;
  --tt-panel: #fbfaf6;
  --tt-empty: #9a9187;
  --tt-shadow: 0 16px 45px rgba(47, 42, 36, 0.11);
}

body { background: var(--tt-bg); color: var(--tt-ink); }
.panel { padding: 14px; }

.tt-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; }
.tt-field { display:flex; flex-direction:column; gap:4px; }
.tt-field label { font-size:.72rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--tt-muted); margin-bottom:0; }
.tt-field select, .tt-field input { margin-bottom:0; border-radius:8px; border:1px solid var(--tt-line); }

.tt-btn { border-radius:8px; border:1px solid transparent; padding:8px 14px; font-weight:700; cursor:pointer; display:inline-block; }
.tt-btn.primary { background: var(--tt-accent); color:#fff; }
.tt-btn.primary:hover { background: var(--tt-accent-strong); }
.tt-btn.ghost { background: var(--tt-accent-soft); color: var(--tt-accent-strong); }
.tt-btn.danger { background:#fff0ec; color:#a5442d; }

/* TT-T-024: the running-timer bar became a popup (see tt-modal-backdrop#ltTimerRunningBackdrop) -
   these two classes now style content inside that popup instead of an inline toolbar bar. */
.tt-timer-task { font-weight:700; color:var(--tt-accent-strong); }
.tt-timer-modal-elapsed { font-variant-numeric:tabular-nums; font-weight:900; letter-spacing:.03em; font-size:2rem; text-align:center; padding:6px 0; }
/* Toolbar button reused as a live status/reopen control while a timer is running. */
.tt-timer-btn-elapsed { font-variant-numeric:tabular-nums; }

.tt-empty { color: var(--tt-empty); padding:28px; text-align:center; }

/* Weekly grid - mirrors MealPlanner's .mp-week-grid / .mp-day-card structure */
.tt-week-grid { display:grid; gap:14px; grid-template-columns:repeat(7, minmax(180px, 1fr)); overflow-x:auto; padding-bottom:12px; }
.tt-day-card { background:rgba(255,255,255,.88); border:1px solid var(--tt-line); border-radius:22px; box-shadow: var(--tt-shadow); min-width:180px; overflow:hidden; }
.tt-day-head { background:linear-gradient(180deg, #fff, #fbfaf6); border-bottom:1px solid var(--tt-line); padding:12px 14px 10px; }
.tt-day-name { color: var(--tt-accent-strong); font-size:.72rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.tt-day-date { font-size:1.15rem; font-weight:900; letter-spacing:-.03em; margin-top:2px; }
.tt-day-total { font-size:.72rem; color:var(--tt-muted); margin-top:2px; }

.tt-task-list { display:grid; gap:6px; padding:8px; }
/* TT-B-001: "1fr auto" (not a bare fixed px track) so the actions column always sizes to its
   real content - the old fixed 56px track had no minmax floor, so the number input's natural
   min-content width could exceed it and get clipped by this card's overflow:hidden. */
.tt-task-row { align-items:center; background:var(--tt-panel); border:1px solid transparent; border-radius:14px; color:var(--tt-ink); display:grid; gap:8px; grid-template-columns:1fr auto; min-height:48px; padding:8px 9px; }
.tt-task-row:hover { background:#fff; border-color:var(--tt-accent); }
/* TT-T-023: a 1fr grid track won't shrink below its content's min-content width unless the
   item itself allows it - without this, the "Log hours" / "X hours" pill (wider than the old
   fixed-width number input) pushed the row wider than the card, clipping the remove button
   off past the card's overflow:hidden. */
.tt-task-row > div:first-child { min-width:0; }
.tt-task-ref { color:var(--tt-muted); font-size:.68rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
/* TT-T-040: Client / Project label on each row when Log Time shows "All". */
.tt-task-scope { color:var(--tt-muted); font-size:.68rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* TT-T-041: Edit buttons on Report and Expenses table rows; Delete sits left in an edit popup. */
.tt-row-actions { white-space:nowrap; text-align:right; }
.tt-row-actions .tt-btn { padding:4px 10px; }
.tt-modal-actions .tt-modal-delete { margin-right:auto; }
/* TT-T-008: ellipsis truncation stays (compact layout, Nicholas's choice), but the full name is
   now revealed by a real CSS tooltip (data-tooltip) instead of the slow, easy-to-miss native
   title= hover. */
.tt-task-name { position:relative; font-size:.85rem; font-weight:700; line-height:1.2; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default; }
.tt-task-name[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position:absolute; left:0; top:100%; margin-top:6px; z-index:20;
  background:var(--tt-accent-strong); color:#fff; font-weight:600; font-size:.78rem; line-height:1.3;
  padding:6px 10px; border-radius:8px; box-shadow:var(--tt-shadow);
  white-space:normal; max-width:240px; width:max-content;
}
.tt-task-row-actions { display:flex; align-items:center; gap:6px; }
/* TT-T-023: hours are edited via the popup now, not an always-editable input in the row -
   this is a clickable value showing the current hours (or a prompt when none logged yet). */
.tt-hours-value { color:var(--tt-accent-strong); font-weight:700; font-size:.82rem; cursor:pointer; text-decoration:none; padding:5px 9px; border-radius:8px; background:var(--tt-accent-soft); white-space:nowrap; }
.tt-hours-value:hover { background:var(--tt-accent); color:#fff; }
.tt-remove-assignment-btn { background:transparent; border:none; color:var(--tt-muted); font-size:1rem; cursor:pointer; line-height:1; padding:2px 4px; border-radius:6px; }
.tt-remove-assignment-btn:hover { background:#fff0ec; color:#a5442d; }
.tt-task-row.fixed-fee { opacity:.6; }
.tt-fixed-fee-badge { background:#fff7e6; border:1px solid #f0dca8; border-radius:999px; color:#9a6000; font-size:.62rem; font-weight:900; padding:2px 7px; white-space:nowrap; }

.tt-day-head { position:relative; }
.tt-record-btn { margin-top:8px; width:100%; padding:6px 10px; font-size:.78rem; }

/* Budgets / Reports tables */
.tt-table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow:var(--tt-shadow); }
.tt-table th, .tt-table td { padding:10px 12px; border-bottom:1px solid var(--tt-line); text-align:left; font-size:.85rem; }
.tt-table th { background:var(--tt-accent-soft); color:var(--tt-accent-strong); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.tt-table input[type=number] { width:80px; margin-bottom:0; border-radius:8px; border:1px solid var(--tt-line); padding:4px 6px; }
.tt-progress { background:var(--tt-line); border-radius:999px; height:8px; overflow:hidden; width:100%; }
.tt-progress-bar { background:var(--tt-accent); height:100%; }
.tt-progress-bar.over { background:#c0432d; }

.tt-toast { position:fixed; bottom:20px; right:20px; background:var(--tt-accent-strong); color:#fff; padding:10px 16px; border-radius:10px; box-shadow:var(--tt-shadow); opacity:0; pointer-events:none; transition:opacity .2s; z-index:3000; }
.tt-toast.show { opacity:1; }

/* Administration view */
.tt-admin-client-card { background:#fff; border:1px solid var(--tt-line); border-radius:16px; box-shadow:var(--tt-shadow); padding:14px 16px; margin-bottom:14px; }
.tt-admin-client-card h5 { margin:0 0 8px; font-size:1rem; }
.tt-admin-project-list { display:grid; gap:4px; }
.tt-admin-project-row { display:flex; align-items:center; gap:8px; padding:6px 4px; border-bottom:1px solid var(--tt-line); font-size:.85rem; }
.tt-admin-project-link { color:var(--tt-accent-strong); font-weight:700; cursor:pointer; flex:1; }
.tt-admin-project-link:hover { text-decoration:underline; }
.tt-admin-unlink { color:var(--tt-muted); font-size:.75rem; cursor:pointer; }
.tt-admin-unlink:hover { color:#a5442d; }

.tt-modal-backdrop { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:4000; }
.tt-modal { background:#fff; border-radius:16px; padding:20px; width:90%; max-width:420px; box-shadow:var(--tt-shadow); display:grid; gap:10px; }
.tt-modal h4 { margin:0 0 4px; }
.tt-modal textarea { width:100%; box-sizing:border-box; border-radius:8px; border:1px solid var(--tt-line); padding:8px; font:inherit; }
.tt-modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
.tt-hours-field { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tt-hours-field input { width:80px; margin-bottom:0; border-radius:8px; border:1px solid var(--tt-line); padding:8px; text-align:right; }
.tt-hours-field span { color:var(--tt-muted); font-weight:700; }

@media (max-width: 900px) {
  .tt-week-grid { grid-template-columns: 1fr; overflow: visible; }
  .tt-day-card { min-width: 0; }
}