. Without own border-box widths the long occasion text runs into
the neighbouring columns, so every column gets an explicit share and is allowed to wrap. */
#driver-attestations {width: 100%;}
#driver-attestations th, #driver-attestations td {box-sizing: border-box;
flex: 0 0 auto;
width: 14%;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;}
/* Same whitespace trap as the archive below: six gaps between the inline-block cells added 41px
that Gecko renders and Chromium drops, carrying the icon column out of the clipped tab. */
#driver-attestations,
#driver-attestations thead,
#driver-attestations tbody {display: block;}
#driver-attestations tr {display: flex;}
#driver-attestations th:nth-child(2), #driver-attestations td:nth-child(2) {width: calc(24% - 6rem);}
#driver-attestations th:nth-child(3), #driver-attestations td:nth-child(3) {width: 19%;}
#driver-attestations th:nth-child(4), #driver-attestations td:nth-child(4) {width: 13%;}
#driver-attestations th:nth-child(5), #driver-attestations td:nth-child(5) {width: 8%;}
/* Widest column of the row, so the preview icon takes its space from here rather than from the
occasion text next to it - the one column that has to wrap anyway. */
#driver-attestations th:nth-child(6), #driver-attestations td:nth-child(6) {width: calc(22% - 3.5rem);}
/* Fixed width for the icon column - see the archive table for why a percentage spills. Four icons
now, the same set the archive carries, so the same 9.5rem. */
#driver-attestations th:last-child, #driver-attestations td:last-child {width: 9.5rem;
text-align: right;
white-space: nowrap;}
#driver-attestations tr {border-bottom: 0.05rem solid var(--border-dark);}
#driver-attestations td {padding-top: .5rem;
padding-bottom: .5rem;}
#driver-attestations td:last-child a {padding: 0 .35rem;
cursor: pointer;}
#driver-attestations td:last-child .svg-inline--fa {width: 1rem;
height: 1rem;
padding: 0;}
#driver-attestations td:last-child a:hover {color: var(--hl);}
#driver-attestations td .fi {margin-right: .35rem;}
/* Attestation tile inside the daily accordion. Like its sibling day tables the columns need
explicit widths (the .table base is a fixed 5.75rem, nowrap); border-box keeps the padding in. */
#activities-details-tab .driver-attestation-day th, #activities-details-tab .driver-attestation-day td {box-sizing: border-box;
flex: 0 0 auto;
padding: 1%;
width: 32%;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;}
/* Three gaps between the inline-block cells, 21px that only Gecko renders - same trap as above. */
#activities-details-tab .driver-attestation-day,
#activities-details-tab .driver-attestation-day thead,
#activities-details-tab .driver-attestation-day tbody {display: block;}
#activities-details-tab .driver-attestation-day tr {display: flex;}
#activities-details-tab .driver-attestation-day th:first-child, #activities-details-tab .driver-attestation-day td:first-child {width: 30%;}
#activities-details-tab .driver-attestation-day th:nth-child(2), #activities-details-tab .driver-attestation-day td:nth-child(2) {width: 26%;}
#activities-details-tab .driver-attestation-day th:nth-child(3), #activities-details-tab .driver-attestation-day td:nth-child(3) {width: 12%;}
#activities-details-tab .driver-attestation-day td .fi {margin-right: .35rem;}
/* ATTESTATION ARCHIVE (output -> certificates -> archive) */
/* .tab-content is content-box with width:100%, so its padding has to be contained - otherwise the
list pushes past the tab container and swallows the spacing towards the right screen edge. */
#attestations-archive .tab-content {box-sizing: border-box;
padding: .25rem 1rem 1rem 1rem;}
#attestations-archive .archive-scroll {max-height: calc(100vh - 6.5rem);
overflow-y: auto;
overflow-x: hidden;}
/* The .table base gives every cell a fixed 5.75rem and nowrap, so each column needs an explicit
border-box width and the long occasion text has to be allowed to wrap. Everything else
(padding, type, hover) stays on the base so the list matches the other tables. */
#attestations-archive-table th, #attestations-archive-table td {box-sizing: border-box;
flex: 0 0 auto;
width: 10%;
white-space: normal;
overflow-wrap: anywhere;
vertical-align: top;}
/* The cells are inline-block, so the line breaks the template writes between the | s arrive as
real spaces inside the anonymous table cell the row wraps them in. Chromium drops that
whitespace, Gecko keeps it: seven gaps add up to ~48px, which carries the fixed action column
past the right edge where overflow-x:hidden cuts the delete icon off. Letting the row lay its
own cells out removes the gaps in every engine - flex: 0 0 auto above keeps each column at
exactly the width set below. */
#attestations-archive-table,
#attestations-archive-table thead,
#attestations-archive-table tbody {display: block;}
#attestations-archive-table tr {display: flex;}
/* Sticky has to sit on the thead: on a th it is ignored here, the cells are inline-block.
The opaque fill belongs on the row, not on the cells: an empty header cell (the action
column) collapses to padding height and shows up as a detached bar above the icons. */
#attestations-archive-table thead {position: sticky;
top: 0;
z-index: 2;}
#attestations-archive-table thead tr {background: var(--bg);}
/* Driver names are the one column that can take any leftover, so it absorbs whatever the fixed
action column takes and the row still adds up to 100%. */
#attestations-archive-table th:nth-child(2), #attestations-archive-table td:nth-child(2) {width: calc(27% - 9.5rem);}
#attestations-archive-table th:nth-child(3), #attestations-archive-table td:nth-child(3) {width: 14%;}
#attestations-archive-table th:nth-child(4), #attestations-archive-table td:nth-child(4) {width: 14%;}
#attestations-archive-table th:nth-child(5), #attestations-archive-table td:nth-child(5) {width: 13%;}
#attestations-archive-table th:nth-child(6), #attestations-archive-table td:nth-child(6) {width: 7%;}
#attestations-archive-table th:nth-child(7), #attestations-archive-table td:nth-child(7) {width: 15%;}
/* Four fixed-size icons: a percentage width shrinks below them on narrow windows and the
icons then spill out of the cell (nowrap + overflow:visible) past the right screen edge. */
#attestations-archive-table th:last-child, #attestations-archive-table td:last-child {width: 9.5rem;
text-align: right;
white-space: nowrap;}
#attestations-archive-table td:last-child a {padding: 0 .35rem;
cursor: pointer;}
/* The base .svg-inline--fa carries padding: 0 .813rem - that is what made the icons 42px wide
and pushed the third one out of the cell across the right screen edge. */
#attestations-archive-table td:last-child .svg-inline--fa {width: 1rem;
height: 1rem;
padding: 0;}
#attestations-archive-table td:last-child a:hover {color: var(--hl);}
#attestations-archive-table td .fi {margin-right: .35rem;}
#attestations-archive .archive-empty {padding: 1rem 0;
color: var(--text-mid);}
/* Reading an attestation on screen. Sized like the map popup - the other full-bleed one - and
given an explicit height: the pdf viewer inside the iframe brings none of its own. */
#attestation-preview-popup {width: calc(100vw - 10rem);
left: 5rem;}
#attestation-preview-popup .popup-content {display: flex;
flex-direction: column;
box-sizing: border-box;
height: calc(100vh - 3rem);}
#attestation-preview-popup .popup-content h3 {flex: none;
margin-top: 0;}
#attestation-preview-popup iframe {flex: 1;
margin-top: .75rem;
border: none;
background: var(--menubg);}
/* The document takes a moment to be rebuilt, so the spinner holds the space until it is there. */
#attestation-preview-popup .preview-loader {display: none;
flex: 1;
align-items: center;}
#attestation-preview-popup .preview-loader.active {display: flex;}
#attestation-preview-popup .preview-loader.active + iframe {display: none;}
/* report generation notice - same popup family as the message dialogs, minus the close control */
#pdf-progress-popup {
top: calc((100vh - 12rem)/2);
}
#pdf-progress-popup .popup-content {
display: flex;
align-items: center;
justify-content: center;
gap: 1.25rem;
padding: 2rem 1rem;
min-height: 8rem;
}
#pdf-progress-popup .loader {
margin: 0;
width: auto;
}
#pdf-progress-popup .loader .circle {
width: 2rem;
height: 2rem;
}
#pdf-progress-popup p {
margin: 0;
font-size: 1.1em;
}
|