.dtr-os {
  display: grid;
  gap: 24px;
  min-width: 0;
}
.dtr-os .eyebrow { color: var(--pw-steel-600, var(--primary)); display: block; font-size: .875rem; font-weight: 800; letter-spacing: .08em; margin-bottom: 6px; text-transform: uppercase; }
.dtr-kpis { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dtr-kpis > a { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); display: flex; flex-direction: column; min-height: 118px; padding: 18px; text-decoration: none; }
.dtr-kpis > a:hover { border-color: var(--pw-steel-600, var(--primary)); }
.dtr-kpis strong { font-size: clamp(1.6rem, 2.5vw, 2.1rem); line-height: 1; }
.dtr-kpis span { font-size: .95rem; font-weight: 750; margin-top: auto; padding-top: 14px; }
.dtr-kpis small { color: var(--text-muted); font-size: .875rem; margin-top: 4px; }
.dtr-layout { display: grid; gap: 18px; grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); min-height: 640px; }
.dtr-master,
.dtr-detail-card,
.dtr-detail-empty { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }
.dtr-master { align-self: start; min-width: 0; overflow: hidden; }
.dtr-master__tools { background: color-mix(in srgb, var(--surface-2) 64%, transparent); border-bottom: 1px solid var(--border); display: grid; gap: 12px; padding: 16px; }
.dtr-master__tools > p { color: var(--text-muted); font-size: .875rem; margin: 0; }
.dtr-record-list { max-height: min(68vh, 820px); overflow: auto; overscroll-behavior: contain; }
.dtr-record { align-items: center; border-bottom: 1px solid var(--border); color: var(--text); display: grid; gap: 12px; grid-template-columns: 44px minmax(0, 1fr) auto 20px; min-height: 94px; padding: 12px 14px; text-decoration: none; }
.dtr-record:last-child { border-bottom: 0; }
.dtr-record:hover,
.dtr-record.is-active { background: color-mix(in srgb, var(--pw-navy-800, var(--primary)) 8%, transparent); }
.dtr-record.is-active { box-shadow: inset 3px 0 var(--pw-navy-800, var(--primary)); }
.dtr-record__icon { align-items: center; border-radius: 13px; display: inline-flex; height: 44px; justify-content: center; width: 44px; }
.dtr-record__icon svg { height: 20px; width: 20px; }
.dtr-record__icon--waiting { background: var(--warn-soft); color: var(--warn); }
.dtr-record__icon--signed { background: var(--ok-soft); color: var(--ok); }
.dtr-record__icon--draft { background: var(--surface-2); color: var(--text-muted); }
.dtr-record__copy,
.dtr-record__state { display: flex; flex-direction: column; min-width: 0; }
.dtr-record__copy strong { font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtr-record__copy small,
.dtr-record__copy em,
.dtr-record__state small { color: var(--text-muted); font-size: .875rem; font-style: normal; margin-top: 3px; }
.dtr-record__copy em { margin-top: 7px; }
.dtr-record__state { align-items: flex-end; max-width: 130px; text-align: right; }
.dtr-record__state b { font-size: .875rem; line-height: 1.35; }
.dtr-detail { min-width: 0; }
.dtr-detail-card { overflow: hidden; }
.dtr-detail-card__head { align-items: flex-start; border-bottom: 1px solid var(--border); display: flex; gap: 14px; justify-content: space-between; padding: 22px 24px; }
.dtr-detail-card__head > div { flex: 1; min-width: 0; }
.dtr-detail-card__head > div > span { color: var(--text-muted); display: block; font-size: .875rem; font-weight: 750; margin-bottom: 4px; }
.dtr-detail-card__head h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin: 0; }
.dtr-detail-card__head p { color: var(--text-muted); font-size: .9rem; margin: 6px 0 0; }
.dtr-mobile-back { display: none; }
.dtr-facts { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 20px 24px 0; }
.dtr-facts > div { background: var(--surface-2); border-radius: 13px; min-height: 88px; padding: 13px; }
.dtr-facts span,
.dtr-facts strong { display: block; }
.dtr-facts span { color: var(--text-muted); font-size: .875rem; font-weight: 700; }
.dtr-facts strong { font-size: .95rem; margin-top: 8px; overflow-wrap: anywhere; }
.dtr-truth-note { align-items: flex-start; background: color-mix(in srgb, var(--pw-steel-600, var(--primary)) 8%, transparent); border: 1px solid color-mix(in srgb, var(--pw-steel-600, var(--primary)) 24%, var(--border)); border-radius: 14px; display: flex; gap: 12px; margin: 18px 24px; padding: 14px 16px; }
.dtr-truth-note svg { flex: 0 0 auto; height: 20px; margin-top: 2px; width: 20px; }
.dtr-truth-note strong { display: block; font-size: .92rem; }
.dtr-truth-note p { color: var(--text-muted); font-size: .875rem; line-height: 1.5; margin: 3px 0 0; }
.dtr-guards { border-top: 1px solid var(--border); }
.dtr-guards__head { align-items: end; display: flex; gap: 16px; justify-content: space-between; padding: 18px 24px 12px; }
.dtr-guards__head span { color: var(--text-muted); font-size: .875rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.dtr-guards__head h3 { font-size: 1.05rem; margin: 3px 0 0; }
.dtr-guards__head p { color: var(--text-muted); font-size: .875rem; margin: 0; }
.dtr-guard { border-top: 1px solid var(--border); }
.dtr-guard summary { align-items: center; cursor: pointer; display: grid; gap: 12px; grid-template-columns: 36px minmax(0, 1fr) 20px; min-height: 68px; padding: 10px 24px; }
.dtr-guard summary:hover { background: var(--surface-2); }
.dtr-guard summary > span:nth-child(2) { min-width: 0; }
.dtr-guard summary strong,
.dtr-guard summary small { display: block; }
.dtr-guard summary strong { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtr-guard summary small { color: var(--text-muted); font-size: .875rem; margin-top: 4px; }
.dtr-guard summary > svg { transition: rotate 140ms ease; }
.dtr-guard[open] summary > svg { rotate: 180deg; }
.dtr-guard__number { align-items: center; background: var(--surface-2); border-radius: 10px; display: inline-flex; font-size: .875rem; font-weight: 800; height: 40px; justify-content: center; width: 40px; }
.dtr-guard__days { background: color-mix(in srgb, var(--surface-2) 60%, transparent); display: grid; gap: 1px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 1px 24px 14px; }
.dtr-day { align-items: center; background: var(--surface); border: 1px solid var(--border); display: grid; gap: 8px; grid-template-columns: minmax(92px, 1fr) 72px 72px; min-height: 56px; padding: 8px 10px; }
.dtr-day time,
.dtr-shift-value { display: flex; flex-direction: column; }
.dtr-day time strong { font-size: .875rem; text-transform: uppercase; }
.dtr-day time span { color: var(--text-muted); font-size: .875rem; margin-top: 2px; }
.dtr-shift-value { align-items: flex-end; }
.dtr-shift-value b { color: var(--text-muted); font-size: .875rem; text-transform: uppercase; }
.dtr-shift-value em { font-size: .9rem; font-style: normal; font-weight: 750; margin-top: 2px; }
.dtr-detail-actions { align-items: center; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; padding: 18px 24px 24px; }
.dtr-detail-card > .inline-receipt { margin-inline: 24px; }
.dtr-verify-confirm { border-radius: 0; border-width: 1px 0 0; margin: 0; padding: 18px 24px; }
.dtr-detail-empty { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 440px; padding: 40px; text-align: center; }

/* Shared area station entry flow */
.dtr-station-v3 { display: grid; gap: 16px; }
.dtr-station-v3 > .page-header { margin-bottom: 0 !important; }
.dtr-workflow-strip { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; }
.dtr-workflow-strip > div { align-items: center; border-right: 1px solid var(--border); display: flex; gap: 10px; min-height: 78px; padding: 12px; }
.dtr-workflow-strip > div:last-child { border-right: 0; }
.dtr-workflow-strip > div > span { align-items: center; background: var(--surface-2); border-radius: 99px; display: inline-flex; flex: 0 0 auto; font-size: .875rem; font-weight: 800; height: 36px; justify-content: center; width: 36px; }
.dtr-workflow-strip p,
.dtr-workflow-strip strong,
.dtr-workflow-strip small { display: block; margin: 0; }
.dtr-workflow-strip strong { font-size: .95rem; }
.dtr-workflow-strip small { color: var(--text-muted); font-size: .875rem; line-height: 1.4; margin-top: 3px; }
.dtr-workflow-strip .is-done > span { background: var(--ok-soft); color: var(--ok); }
.dtr-workflow-strip .is-current { background: color-mix(in srgb, var(--pw-steel-600, var(--primary)) 7%, transparent); box-shadow: inset 0 -3px var(--pw-steel-600, var(--primary)); }
.dtr-station-v3 .card:has(#dtr-oic) { border-radius: 18px; padding: clamp(16px, 2.5vw, 24px); }
.dtr-station-v3 #dtr-oic { font-size: 1rem !important; min-height: 48px; max-width: 420px !important; }
.dtr-entry-hint { color: var(--text-muted); font-size: .86rem; line-height: 1.5; margin: 16px 0 9px; }
.dtr-entry-hint strong { color: var(--text); }
.dtr-entry-grid { --dtr-name-column: 224px; border-radius: 13px !important; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; }
.dtr-entry-grid table { min-width: max-content; }
.dtr-entry-grid th:first-child,
.dtr-entry-grid tr.dtr-top > td:first-child { background: var(--surface-2); left: 0; position: sticky; z-index: 2; }
.dtr-entry-grid th:nth-child(2),
.dtr-entry-grid tr.dtr-top > td:nth-child(2) { background: var(--surface); left: 34px; position: sticky; z-index: 2; }
.dtr-entry-grid th:first-child,
.dtr-entry-grid tr.dtr-top > td:first-child { width: 34px; min-width: 34px; box-sizing: border-box; }
.dtr-entry-grid th:nth-child(2),
.dtr-entry-grid tr.dtr-top > td:nth-child(2) { width: var(--dtr-name-column); min-width: var(--dtr-name-column); max-width: var(--dtr-name-column); box-sizing: border-box; }
/* The NS row omits the two rowspanned cells. Its first cell is the shift,
   never the first date: pin that label at the same position as the DS label. */
.dtr-entry-grid th:nth-child(3),
.dtr-entry-grid tr.dtr-top > td:nth-child(3),
.dtr-entry-grid tr.dtr-ns > td:first-child { position: sticky; left: calc(34px + var(--dtr-name-column)); z-index: 2; width: 34px; min-width: 34px; background: var(--surface-2); }
.dtr-entry-grid th,
.dtr-entry-grid tr.dtr-top > td:first-child,
.dtr-entry-grid tr.dtr-top > td:nth-child(3),
.dtr-entry-grid tr.dtr-ns > td:first-child,
.dtr-entry-grid .dtr-days-day,
.dtr-entry-grid .dtr-days-night { font-size: 14px !important; }
.dtr-entry-grid thead th:nth-child(2) { background: var(--surface-2); }
.dtr-entry-grid .dtr-name { font-size: 1rem !important; height: 46px !important; min-width: 190px !important; }
.dtr-entry-grid .dtr-cell { font-size: 1rem !important; height: 46px !important; width: 46px !important; }
.dtr-entry-grid .dtr-del { min-height: 44px; min-width: 44px; }
.dtr-station-v3 #dtr-add { margin-top: 12px !important; min-height: 46px; }
.dtr-station-v3 #dtr-save,
.dtr-station-v3 #dtr-final,
.dtr-station-v3 #dtr-print { min-height: 50px; }
.dtr-station-v3 .card:has(#area-timestamp) { border-radius: 18px; }
.dtr-station-v3 #area-timestamp { min-height: 54px; }

@media (max-width: 1023px) {
  .dtr-layout { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); }
  .dtr-record { grid-template-columns: 44px minmax(0, 1fr) 20px; row-gap: 6px; }
  .dtr-record__icon { grid-column: 1; grid-row: 1; }
  .dtr-record__copy { grid-column: 2; grid-row: 1; }
  .dtr-record__state { display: flex; grid-column: 2; grid-row: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 8px; max-width: none; text-align: left; }
  .dtr-record__state small { margin-top: 0; }
  .dtr-record > svg { grid-column: 3; grid-row: 1 / 3; }
  .dtr-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtr-guard__days { grid-template-columns: 1fr; }
  .dtr-workflow-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dtr-workflow-strip > div:nth-child(2) { border-right: 0; }
  .dtr-workflow-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}

@media (min-width: 768px) and (max-width: 899px) {
  .dtr-layout { display: block; min-height: 0; }
  .dtr-os.has-selection .dtr-master { display: none; }
  .dtr-os:not(.has-selection) .dtr-detail { display: none; }
  .dtr-record-list { max-height: none; }
  .dtr-mobile-back { display: inline-flex; flex: 0 0 auto; }
}

@media (max-width: 767px) {
  .dtr-os { gap: 16px; }
  .dtr-os .page-header { align-items: flex-start; gap: 12px; }
  .dtr-os .page-header .btn { width: 100%; }
  .dtr-kpis { gap: 8px; }
  .dtr-kpis > a { border-radius: 14px; min-height: 105px; padding: 12px; }
  .dtr-kpis strong { font-size: 1.35rem; }
  .dtr-kpis span { font-size: .875rem; padding-top: 10px; }
  .dtr-kpis small { display: none; }
  .dtr-layout { display: block; min-height: 0; }
  .dtr-os.has-selection .dtr-master { display: none; }
  .dtr-os:not(.has-selection) .dtr-detail { display: none; }
  .dtr-master,
  .dtr-detail-card,
  .dtr-detail-empty { border-radius: 16px; }
  .dtr-record-list { max-height: none; }
  .dtr-record { min-height: 86px; padding: 10px 12px; }
  .dtr-record__copy strong { white-space: normal; }
  .dtr-detail-card__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px 12px; padding: 16px; }
  .dtr-detail-card__head > div { grid-column: 2; grid-row: 1; overflow-wrap: anywhere; }
  .dtr-detail-card__head > .status-pill { display: inline-flex; grid-column: 2; grid-row: 2; justify-self: start; align-self: start; max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.35; }
  .dtr-mobile-back { display: inline-flex; flex: 0 0 auto; }
  .dtr-facts { gap: 8px; padding: 16px 16px 0; }
  .dtr-facts > div { min-height: 80px; padding: 11px; }
  .dtr-truth-note { margin: 16px; }
  .dtr-guards__head { align-items: flex-start; flex-direction: column; padding: 16px 16px 10px; }
  .dtr-guard summary { padding: 10px 16px; }
  .dtr-guard__days { padding: 1px 12px 12px; }
  .dtr-day { grid-template-columns: minmax(90px, 1fr) 62px 62px; }
  .dtr-detail-actions { align-items: stretch; flex-direction: column-reverse; padding: 16px; }
  .dtr-detail-actions .btn { width: 100%; }
  .dtr-detail-card > .inline-receipt { margin-inline: 16px; }
  .dtr-verify-confirm { grid-template-columns: 1fr; padding: 16px; }
  .dtr-workflow-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
  .dtr-workflow-strip > div { border-bottom: 0 !important; border-right: 1px solid var(--border) !important; flex: 0 0 min(270px, 78vw); scroll-snap-align: start; }
  .dtr-station-v3 .card:has(#dtr-oic) { margin-inline: -4px; padding: 14px; }
  .dtr-entry-grid { --dtr-name-column: 140px; margin-inline: -14px; border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }
  .dtr-entry-grid .dtr-name { min-width: 160px !important; }
  .dtr-station-v3 #dtr-save,
  .dtr-station-v3 #dtr-final,
  .dtr-station-v3 #dtr-print { flex: 1 1 100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dtr-guard summary > svg { transition: none; }
}