/* ClinicOS Shell 2 — Day Sheet History (Stage 5). Presentational only: js/daysheet.js, markup, ids and handlers are untouched.
   Every selector is scoped to `html body.cos-shell-on #page-ds-history` (the History page container only), so nothing here can reach the active Day Sheet
   (#page-daysheet) or any other page. Classic shell is unaffected. Light is the reference; tokens: css/ds/tokens.css.
   Legacy app.css History rules are !important, so the overrides below match their specificity or exceed it. */
html body.cos-shell-on #page-ds-history { --c-line: var(--cos-color-border); --c-line-soft: var(--cos-color-border-subtle); max-width: 1280px !important; margin-left: auto !important; margin-right: auto !important; font-family: var(--cos-font); color: var(--cos-color-text-primary); }
html body.cos-shell-on #page-ds-history * { box-sizing: border-box; }
html body.cos-shell-on #page-ds-history > .clinic-breadcrumb { display: none !important; }

/* ── Page header ────────────────────────────────────────── */
html body.cos-shell-on #page-ds-history .dsh-page-intro { align-items: flex-end; margin: var(--cos-space-2) 0 var(--cos-space-5) !important; }
html body.cos-shell-on #page-ds-history .dsh-eyebrow { margin: 0 0 var(--cos-space-1) !important; font: var(--cos-weight-semibold) 11px/1.3 var(--cos-font) !important; letter-spacing: .08em !important; color: var(--cos-color-text-muted) !important; }
html body.cos-shell-on #app #page-ds-history .dsh-page-intro h1 { margin: 0 !important; font: var(--cos-weight-bold) 2rem/1.15 var(--cos-font) !important; letter-spacing: -.03em !important; color: var(--cos-color-text-primary) !important; }
html body.cos-shell-on #page-ds-history .dsh-page-intro p { margin: var(--cos-space-2) 0 0 !important; font-size: 0.9375rem !important; line-height: 1.5; color: var(--cos-color-text-secondary) !important; }
/* the only page-level action: it opens the workspace, so it is a secondary button, not a second primary */
html body.cos-shell-on #page-ds-history .dsh-open-btn { height: var(--cos-control-lg) !important; padding: 0 var(--cos-space-4) !important; border-radius: var(--cos-radius-md) !important; border: 1px solid var(--c-line) !important; background: var(--cos-color-bg-surface) !important; color: var(--cos-color-text-primary) !important; box-shadow: none !important; font: var(--cos-weight-semibold) 0.875rem var(--cos-font) !important; }
html body.cos-shell-on #page-ds-history .dsh-open-btn:hover { border-color: var(--cos-color-brand-accent) !important; color: var(--cos-color-brand-primary) !important; }
html body.cos-shell-on #page-ds-history .dsh-open-btn span { font-size: 1rem !important; margin-left: var(--cos-space-2) !important; }

/* ── Working toolbar: one compact band, no filter card ──── */
html body.cos-shell-on #page-ds-history .hist-filters { display: flex !important; flex-wrap: wrap; align-items: center !important; gap: var(--cos-space-2) !important; padding: var(--cos-space-3) 0 !important; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--c-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
html body.cos-shell-on #page-ds-history .hist-filters select, html body.cos-shell-on #page-ds-history .hist-filters input { flex: 1 1 130px; width: auto !important; min-width: 120px !important; max-width: 200px; height: var(--cos-control-lg) !important; padding: 0 var(--cos-space-3) !important; border: 1px solid var(--c-line) !important; border-radius: var(--cos-radius-md) !important; background: var(--cos-color-bg-surface) !important; color: var(--cos-color-text-primary); font: var(--cos-weight-regular) 0.875rem var(--cos-font) !important; }
html body.cos-shell-on #page-ds-history .hist-filters select:focus-visible, html body.cos-shell-on #page-ds-history .hist-filters input:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 1px; }
html body.cos-shell-on #page-ds-history .hist-filters .btn { height: var(--cos-control-lg) !important; min-height: var(--cos-control-lg) !important; padding: 0 var(--cos-space-4) !important; border-radius: var(--cos-radius-md) !important; font: var(--cos-weight-semibold) 0.875rem var(--cos-font) !important; white-space: nowrap; }
/* Search is the toolbar's one primary; export / cache tools are quiet text actions */
html body.cos-shell-on #page-ds-history .hist-filters .btn-secondary { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 var(--cos-space-2) !important; font-weight: var(--cos-weight-medium) !important; color: var(--cos-color-text-secondary) !important; }
html body.cos-shell-on #page-ds-history .hist-filters .btn-secondary:hover { color: var(--cos-color-brand-primary) !important; text-decoration: underline; text-underline-offset: 3px; }
html body.cos-shell-on #page-ds-history .hist-filters .btn:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 2px; }
html body.cos-shell-on #page-ds-history #dsh-count { margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; background: none !important; border-radius: 0 !important; font: var(--cos-weight-medium) 0.8125rem var(--cos-font) !important; color: var(--cos-color-text-muted) !important; white-space: nowrap; }

/* legacy `.btn { display:… !important }` rules defeat the app's own inline `display:none` for admin-only controls; honour that inline hide in Shell 2 */
html body.cos-shell-on #page-ds-history [data-admin-only][style*="display: none"], html body.cos-shell-on #page-ds-history [data-hide-clinician][style*="display: none"] { display: none !important; }

/* unsynced-drafts banner (JS-inline amber box) → a quiet rule with the same information */
html body.cos-shell-on #page-ds-history #hist-unsynced-banner > div { margin: 0 0 var(--cos-space-3) !important; padding: var(--cos-space-2) var(--cos-space-3) !important; border: 0 !important; border-left: 3px solid var(--cos-tone-amber) !important; border-radius: 0 !important; background: var(--cos-color-warning-bg) !important; color: var(--cos-tone-amber-ink) !important; }

/* bulk bar: one quiet line above the records */
html body.cos-shell-on #page-ds-history .dsh-bulk-bar { display: flex; align-items: center; gap: var(--cos-space-3); flex-wrap: wrap; padding: var(--cos-space-2) 0 !important; margin: 0 !important; border: 0 !important; border-top: 1px solid var(--c-line-soft) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; font-size: 0.8125rem; color: var(--cos-color-text-muted); }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-secondary, html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-danger { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 var(--cos-space-2) !important; font-weight: var(--cos-weight-medium) !important; color: var(--cos-color-text-secondary) !important; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-danger:hover { color: var(--cos-color-danger) !important; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn:disabled { opacity: .45; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-primary { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 var(--cos-space-2) !important; color: var(--cos-color-brand-primary) !important; font-weight: var(--cos-weight-semibold) !important; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-primary:hover:not(:disabled), html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn-secondary:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .dsh-select-all, html body.cos-shell-on #page-ds-history .dsh-bulk-bar #dsh-selected-count { font-size: 0.8125rem !important; color: var(--cos-color-text-secondary) !important; }
html body.cos-shell-on #page-ds-history .dsh-bulk-bar .btn { height: 32px !important; font-size: 0.8125rem !important; }

/* ── Records: a table, ruled, aligned ───────────────────── */
html body.cos-shell-on #page-ds-history > .card { padding: 0 !important; border: 0 !important; border-top: 1px solid var(--c-line) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important; }
html body.cos-shell-on #page-ds-history .hist-row.header, html body.cos-shell-on #page-ds-history .dsh-sheet-row {
  display: grid !important; grid-template-columns: 32px 104px minmax(110px, 1fr) minmax(130px, 1.3fr) 64px 104px 104px minmax(120px, 1fr) 118px !important; column-gap: var(--cos-space-3) !important; align-items: center !important; padding: 0 var(--cos-space-3) !important; margin: 0 !important;
}
html body.cos-shell-on #page-ds-history > .card > .hist-row.header { position: static !important; min-height: 40px; border: 0 !important; border-bottom: 1px solid var(--c-line) !important; border-radius: 0 !important; background: none !important; color: var(--cos-color-text-muted) !important; font: var(--cos-weight-semibold) 11px/1.3 var(--cos-font) !important; letter-spacing: .06em !important; text-transform: uppercase !important; }
html body.cos-shell-on #page-ds-history .hist-row.header > div { padding: 0 !important; overflow: visible !important; }
html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(1) { visibility: hidden; }   /* the checkbox column needs no caption; the column stays for alignment */
html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(5), html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(6), html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(7) { text-align: right; }
html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(9) { text-align: right; }
html body.cos-shell-on #page-ds-history .hist-row.header > div:nth-child(8) { padding-left: var(--cos-space-4) !important; }

html body.cos-shell-on #page-ds-history .dsh-sheet-row { min-height: 60px !important; border: 0 !important; border-bottom: 1px solid var(--c-line-soft) !important; border-radius: 0 !important; background: none !important; font-size: 0.875rem !important; color: var(--cos-color-text-primary) !important; cursor: pointer; transition: background-color var(--cos-duration-fast) var(--cos-ease); }
html body.cos-shell-on #page-ds-history .dsh-sheet-row:hover { background: color-mix(in srgb, var(--cos-color-brand-accent) 6%, var(--cos-color-bg-surface)) !important; }
html body.cos-shell-on #page-ds-history .dsh-sheet-row > div { min-width: 0; padding: var(--cos-space-2) 0 !important; }
html body.cos-shell-on #page-ds-history .dsh-select input { width: 16px; height: 16px; accent-color: var(--cos-color-brand-primary); cursor: pointer; }
html body.cos-shell-on #page-ds-history .dsh-select input:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 2px; }
html body.cos-shell-on #page-ds-history .dsh-date { font: var(--cos-weight-semibold) 0.875rem var(--cos-font) !important; font-variant-numeric: tabular-nums; color: var(--cos-color-text-primary) !important; }
html body.cos-shell-on #page-ds-history .dsh-office { font: var(--cos-weight-medium) 0.875rem var(--cos-font) !important; color: var(--cos-color-text-primary) !important; }
html body.cos-shell-on #page-ds-history .dsh-clin { font: var(--cos-weight-regular) 0.8125rem/1.4 var(--cos-font) !important; color: var(--cos-color-text-secondary) !important; }
/* figures: right-aligned, tabular; balance is quiet unless it needs attention */
html body.cos-shell-on #page-ds-history .dsh-patients, html body.cos-shell-on #page-ds-history .dsh-collected, html body.cos-shell-on #page-ds-history .dsh-balance { text-align: right !important; font: var(--cos-weight-medium) 0.875rem var(--cos-font) !important; font-variant-numeric: tabular-nums; color: var(--cos-color-text-primary) !important; white-space: nowrap; }
html body.cos-shell-on #page-ds-history .dsh-balance { color: var(--cos-color-text-secondary) !important; }

/* status: plain text with a small dot; the sync/privacy note sits beneath it, muted */
html body.cos-shell-on #page-ds-history .dsh-status { padding-left: var(--cos-space-4) !important; display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 2px !important; }
html body.cos-shell-on #page-ds-history .dsh-status .badge { display: inline-flex !important; align-items: center; gap: 6px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; font: var(--cos-weight-semibold) 0.8125rem/1.35 var(--cos-font) !important; text-transform: capitalize; letter-spacing: 0 !important; color: var(--cos-color-text-primary) !important; white-space: normal !important; }
html body.cos-shell-on #page-ds-history .dsh-status .badge::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cos-color-border-strong); }
html body.cos-shell-on #page-ds-history .dsh-status .badge-approved::before { background: var(--cos-color-success); }
html body.cos-shell-on #page-ds-history .dsh-status .badge-pending::before { background: var(--cos-tone-amber); }
html body.cos-shell-on #page-ds-history .dsh-status .badge-disputed::before { background: var(--cos-color-danger); }
html body.cos-shell-on #page-ds-history .dsh-status .badge-active::before, html body.cos-shell-on #page-ds-history .dsh-status .badge-manager::before { background: var(--cos-color-brand-accent); }
html body.cos-shell-on #page-ds-history .dsh-status .badge:not(:first-child) { font-weight: var(--cos-weight-regular) !important; font-size: 0.75rem !important; color: var(--cos-color-text-muted) !important; text-transform: none; }
html body.cos-shell-on #page-ds-history .dsh-status .badge:not(:first-child)::before { display: none; }

/* actions: View is the principal action; Delete (admin) is a quiet text action */
html body.cos-shell-on #page-ds-history .dsh-actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: var(--cos-space-2) !important; flex-wrap: nowrap; }
html body.cos-shell-on #page-ds-history .dsh-actions .btn { height: 32px !important; min-height: 32px !important; padding: 0 var(--cos-space-3) !important; border-radius: var(--cos-radius-md) !important; font: var(--cos-weight-semibold) 0.8125rem var(--cos-font) !important; }
html body.cos-shell-on #page-ds-history .dsh-actions .btn-danger { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 var(--cos-space-2) !important; font-weight: var(--cos-weight-medium) !important; color: var(--cos-color-text-muted) !important; }
html body.cos-shell-on #page-ds-history .dsh-actions .btn-danger:hover { color: var(--cos-color-danger) !important; text-decoration: underline; text-underline-offset: 3px; }
html body.cos-shell-on #page-ds-history .dsh-actions .btn:focus-visible { outline: 2px solid var(--cos-color-focus); outline-offset: 2px; }
html body.cos-shell-on #page-ds-history .dsh-sheet-row [data-label]::before { display: none; }

html body.cos-shell-on #page-ds-history .empty { padding: var(--cos-space-10) var(--cos-space-4) !important; text-align: center; color: var(--cos-color-text-muted); }
html body.cos-shell-on #page-ds-history .empty-title { font: var(--cos-weight-semibold) 1rem var(--cos-font); color: var(--cos-color-text-primary); }
html body.cos-shell-on #page-ds-history .empty-sub { margin-top: var(--cos-space-1); font-size: 0.875rem; color: var(--cos-color-text-muted); }

/* ── Intermediate widths (≤1199): two-line structured record, actions stay reachable, labels return for figures ── */
@media (max-width: 1199px) {
  html body.cos-shell-on #page-ds-history > .card > .hist-row.header { display: none !important; }
  html body.cos-shell-on #page-ds-history .dsh-sheet-row {
    grid-template-columns: 32px 104px minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr) !important;
    grid-template-areas: "sel date office clin status" ". pts col bal act" !important; row-gap: 0 !important; padding: var(--cos-space-2) var(--cos-space-3) !important;
  }
  html body.cos-shell-on #page-ds-history .dsh-select { grid-area: sel !important; } html body.cos-shell-on #page-ds-history .dsh-date { grid-area: date !important; }
  html body.cos-shell-on #page-ds-history .dsh-office { grid-area: office !important; } html body.cos-shell-on #page-ds-history .dsh-clin { grid-area: clin !important; }
  html body.cos-shell-on #page-ds-history .dsh-status { grid-area: status !important; padding-left: 0 !important; } html body.cos-shell-on #page-ds-history .dsh-actions { grid-area: act !important; }
  html body.cos-shell-on #page-ds-history .dsh-patients { grid-area: pts !important; } html body.cos-shell-on #page-ds-history .dsh-collected { grid-area: col !important; } html body.cos-shell-on #page-ds-history .dsh-balance { grid-area: bal !important; }
  html body.cos-shell-on #page-ds-history .dsh-patients[data-label]::before, html body.cos-shell-on #page-ds-history .dsh-collected[data-label]::before, html body.cos-shell-on #page-ds-history .dsh-balance[data-label]::before { display: block !important; content: attr(data-label); font: var(--cos-weight-semibold) 10px/1.3 var(--cos-font); letter-spacing: .06em; text-transform: uppercase; color: var(--cos-color-text-muted); }
  html body.cos-shell-on #page-ds-history .dsh-patients, html body.cos-shell-on #page-ds-history .dsh-collected, html body.cos-shell-on #page-ds-history .dsh-balance { text-align: left !important; }
  html body.cos-shell-on #page-ds-history .dsh-sheet-row > div { padding: var(--cos-space-1) 0 !important; }
}

/* ── Portrait tablet (≤899): one structured record per sheet ── */
@media (max-width: 899px) {
  html body.cos-shell-on #page-ds-history { max-width: none !important; }
  html body.cos-shell-on #page-ds-history .dsh-page-intro { flex-wrap: wrap; gap: var(--cos-space-3); }
  html body.cos-shell-on #page-ds-history .dsh-sheet-row {
    grid-template-columns: 32px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas: "sel date date status" ". office office clin" ". pts col bal" ". act act act" !important;
  }
  html body.cos-shell-on #page-ds-history .dsh-actions { justify-content: flex-start !important; padding-top: var(--cos-space-1) !important; }
  html body.cos-shell-on #page-ds-history .hist-filters select, html body.cos-shell-on #page-ds-history .hist-filters input { max-width: none; flex: 1 1 150px; }
  html body.cos-shell-on #page-ds-history #dsh-count { margin-left: 0 !important; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { html body.cos-shell-on #page-ds-history .dsh-sheet-row { transition: none; } }