body { background: #f6f8f9; }
.brand-navbar .nav-link { white-space: nowrap; }
main { padding-bottom: 4rem; }
.table-sheet { background: #fff; font-size: .92rem; }
.table-sheet thead th { position: sticky; top: 0; background: #eef2f3; white-space: nowrap; z-index: 1; }
.table-sheet td { white-space: nowrap; max-width: 28rem; overflow: hidden; text-overflow: ellipsis; }
.table-sheet tbody tr:hover { background: #f1f7f7; }
.row-link { cursor: pointer; }
.card-tube { border-left: 4px solid var(--brand-primary); }
.status-created, .status-restored { background: #d1e7dd; }
.status-updated { background: #fff3cd; }
.status-error { background: #f8d7da; }
.status-unchanged, .status-skipped { background: #f8f9fa; }
.ts-wrapper.form-select { padding: 0; }
.ts-dropdown { z-index: 2000; }
.ts-dropdown .create { color: var(--brand-primary); font-weight: 600; }
.modal-stack { z-index: 1060; }
/* Pop-up forms: the <form> wraps header, fields and footer. In a scrollable
   dialog it must pass the height limit on, so that the fields scroll and the
   Save / Cancel footer always stays in view (tall forms such as MALDI). */
.modal-dialog-scrollable .modal-form {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}
.modal-dialog-scrollable .modal-form > .modal-body { overflow-y: auto; min-height: 0; }
#grid .tabulator-row.row-dirty { background: #fff8dc !important; }
#grid .tabulator-row.row-error { background: #f8d7da !important; }
#grid .tabulator-row.row-new { background: #e7f5ec !important; }
.req::after { content: " *"; color: #c0392b; }
/* column filters in list headers */
.filter-row th { background: #f7f9fa !important; font-weight: normal; top: 2.1rem; vertical-align: top; }
.filter-row .form-control, .filter-row .form-select { min-width: 7rem; font-size: .8rem; }
.filter-row .daterange { min-width: 12rem; }
.filter-row select.presence { min-width: 0; width: 3.4rem; padding-right: 1.2rem; flex: none; }
.filter-row .ts-wrapper { min-width: 9rem; }
.filter-row th.filter-active { background: color-mix(in srgb, var(--brand-primary) 12%, white) !important; }
/* change history */
.history-badge-created { background: #198754; }
.history-badge-changed { background: #0d6efd; }
.history-badge-archived { background: #6c757d; }
.history-badge-restored { background: #20c997; }
.history-badge-deleted { background: #dc3545; }
/* report charts */
.chart { height: 240px; }
.chart-lg { height: 300px; }
.chart-empty { padding: 2rem 0; text-align: center; }
.report-filters .form-select, .report-filters .form-control { min-width: 11rem; }
/* identified / not identified bar (reports, per-donation table) */
.ident-bar { display: inline-flex; gap: 2px; width: 6.5rem; height: 8px; vertical-align: middle; }
.ident-bar > span { flex-basis: 0; min-width: 2px; }
.ident-yes { background: #4a3aa7; }  /* same violet as "with identification" in the chart */
.ident-no { background: #d6d4cc; }
.ident-bar > span:first-child { border-radius: 4px 0 0 4px; }
.ident-bar > span:last-child { border-radius: 0 4px 4px 0; }
.ident-bar > span:only-child { border-radius: 4px; }
.ident-key { font-weight: normal; font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; }
.ident-key > span { display: inline-block; width: .7rem; height: .5rem; border-radius: 2px; margin-left: .3rem; }

/* Top menu: on medium-wide screens (and with longer Polish labels) the items wrap
   onto a second line instead of pushing the user menu off-screen. */
@media (min-width: 992px) {
  .brand-navbar .navbar-collapse > .navbar-nav.me-auto { flex-wrap: wrap; min-width: 0; }
  .brand-navbar .navbar-nav .nav-link { padding-left: .45rem; padding-right: .45rem; }
}

/* freezer boxes: a grid of places (box page, cryo tube page, isolation layout) */
.fbox { display: grid; gap: 2px; background: #ffffff; }
.fbox .cell { aspect-ratio: 1; border-radius: 3px; font-size: .62rem; line-height: 1.05; display: flex;
              align-items: center; justify-content: center; text-align: center; overflow: hidden;
              padding: 1px; overflow-wrap: anywhere; text-decoration: none; }
.fbox-axis { font-size: .65rem; color: #6c757d; display: flex; align-items: center; justify-content: center; }
.cell.tube { background: #d6e5f7; border: 1px solid #2a78d6; color: #17345c; }
.cell.highlight { background: #2a78d6; border: 2px solid #17345c; color: #ffffff; font-weight: 600; }
.cell.withdrawn { background: #f3dfe9; border: 1px solid #8f1d5c; color: #8f1d5c; font-size: .85rem; }
.cell.gap, .cell.missing { background: #ffffff; border: 1px dashed #8a8780; }
.cell.other { background: #e4e2dc; border: 1px solid #c9c6bd; }
.cell.empty { background: #f4f3ef; border: 1px solid #ebe9e3; }
.cell.bulk { background: #e6e3f5; border: 1px solid #4a3aa7; color: #2b2166; }
.cell.bulk-here { background: #4a3aa7; border: 2px solid #2b2166; color: #ffffff; font-weight: 600; }
a.cell.bulk:hover, a.cell.bulk:focus { background: #d3cdee; }
a.cell.tube:hover, a.cell.tube:focus { background: #b9d2f1; }
.cart-bar { background: #f4f8fb; border: 1px solid #d6e5f7; border-radius: .375rem; padding: .35rem .6rem; }
.cart-check { width: 2rem; text-align: center; }
.cell.pellet { background: #e2f3ea; border: 1px solid #2e8b57; color: #1d5c3a; }
a.cell.pellet:hover, a.cell.pellet:focus { background: #c9e9d7; }
.cell.used-up { background: repeating-linear-gradient(45deg, #f4f3ef 0 3px, #e4e2dc 3px 6px); border: 1px dashed #2a78d6; color: #5f6b7a; }
.legend .cell { width: 1.1rem; height: 1.1rem; display: inline-flex; vertical-align: middle; margin-right: .3rem; }
.fbox-wrap { max-width: 34rem; }
.tooltip-inner { text-align: left; max-width: 18rem; }
@media print { .fbox .cell { font-size: .55rem; } }

/* summary tiles (pellets report) */
.stat-tile { border: 1px solid #dee2e6; border-radius: .5rem; padding: .45rem .8rem; background: #fff; min-width: 8rem; }
.stat-value { font-size: 1.5rem; font-weight: 600; color: #0b0b0b; line-height: 1.2; }
.stat-of { font-size: 1rem; font-weight: 400; color: #52514e; }
.stat-label { font-size: .8rem; color: #52514e; }