/* Timesheets app: My week (the week grid), the entries list, totals and planned against spent hours.
   Tokens from admin.css only, logical properties only (RTL), light + dark through the tokens, phone first at 375 px with 40-44 px touch targets. */

/* ------------------------------------------------------------ shared bits */
.tsh-page { min-inline-size: 0; }
.tsh-phone-line { display: none; flex-wrap: wrap; align-items: center; gap: 6px; margin-block-start: 4px; }
@media (max-width: 720px) { .tsh-phone-line { display: flex; } }
.tsh-state { display: inline-flex; align-items: center; gap: 4px; }
.tsh-over { color: var(--danger-ink); font-weight: 650; display: inline-flex; align-items: center; gap: 4px; }
.tsh-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; margin-block-end: 12px; border: 1px solid color-mix(in srgb, var(--info) 35%, var(--line)); border-radius: var(--r-sm); background: var(--info-soft); color: var(--info-ink); font-size: 13.5px; }
.tsh-banner > span { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; text-align: start; }
.tsh-bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block: 12px; }
.tsh-bar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tsh-bar-tools .chip-select, .tsh-bar-tools .date-in, .tsh-tools .chip-select { min-block-size: 40px; }
.tsh-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.tsh-c-act { inline-size: 1%; white-space: nowrap; }
.tsh-row-locked .tsh-c-main b { color: var(--ink); }
.tsh-entry-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-start: 12px; }
.tsh-lock-note { display: flex; align-items: center; gap: 6px; margin-block: 8px 0; }
.tsh-entry-cost { margin-block: 4px 0; }

/* ------------------------------------------------------------ My week */
.tsh-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 10px; }
.tsh-weeknav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tsh-week-label { min-inline-size: 9em; text-align: center; font-variant-numeric: tabular-nums; }
.tsh-nav { min-inline-size: 44px; min-block-size: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.tsh-nav:hover { border-color: var(--accent); }
.tsh-emp { max-inline-size: 260px; }
.tsh-grid-card.is-loading { opacity: .6; }
.tsh-scroll { overflow-x: auto; max-inline-size: 100%; overscroll-behavior-x: contain; }
.tsh-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tsh-grid { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tsh-grid th, .tsh-grid td { padding: 6px 4px; border-block-end: 1px solid var(--line-2); vertical-align: middle; background: var(--panel); }
.tsh-grid thead th { border-block-end: 1px solid var(--line); text-align: center; font-weight: 700; background: var(--panel-2); }
.tsh-grid .tsh-c-line { position: sticky; inset-inline-start: 0; z-index: 2; min-inline-size: 132px; max-inline-size: 220px; padding-inline: 12px 8px; text-align: start; font-weight: 400; border-inline-end: 1px solid var(--line); }
.tsh-grid thead .tsh-c-line { background: var(--panel-2); }
.tsh-grid tfoot .tsh-c-line, .tsh-grid tfoot td { background: var(--panel-2); border-block-end: 0; border-block-start: 1px solid var(--line); }
.tsh-grid tfoot .tsh-c-line { font-weight: 700; }
.tsh-c-day { min-inline-size: 70px; }
.tsh-dn { font-size: 13px; }
.tsh-dd { font-size: 12px; font-weight: 500; color: var(--muted); }
.tsh-c-day.is-today { background: var(--accent-soft); color: var(--accent-d); }
.tsh-c-day.is-today .tsh-dd { color: inherit; }
.tsh-c-day.is-rest { opacity: .65; background: var(--panel-3); }
.tsh-line-name { display: grid; gap: 2px; min-inline-size: 0; overflow-wrap: anywhere; line-height: 1.3; }
.tsh-row.is-suggested .tsh-line-name { font-style: italic; color: var(--muted); }
.tsh-row.is-suggested .tsh-line-name b { color: var(--muted); font-weight: 600; }
.tsh-c-cell { position: relative; padding: 4px; text-align: center; }
.tsh-c-cell.is-rest { background: var(--panel-2); }
.tsh-cell { inline-size: 100%; min-inline-size: 62px; min-block-size: 44px; padding: 0 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); color: var(--ink); font: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.tsh-cell::placeholder { color: var(--muted); opacity: .6; }
.tsh-cell:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.tsh-cell.is-edited { border-color: var(--accent); background: var(--accent-soft); }
.tsh-cell.invalid { border-color: var(--danger); background: var(--danger-soft); }
.tsh-cell.is-locked { background: var(--panel-3); border-style: dashed; color: var(--ink); cursor: default; }
.tsh-lock { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; color: var(--muted); pointer-events: none; display: inline-flex; }
.tsh-grid .tsh-c-total { min-inline-size: 70px; padding-inline: 10px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; border-inline-start: 1px solid var(--line); }
.tsh-grid thead .tsh-c-total { background: var(--panel-2); }
.tsh-c-daytotal { text-align: center; font-variant-numeric: tabular-nums; }
.tsh-dt-v { font-weight: 700; }
.tsh-dt-t { font-size: 11.5px; line-height: 1.2; }
.tsh-c-daytotal.tone-ok { background: var(--ok-soft); color: var(--ok-ink); }
.tsh-c-daytotal.tone-warn { background: var(--warn-soft); color: var(--warn-ink); }
.tsh-c-daytotal.tone-info { background: var(--info-soft); color: var(--info-ink); }
.tsh-c-daytotal.tone-rest { color: var(--muted); }
.tsh-c-daytotal.tone-ok .tsh-dt-t, .tsh-c-daytotal.tone-warn .tsh-dt-t, .tsh-c-daytotal.tone-info .tsh-dt-t { color: inherit; opacity: .85; }
.tsh-c-weektotal { background: var(--panel-2); }
@media (max-width: 720px) {
  .tsh-grid .tsh-c-line { min-inline-size: 112px; max-inline-size: 140px; padding-inline: 8px 6px; font-size: 13px; }
  .tsh-cell { min-inline-size: 58px; }
  .tsh-week-label { min-inline-size: 0; flex: 1; }
  .tsh-weeknav { inline-size: 100%; }
  .tsh-emp, .tsh-tools > .btn { inline-size: 100%; max-inline-size: none; min-block-size: 44px; }
}

/* ------------------------------------------------------------ Totals */
.tsh-by .seg { min-block-size: 44px; padding-inline: 14px; }
.tsh-by { max-inline-size: 100%; overflow-x: auto; }
.tsh-totals-card.is-loading, .tsh-tasks-card.is-loading { opacity: .6; }
.tsh-totals .tsh-t-main { min-inline-size: 140px; overflow-wrap: anywhere; }
.tsh-t-link { color: inherit; text-decoration: none; display: block; min-block-size: 40px; }
.tsh-t-link:hover b { color: var(--accent-d); }
.tsh-t-barcell { inline-size: 32%; min-inline-size: 120px; }
.tsh-bar { block-size: 12px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.tsh-bar > span { display: block; block-size: 100%; border-radius: 999px; background: var(--accent); }
.tsh-totals tfoot td { border-block-start: 2px solid var(--line); background: var(--panel-2); }
.tsh-totals .num, .tsh-tasks .num { font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .tsh-bar-filters { inline-size: 100%; }
  .tsh-bar-filters > * { flex: 1 1 140px; }
}

/* ------------------------------------------------------------ Planned vs spent */
.tsh-pcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; margin-block-end: 16px; }
.tsh-pcard { position: relative; display: flex; align-items: flex-start; gap: 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); }
.tsh-pcard:hover { border-color: var(--accent); }
.tsh-pcard.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow); }
.tsh-pcard.is-over { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.tsh-pcard-main { flex: 1; min-inline-size: 0; min-block-size: 44px; display: grid; gap: 8px; padding: 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; border-radius: var(--r); }
.tsh-pcard-main:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tsh-pcard-name { display: flex; align-items: center; gap: 8px; min-inline-size: 0; overflow-wrap: anywhere; }
.tsh-dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; flex: none; background: var(--accent); }
.tsh-pcard-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; font-size: 13px; font-variant-numeric: tabular-nums; }
.tsh-pcard > .icon-btn { margin-block-start: 4px; margin-inline-end: 4px; flex: none; }
.tsh-progress { block-size: 8px; min-inline-size: 70px; border-radius: 999px; background: var(--line); overflow: hidden; }
.tsh-progress > span { display: block; block-size: 100%; border-radius: 999px; background: var(--accent); }
.tsh-progress.is-over > span { background: var(--danger); }
.tsh-progress.is-noplan { background: var(--line-2); }
.tsh-over-check { display: inline-flex; align-items: center; gap: 8px; min-block-size: 40px; cursor: pointer; }
.tsh-over-check input { inline-size: 20px; block-size: 20px; }
.tsh-tasks-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-block-end: 1px solid var(--line); }
.tsh-pick { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px; }
.tsh-task-name { display: flex; gap: 4px; min-inline-size: 0; overflow-wrap: anywhere; }
.tsh-task-name.is-sub { padding-inline-start: 14px; }
.tsh-t-progress { min-inline-size: 110px; }
.tsh-t-progress .tsh-progress { margin-block-end: 3px; }
.tsh-row-over td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.tsh-tasks .tsh-c-act .icon-btn { min-inline-size: 40px; min-block-size: 40px; }