.grid-note { margin: 0 0 .6rem; color: #557087; font-size: .86rem; }
.data-grid { max-height: calc(100vh - 285px); border: 1px solid var(--line); border-top: 3px solid var(--blue); box-shadow: 0 5px 16px rgba(25, 25, 150, .08); }
.data-grid table { min-width: 3260px; font-size: .88rem; }
.data-grid.collapsed table { min-width: 1180px; }
.data-grid.collapsed th:nth-child(n+9), .data-grid.collapsed td:nth-child(n+9) { display: none; }
.data-grid th, .data-grid td { min-width: 132px; max-width: 260px; padding: .68rem .72rem; }
.data-grid th { top: 0; z-index: 3; border-bottom: 2px solid var(--line); }
.data-grid tbody tr:nth-child(even) td { background: #fbfdff; }
.data-grid td.description, .data-grid td.instructions { min-width: 225px; max-width: 310px; white-space: normal; }
.data-grid td.actions { min-width: 118px; font-weight: 700; }
.sticky-col { position: sticky; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line); }
.data-grid tbody tr:nth-child(even) .sticky-col { background: #fbfdff; }
.data-grid tr:hover .sticky-col { background: #f4faff; }
.data-grid th.sticky-col { z-index: 5; background: var(--pale); }
.sticky-id { left: 0; min-width: 88px !important; width: 88px; }
.sticky-surname { left: 88px; min-width: 145px !important; width: 145px; }
.sticky-name { left: 233px; min-width: 145px !important; width: 145px; }
.mono { color: var(--navy); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; font-weight: 700; }
.yes { color: #087443; font-weight: 800; }
.muted { color: #7890a0; }
.header-info { position: relative; display: inline-grid; width: 1.12rem; height: 1.12rem; place-items: center; margin-left: .25rem; border: 1px solid currentColor; border-radius: 50%; cursor: help; font-size: .7rem; line-height: 1; text-transform: none; }
.header-tooltip { position: absolute; top: calc(100% + .5rem); left: 50%; z-index: 20; display: none; width: 220px; padding: .65rem .75rem; transform: translateX(-50%); background: var(--navy); color: #fff; font-size: .82rem; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-align: left; text-transform: none; box-shadow: 0 5px 16px rgba(25, 25, 150, .25); }
.header-info:hover .header-tooltip, .header-info:focus .header-tooltip { display: block; }
.grid-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; }
@media (max-width: 820px) { .data-grid { max-height: calc(100vh - 260px); } }