.records-page { height: 100%; min-height: 0; overflow: hidden; } .records-search { flex: 1 1 420px; margin-left: 8px; } .records-result-count { margin-left: auto; color: var(--muted); font-size: var(--font-size-sm); white-space: nowrap; } .records-shell > .alert { margin: 10px 14px 0; } .records-workspace { display: grid; grid-template-columns: minmax(210px, 260px) minmax(360px, 0.8fr) minmax(420px, 1.25fr); flex: 1; min-height: 0; overflow: hidden; } .records-file-plan, .records-list-pane, .records-detail-pane { min-width: 0; min-height: 0; overflow: hidden; background: var(--panel-soft); } .records-file-plan, .records-list-pane { border-right: var(--border-line-dark); } .records-file-plan, .records-list-pane { display: flex; flex-direction: column; } .records-pane-heading { display: flex; align-items: center; min-height: 52px; padding: 8px 13px; border-bottom: var(--border-line); background: var(--panel); } .records-pane-heading > div { display: flex; min-width: 0; align-items: baseline; gap: 8px; } .records-pane-heading span { color: var(--muted); font-size: var(--font-size-sm); font-weight: 700; } .records-pane-heading strong { overflow: hidden; color: var(--text-strong); font-size: var(--font-size-sm); text-overflow: ellipsis; white-space: nowrap; } .records-file-plan-scroll, .records-detail-scroll { flex: 1; min-height: 0; } .records-file-plan-scroll { padding: 7px; } .records-plan-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; width: 100%; min-height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; font: inherit; padding: 7px 9px; text-align: left; } .records-plan-row:hover, .records-plan-row:focus-visible, .records-plan-row.selected { background: var(--primary-soft); color: var(--text-strong); outline: none; } .records-plan-row.selected { box-shadow: inset 3px 0 0 var(--accent); } .records-plan-row > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .records-plan-code { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; } .records-list-grid { flex: 1; min-height: 0; overflow: auto; padding: 10px; } .records-list-grid > .data-grid-shell { min-height: 100%; border-radius: 0; } .records-record-link { display: block; width: 100%; overflow: hidden; border: 0; background: transparent; color: var(--text-strong); cursor: pointer; font: inherit; font-weight: 700; padding: 0; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .records-record-link:hover, .records-record-link:focus-visible, .records-record-link.selected { color: var(--accent); outline: none; text-decoration: underline; } .records-number { font-variant-numeric: tabular-nums; white-space: nowrap; } .records-detail-pane { display: flex; flex-direction: column; } .records-detail-scroll { padding: 18px 20px 32px; } .records-detail-header, .records-detail-actions, .records-section-heading { display: flex; align-items: center; } .records-detail-header { align-items: flex-start; justify-content: space-between; gap: 18px; padding-bottom: 15px; border-bottom: var(--border-line-dark); } .records-detail-header h2 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: 0; line-height: 1.25; } .records-eyebrow { color: var(--muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; } .records-detail-actions { flex: 0 0 auto; gap: 8px; } .records-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 16px; border: var(--border-line); border-radius: var(--radius-sm); background: var(--line); } .records-facts > div { display: flex; min-width: 0; min-height: 64px; flex-direction: column; justify-content: center; gap: 4px; padding: 10px; background: var(--surface); } .records-facts span:not(.status-badge), .records-item-row span, .records-item-row time, .records-chronology span, .records-chronology time { color: var(--muted); font-size: 12px; } .records-facts strong { overflow-wrap: anywhere; } .records-description { margin: 16px 0 0; color: var(--text-soft); line-height: 1.55; } .records-context-facts, .records-item-evidence { display: grid; margin: 0; } .records-context-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: var(--border-line); border-radius: var(--radius-sm); background: var(--line); } .records-context-facts > div { min-width: 0; padding: 9px 10px; background: var(--surface); } .records-context-facts dt, .records-item-evidence dt { color: var(--muted); font-size: 12px; } .records-context-facts dd, .records-item-evidence dd { overflow-wrap: anywhere; margin: 3px 0 0; color: var(--text-strong); font-size: var(--font-size-sm); font-weight: 600; } .records-lifecycle-actions { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px 0; border-bottom: var(--border-line); } .records-lifecycle-evidence { display: grid; gap: 12px; padding-top: 12px; } .records-lifecycle-evidence > dl, .records-recovery-result dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin: 0; border: var(--border-line); border-radius: var(--radius-sm); background: var(--line); } .records-lifecycle-evidence > dl > div, .records-recovery-result dl > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 9px 10px; background: var(--surface); } .records-lifecycle-evidence dt, .records-recovery-result dt { color: var(--muted); font-size: 12px; } .records-lifecycle-evidence dd, .records-recovery-result dd { overflow-wrap: anywhere; margin: 0; font-weight: 700; } .records-evidence-list { display: grid; gap: 1px; border-bottom: var(--border-line); } .records-evidence-list > strong { color: var(--muted); font-size: 12px; text-transform: uppercase; } .records-evidence-list > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; border-top: var(--border-line); padding: 5px 0; } .records-evidence-list > div > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .records-evidence-list small { color: var(--muted); padding-bottom: 7px; } .records-evidence-actions { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; } .records-recovery-result { display: grid; gap: 12px; } .records-recovery-result dl { grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); } .records-detail-section { margin-top: 24px; } .records-section-heading { justify-content: space-between; gap: 12px; min-height: 34px; border-bottom: var(--border-line); } .records-section-heading h2 { margin: 0; font-size: 1rem; letter-spacing: 0; } .records-section-heading > span { display: inline-grid; min-width: 24px; height: 24px; place-items: center; border-radius: var(--radius-round); background: var(--surface-strong); color: var(--muted); font-size: 12px; } .records-item-list { border-bottom: var(--border-line); } .records-item-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 18px; padding: 11px 5px; border-bottom: var(--border-line); } .records-item-row:last-child { border-bottom: 0; } .records-item-row > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .records-item-row > div:nth-child(2) { align-items: end; } .records-item-row a, .records-item-row strong { overflow: hidden; color: var(--text-strong); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .records-item-row p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--text-soft); font-size: var(--font-size-sm); } .records-item-evidence { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding-top: 4px; } .records-item-evidence > div { min-width: 0; } .records-chronology > div { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; min-height: 52px; padding: 10px 4px; } .records-chronology > div:not(:last-child)::before { position: absolute; top: 26px; bottom: -10px; left: 11px; width: 1px; background: var(--line-dark); content: ""; } .records-timeline-marker { z-index: 1; width: 9px; height: 9px; align-self: start; margin: 5px 0 0 3px; border: 2px solid var(--accent); border-radius: var(--radius-round); background: var(--panel-soft); } .records-chronology > div > div { display: flex; min-width: 0; flex-direction: column; gap: 3px; } .records-chronology time { white-space: nowrap; } .records-access-explanation > p { color: var(--text-soft); } .records-access-explanation dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .records-access-explanation dl > div { padding: 10px; border: var(--border-line); border-radius: var(--radius-sm); background: var(--surface); } .records-access-explanation dt { color: var(--muted); font-size: 12px; } .records-access-explanation dd { margin: 4px 0 0; font-weight: 700; } .records-dialog { width: min(760px, calc(100vw - 32px)); } .records-dialog-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .records-dialog-form > .form-field:has(textarea) { grid-column: 1 / -1; } .records-grant-list { display: grid; gap: 8px; margin-block: 16px; } .records-grant-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px; border: var(--border-line); border-radius: var(--radius-sm); } .records-grant-row > div, .records-grant-actions { display: flex; gap: 8px; } .records-grant-row > div { min-width: 0; flex-direction: column; } .records-grant-actions { flex-wrap: wrap; } .records-grant-actions label { display: inline-flex; gap: 6px; align-items: center; } @media (max-width: 1280px) { .records-workspace { grid-template-columns: minmax(190px, 220px) minmax(330px, 0.85fr) minmax(390px, 1fr); } .records-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .records-lifecycle-evidence > dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .records-toolbar { flex-wrap: wrap; } .records-search { order: 5; width: 100%; margin-left: 0; } .records-workspace { grid-template-columns: minmax(180px, 220px) minmax(0, 1fr); } .records-detail-pane { grid-column: 1 / -1; min-height: 380px; border-top: var(--border-line-dark); } } @media (max-width: 680px) { .records-workspace { display: flex; overflow-y: auto; flex-direction: column; } .records-file-plan, .records-list-pane, .records-detail-pane { min-height: 330px; border-right: 0; border-bottom: var(--border-line-dark); } .records-detail-header, .records-detail-actions { align-items: stretch; flex-direction: column; } .records-facts, .records-context-facts, .records-item-evidence, .records-lifecycle-evidence > dl, .records-recovery-result dl, .records-access-explanation dl, .records-dialog-form { grid-template-columns: 1fr; } .records-dialog-form > .form-field:has(textarea) { grid-column: auto; } .records-grant-row { grid-template-columns: 1fr; } }