/* css/my-time.css — My Time view */

/* ── Active Timer Banner ──────────────────────────────────────────── */
.timer-banner {
  background: var(--surface-1);
  border: 1px solid var(--accent-border);
  border-radius: var(--r);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.timer-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}
.timer-banner-info { flex: 1; min-width: 0; }
.timer-banner-name { font-size: 14px; font-weight: 500; color: var(--text); }
.timer-banner-label {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
  margin-left: 8px;
}
.timer-banner-elapsed {
  font-family: 'DM Mono', monospace;
  font-size: 22px; font-weight: 500;
  color: var(--accent); white-space: nowrap;
}
@media (max-width: 480px) { .timer-banner-elapsed { font-size: 18px; } }

/* ── Stats Row ────────────────────────────────────────────────────── */
.stats-row { margin-bottom: 16px; }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
}
.stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-2); display: block;
}
.stat-value {
  font-family: 'DM Mono', monospace;
  font-size: 26px; font-weight: 600; color: var(--text);
  display: block; margin-top: 4px;
}
.stat-value.timer-running { color: var(--accent); }
.stat-value.negative { color: var(--red); }
.stat-sub {
  font-size: 12px; color: var(--text-2); margin-top: 5px; display: block;
}
@media (max-width: 480px) { .stat-value { font-size: 22px; } }

/* ── Start Timer Card ─────────────────────────────────────────────── */
.start-timer-card { margin-bottom: 16px; }
.start-timer-header {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 12px;
}
.start-timer-header .card-title { margin-bottom: 0; }

.search-wrap { position: relative; margin-bottom: 8px; }
.search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: .9rem; pointer-events: none;
}
.search-input {
  width: 100%; padding: 7px 11px 7px 34px;
}
.search-input:focus { border-color: var(--accent); }

/* work item list */
.work-item-list { list-style: none; max-height: 240px; overflow-y: auto; }
.wi-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r-sm);
  transition: background 0.1s, border 0.1s;
  border: 1px solid transparent;
  margin-bottom: 2px;
}
.wi-row:hover {
  background: var(--surface-1);
  border-color: var(--border-md);
}
.wi-row-name { flex: 1; font-size: 13.5px; color: var(--text); }
.wi-row-select-client {
  font-size: 12px; color: var(--accent); cursor: pointer;
  background: none; border: none; font-family: inherit;
  padding: 2px 6px; border-radius: var(--r-sm);
  transition: background 0.1s;
}
.wi-row-select-client:hover { background: var(--accent-dim); }

/* ── Client Picker (inline) ───────────────────────────────────────── */
.client-picker {
  background: var(--surface-1);
  border: 1px solid var(--accent-border);
  border-radius: var(--r);
  overflow: hidden;
  margin-bottom: 4px;
}
.client-picker-header {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  background: var(--accent-dim);
}
.client-picker-label { flex: 1; font-size: 13px; color: var(--text-2); }
.client-picker-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: .85rem; padding: 1px 4px;
  border-radius: var(--r-sm);
}
.client-picker-close:hover { color: var(--text); background: var(--surface-2); }
.client-picker-search { padding: 8px 12px; }
.client-picker-search input { width: 100%; }
.client-picker-list {
  list-style: none;
  max-height: 200px; overflow-y: auto;
  border-top: 1px solid var(--border);
}
.client-match-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px; cursor: pointer;
  font-size: 13.5px; color: var(--text);
  transition: background 0.1s;
  border-bottom: 1px solid var(--border);
}
.client-match-item:last-child { border-bottom: none; }
.client-match-item:hover { background: var(--surface-2); }
.client-match-meta { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.client-create-item {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; cursor: pointer;
  font-size: 13px; color: var(--accent);
  border-top: 1px solid var(--border);
  transition: background 0.1s;
}
.client-create-item:hover { background: var(--accent-dim); }

/* ── This Week / This Month grids ─────────────────────────────────── */
.summary-grid { margin-bottom: 16px; }

.summary-card-inner { }
.summary-card-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-2); margin-bottom: 8px; display: block;
}
.summary-wi-list { list-style: none; }
.summary-wi-list li { border-bottom: 1px solid var(--border); }
.summary-wi-list li:last-child { border-bottom: none; }

.summary-wi-header {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 0; cursor: pointer; width: 100%;
}
.summary-wi-header:hover { background: var(--surface-2); margin: 0 -18px; padding: 9px 18px; }
.summary-wi-name { flex: 1; font-size: 13px; color: var(--text); }
.summary-wi-duration {
  font-family: 'DM Mono', monospace;
  font-size: 13px; color: var(--text-2);
  white-space: nowrap;
}
.summary-wi-play {
  color: var(--accent); font-size: .9rem;
  background: none; border: none; cursor: pointer;
  padding: 2px 4px; border-radius: var(--r-sm);
  transition: background 0.1s;
}
.summary-wi-play:hover { background: var(--accent-dim); }

.wi-expand-chevron {
  font-size: .65rem; color: var(--text-3);
  margin-left: 4px; transition: transform .15s; flex-shrink: 0;
}
.wi-expand-chevron.open { transform: rotate(90deg); }

.summary-entry-list {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .2rem 0 .5rem;
}
.summary-entry-row {
  padding: .25rem .5rem;
  background: var(--surface-1); border-radius: var(--r-sm);
  font-size: 13px;
}
.summary-entry-date { color: var(--text-2); font-size: 12px; margin-right: .3rem; }
.summary-entry-range { font-variant-numeric: tabular-nums; }
.summary-entry-note { color: var(--text-2); font-style: italic; font-size: 12px; display: block; margin-top: .1rem; }

/* ── Who's Working Now ────────────────────────────────────────────── */
.presence-card { margin-bottom: 16px; }
.presence-list { display: flex; flex-wrap: wrap; gap: 8px; }
.presence-item {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r); padding: 10px 12px;
  font-size: 13px;
}
.presence-user { font-weight: 600; color: var(--text); }
.presence-wi { color: var(--text-2); font-size: 12px; margin-top: 2px; }

/* ── Today's Log ──────────────────────────────────────────────────── */
.today-card { margin-bottom: 16px; }
.today-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.today-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-2); }
.today-total {
  font-size: 12px; color: var(--accent); font-weight: 600;
  font-family: 'DM Mono', monospace;
}
.today-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

.entries-table { width: 100%; border-collapse: collapse; }
.entries-table th { padding: 6px 8px; font-size: 11px; }
.entries-table td { padding: 8px; }
.entry-time {
  font-family: 'DM Mono', monospace; font-size: 12px;
  color: var(--text-2); white-space: nowrap;
}
.entry-wi { font-weight: 500; color: var(--text); }
.entry-note-input {
  background: none; border: none; border-bottom: 1px dashed var(--border-md);
  color: var(--text); font-size: 13px; padding: 1px 3px;
  min-width: 80px; width: 100%; font-family: inherit;
}
.entry-note-input:focus { outline: none; border-bottom-color: var(--accent); }
.entry-duration {
  font-family: 'DM Mono', monospace; font-size: 13px;
  color: var(--text-2); white-space: nowrap; text-align: right;
}
.entry-active-badge { font-size: 11px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* ── Absences sidebar (my absences) ──────────────────────────────── */
.my-absence-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.my-absence-row:last-child { border-bottom: none; }
.my-absence-dates { flex: 1; font-size: 13px; }

/* ── Annual leave preview (in absence modal) ──────────────────────── */
.al-preview {
  background: var(--surface-1); border-radius: var(--r-sm);
  padding: 10px 14px; border: 1px solid var(--border);
}
.al-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
.al-row-label { color: var(--text-2); }
.al-row-value { font-weight: 500; }
.al-remaining.ok { color: var(--green); }
.al-remaining.insufficient { color: var(--red); }
.al-warning { font-size: 12px; color: var(--amber); margin-top: 6px; }
.al-holidays { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* ── Deadline list (upcoming) ─────────────────────────────────────── */
.deadline-list { list-style: none; }
.deadline-item {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.deadline-item:last-child { border-bottom: none; }
.dl-meta { flex: 1; min-width: 0; }
.dl-work-item-name { font-size: 12px; color: var(--text-2); }
.dl-title { font-weight: 500; font-size: 13px; }
.dl-due { font-size: 12px; color: var(--text-2); margin-top: 2px; }
.dl-assignee { font-size: 12px; color: var(--text-2); font-style: italic; }
.deadline-actions { display: flex; gap: 4px; }
.deadline-overdue { background: var(--red-dim); border-left: 3px solid var(--red); padding-left: 8px; }
.deadline-overdue .dl-due { color: var(--red); font-weight: 600; }

/* ── Log time modal client picker ─────────────────────────────────── */
.log-client-confirm {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--accent-dim); border: 1px solid var(--accent-border);
  border-radius: var(--r-sm); font-size: 13px;
}
.log-client-name { color: var(--accent); font-weight: 500; flex: 1; }
.log-client-clear {
  background: none; border: none; cursor: pointer;
  color: var(--text-2); font-size: .85rem;
}
.log-client-clear:hover { color: var(--text); }