/* #353 — Reports For Admin and Owner (the combined report on Reports › By Client).
   Values are copied from the "Reports Module — All Mockups" design so the page
   matches it exactly; class names keep the mockup's tf-/sf- prefixes so the two
   can be compared side by side. Plain CSS rather than Tailwind utilities because
   the mockup's measurements (oklch colours, fixed column widths) are not on the
   Tailwind scale. */

.tf-page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px; }

/* Filter panel */
.tf-filter-panel { display: flex; background: #fff; border: 1px solid oklch(0.923 0.003 48.717); border-radius: 14px; box-shadow: 0 1px 3px rgba(28,25,23,0.05); }
/* content-box on purpose: the mockup's column widths (310 / 410 / 240) are the
   space INSIDE the padding. Tailwind's base makes everything border-box, which
   took 52px out of each column and pushed the date boxes and pickers over the
   dividers. */
.tf-col { padding: 22px 26px; box-sizing: content-box; }
.tf-divider { width: 1px; background: oklch(0.923 0.003 48.717); }
.tf-label { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: oklch(0.553 0.013 58.071); margin-bottom: 12px; }
.tf-radio-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 14px; }
.tf-radio-row input[type=radio] { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 50%; position: relative; cursor: pointer; }
.tf-radio-row input[type=radio]:hover { border-color: oklch(0.44 0.011 73.639); }
.tf-radio-row input[type=radio]:checked { border-color: rgb(27,81,69); }
.tf-radio-row input[type=radio]:checked::after { content: ""; position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: rgb(27,81,69); }
.tf-select { font-size: 13px; padding: 8px 10px; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 8px; background: #fff; color: #1c1917; font-family: inherit; cursor: pointer; box-sizing: border-box; }
.tf-select:disabled { color: oklch(0.709 0.01 56.259); background: oklch(0.97 0.001 106.424); cursor: default; }
.tf-date-input { font-size: 13px; padding: 8px 10px; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 8px; background: #fff; color: #1c1917; font-family: inherit; width: 140px; box-sizing: border-box; }
.tf-date-input:disabled { opacity: 0.5; }
.tf-date-input[aria-invalid=true] { border-color: rgb(220,38,38); }
/* The mockup's 100px boxes cut the year off ("09/29/20"). 128px is the widest
   pair that still fits the 310px Date Range column, and shows 09/29/2026 whole
   with room on the right for the calendar button. */
.tf-radio-row .tf-date-input { width: 128px; flex-shrink: 0; padding: 8px 28px 8px 8px; }
/* The MM/DD/YYYY text box plus its calendar button; the native picker the
   button opens sits invisibly over the field so its popup anchors there. */
.tf-date-field { position: relative; display: inline-flex; flex-shrink: 0; }
.tf-date-pick { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: flex; padding: 2px; border: none; background: none; color: rgb(27,81,69); cursor: pointer; border-radius: 4px; }
.tf-date-pick:disabled { opacity: 0.5; cursor: default; }
.tf-date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.tf-checks { display: flex; gap: 18px; flex-wrap: wrap; }
.tf-check { display: flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.tf-check input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 3px; position: relative; cursor: pointer; }
.tf-check input:hover { border-color: oklch(0.44 0.011 73.639); }
.tf-check input:checked { background: rgb(27,81,69); border-color: rgb(27,81,69); }
.tf-check input:checked::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.tf-segmented-3 { display: inline-flex; background: oklch(0.97 0.001 106.424); border-radius: 9px; padding: 3px; gap: 2px; }
.tf-seg-btn { font-size: 13px; font-weight: 500; padding: 8px 12px; border-radius: 7px; border: none; background: transparent; color: oklch(0.553 0.013 58.071); cursor: pointer; font-family: inherit; }
.tf-seg-btn.active { background: rgb(27,81,69); color: #fff; }
.tf-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgb(27,81,69); color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; padding: 11px 14px; border-radius: 8px; border: none; cursor: pointer; font-family: inherit; }
.tf-btn-primary:hover { background: rgb(22,64,56); }

/* Multi-select pickers (Filter by) */
.sf-msel { position: relative; }
.sf-msel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
.sf-msel-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-msel-btn svg { flex-shrink: 0; color: oklch(0.709 0.01 56.259); }
.sf-msel-panel { position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 240px; max-height: 270px; overflow-y: auto; background: #fff; border: 1px solid oklch(0.869 0.005 56.366); border-radius: 10px; box-shadow: 0 10px 28px rgba(28,25,23,0.14); padding: 6px; z-index: 30; display: none; box-sizing: border-box; }
.sf-msel.open .sf-msel-panel { display: block; }
.sf-msel-option { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.sf-msel-option:hover { background: oklch(0.97 0.001 106.424); }
.sf-msel-option input { appearance: none; -webkit-appearance: none; width: 15px; height: 15px; margin: 0; flex-shrink: 0; background: #fff; border: 1.5px solid oklch(0.63 0.01 56.259); border-radius: 3px; position: relative; cursor: pointer; }
.sf-msel-option input:checked { background: rgb(27,81,69); border-color: rgb(27,81,69); }
.sf-msel-option input:checked::after { content: ""; position: absolute; left: 4px; top: 0px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sf-msel-empty { padding: 12px 8px; font-size: 12px; color: oklch(0.709 0.01 56.259); text-align: center; }
.sf-msel-clear { display: block; width: 100%; text-align: left; font-size: 11px; font-weight: 600; color: rgb(27,81,69); background: none; border: none; padding: 6px 8px 4px; cursor: pointer; font-family: inherit; }
.sf-msel-clear:hover { text-decoration: underline; }

/* Results */
.tf-results-head { display: flex; align-items: baseline; justify-content: space-between; margin: 28px 0 4px; }
.tf-results-head .tf-rh-title { font-size: 16px; font-weight: 700; }
.tf-results-head .tf-rh-links { font-size: 13px; font-weight: 600; display: flex; gap: 20px; }
.tf-results-head .tf-rh-links a { color: rgb(27,81,69); text-decoration: underline; cursor: pointer; }

.tf-panel { display: none; }
.tf-panel.active { display: block; }
.tf-head-row { display: flex; align-items: center; padding: 8px 0; border-bottom: 2px solid oklch(0.913 0.005 56.42); font-size: 12px; font-weight: 700; color: #1c1917; }
.tf-row { border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 14px; }
.tf-row:nth-child(odd) { background: oklch(0.975 0.001 106.424); }
.tf-row-main { display: flex; align-items: center; width: 100%; padding: 12px 0; cursor: pointer; }
.tf-row-main:hover { background: oklch(0.955 0.007 56.42); }
.tf-row-main > a { font-weight: 600; color: rgb(27,81,69); text-decoration: underline; cursor: pointer; }
.tf-expand-icon { width: 20px; height: 20px; border-radius: 5px; background: rgb(27,81,69); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 10px; font-size: 14px; font-weight: 700; transition: transform .15s; }
.tf-row-main.open > .tf-expand-icon,
.tf-detail-row.open > .tf-expand-icon { transform: rotate(45deg); }
.tf-col-primary { width: 340px; flex-shrink: 0; display: flex; align-items: center; }
.tf-col-time { flex: 1; text-align: right; padding-right: 60px; }
.tf-col-projects { width: 100px; text-align: right; padding-right: 8px; }
/* The mockup animates max-height to 300px, which clips real data with more
   than a handful of rows. Shown/hidden outright instead. */
.tf-detail-wrap { display: none; background: oklch(0.99 0 0); }
.tf-detail-wrap.open { display: block; }
.tf-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0 9px 44px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); cursor: pointer; }
.tf-detail-row:hover { background: oklch(0.97 0.001 106.424); }
.tf-detail-row .tf-dr-hours { padding-right: 60px; }
.tf-detail-row-note { display: flex; align-items: baseline; padding: 9px 0 9px 44px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); gap: 12px; }
.tf-detail-row-note .drn-date { width: 100px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-detail-row-note .drn-proj { width: 150px; flex-shrink: 0; font-weight: 600; color: #1c1917; }
.tf-detail-row-note .drn-note { flex: 1; }
.tf-detail-row-note .drn-hours { width: 70px; flex-shrink: 0; text-align: right; padding-right: 60px; color: #1c1917; }

.tf2-proj-icon { width: 14px; height: 14px; font-size: 10px; margin-right: 8px; flex-shrink: 0; }
.tf2-proj-name { flex: 1; }
.tf2-member-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 8px 78px; font-size: 13px; border-top: 1px solid oklch(0.965 0.001 106.424); cursor: pointer; }
.tf2-member-row:hover { background: oklch(0.955 0.007 56.42); }
.tf2-member-row a { color: rgb(27,81,69); text-decoration: underline; }
.tf2-member-row span:last-child { padding-right: 60px; color: #1c1917; }

.tf2-subview-toggle { margin: 14px 0 4px; }
#tf2-panel-projects.view-by-person .tf2-view-task,
#tf2-panel-projects.view-by-person .tf2-proj-head-task { display: none; }
#tf2-panel-projects:not(.view-by-person) .tf2-view-person,
#tf2-panel-projects:not(.view-by-person) .tf2-proj-head-person { display: none; }
#tf2-panel-people.view-by-task .tf2-view-person { display: none; }
#tf2-panel-people:not(.view-by-task) .tf2-view-task { display: none; }
.tf2-task-subgroup { display: flex; justify-content: space-between; padding: 8px 0 8px 44px; margin-top: 8px; font-size: 12px; font-weight: 700; color: #1c1917; background: oklch(0.97 0.001 106.424); }
.tf-totals-row { display: flex; align-items: center; padding: 14px 0; font-size: 14px; font-weight: 700; }
.tf-totals-row .tf-col-primary { justify-content: flex-end; width: 340px; padding-right: 16px; box-sizing: border-box; }
.tf-no-results { padding: 16px 0 16px 30px; font-size: 13px; color: oklch(0.709 0.01 56.259); }

.tf-proj-head-row { display: flex; align-items: center; padding: 8px 0 8px 16px; border-bottom: 2px solid oklch(0.913 0.005 56.42); font-size: 12px; font-weight: 700; }
.tf-project-group-head { display: flex; align-items: center; padding: 10px 16px; background: oklch(0.97 0.001 106.424); border-radius: 8px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.tf-project-group-head span { font-weight: 400; color: oklch(0.709 0.01 56.259); margin-left: 8px; }
.tf-task-row { display: flex; align-items: center; padding: 11px 16px 11px 32px; border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 14px; }
.tf-col-task { width: 220px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-col-budget, .tf-col-actual { width: 140px; flex-shrink: 0; text-align: right; }
.tf-col-remaining { flex: 1; text-align: right; padding-right: 8px; }
.tf-remaining-neg { color: oklch(0.577 0.245 27.325); font-weight: 700; }
.tf-dash { color: oklch(0.709 0.01 56.259); }

/* Member time-entry modal (Group by Clients › Project › Member) */
.tf-member-modal-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.5); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tf-member-modal-overlay[hidden] { display: none; }
.tf-member-modal { width: 560px; max-width: 100%; max-height: 520px; background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.tf-member-modal-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid oklch(0.923 0.003 48.717); }
.tf-member-modal-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.tf-member-modal-head .sub { font-size: 12px; color: oklch(0.553 0.013 58.071); margin-top: 4px; }
.tf-member-modal-close { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #1c1917; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 8px; border: 1px solid oklch(0.869 0.005 56.366); cursor: pointer; font-family: inherit; }
.tf-member-modal-close:hover { filter: brightness(0.97); }
.tf-member-modal-body { padding: 8px 24px 20px; overflow-y: auto; }
.tf-member-modal-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid oklch(0.949 0.002 56.417); font-size: 13px; }
.tf-member-modal-row .mm-date { width: 90px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-member-modal-row .mm-note { flex: 1; color: oklch(0.444 0.011 73.639); }
.tf-member-modal-row .mm-hours { width: 60px; text-align: right; flex-shrink: 0; font-weight: 600; color: #1c1917; }
.tf-member-modal-total { display: flex; justify-content: space-between; padding: 12px 0 0; font-weight: 700; font-size: 13px; }

/* Print View — Detailed Time Entry Report */
.tf-print-overlay { position: fixed; inset: 0; background: rgba(28,25,23,0.5); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tf-print-overlay[hidden] { display: none; }
.tf-print-sheet { width: 1100px; max-width: 100%; max-height: min(680px, calc(100vh - 32px)); background: #fff; border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; color: #1c1917; }
.tf-print-body { padding: 0; overflow-y: auto; color: #1c1917; }
.tf-print-empty { padding: 40px; text-align: center; color: oklch(0.709 0.01 56.259); font-size: 13px; }
.tf-print-topbar2 { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid oklch(0.923 0.003 48.717); flex-shrink: 0; }
.tf-print-link { color: rgb(27,81,69); text-decoration: underline; font-size: 13px; font-weight: 600; cursor: pointer; background: none; border: none; padding: 0; font-family: inherit; }
.tf-print-pagebreak { display: flex; align-items: center; gap: 14px; font-size: 12px; color: oklch(0.553 0.013 58.071); }
.tf-print-pagebreak label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.tf-print-pagebreak-sep { width: 1px; height: 16px; background: oklch(0.869 0.005 56.366); margin: 0 4px; }
.tf-toggle-switch { display: flex; align-items: center; gap: 8px; cursor: pointer; position: relative; }
.tf-toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tf-toggle-switch .track { width: 32px; height: 18px; background: oklch(0.79 0.008 56.366); border-radius: 999px; position: relative; flex-shrink: 0; transition: background .15s ease; }
.tf-toggle-switch .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.25); }
.tf-toggle-switch input:checked + .track { background: rgb(27,81,69); }
.tf-toggle-switch input:checked + .track::after { transform: translateX(14px); }
.tf-toggle-switch input:focus-visible + .track { outline: 2px solid rgb(35,102,85); outline-offset: 2px; }
.tf-print-titlebar { background: #1c1917; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; font-size: 14px; font-weight: 700; flex-shrink: 0; }
.tf-print-includesbar { background: oklch(0.955 0.005 56.42); display: flex; align-items: center; justify-content: space-between; padding: 9px 24px; font-size: 13px; color: oklch(0.444 0.011 73.639); gap: 24px; flex-shrink: 0; }
.tf-print-includesbar b { color: #1c1917; }
.tf-print-client-hero { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 12px; }
.tf-print-client-hero h3 { font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.tf-print-client-hero .sub { font-size: 13px; color: oklch(0.553 0.013 58.071); }
.tf-print-hero-box { border: 1.5px solid #1c1917; border-radius: 4px; padding: 10px 20px; font-size: 15px; font-weight: 700; text-align: center; white-space: nowrap; }
.tf-print-group-bar { display: flex; justify-content: space-between; background: oklch(0.85 0.005 56.42); font-weight: 700; padding: 9px 24px; font-size: 13px; }
.tf-print-group-bar.is-header { background: oklch(0.97 0.001 106.424); color: #1c1917; }
.tf-print-subgroup-bar { display: flex; justify-content: space-between; background: oklch(0.93 0.003 48.717); padding: 7px 24px 7px 36px; font-size: 13px; font-weight: 600; }
.tf-print-entry { display: flex; align-items: baseline; padding: 8px 24px 8px 48px; font-size: 13px; border-bottom: 1px solid oklch(0.965 0.001 106.424); gap: 16px; }
.tf-print-entry .name { width: 150px; flex-shrink: 0; }
.tf-print-entry .date { width: 110px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf-print-entry .hrs { width: 80px; flex-shrink: 0; text-align: right; }
.tf-print-entry .note { flex: 1; color: oklch(0.444 0.011 73.639); }
.tf-print-entry .col-80 { width: 80px; flex-shrink: 0; text-align: right; }
.tf-print-entry .col-90 { width: 90px; flex-shrink: 0; text-align: right; }
.tf-print-entry.is-member { padding-left: 64px; }
.tf-print-entry.is-time-logged { padding-left: 88px; }
.tf-print-pagebreak-marker { border-top: 2px dashed oklch(0.79 0.008 56.366); margin: 18px 24px 0; padding-top: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: oklch(0.709 0.01 56.259); text-align: center; }
.tf-print-bottom-header { background: #1c1917; color: #fff; display: flex; align-items: center; justify-content: space-between; padding: 12px 24px; font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 28px; }
.tf-print-footer { background: oklch(0.955 0.005 56.42); display: flex; align-items: center; justify-content: space-between; padding: 8px 24px; font-size: 11px; color: oklch(0.553 0.013 58.071); flex-shrink: 0; }

/* Which of the five print layouts is showing, and the toolbar's switches.
   All server-rendered; the toolbar only flips classes on .tf-print-body. */
.tf-print-variant { display: none; }
.tf-print-variant.active { display: block; }
.tf-print-body:not(.break-clients) .tf-print-pagebreak-marker.is-client,
.tf-print-body:not(.break-projects) .tf-print-pagebreak-marker.is-project { display: none; }
.tf-print-body.hide-time-logged .tf-print-time-logged { display: none; }
.tf-print-body.hide-time-logged .tf-print-entry.is-member .hrs { visibility: hidden; }
/* Include Notes: the note's cell keeps its width so the hours stay aligned.
   A member's entry falls back to its task name rather than going blank. */
.tf-print-notes-off { display: none; }
.tf-print-body.hide-notes .tf-print-notes { display: none; }
.tf-print-body.hide-notes .tf-print-notes-off { display: inline; }

@media print {
  /* Print only the report sheet: everything that neither is the sheet nor
     contains it is removed, and the sheet's ancestors are flattened so it
     starts at the top of the first page. */
  body.tf-printing *:not(:has(.tf-print-sheet)):not(.tf-print-sheet):not(.tf-print-sheet *) { display: none !important; }
  body.tf-printing :has(.tf-print-sheet) { position: static !important; padding: 0 !important; margin: 0 !important; max-width: none !important; background: none !important; overflow: visible !important; }
  body.tf-printing .tf-print-sheet { width: 100%; max-width: none; max-height: none; box-shadow: none; border-radius: 0; overflow: visible; }
  body.tf-printing .tf-print-body { overflow: visible; padding-bottom: 70px; }
  body.tf-printing .tf-print-topbar2 { display: none !important; }
  .tf-print-body.break-clients .tf-print-break-client,
  .tf-print-body.break-projects .tf-print-break-project { break-before: page; page-break-before: always; }
  .tf-print-pagebreak-marker { display: none !important; }
  .tf-print-bottom-header, .tf-print-footer { position: fixed; left: 0; right: 0; }
  .tf-print-bottom-header { bottom: 28px; }
  .tf-print-footer { bottom: 0; }
  .tf-print-titlebar, .tf-print-includesbar, .tf-print-bottom-header, .tf-print-footer,
  .tf-print-group-bar, .tf-print-subgroup-bar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* While a filter change is re-running the report. */
.tf-results-frame { display: block; transition: opacity .15s; }
.tf-results-frame[aria-busy="true"],
.tf-loading .tf-results-frame { opacity: 0.5; pointer-events: none; }
.tf-updating { display: none; font-size: 13px; font-weight: 600; color: rgb(27,81,69); margin: 28px 0 -20px; }
.tf-loading .tf-updating { display: block; }

/* #354 — Reports For Members: Client › Project › my entries. Date, note and
   hours; the date column matches the Admin/Owner report's .drn-date. Values
   from the mockup's tf3- rows. */
.tf3-entry-row { display: flex; align-items: baseline; padding: 8px 0 8px 60px; font-size: 13px; color: oklch(0.444 0.011 73.639); border-top: 1px solid oklch(0.965 0.001 106.424); gap: 12px; }
.tf3-entry-row .e-date { width: 100px; flex-shrink: 0; color: oklch(0.553 0.013 58.071); }
.tf3-entry-row .e-note { flex: 1; }
/* 130px = the mockup's 70px figure plus its 60px right padding: Tailwind's
   border-box would otherwise leave 10px, and "1h 30m" wraps onto two lines. */
.tf3-entry-row .e-hours { width: 130px; flex-shrink: 0; text-align: right; padding-right: 60px; color: #1c1917; white-space: nowrap; }

/* "Lock or Unlock these entries", under the results.
   Centred and quiet, the way Tick's own footer reads: the sentence is the
   control, so the two words in it are styled as links rather than as buttons.
   button_to is still what submits them — a lock is a write, and a GET link
   that changes data is a link a crawler can press. */
.tf-lock-row { padding: 18px 0 26px; text-align: center; font-size: 13px; color: oklch(0.444 0.011 73.639); }
.tf-lock-row p { margin: 0; }
.tf-lock-form { display: inline; }
.tf-lock-link {
  display: inline; padding: 0; border: 0; background: none;
  font: inherit; color: oklch(0.488 0.13 153.5); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.tf-lock-link:hover { color: oklch(0.393 0.113 153.5); }
.tf-lock-note { margin-top: 4px; font-size: 12px; font-style: italic; color: oklch(0.709 0.01 56.259); }

/* Notes remain escaped text, with deliberate line breaks preserved. */
.tf-detail-row-note .drn-note, .tf-member-modal-row .mm-note,
.tf3-entry-row .e-note, .tf-print-notes { white-space: pre-line; overflow-wrap: anywhere; min-width: 0; }

/* #552 — approved open filter shelf, using the existing report behaviors. */
.report-page-head { margin-bottom: 24px; }
.report-page-head .tf-page-title { font-size: 30px; margin: 0 0 5px; }
.report-page-head p { font-size: 14px; color: #65726b; }
.report-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 10px; margin-bottom: 24px; }
.report-shortcut { display: flex; align-items: center; gap: 13px; padding: 16px 18px; border: 1px solid #dce3dd; border-radius: 10px; background: white; color: #1d554a; }
.report-shortcut:hover { background: #edf4ef; }
.report-shortcut strong, .report-shortcut small { display: block; }
.report-shortcut strong { color: #243831; font-size: 14px; font-weight: 650; }
.report-shortcut small { color: #65726b; font-size: 12px; margin-top: 3px; }
.report-filter-shelf { display: block; padding: 18px; border: 1px solid #dce3dd; border-radius: 12px; box-shadow: none; margin-bottom: 20px; }
.report-date-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; }
.report-desk .tf-label { color: #65726b; margin-bottom: 8px; }
.report-date-presets { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; min-height: 40px; }
.report-date-preset { padding: 7px 10px; border-radius: 6px; font-size: 12px; color: #475b50; cursor: pointer; }
.report-date-preset:hover { background: #f0f4ef; }
.report-date-preset.active { background: #e4efea; color: #1d554a; font-weight: 650; }
.report-exact-dates { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.report-date-to { color: #65726b; font-size: 13px; }
.report-desk .tf-date-input { width: 137px; padding-right: 29px; height: 40px; }
.report-scope-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 16px; padding-top: 18px; margin-top: 18px; border-top: 1px solid #e0e6df; }
.report-scope-row-member { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; }
.report-scope-field { min-width: 0; }
.report-scope-field .sf-msel-btn { width: 100%; min-height: 40px; }
.report-scope-field .sf-msel-btn svg { transform: rotate(90deg); }
.report-desk .tf-segmented-3 { min-height: 40px; }
.report-desk .tf-seg-btn.active { color: #1d554a; background: white; box-shadow: 0 1px 3px #16302418; }
.report-desk .tf-seg-btn { white-space: nowrap; color: #475b50; }
.report-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: 20px; }
.report-workspace .tf-results-frame { min-width: 0; background: white; border: 1px solid #dce3dd; border-radius: 12px; }
.report-refinements { border-left: 1px solid #dce3dd; padding: 4px 0 0 20px; }
.report-refinements h2 { font-size: 16px; font-weight: 650; color: #243831; margin-bottom: 18px; }
.report-refinements fieldset { border: 0; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #e0e6df; min-width: 0; }
.report-refinements legend { display: block; width: 100%; }
.report-refinements .tf-check { margin: 10px 0; font-size: 13px; gap: 9px; }
.report-reset { font-size: 12px; color: #1d554a; text-decoration: underline; text-underline-offset: 3px; }
.report-results-head { margin: 0; padding: 22px 24px 14px; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.report-results-title { font-size: 21px; font-weight: 700; color: #243831; margin-bottom: 8px; letter-spacing: -.02em; }
.report-results-head .tf-rh-title { font-size: 13px; font-weight: 400; color: #65726b; }
.report-total { margin-top: 5px; font-size: 12px; color: #65726b; }
.report-results-head .tf-rh-links { gap: 7px; }
.report-results-head .tf-rh-links :is(a, button) { text-decoration: none; font-size: 12px; font-weight: 600; line-height: 1.25; min-height: 34px; padding: 8px 11px; }
.report-results-head .tf-rh-links a.btn-primary { color: white; }
.report-chart { padding: 12px 24px 22px; }
.report-chart h3 { color: #65726b; font-size: 12px; margin-bottom: 10px; }
.report-chart-bar { display: flex; height: 23px; border-radius: 4px; overflow: hidden; }
.report-chart-bar span { display: block; min-width: 0; }
.report-chart-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font-size: 12px; color: #52695c; }
.report-chart-legend li { display: flex; gap: 6px; align-items: baseline; }
.report-chart-legend strong { font-weight: 650; }
.report-chart-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.report-chart-color-0 { background: #20574b; }.report-chart-color-1 { background: #719f88; }.report-chart-color-2 { background: #a5c3b2; }.report-chart-color-3 { background: #497867; }.report-chart-color-4 { background: #8aab98; }.report-chart-color-5 { background: #c3d5c9; }.report-chart-color-6 { background: #d7e2d9; }
.report-desk :is(button, a, input):focus-visible { outline: 3px solid #88b7a5; outline-offset: 3px; }
.report-desk .tf-date-input { caret-color: #1d554a; }
.report-desk ::selection { background: #c9e0d4; }
@media (max-width: 1150px) { .report-date-row { align-items: center; flex-wrap: wrap; }.report-scope-row { gap: 10px; }.report-desk .tf-seg-btn { padding: 8px 10px; }.report-workspace { grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; } }
@media (max-width: 800px) { .report-scope-row, .report-scope-row-member { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-workspace { grid-template-columns: minmax(0, 1fr); }.report-refinements { border-left: 0; padding: 18px; border: 1px solid #dce3dd; border-radius: 12px; order: -1; display: flex; flex-wrap: wrap; gap: 12px 24px; }.report-refinements h2 { width: 100%; margin: 0; }.report-refinements fieldset { border: 0; margin: 0; padding: 0; }.report-refinements .report-reset { align-self: end; }.report-results-head, .report-chart { padding-left: 16px; padding-right: 16px; } }
@media (max-width: 480px) { .report-shortcuts { grid-template-columns: repeat(2, minmax(0, 1fr)); }.report-shortcut { padding: 12px; gap: 8px; }.report-shortcut small { font-size: 11px; }.report-shortcut svg { width: 20px; height: 20px; flex-shrink: 0; }.report-filter-shelf { padding: 14px; }.report-scope-row { grid-template-columns: minmax(0, 1fr); }.report-exact-dates { gap: 7px; }.report-desk .tf-date-input { width: 128px; }.report-date-preset { padding: 7px 8px; }.report-results-head .tf-rh-links { width: 100%; }.report-refinements { gap: 12px 18px; }.report-desk .sf-msel-panel { max-width: min(270px, calc(100vw - 72px)); } }

/* Personal report shortcuts reuse Timecard's quiet bordered panel. */
.report-workspace { grid-template-columns: minmax(0, 1fr) 275px; }
.report-right-rail { min-width: 0; }
.report-right-rail .report-refinements, .saved-reports-panel { background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; padding: 20px; }
.report-right-rail .report-refinements h2, .saved-reports-panel h2 { margin: 0; font-size: 14px; font-weight: 600; color: #243831; }
.report-right-rail .report-refinements h2 { margin-bottom: 18px; }
.saved-reports-panel { margin-top: 18px; }
.saved-reports-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.saved-reports-heading button { white-space: nowrap; font-size: 12px; }
.saved-reports-count { background: #edf4ef; border-radius: 4px; padding: 2px 5px; margin-left: 3px; font-size: 11px; }
.saved-reports-description, .saved-reports-empty { color: #59675f; font-size: 12px; line-height: 1.6; margin: 10px 0 18px; }
.saved-reports-list { max-height: 550px; overflow: auto; scrollbar-width: thin; scrollbar-color: #b6cabc transparent; }
.saved-report-item { padding: 5px 0; border-radius: 6px; }
.saved-report-item + .saved-report-item { border-top: 1px solid #f1f1ef; }
.saved-report-item.is-selected { background: #edf4ef; }
.saved-report-row { display: flex; align-items: start; gap: 4px; }
.saved-report-link { flex: 1; min-width: 0; padding: 8px; text-decoration: none; color: #243831; border-radius: 6px; }
.saved-report-link:hover { background: #edf4ef; }
.saved-report-link strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.saved-report-link small { display: block; color: #59675f; font-size: 12px; line-height: 1.6; margin-top: 5px; }
.saved-report-manage { padding: 8px 4px; font-size: 12px; }
.saved-report-manage summary { cursor: pointer; color: #1d554a; }
.saved-report-actions { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; }
.saved-report-delete { color: #963e35; cursor: pointer; }
.saved-report-editor { border-top: 1px solid #e7e5e4; margin-top: 14px; padding-top: 14px; font-size: 13px; }
.saved-report-editor summary { color: #1d554a; font-weight: 600; cursor: pointer; }
.saved-report-editor form { display: grid; gap: 8px; padding-top: 14px; }
.saved-report-editor input[type=text] { width: 100%; border: 1px solid #c6d2ca; border-radius: 6px; padding: 8px 10px; }
.saved-report-editor p { font-size: 12px; color: #59675f; }
.saved-report-editor input[type=submit] { justify-self: start; }
.saved-report-update { color: #1d554a; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 12px; padding: 8px; }
.saved-report-dirty { font-size: 12px; padding: 0 8px; color: #59675f; }
.saved-report-error { max-width: 560px; margin: 24px auto; padding: 24px; }
.saved-report-error form { display: grid; gap: 12px; }
.saved-report-error input[type=text] { border: 1px solid #c6d2ca; border-radius: 6px; padding: 10px; }
.saved-report-error ul { color: #963e35; margin: 12px 0; }
.saved-report-link:focus-visible, .saved-report-manage summary:focus-visible, .saved-report-editor summary:focus-visible { outline: 2px solid #1d554a; outline-offset: 2px; }
@media (max-width: 1150px) { .report-workspace { grid-template-columns: minmax(0, 1fr) 245px; gap: 16px; }.report-right-rail .report-refinements, .saved-reports-panel { padding: 16px; } }
@media (max-width: 800px) { .report-workspace { grid-template-columns: minmax(0, 1fr); }.report-right-rail { order: 1; }.report-right-rail .report-refinements { display: block; }.report-right-rail .report-refinements fieldset { padding: 0 0 14px; margin: 0 0 14px; }.saved-reports-list { max-height: 420px; } }

.saved-report-validation-error { color: #963e35; font-size: 12px; margin-top: 12px; line-height: 1.6; }
.quick-report-navigation { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; margin-bottom: 18px; color: #59675f; }
.quick-report-body { min-width: 0; }
.quick-report-body > .max-w-3xl { max-width: none; }
.quick-report-workspace .saved-reports-panel { margin-top: 0; }
.report-shortcut[aria-current=page] { background: #edf4ef; border-color: #8cab9a; }
.quick-report-body h2.text-2xl { font-size: 21px; }
.quick-report-body .aq-select { max-width: 100%; }
.quick-report-body [data-saved-report-filter-form] { scroll-margin-top: 16px; }
@media (max-width: 800px) { .quick-report-workspace .report-right-rail { order: 1; } }
/* Wide legacy result tables scroll inside the shared report body. */
.quick-report-body .card { max-width: 100%; overflow-x: auto; }
.quick-report-workspace.quick-report-full-width { grid-template-columns: minmax(0, 1fr); }
.locked-period-report { background: #fff; border: 1px solid #e7e5e4; border-radius: 12px; padding: 24px; min-width: 0; }
.locked-period-report h2 { margin: 0; font-size: 21px; font-weight: 650; }
.locked-period-report > p { margin-top: 8px; color: #59675f; font-size: 13px; line-height: 1.6; }
.locked-period-table-wrap { position: relative; margin-top: 20px; border: 1px solid #e0e6df; border-radius: 8px; overflow-x: auto; }
.locked-period-table-wrap table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; }
.locked-period-table-wrap th, .locked-period-table-wrap td { padding: 12px 16px; border-bottom: 1px solid #e7e5e4; }
.locked-period-table-wrap th { background: #f4f7f3; color: #59675f; font-size: 12px; font-weight: 600; }
.locked-period-table-wrap tbody tr:last-child td { border-bottom: 0; }
.locked-period-table-wrap a { color: #1d554a; text-decoration: underline; text-underline-offset: 3px; }
.locked-period-table-wrap a:focus-visible { outline: 2px solid #1d554a; outline-offset: 3px; }
.locked-period-empty { margin-top: 20px; padding: 24px 16px; background: #f7f9f6; border-radius: 8px; color: #59675f; }
@media (max-width: 600px) { .locked-period-report { padding: 18px; }.locked-period-table-wrap th, .locked-period-table-wrap td { padding: 10px 12px; white-space: nowrap; } }
.locked-period-heading p { margin-top: 8px; line-height: 1.6; }
.locked-period-facts { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 20px 0; font-size: 13px; }
.locked-period-facts dt { color: #59675f; font-size: 12px; margin-bottom: 4px; }
.locked-period-facts dd { margin: 0; font-weight: 600; }
.locked-period-detail { margin-top: 20px; }
.locked-period-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }
.locked-period-detail-actions p { flex-basis: 100%; order: 1; }

/* Server-rendered criteria keep the result and saved-report rail on one row. */
html { scrollbar-gutter: stable; }
.report-shortcuts .report-shortcut { height: 94px; min-height: 94px; }
.report-shortcut > span { min-width: 0; }
.report-shortcut svg { flex-shrink: 0; }
.quick-report-controls, .quick-report-results { min-width: 0; }
.quick-report-controls h2.text-2xl { font-size: 21px; }
.quick-report-controls > .card-pad { max-width: none; }
.quick-report-results > :last-child { margin-bottom: 0; }
.quick-approval-frame { display: block; }
.quick-report-approval .quick-report-body,
.quick-report-approval .approval-report-sections,
.quick-report-approval .quick-approval-section:first-child,
.quick-report-approval .quick-approval-section:first-child > .quick-approval-frame { display: contents; }
.quick-report-approval .quick-approval-section:first-child .quick-approval-controls { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
.quick-report-approval .quick-approval-section:first-child .quick-approval-results { grid-column: 1; grid-row: 2; }
.quick-report-approval > .report-right-rail { grid-column: 2; grid-row: 2 / span 4; }
.quick-report-approval .quick-approval-section:not(:first-child) { grid-column: 1; min-width: 0; }
.quick-report-approval .quick-approval-section { margin-bottom: 0; }
.quick-report-approval .quick-approval-controls form { margin-bottom: 0; }
.quick-report-approval .quick-approval-section:not(:first-child) .quick-approval-controls { margin-bottom: 12px; }
@media (max-width: 800px) {
  .report-shortcuts .report-shortcut { height: auto; min-height: 94px; }
  .quick-report-approval { display: flex; flex-direction: column; }
  .quick-report-approval .quick-report-body,
  .quick-report-approval .approval-report-sections,
  .quick-report-approval .quick-approval-section:first-child,
  .quick-report-approval .quick-approval-section:first-child > .quick-approval-frame { display: block; width: 100%; }
  .quick-report-approval .quick-approval-section { margin-bottom: 24px; }
  .quick-report-approval .quick-approval-controls { margin-bottom: 12px; }
  .quick-report-approval > .report-right-rail { width: 100%; grid-column: auto; grid-row: auto; order: 1; }
}
.locked-period-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 16px; margin-top: 24px; padding-bottom: 20px; border-bottom: 1px solid #e0e6df; }
.locked-period-filters > div { min-width: 0; flex: 1 1 160px; }
.locked-period-filters .locked-period-filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; flex: 0 1 auto; }
.locked-period-filters > p, .locked-period-filter-errors { flex-basis: 100%; }
.locked-period-filter-errors { color: #b91c1c; }