.my-time-workspace {
  width: min(1500px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 72px) 0 80px;
  color: var(--ink);
}

.my-time-header,
.my-time-week > header,
.my-time-day-panel > header,
.my-time-timeline-panel > header,
.my-time-analysis > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.my-time-header {
  border-bottom: 1px solid var(--ink);
  padding-bottom: 20px;
}

.my-time-header h1 {
  margin: 4px 0 8px;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 540;
  line-height: 1;
}

.my-time-header p,
.my-time-week p,
.my-time-day-panel p,
.my-time-timeline-panel p,
.my-time-analysis p { margin: 0; color: var(--muted); }

.my-time-header-actions,
.my-time-view-tabs,
.my-time-week nav,
.my-time-suggestion > div,
.my-time-entry-actions > div {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.my-time-header-actions a,
.my-time-week nav a,
.my-time-view-tabs button,
.my-time-header-actions button,
.my-time-entry-actions button,
.my-time-suggestion button,
.my-time-analysis button {
  min-height: 38px;
  border: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  padding: 0 12px;
  font: inherit;
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}

.my-time-header-actions .primary-button,
.my-time-suggestion .primary-button { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.my-time-view-tabs { border-bottom: 1px solid var(--rule); }
.my-time-view-tabs button { border: 0; border-bottom: 2px solid transparent; min-height: 48px; }
.my-time-view-tabs button[aria-selected="true"] { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }

.my-time-week { margin-top: 28px; }
.my-time-week h2,
.my-time-day-panel h2,
.my-time-timeline-panel h2,
.my-time-analysis h2 { margin: 3px 0 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 560; }

.my-time-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(105px, 1fr));
  margin-top: 16px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  overflow-x: auto;
}

.my-time-days button {
  display: grid;
  min-width: 105px;
  min-height: 82px;
  gap: 3px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: inherit;
  padding: 12px;
  text-align: left;
  cursor: pointer;
}

.my-time-days button[aria-selected="true"] { background: var(--bona-color-surface-subtle); box-shadow: inset 0 3px var(--accent); }
.my-time-days span,
.my-time-days small { color: var(--muted); font-size: 11px; }
.my-time-days strong { font-size: 15px; font-weight: 630; }

.my-time-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--rule);
}

.my-time-metrics > div {
  display: grid;
  gap: 5px;
  min-height: 76px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 14px;
}

.my-time-metrics span,
.my-time-metrics small { color: var(--muted); font-size: 11px; }
.my-time-metrics strong { font-size: clamp(18px, 2vw, 25px); font-weight: 570; }
.my-time-state-note { margin: 12px 0 0; border-left: 3px solid var(--accent); padding: 8px 12px; color: var(--muted); }

.my-time-list-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(270px, 340px);
  gap: clamp(28px, 4vw, 60px);
  margin-top: 42px;
}

.my-time-day-panel > header,
.my-time-timeline-panel > header,
.my-time-analysis > header { border-bottom: 1px solid var(--ink); padding-bottom: 12px; }
.my-time-day-panel > header > span { color: var(--muted); font-size: 12px; }
.my-time-entry-list { border-left: 1px solid var(--rule); }

.my-time-entry-row {
  display: grid;
  grid-template-columns: 115px minmax(160px, .9fr) minmax(220px, 1.4fr) minmax(130px, .65fr) 88px;
  gap: 14px;
  align-items: center;
  min-height: 86px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 14px;
}

.my-time-entry-row.has-overlap { box-shadow: inset 3px 0 var(--danger); }
.my-time-entry-row.is-clio:not(.has-overlap) { box-shadow: inset 3px 0 var(--accent); }
.my-time-entry-clock,
.my-time-entry-matter,
.my-time-entry-work,
.my-time-entry-state { display: grid; gap: 5px; min-width: 0; }
.my-time-entry-clock strong { font-variant-numeric: tabular-nums; }
.my-time-entry-row span { color: var(--muted); font-size: 11px; }
.my-time-entry-row strong { overflow: hidden; font-size: 13px; font-weight: 610; text-overflow: ellipsis; }
.my-time-billability,
.my-time-status { width: fit-content; border: 1px solid var(--rule); padding: 3px 6px; }
.my-time-source { width: fit-content; color: var(--ink) !important; font-weight: 650; }
.my-time-overlap { color: var(--danger) !important; font-weight: 650; }

.my-time-entry-source-link {
  justify-self: end;
  border: 1px solid var(--rule);
  color: inherit;
  padding: 9px 10px;
  font-size: 12px;
  text-decoration: none;
}

.my-time-entry-actions { position: relative; justify-self: end; }
.my-time-entry-actions summary { min-height: 36px; border: 1px solid var(--rule); padding: 9px 10px; list-style: none; cursor: pointer; font-size: 12px; }
.my-time-entry-actions summary::-webkit-details-marker { display: none; }
.my-time-entry-actions > div { position: absolute; z-index: 5; top: calc(100% + 4px); right: 0; width: 220px; border: 1px solid var(--ink); background: var(--paper); padding: 8px; box-shadow: 0 8px 25px rgba(0,0,0,.12); }
.my-time-entry-actions button { width: 100%; text-align: left; }
.my-time-entry-actions button.is-danger { color: var(--danger); }

.my-time-gap {
  display: grid;
  grid-template-columns: 115px 1fr 1.4fr;
  gap: 14px;
  width: 100%;
  border: 0;
  border-right: 1px solid var(--rule);
  border-bottom: 1px dashed var(--rule);
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
}
.my-time-gap:hover { background: var(--bona-color-surface-subtle); color: var(--ink); }
.my-time-gap small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.my-time-empty { display: grid; gap: 8px; justify-items: start; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 38px 24px; }
.my-time-day-total { display: grid; grid-template-columns: 1fr 1fr minmax(240px, 1.4fr); gap: 16px; border-bottom: 1px solid var(--ink); padding: 18px 0; }
.my-time-day-total > div { display: grid; gap: 4px; }
.my-time-day-total span,
.my-time-day-total small { color: var(--muted); font-size: 11px; }
.my-time-day-close { justify-items: end; text-align: right; }

.my-time-list-layout > aside { border-top: 1px solid var(--ink); padding-top: 12px; }
.my-time-list-layout > aside h2 { margin: 3px 0 8px; font-size: 22px; }
.my-time-list-layout > aside > p { color: var(--muted); font-size: 12px; }
.my-time-suggestion { display: grid; gap: 10px; border-bottom: 1px solid var(--rule); padding: 18px 0; }
.my-time-suggestion > div:first-child { justify-content: space-between; }
.my-time-suggestion span,
.my-time-suggestion time,
.my-time-suggestion small { color: var(--muted); font-size: 11px; }
.my-time-suggestion p { margin: 0; font-size: 12px; }
.my-time-suggestion-empty { border-bottom: 1px solid var(--rule); padding: 22px 0; }
.my-time-suggestion-empty p { color: var(--muted); font-size: 12px; line-height: 1.5; }

.my-time-timeline-panel,
.my-time-analysis { margin-top: 42px; }
.my-time-timeline { display: grid; grid-template-columns: 64px minmax(0, 1fr); height: min(860px, 72vh); margin-top: 22px; }
.my-time-timeline-hours,
.my-time-timeline-track { position: relative; height: 100%; }
.my-time-timeline-hours span { position: absolute; top: calc(var(--hour) / 24 * 100%); right: 10px; translate: 0 -50%; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.my-time-timeline-track { border: 1px solid var(--rule); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(8.333% - 1px), var(--rule) calc(8.333% - 1px), var(--rule) 8.333%); cursor: crosshair; }
.my-time-timeline-block { position: absolute; z-index: 1; top: var(--timeline-top); left: 2%; width: 96%; height: max(28px, var(--timeline-height)); overflow: hidden; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--paper)); color: var(--ink); padding: 5px 8px; text-align: left; cursor: pointer; }
.my-time-timeline-block.is-clio { border-style: dashed; text-decoration: none; }
.my-time-timeline-block.has-overlap { z-index: 2; left: 48%; width: 50%; border-color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--paper)); }
.my-time-timeline-block strong,
.my-time-timeline-block span { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.my-time-unplaced { margin: 26px 0 0 64px; border-top: 1px solid var(--rule); padding-top: 12px; }
.my-time-unplaced h3 { font-size: 14px; }
.my-time-unplaced button,
.my-time-unplaced a,
.my-time-unplaced > div { display: flex; width: 100%; gap: 18px; border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: inherit; padding: 12px 0; text-align: left; text-decoration: none; }
.my-time-unplaced button,
.my-time-unplaced a { cursor: pointer; }

.my-time-analysis > header form { display: flex; align-items: end; gap: 8px; }
.my-time-analysis > header label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; }
.my-time-analysis input { min-height: 38px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); padding: 6px; }
.my-time-analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; margin-top: 36px; }
.my-time-analysis-grid > section { border-top: 1px solid var(--ink); }
.my-time-analysis-grid h3 { font-size: 16px; font-weight: 600; }
.my-time-bars > div { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(100px, 1fr) auto; gap: 12px; align-items: center; border-bottom: 1px solid var(--rule); padding: 10px 0; font-size: 11px; }
.my-time-bars i { display: block; width: var(--bar); height: 5px; background: var(--accent); }
.my-time-bars strong { font-variant-numeric: tabular-nums; }

.my-time-workspace :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.my-time-workspace [hidden] { display: none !important; }

@media (max-width: 1050px) {
  .my-time-list-layout { grid-template-columns: minmax(0, 1fr); }
  .my-time-list-layout > aside { margin-top: 12px; }
  .my-time-entry-row { grid-template-columns: 100px minmax(150px, .9fr) minmax(190px, 1.4fr) 110px 78px; gap: 10px; }
}

@media (max-width: 760px) {
  .my-time-workspace { padding: 24px 0 70px; }
  .my-time-header,
  .my-time-week > header,
  .my-time-day-panel > header,
  .my-time-timeline-panel > header,
  .my-time-analysis > header { align-items: flex-start; flex-direction: column; }
  .my-time-header-actions { width: 100%; }
  .my-time-header-actions > * { flex: 1 1 auto; text-align: center; }
  .my-time-days { grid-template-columns: repeat(7, 112px); }
  .my-time-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-time-entry-row { grid-template-columns: 94px minmax(0, 1fr) 44px; min-height: 104px; }
  .my-time-entry-matter,
  .my-time-entry-work { grid-column: 2; }
  .my-time-entry-state { grid-column: 1 / 3; grid-row: 3; display: flex; flex-wrap: wrap; }
  .my-time-entry-actions { grid-column: 3; grid-row: 1 / 3; }
  .my-time-entry-source-link { grid-column: 3; grid-row: 1 / 3; align-self: start; }
  .my-time-gap { grid-template-columns: 90px 1fr; }
  .my-time-gap small { grid-column: 1 / -1; white-space: normal; }
  .my-time-day-total { grid-template-columns: 1fr 1fr; }
  .my-time-day-close { grid-column: 1 / -1; align-items: start; justify-items: stretch; text-align: left; }
  .my-time-day-close button { width: 100%; }
  .my-time-timeline { grid-template-columns: 48px minmax(0, 1fr); }
  .my-time-unplaced { margin-left: 48px; }
  .my-time-analysis > header form { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .my-time-analysis > header form button { grid-column: 1 / -1; }
  .my-time-analysis-grid { grid-template-columns: 1fr; }
}