:root {
    --bg: #191C24;
    --menubg: #21252f;
    --dropbg: #474e62;
    --text: #fff;
    --text-mid: #a6a7ab;
    --text-dark: #191C24;
    --red: #ff0000;/* db141e */
    --green: #66ff33;
    --yellow: #fdb103;
    --blue: #0099ff;
    --attestation: #ff7300;/* the day-timeline attestation bar and its tile icon share this */
    --hl: #00ffff;
    --hov: #393f4f;
    --hov-dark: #333a4c;
    --ttip: #fff;
    --border: #969eb0;
    --border-dark: #474e62;
    --sel: #393f4f;
    --sel-light: #d6d9df;
    --dbox: #2b303d;

    --tool: #717685;
    --bhov: #848ca1;

    /* --- what a document is, said in colour ---
       The two the interface already gives a lasting colour of their own, named
       here because the master-data panel now paints the same two things: a
       second literal beside the first would drift from it the day one of them
       is changed. */
    --doc-driver-card: #89e1ff;
    --doc-driving-license: #ffbee7;

    /* The three it never coloured. Cool tones for the two groups that can show
       the warning dot beside them - the warm half of the circle belongs to
       --yellow and to the red of an expired date, and an icon in that half
       reads as a warning of its own. Apricot is left for the two groups that
       describe the object itself: neither of them carries a date, so neither
       can ever show that dot. */
    --card-tachograph: #6fdcae;
    --card-telematics: #c9a9ff;
    --card-object: #ffb37a;
}

@font-face {
    font-family: "Roboto";
    src: url("../fonts/Roboto-Light.ttf") format("truetype");
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

/* SCROLLBAR */
::-webkit-scrollbar {
    width: .5rem;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--menubg);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--sel);
}

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #474e62;
  }

  :root{
    scrollbar-color: #474e62 var(--menubg) !important;
  }
/* SCROLLBAR END */

::selection {
    color: var(--text);
    background: var(--tool);
}
/* For Mozilla Firefox */
::-moz-selection {
    color: var(--text);
    background: var(--tool);
}

#particles-js{
    position: absolute;
    width: 99%;
    height: 98%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    z-index: 5;
}

html {
    font-family: Roboto, sans-serif;
}

body {
    display: flex;
    flex-direction: row;
    gap: 0;
    min-width: 1600px;
    background: var(--bg);
    font-size: 14px;
    font-weight: 200;
    word-spacing: 2px;
    letter-spacing: 1px;
}

body.login-page {
    min-width: 1600px;
}

h1 {
    display: block;
    color: var(--text);
    cursor: default;
}

h1 span {
    color: var(--hl);
}

h2 {
    display: block;
    margin: 0;
    padding: .25rem 0 .25rem .5rem;
    width: calc(100% - .5rem);
    font-size: .9em;
    line-height: 1.2em;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--text);
    background: var(--dbox);
    border-bottom: 0.05rem solid var(--border);
    cursor: default;
}

h3 {
    display: block;
    margin: 2rem 0 1rem 0;
    padding: 0 0 0 .25rem;
    width: calc(100% - .25rem);
    font-size: .9em;
    line-height: 1.2rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--text);
    border-bottom: 0.05rem solid var(--border);
    cursor: default;
}

h3 span {
    text-transform: none;
}

h4 {
    display: block;
    margin: 0 0 .5rem;
    color: var(--text);
    cursor: default;
}

p {
    cursor: default;
    z-index: 1;
}

p, a {
    margin:0;
    line-height: 1.3rem;
    color: var(--text);
}

/* The header band spans the whole strip between the top bar and its own bottom rule: the tab
   container's 1rem top margin is dropped and the band grows by exactly that amount, so the rule -
   and everything below it - stays put while the content sits on the strip's true middle line.
   Every page carrying a data-area gets this, drivers and vehicles alike. */
.tab-container:has(.data-area) {
    margin-top: 0;
}

p.data-area {
    /* --band-h is the strip's height and is reused by every child below, so the text, the info
       icons, the legend and the pin/report buttons all centre on the same line. box-sizing keeps
       the measured height exact incl. the border; padding is zeroed and line-height pinned because
       the overview tab otherwise adds vertical padding and a 0.9em line-height via
       "#driver-overview-tab p". */
    --band-h: calc(25px + 1rem);
    box-sizing: border-box;
    height: var(--band-h);
    margin-bottom: 1rem;
    padding: 0 !important;
    line-height: var(--band-h) !important;
    text-transform: uppercase;
    font-size: 1rem !important;
    background: var(--bg);
    border-bottom: .005rem solid var(--border) !important;
}

/* The activity-detail and night-hours headers stick via .sticky, which also sets inline-table;
   block keeps their measured height exact while position:sticky still holds. */
.data-area.sticky {
    display: block;
}

.data-area .fa-id-badge, .data-area .fa-paperclip, .data-area .fa-file-export, .data-area .fa-clock, .data-area .fa-clipboard-list, .data-area .fa-bus-simple {
    padding: 0 !important;
    height: 1rem !important;
    width: 1rem !important;
}

.data-area .fa-clock , .data-area .fa-paperclip, .data-area .fa-clipboard-list{
    margin-left: 1rem !important;
}

.data-area .fa-file-export{
    margin-left: 4rem !important;
}

.data-area .fa-clock {
    height: .85rem !important;
    width: .85rem !important;
}

/* Each info-bar entry is its own flex line so the icon and its text sit exactly on the band's
   vertical centre; a plain vertical-align leaves the icons ~1px low. The gap replaces the literal
   space between icon and text (flex would otherwise collapse it), vertical-align:top pins the
   full-height span to the line so it stays centred in the band. The fallback covers the weekly
   overview, whose header cell sets its own --band-h. */
.data-area span.info-bar {
    float: none;
    display: inline-flex;
    align-items: center;
    height: var(--band-h, 25px);
    vertical-align: top;
    gap: .3em;
}

.data-area span.info-bar svg {
    margin: 0;
}

/* Legend symbols, the master pin and the report icon float right in the info bar; give each the
   band's full height and centre its own icon so text and icons share one middle line. */
.data-area .activity-legend,
.data-area .activity-timeline-select-all,
.data-area .activity-timeline-report {
    height: var(--band-h, 25px);
    display: flex;
    align-items: center;
}

/* The pin toggle carried a top margin to fake-centre it on the old auto-height bar; the flex
   centring above now does that, so drop the offset. */
.data-area .activity-timeline-select-all-toggle {
    margin-top: 0 !important;
}

a {
    color: var(--text);
    text-decoration: none;
}

a.disabled {
    pointer-events: none;
}

.no-border {
    border: none !important;
}

.table tr.no-border {
    border: none;
}

.table tr.warning, dt.warning, dd.warning {
    background: #8b3329;
}

/* The amber half of the pair above. dt/dd joined it when the file explorer
   began showing due dates in a description list rather than a table; the red
   half had carried them since the master data pages were written. */
.table tr.advance-warning, dt.advance-warning, dd.advance-warning {
    background: #8f7001;
}

label {
    color: var(--text);
    font-size: .9em;
}

label.highlight {
    padding-left: 0.25rem;
    border-left: 0.25rem solid var(--hl);
}

.form {
    display: inline-block;
    margin: 0;
    width: 100%;
}
.form input.required, .form .ui.dropdown.required, .form label.required {
    border-color: #b9861e;
}

.sticky {
    display: inline-table;
    width: 100%;
    position: sticky;
    top: -1px;
    z-index: 1;
}

.right {
    float: right;
}

#right-menu {
    float: right;
    display: flex;
}

#right-menu svg {
    padding: 0.8rem 0 .25rem 0;
    margin-right: 2rem;
}

#right-menu a {
    padding: 0;
}

.svg-inline--fa {
    position: relative;
    padding: 0 0.813rem;
    width: 1.375rem;
    height: 1.375rem;
    text-align: center;
    color: var(--text);
}

.svg-inline--fa.fa-copy {
    padding-left: 0;
    width: .8rem !important;
    height: .8rem !important;
}

  /* dropdown menu */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--dropbg);
    min-width: 8rem;
    z-index: 1;
  }

  .dropdown-content button {
    display: block;
    width: 100%;
    padding: .8rem 1rem;
    color: var(--text);
    background: var(--dropbg);
    text-decoration: none;
    border: none;
  }

  .dropdown-content button:hover {background-color: var(--sel);}
  
  .dropdown:hover .dropdown-content {display: block;}
  
  .dropdown:hover .dropbtn {color: var(--hl);}
/* top bar */
.top-bar {
    display: flex;
    margin-bottom: .125rem;
    height: 3rem;
    background: var(--menubg);
}

.search-section {
    display: flex;
    margin-bottom: 0.125rem;
    padding: 0.75rem;
    height: 1.5rem;
    background: var(--menubg);
}

.filter-section {
    display: flex;
    padding: 0.5rem;
    height: 2rem;
    gap: 2rem;
    width: 100%;
    background: var(--menubg);
}

div.icon.input {
    position: relative;
}

input#search-field {
    margin: 0;
    height: 1rem;
    width: 9rem;
}

.report-units .search-field {
    margin-top: 0;
    height: 1.2rem;
    width: 13.125rem;
}

.report-units .search-section {
    padding: 0 .5rem 1.25rem .5rem;
    background: none;
}

.report-units .icon.input svg.fa-magnifying-glass {
    height: 1.4rem;
}

.download-manager-result {
    width: 100%;
}

.download-manager-overview {
    display: flex;
    flex-direction: column;
    margin-left: 1rem;
}

.reports-wrapper form#download-manager-driver, .reports-wrapper form#download-manager-vehicle {
    flex-direction: column !important;
    width: 20.2rem;
}

div.icon input:not(.ui.dropdown .menu) > .input {
    padding: 0.2rem 2.3rem 0.2rem 0.3rem;
    width: 8rem;
}

#download-manager-driver .report-units h2, #download-manager-vehicle .report-units h2 {
    margin-bottom: 1rem;
}

#download-manager-driver .report-units div.scroll, #download-manager-vehicle .report-units div.scroll {
    max-height: calc(100vh - 23rem);
}

#download-manager-driver .report-units, #download-manager-vehicle .report-units {
    margin: 2rem 0 0 0;
    width: 100%;
}

#download-manager-driver .report-units .search-field, #download-manager-vehicle .report-units .search-field {
    width: 17.7rem;
}

#download-manager-driver button.check-all.button-primary, #download-manager-vehicle button.check-all.button-primary {
    width: 100%;
}

button#generate-preview, button#download-zip-file-driver, button#download-zip-file-vehicle {
    width: 19rem;
    margin-left: 1rem;
    text-transform: uppercase;
}

#download-manager-driver .report-units .search-field, #download-manager-vehicle .report-units .search-field {
    width: 18rem;
}

.download-details {
    width: calc(100% - 2rem);
    padding: 1rem;
    margin-top: .5rem;
    background: var(--dbox);
}

.download-details table thead {
    background-color: var(--dropbg);
}

.download-details .table th, .download-details .table td {
    width: 11%;
}

.download-details .table th:first-child, .download-details .table td:first-child {
    width: 2rem;
}

.download-details .table th:nth-child(2), .download-details .table td:nth-child(2) {
    width: calc(46% - 8rem);
}

.download-details .table th:last-child, .download-details .table td:last-child {
    width: 7%;
}
.download-details .table th:last-child span, .download-details .table td:last-child span {
    padding-left: 1.25rem;
}

.download-details .table th:first-child svg, .download-details .table td:first-child svg {
    margin: 0;
    padding: 0 .5rem;
    width: 1rem;
}

.download-summary {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.download-details .time-ranges .table th, .download-details .time-ranges .table td {
    width: 12%;
}

.download-details .time-ranges .table th:first-child, .download-details .time-ranges .table td:first-child {
    width: calc(28% - 7rem);
}

.download-details .time-ranges .table th:nth-child(3), .download-details .time-ranges .table td:nth-child(3) {
    width: 18%;
}

.download-details .time-ranges .table th:nth-child(4), .download-details .time-ranges .table td:nth-child(4) {
    width: 4%;
    padding-right: 0;
    text-align: right;
}

#files-export-vehicle .download-details .time-ranges .table th:first-child, #files-export-vehicle .download-details .time-ranges .table td:first-child {
    width: 12%;
}

#files-export-vehicle .download-details .time-ranges .table th:nth-child(5), #files-export-vehicle .download-details .time-ranges .table td:nth-child(5) {
    width: calc(28% - 7rem);
}

.download-details .table th span, .download-details .table td span {
    margin-left: 1.25rem;
}

.download-details .driver-data,
.download-details .vehicle-data {
    display: none;
}

.download-details .driver-data.accdata,
.download-details .vehicle-data.accdata {
    border: none;
}

.download-details .table tr {
    border-top: 0.05rem solid var(--border-dark);
    border-bottom: none;
}

.download-summary .yellow {
    color: var(--yellow);
}

.time-ranges {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--hov);
}

.time-ranges h3, .download-details h3 {
    margin-top: 0;
    line-height: 1em;
}

.time-ranges .table thead {
    background-color: var(--dropbg);
}

.download-details-table-scroll,
.time-ranges-table-scroll {
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
    overflow-x: hidden;
}

.download-details-table-scroll .table,
.time-ranges-table-scroll .table {
    width: 100%;
}

.download-details-table-scroll .table thead,
.time-ranges-table-scroll .table thead {
    position: sticky;
    top: 0;
    z-index: 2;
}

.download-details-table-scroll .table thead th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: .85rem;
}

.download-details-table-scroll .table thead th.sortable::after {
    content: "⇅";
    position: absolute;
    right: .2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .6rem;
    color: var(--tool);
    opacity: .75;
}

.download-details-table-scroll .table thead th.sortable[data-sort-direction="asc"]::after {
    content: "▲";
    color: var(--hl);
    opacity: 1;
}

.download-details-table-scroll .table thead th.sortable[data-sort-direction="desc"]::after {
    content: "▼";
    color: var(--hl);
    opacity: 1;
}

.time-ranges-table-scroll .table.missing-ranges thead {
    z-index: 1;
}

.download-details-table-scroll td.list-details {
    width: calc(100% - 5rem) !important;
    margin-left: 3rem;
}

.time-ranges .table tr {
    border: none;
}

.time-ranges .table tr.border-top {
    border-top: 1px solid var(--border-dark);
}

.time-ranges .table th, .time-ranges .table td {
    width: 15%;
}

.preview-section .download-summary p, .preview-section .download-missing-ranges p {
    font-size: 1.15em;
}

.download-details .table td span.info-tooltip {
    margin: 0 !important;
    padding: 0 !important;
}

.download-details .table td span.info-tooltip svg {
    margin: 0;
    padding: 0;
    height: 1.25rem !important;
    width: 1.25rem !important;
}

.summary-box {
    width: calc(20% - 1.25rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem .5rem;
    float: left;
    background: var(--dbox);
}

.summary-box-label {
    margin: 0;
}

.summary-box-label span {
    float: none;
}

.summary-box-value {
    font-weight: 700;
    margin: 0;
    line-height: 1.1;
}

.summary-box svg {
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.selection-toggle {
    height: 1.25rem;
    width: 1.25rem;
    color: var(--tool);
    fill: var(--tool);
    cursor: pointer;
}

.selection-toggle.selected {
    color: var(--hl);
    fill: var(--hl);
}

.selection-export {
    margin-left: .5rem !important;
    color: var(--tool);
    cursor: pointer;
}

.selection-export.active {
    color: var(--hl);
}

p span.selected-count {
    float: none;
    margin-right: 1rem;
}

td.acc svg.fa-circle-chevron-right {
    cursor: pointer;
}

.preview-section .download-summary .summary-box-value {
    font-size: 1.75em;
}

.ui.dropdown svg.fa-magnifying-glass, .icon.input svg.fa-magnifying-glass {
    cursor: default;
    position: absolute;
    top: 0.25rem;
    right: 0;
    height: 1rem;
    width: 1rem;
    color: var(--dropbg);
}

span.text {
    font-size: 1em;
    font-weight: 400;
    color: var(--text);
}

#cal {
    height: 2rem;
    font-size: 1em;
    line-height: 2.1rem;
    border: none;
}

#time-range, #start-date {
    margin: 0 .5rem;
}

a#file-upload svg, a#assign-driver-cards-vehicles svg, a#assign-nfc-tags svg {
    cursor: pointer;
}

.top-bar a svg:hover, .top-bar svg.fa-chevron-down:hover {
    color: var(--hl);
}

.report-time-period svg.fa-chevron-down:hover {
    color: var(--hl);
    cursor: pointer;
}

.top-bar a.redD svg, .top-bar a.redV svg {
    border-bottom: .25rem solid var(--red);
}

.top-bar a.yellow svg {
    border-bottom: .25rem solid var(--yellow);
}

svg title {
    background-color: red;
}

svg:focus {
    outline: none;
}

/* CONTENT */
#content {
    display: flex;
    flex-direction: column;
    flex-grow: 100;
}

#content.dash {
    margin-top: 1rem;
    margin-left: 4.125rem;
}

#content.narrow {
    margin-left: 3.125rem;
}

#content.wide {
    margin-left: 3.125rem;
    flex-direction: row;
    position: relative;
}

#content-grid {
    display: flex;
    flex-direction: row;
}

#content.wide #content-grid {
    flex-direction: column;
    overflow: hidden;
}

#content.wide #content-grid .filter-section{
    margin-bottom: 1rem;
}

/* DRIVERS */
#drivers-list-wrapper, #vehicles-list-wrapper {
    margin-left: 3.125rem;
    padding-right: 0.125rem;
    height: 100vh;
    width: 16.5rem;
}

#drivers-list, #vehicles-list {
    padding-right: 0.125rem;
    height: calc(100% - 5.25rem);
    overflow-x: hidden;
    overflow-y: scroll;
}

#drivers-list svg, #vehicles-list svg, #new-driver svg {
    padding: 0;
    height: .8rem;
    width: .8rem;
    padding-left: .35rem !important;
}

#drivers-list .vio-profile svg {
    margin-right: 0.25rem;
    padding: 0 !important;
    height: .9rem;
    width: .9rem;
    vertical-align: bottom;
    color: var(--text-dark);
}

#new-driver, #new-vehicle {
    margin-left: 4rem;
    padding: 0;
    cursor: pointer;
}

#drivers-list div.warning svg {
    padding-left: .5rem !important;
}

#drivers-list-nfc-tags, #nfc-tags-list {
    height: calc(100vh - 27rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

#sort-tile {
    display: flex;
    flex-direction: row;
    margin-bottom: .125rem;
    padding: 0.55rem 0.45rem 0.25rem 0.45rem;
    background: var(--dbox);
    border-bottom: 0.005rem solid var(--border-dark);
}

#sort-tile .sort-option
{
    width: 12%;
    cursor: pointer
}

#sort-tile .sort-title
{
    width: 51%;
    color: var(--text);
    cursor: default;
}

#vehicles-list-wrapper #sort-tile .sort-title {
    width: 63%;
}

#sort-tile svg
{
    height: .8rem;
    width: .8rem;
}

#sort-tile .sort-option.active svg
{
    color: var(--hl);
}

.list-tile {
    display: none;
    position: relative;
    margin: 0 0.125rem 0.125rem 0;
    padding: 0.5rem 0;
    width: 100%;
    height: 3.3rem;
    background: var(--dbox);
    cursor: pointer;
}

.list-tile.visible {
    display: flex;
}

.list-tile.search-hidden, .calendar-row.search-hidden, label.search-hidden, label.filter-hidden {
    display: none !important;
}

.list-tile:hover {
    background: var(--sel);
}

.list-tile.selected {
    width: calc(100% - 0.25rem);
    background: var(--sel);
    border-left: 0.25rem solid var(--hl);
}

.circle {
    margin-left: 0.5rem;
    border-radius: 3%;
    height: 3.3rem;
    width: 3.3rem;
    background:#9fa9bb;
}

.list-tile.selected .circle {
    margin-left: 0.25rem;
}

.circle div.initials {
    margin: 0;
    padding-top: 0.05rem;
    padding-left: 2px;
    font-size: 1.1em;
    font-weight: 800;
    text-align: center;
}

.circle div.inumber {
    margin: 0;
    padding-top: 0.2rem;
    padding-left: 2px;
    height: .8rem;
    font-size: 0.8em;
    text-align: center;
}

.circle div.manufacturer {
    margin: 0;
    padding: 0.25rem 0;
    min-height: 1em;
    padding-left: 2px;
    font-size: .8em;
    text-align: center;
    font-weight: 800;
}

.vio-profile {
    padding: 0.22rem;
    text-align: center;
    font-size: .7em;
    border-radius: 3%;
}

/* With the personnel number gone from this box, the profile badge would leave a gap at the bottom.
   Sit it on the lower edge so initials and badge frame the box as before. Drivers without a card
   have no badge at all, and the vehicle list uses this box for other content - hence the scope. */
#drivers-list .circle {
    display: flex;
    flex-direction: column;
}

#drivers-list .circle .vio-profile {
    margin-top: auto;
}

.list-tile .driver-infos, .list-tile .vehicle-infos {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 8rem;
    letter-spacing: 0;
}

/* The personnel number moved out of the 3.3rem initials box, where long numbers had nowhere to go.
   Here it has the full column width, and `margin-top: auto` drops it onto the bottom edge - that
   collects ALL of the tile's leftover height into one gap above it, instead of space-between
   splitting it into two barely visible ones. The names close up at the top to free that height. */
.list-tile .driver-infos div.last-name {
    margin-top: 0;
}

.list-tile .driver-infos div.first-name {
    margin-top: 0.125rem;
}

.list-tile .driver-infos div.pnumber {
    margin: auto 0 0 0.5rem;
    font-size: .8em;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-tile .vehicle-infos {
    width: 9.7rem;
}

.list-tile div.last-name, .list-tile div.license-plate {
    margin: 0.5rem 0 0 0.5rem;
    font-size: 1em;
    color: var(--text);
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.list-tile div.first-name, .list-tile div.card-number {
    margin: 0.25rem 0 0 0.5rem;
    font-size: .8em;
    color: var(--text);
    text-align: left;
}

.list-tile div.unit-manufacturer {
    margin: 0 0 0 0.5rem;
    font-size: .7em;
    color: var(--text);
}

.list-tile div.attention {
    position: absolute;
    margin-left: 0.5rem;
    bottom: 0;
    width: 4rem;
    border-bottom: 0.25rem solid var(--red);
}

.list-tile div.advanced-infos {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 3.5rem;
}

#vehicles-list .list-tile div.advanced-infos {
    width: 2.25rem;
}

.list-tile div.warning, .list-tile div.check, .list-tile div.download {
    display: flex;
    flex-direction: row;
    margin-right: .15rem;
    font-size: .8em;
    text-align: right;
    color: var(--text);
    align-self: flex-end;
}

.list-tile div.warning {
    margin: .5rem .15rem .5rem 0;
   
}

.list-tile div.download.red {
    color: var(--red);
}

.list-tile div.download.yellow {
    color: var(--yellow);
}

.list-tile div.download.status-badge {
    padding: 0 .5rem;
    color: var(--text-dark);
    background-color: var(--green);
    border-radius: 1rem;
}

.list-tile div.download.status-badge.red {
    color: var(--text);
    background-color: var(--red);
}

.list-tile div.download.status-badge.yellow {
    color: var(--text-dark);
    background-color: var(--yellow);
}

.list-tile .check span,
.list-tile .download span {
    padding: 0 .5rem;
    color: var(--text-dark);
    background-color: var(--green);
    border-radius: 1rem;
}

.list-tile .check span.red,
.list-tile .download span.red {
    padding: 0 .5rem;
    color: var(--text);
    background-color: var(--red);
    border-radius: 1rem;
}

.list-tile .check span.yellow,
.list-tile .download span.yellow {
    padding: 0 .5rem;
    color: var(--text-dark);
    background-color: var(--yellow);
    border-radius: 1rem;
}

.list-tile .check i.green,
.list-tile .download i.green {
    color: var(--green);
}

.list-tile .check i.red,
.list-tile .download i.red {
    color: var(--red);
}

.list-tile .check i.yellow,
.list-tile .download i.yellow {
    color: var(--yellow);
}

/* TAB START */
.sub-menu {
    padding: 0 0.125rem;
    width: 10rem;
    display: flex;
    flex-flow: column;
    gap: 0.125rem;
    overflow: hidden;
}

.sub-menu.wide {
    margin-top: .25rem;
    width: 11.25rem;
}

  /* Style the buttons inside the tab */
  .sub-menu button, .popup-menu button {
    width: 100%;
    background: var(--dbox);
    border: none;
    cursor: pointer;
    padding: .5rem .5rem;
    transition: 0.25s;
    font-size: 1em;
    text-align: left;
    color: var(--text);
  }

  .sub-menu button:not(.sub-menu button.child-tab), .popup-menu button
  {
    border-left: 0.25rem solid var(--dbox)
  }

  .sub-menu button.disabled
  {
    opacity: .6;
  }

  .sub-menu button.disabled:hover
  {
     background-color: var(--dbox);
  }

  /* Change background color of buttons on hover */
  .sub-menu button:hover:not(.sub-menu button.child-tab), .popup-menu button:hover {
    background-color: var(--sel);
    border-left: 0.25rem solid var(--sel);
  }

  .sub-menu button:hover:not(.sub-menu button.child-tab), .popup-menu button:hover {
    background-color: var(--sel);
    border-left: 0.25rem solid var(--sel);
  }

  /* Create an active/current tablink class */
  .sub-menu button.active:not(.sub-menu button.child-tab), .popup-menu button.active {
    border-left: 0.25rem solid var(--hl);
    background-color: var(--sel);
  }

  .sub-menu button.child-tab {
    display: none;
    margin-left: 1rem;
    width: calc(100% - 1rem);
  }

  .sub-menu button.child-tab.active {
    display: none;
    margin-left: 1rem;
    width: calc(100% - 1rem);
    background-color: var(--sel);
    border-bottom: 0.125rem solid var(--hl);
  }

  .sub-menu #driver-communication {
    display: flex;
    flex-direction: row;
    gap: 0.125rem;
    margin-top: 1rem;
    width: 100%;
  }

.sub-menu #driver-communication button {
    padding: 0.4rem 0 0.15rem 0;
    width: calc(100% - 0.125rem);
    border-left: none;
}

.sub-menu #driver-communication button svg {
    height: 1.25rem;
    width: 100%;
    padding: 0;
}

.sub-menu #driver-communication button svg.fa-square-whatsapp {
    color: #5ada16;
}

/* Style the tab content */
.tab-container {
    display: none;
    margin: 1rem 0 0 1rem;
    padding-right: 1rem;
    height: calc(100vh - 4.25rem);
    width: 100%;
    color: var(--text);
    overflow-x: hidden;
}

#content.wide .tab-container {
    height: calc(100vh - 1rem);
}

.tab-container.filter {
    margin-top: 0;
}

.popup .tab-container {
    margin: 1rem 0 0 0;
}

.tab-container.scroll {
    overflow-y: scroll !important;
}

.tab-container.active, .sub-menu button.child-tab.visible {
    display: flex;
    flex-direction: column;
}

  .tab-content {
    height: auto;
    width: 100%;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
  }

  .tab-sidebar {
    margin-left: .125rem;
    width: 15rem;
  }

  .tab-container p.date {
    width: 5rem;
    float: left;
    padding-top: 2.5rem;
    margin-right: 0.5rem;
  }

  .tab-container svg.zs {
    margin-bottom: 2rem;
  }

  #master-data.tab-container {
    margin-right: 1rem;
  }
/* TAB END */

/* DROPDOWN */
.ui.dropdown, label#cal {
    cursor: pointer;
    position: relative;
    display: flex;
    outline: none;
    text-align: left;
    background: var(--menubg);
}

.ui.dropdown .menu {
    cursor: auto;
    position: absolute;
    display: none;
    outline: none;
    top: 100%;
    width: -webkit-max-content;
    width: -moz-max-content;
    min-width: 100%;
    margin: 0em;
    padding: 0em 0em;
    background: var(--dropbg);
    font-size: 1em;
    text-shadow: none;
    text-align: left;
    z-index: 11;
    will-change: transform, opacity;
    border-radius: .375rem;
}

.ui.dropdown .scrolling.menu {
    display: block;
    position: static;
    overflow-y: auto;
    border: none;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-width: 100% !important;
    max-height: 20rem;
    width: auto !important;
    border-top: 1px solid var(--sel);
}

.ui.dropdown.dropdown .menu > .input {
    width: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0.5rem;
    min-width: 10rem;
}

.ui.dropdown .menu > .divider {
    border-top: 1px solid var(--bg);
    height: 0em;
    margin: 0.5em 0em;
}

.ui.dropdown .menu > .header {
    margin: 0.75rem 0rem;
    padding: 0em 0.75rem;
    color: var(--text);
    font-size: 0.85em;
    font-weight: bold;
    text-transform: uppercase;
}

.ui.dropdown .menu > .item {
    position: relative;
    cursor: pointer;
    display: block;
    border: none;
    height: auto;
    text-align: left;
    border-top: none;
    line-height: 1em;
    color: var(--text);
    padding: 0.75rem !important;
    font-size: 1em;
    -webkit-touch-callout: none;
}

.ui.dropdown .menu > .item.selected {
background: var(--sel);
}

.ui.dropdown .menu > .item:hover {
    background: var(--sel);
    z-index: 13;
}

.ui.dropdown > .text {
    display: inline-block;
    padding: 0.2rem 0.3rem;
    width: 100%;
    -webkit-transition: none;
    transition: none;
    align-self: center;
}

.ui.dropdown > .ui.label.transition.visible {
    padding: 0.5rem 0.3rem;
    font-size: 1em;
}

.ui.dropdown .menu > .input:not(.transparent) input {
    padding: 0.5em 1em;
    margin: 0;
}

.ui.dropdown div.icon svg {
    top: 0.325rem;
    height: 1.25rem;
    width: 1.25rem;
}

.ui.dropdown.active .svg-inline--fa:not(div.icon svg), .ui.dropdown.highlight .svg-inline--fa:not(div.icon svg)  {
    color: var(--hl);
}

.ui.dropdown .svg-inline--fa, label .svg-inline--fa {
    padding: 0;
    height: 1rem;
    width: 1rem;
    align-self: center;
}

.ui.multiple.dropdown .svg-inline--fa {
    height: 1rem;
    width: 3rem;
}

.ui.dropdown.green {
    border-color: var(--green) !important
}

.ui.multiple.dropdown>.label~.text {
    display: none;
}

/* DROPDOWN END */

/* TABLES */

table {
    display: table;
    border-collapse: collapse;
    text-indent: initial;
    border-spacing: 0;
    box-sizing: border-box;
    border: none;
    white-space: nowrap;
}

table thead {
    display: table-header-group;
    background-color: var(--bg);
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border: none;
}

td, tr {
    vertical-align: middle;
}

.table {
    width: 100%;
}

.table.selectable tbody tr:not(.no-hover):hover {
background: var(--hov);
}

.table tbody tr:last-child {
    border: none;
}

.table th, .table td {
    display: inline-block;
    padding: 0.325rem 0.5rem;
    width: 5.75rem;
    text-align: left;
    font-weight: 300;
    font-size: .9em;
    line-height: 1.2em;
    color: var(--text);
    cursor: default;
}

.table.wide th, .table.wide td {
    width: 3.5rem;
    text-align: center;
}

.table th {
    text-transform: uppercase;
}

.table tr {
    display: table-row;
    border-bottom: 0.05rem solid var(--border-dark);
}

.table td.copy-field {
    cursor: pointer;
}

.table td:first-child svg {
    width: 100%;
}
.table.due-dates tr.advance-warning .id-card {
    color: var(--text);
 }
.table.due-dates tr.warning .pass {
   color: var(--text);
}

.table.due-dates td:first-child svg {
    width: auto;
    margin-right: .5rem;
    padding: 0;
    line-height: 2rem;
    vertical-align: bottom;
}

.due-dates svg.driver-card, .report-units svg.driver-card, .section svg.driver-card, svg.color.driver-card {
    color: var(--doc-driver-card);
}

.due-dates svg.driving-license, svg.color.driving-license {
    color: var(--doc-driving-license);
}

.due-dates svg.fa-diamond, svg.color.fa-diamond {
    color: #ff7300;
}

.due-dates svg.id-card, svg.color.id-card {
    color: #d8d8b0;
}

.due-dates svg.pass, svg.color.pass {
    color: #9d2a08;
}

.table .svg-inline--fa {
    height: 1rem;
    width: 1rem;
}

.red {
    color: var(--red)
}

.yellow {
    color: var(--yellow);
}

.blue {
    color: var(--blue)
}

svg rect:focus {
    outline: none;
}

svg .red {
    fill: var(--red);
    font-size: 1.1em;
}

.green {
    color: var(--green)
}

.overview-tab .table {
    margin: 0 0.5rem 1.5rem 0;
}

.overview-tab .table thead tr {
    background: var(--hov);
}

.overview-tab .table th, .overview-tab .table td {
    width: 10rem;
}

.overview-tab .table th:first-child, .overview-tab .table td:first-child {
    padding-left: .5rem;
    width: 12rem;
}

.overview-tab .table th:last-child, .overview-tab .table td:last-child {
    width: auto;
}

.overview-tab .table thead tr {
    border-bottom: 0.05rem solid var(--border);
}

.overview-tab .driving-license-controls .table th:first-child, .overview-tab .driving-license-controls .table td:first-child {
    width: 9.5rem;
}

.overview-tab .driving-license-controls .table th:nth-child(2), .overview-tab .driving-license-controls .table td:nth-child(2) {
    width: 6.75rem;
}

.overview-tab .driving-license-controls .table th:nth-child(3), .overview-tab .driving-license-controls .table td:nth-child(3) {
    width: 3.75rem;
}

.overview-tab .driving-license-controls .table th:nth-child(4), .overview-tab .driving-license-controls .table td:nth-child(4) {
    width: 9.5rem;
}

.overview-tab .driving-license-controls .table th:last-child, .overview-tab .driving-license-controls .table td:last-child {
    width: 5.5rem;
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#advanced-training {
    margin-bottom: 0;
}

#activities-details-tab .grid, .night-hours-view .grid {
    margin: 0;
}

#activities-details-tab .grid .column:not(:last-child), #shifts-overview-tab .grid .column:not(:last-child), .night-hours-view .grid .column:not(:last-child) {
    padding-right: 1rem;
}

/* No padding at all: FontAwesome's `.svg-inline--fa` pads every icon by .813rem on both sides, and
   with only the left side taken away the right padding pushed each icon 6.5px left of the column
   centre. The glyphs fill their 1.25rem box, so a centred box is a centred mark. */
#activities-details-tab .tl-date-map svg, #vehicle-activities .tl-date-map svg {
    width: 1.25rem;
    padding: 0;
    cursor: pointer;
}

#activities-details-tab svg.fa-circle-chevron-down, #vehicle-activities svg.fa-circle-chevron-down, .night-hours-view svg.fa-circle-chevron-down {
    height: 1.3rem;
    width: 1.3rem;
    /* The icon is centred in the label, far from any container's right edge, so a right/bottom clip
       can only be the SVG's own box. FontAwesome ships icons with overflow:visible; this app's setup
       leaves the SVG at the UA default overflow:hidden, which shaves the disc's far (bottom/right)
       edge - visible on high-DPI screens. Restore the intended overflow. */
    overflow: visible;
    transition: transform .2s ease;
}

#activities-details-tab .day-wrapper, #vehicle-activities .day-wrapper {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .5rem 1rem 0 1rem;
    height: auto;
    background-color: var(--menubg);
}

.activity-timeline-selection {
    position: relative;
    display: block;
    min-width: 0;
    width: 100%;
    height: 7rem;
    box-sizing: border-box;
    vertical-align: top;
    padding: .1rem .5rem;
    border: 1px solid transparent;
    border-radius: .25rem;
}

.activity-timeline-selection.selected {
    border-color: var(--hl);
    background-color: var(--hov);
}

#activities-details-tab .activity-timeline-selection > svg:not(.selection-toggle),
#vehicle-activities .activity-timeline-selection > svg:not(.selection-toggle) {
    display: block;
    width: 100%;
    height: 100%;
}

/* The toggle sits inside the timeline's top strip, vertically centred on the "Verstoesse /
   Genutzte Fahrzeuge" label row (drawn at y=11 in the SVG) rather than floating above the tile
   on its own; right:0 keeps it flush with the tile's right edge. */
#activities-details-tab .activity-timeline-selection svg.selection-toggle,
#vehicle-activities .activity-timeline-selection svg.selection-toggle {
    position: absolute;
    top: -0.3rem;
    right: 0;
    z-index: 1;
    width: 1.25rem;
    height: 1.25rem;
    padding: .2rem;
}

/* activity timeline zoom: a two-sided 15-minute slider crops the timeline SVG to
   the chosen window and stretches it to full width. The cell now grows to fit the
   control, so the SVG keeps its own fixed height instead of filling the cell. */
#activities-details-tab .activity-timeline-selection,
#vehicle-activities .activity-timeline-selection {
    height: auto;
}

#activities-details-tab .activity-timeline-selection > svg:not(.selection-toggle),
#vehicle-activities .activity-timeline-selection > svg:not(.selection-toggle) {
    height: 7rem;
}

/* When zoomed the SVG is cropped to the bar band and stretched horizontally
   (preserveAspectRatio="none"), which distorts labels and markers. Only the
   activity bars stay visible; the ruler below carries the undistorted time
   axis and the bars keep their tooltips. */
svg.tl-zoomed g.tl,
svg.tl-zoomed text,
svg.tl-zoomed image,
svg.tl-zoomed polygon,
svg.tl-zoomed rect.st,
svg.tl-zoomed rect.lp,
svg.tl-zoomed rect.sd,
svg.tl-zoomed rect.tvu,
svg.tl-zoomed rect[style*="fill:blue"] {
    display: none;
}

.tl-zoom {
    margin-top: 0;
}

/* the ruler row keeps its height even when empty, so the tile is the same
   height zoomed or not; only its border and ticks appear while zoomed */
.tl-zoom-ruler {
    position: relative;
    height: .7rem;
    margin-bottom: 0;
    border-top: 1px solid transparent;
}

.tl-zoom.is-zoomed .tl-zoom-ruler {
    border-top-color: var(--border);
}

.tl-zoom-tick {
    position: absolute;
    top: 2px;
    font-size: .62rem;
    color: var(--text-mid);
    white-space: nowrap;
    transform: translateX(-50%);
    font-variant-numeric: tabular-nums;
}

.tl-zoom-tick::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 1px;
    height: 2px;
    background: var(--border);
}

.tl-zoom-slider {
    position: relative;
    height: 1.2rem;
}

.tl-zoom-track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--hov);
    border-radius: 2px;
}

.tl-zoom-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--hl);
    border-radius: 2px;
}

.tl-zoom-slider input[type="range"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.2rem;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    pointer-events: none;
}

.tl-zoom-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hl);
    border: 2px solid var(--menubg);
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0, 0, 0, .5);
}

.tl-zoom-slider input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--hl);
    border: 2px solid var(--menubg);
    cursor: pointer;
}

.tl-zoom-slider input[type="range"]::-moz-range-track {
    background: transparent;
    border: none;
}

.tl-zoom-to {
    z-index: 2;
}

.tl-zoom-readout {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .4rem;
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--text-mid);
}

/* the leading selector beats the global [type="text"] rule; we also have to undo
   its height (.9rem, too short for the text) and its asymmetric margin
   (.75rem right / 0 left, which shoved the separator toward the right field) */
.tl-zoom-readout .tl-zoom-time {
    width: 4.2em;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: .28rem .45rem;
    text-align: center;
    font-size: .8rem;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: var(--menubg);
    border: 1px solid var(--border);
    border-radius: .2rem;
}

.tl-zoom-readout .tl-zoom-time:focus {
    outline: none;
    border-color: var(--hl);
}

/* a drawn dash (not a glyph) so it is always vertically centred between the fields */
.tl-zoom-sep {
    flex: none;
    width: .7em;
    height: 2px;
    background: var(--text-mid);
    border-radius: 1px;
}

/* only shown while zoomed: a subtle "back to full day" control, sitting in the
   flow right after the time fields */
.tl-zoom-reset {
    flex: none;
    display: none;
    align-items: center;
    background: none;
    border: none;
    padding: .1rem .25rem;
    cursor: pointer;
    color: var(--tool);
    font-size: .8rem;
    line-height: 1;
}

.tl-zoom.is-zoomed .tl-zoom-reset {
    display: inline-flex;
}

.tl-zoom-reset:hover {
    color: var(--hl);
}

/* activity detail: staggered day-tile reveal (replaces the #tab-loader spinner) */
@keyframes actTileRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes actContentFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
#activities-details-tab .day-wrapper.act-reveal,
#vehicle-activities .day-wrapper.act-reveal,
.night-hours-view .night-wrapper.act-reveal,
#activities-details-tab .accordion.act-reveal,
#vehicle-activities .accordion.act-reveal,
.night-hours-view .accordion.act-reveal {
    animation: actTileRise .45s ease both;
    animation-delay: calc(var(--i, 0) * 65ms);
}
#activities-details-tab .day-wrapper.act-reveal .tl-date-map,
#vehicle-activities .day-wrapper.act-reveal .tl-date-map,
#activities-details-tab .day-wrapper.act-reveal .activity-timeline-selection,
#vehicle-activities .day-wrapper.act-reveal .activity-timeline-selection,
.night-hours-view .night-wrapper.act-reveal .tl-date-map,
.night-hours-view .night-wrapper.act-reveal .night-timeline {
    animation: actContentFade .4s ease both;
    animation-delay: calc(var(--i, 0) * 65ms + 280ms);
}
@media (prefers-reduced-motion: reduce) {
    #activities-details-tab .day-wrapper.act-reveal,
    #vehicle-activities .day-wrapper.act-reveal,
    .night-hours-view .night-wrapper.act-reveal,
    #activities-details-tab .accordion.act-reveal,
    #vehicle-activities .accordion.act-reveal,
    .night-hours-view .accordion.act-reveal,
    #activities-details-tab .day-wrapper.act-reveal .tl-date-map,
    #vehicle-activities .day-wrapper.act-reveal .tl-date-map,
    #activities-details-tab .day-wrapper.act-reveal .activity-timeline-selection,
    #vehicle-activities .day-wrapper.act-reveal .activity-timeline-selection,
    .night-hours-view .night-wrapper.act-reveal .tl-date-map,
    .night-hours-view .night-wrapper.act-reveal .night-timeline {
        animation: none;
    }
}

#activities-details-tab .activity-timeline-log-button,
#vehicle-activities .activity-timeline-log-button {
    width: 1.5rem !important;
    height: 1.5rem;
    cursor: pointer;
    color: var(--tool);
}

#activities-details-tab .activity-timeline-log-button:hover,
#vehicle-activities .activity-timeline-log-button:hover {
    color: var(--hl);
}

#activities-details-tab .activity-timeline-log-button.active,
#vehicle-activities .activity-timeline-log-button.active {
    color: var(--hl);
}

/* The master pin repeats the day tile's pin in the info bar. Highlighted when every day is
   pinned, dimmed while only some of them are, so the bar shows the state at a glance. */
/* Line the pin up with the pins of the day tiles below: those sit at the right edge of the
   timeline column - the day wrapper's 1rem padding away from the row's right edge - inset by
   their own .2rem padding and by the tile's 1px transparent border they are positioned against. */
#activities-details-tab .activity-timeline-select-all,
#vehicle-activities .activity-timeline-select-all {
    margin: 0 calc(1.2rem + 1px) 0 0;
}

/* The bar's spans float right, so the icon sits in a block of its own: a top margin centres it
   on the report icon, free of baseline maths. The width beats the bar's generic "span svg" rule. */
#activities-details-tab .activity-timeline-select-all-toggle,
#vehicle-activities .activity-timeline-select-all-toggle {
    display: block;
    width: 1.25rem !important;
    height: 1.25rem;
    margin: .2rem 0 0 0;
    padding: 0;
}

#activities-details-tab .activity-timeline-select-all-toggle:hover,
#vehicle-activities .activity-timeline-select-all-toggle:hover {
    fill: var(--hl);
}

#activities-details-tab .activity-timeline-select-all-toggle.partial,
#vehicle-activities .activity-timeline-select-all-toggle.partial {
    fill: var(--hl);
    opacity: .5;
}

/* The legend in the info bar is coloured like the day summary: the symbol itself carries the
   activity colour instead of the underline the symbols wear elsewhere. The night views (shift
   and calendar day) share the same info-bar legend, so they get the identical look. */
#activities-details-tab .activity-legend.driving svg,
#vehicle-activities .activity-legend.driving svg,
.night-hours-view .activity-legend.driving svg { fill: #ff0000; border-bottom: none; }
#activities-details-tab .activity-legend.work svg,
#vehicle-activities .activity-legend.work svg,
.night-hours-view .activity-legend.work svg { fill: var(--blue); border-bottom: none; }
#activities-details-tab .activity-legend.available svg,
#vehicle-activities .activity-legend.available svg,
.night-hours-view .activity-legend.available svg { fill: var(--yellow); border-bottom: none; }
#activities-details-tab .activity-legend.break svg,
#vehicle-activities .activity-legend.break svg,
.night-hours-view .activity-legend.break svg { fill: #66ff33; border-bottom: none; }
#activities-details-tab .activity-legend.unknown svg,
#vehicle-activities .activity-legend.unknown svg,
.night-hours-view .activity-legend.unknown svg { border-bottom: none; }

#activities-details-tab  .day-wrapper svg image,  #vehicle-activities .day-wrapper svg image {
    cursor: pointer;
}

/* the accordion continues the day tile (same background), so the toggle sits
   inside it; the gap between days comes from the accordion's bottom margin */
#activities-details-tab .accordion, #vehicle-activities .accordion, .night-hours-view .accordion {
    background-color: var(--menubg);
    margin-bottom: .6rem;
}

/* These tab panels are fixed-height flex columns that scroll (overflow-y). A flex item whose
   overflow is not visible - the accordion (overflow:hidden) - gets an automatic minimum size of
   0, so once the day list is taller than the panel flexbox squeezes the accordions toward 0 and
   overflow:hidden then clips the toggle icon. Pin every row so the panel scrolls instead of
   squashing its children. */
#activities-details-tab > *, #vehicle-activities > *, .night-hours-view > * {
    flex-shrink: 0;
}

#activities-details-tab .accordion-item-label, #vehicle-activities .accordion-item-label, .night-hours-view .accordion-item-label {
    display: inline-flex;
    box-sizing: border-box;
    /* Same width as the date column (.tl-date-map) and lined up under it: the wrapper insets its
       first column by its own 1rem left padding, which the accordion below does not have, so the
       button is nudged 1rem to sit centred right under the date and weekday. */
    width: 5rem;
    margin: 0 0 0 1rem;
    justify-content: center;
    align-items: center;
    padding: .2rem 0 .4rem;
    background: none;
    color: var(--tool);
    cursor: pointer;
}

#activities-details-tab .accordion-item-label:hover, #vehicle-activities .accordion-item-label:hover, .night-hours-view .accordion-item-label:hover {
    color: var(--hl);
}

#vehicle-activities .accordion-item-content {
    max-width: 65rem;
}

/* Smooth expand/collapse instead of an instant jump. Baseline: the content is a grid whose single
   row animates between 0fr (collapsed) and 1fr (open), so the real content height drives it without
   a magic max-height. This animates in engines that interpolate grid tracks (e.g. Firefox). Chromium
   is the exception - it will not interpolate a flexible track growing out of a 0fr row, only one
   collapsing into it, so there the panel snapped open while collapsing stayed smooth. The @supports
   block below gives every engine that has interpolate-size (Chromium 129+) an equivalent
   height 0<->auto animation that expands smoothly too. Scoped to these three timeline views; the
   app's other accordions keep their instant toggle. */
#activities-details-tab .accordion-item-content, #vehicle-activities .accordion-item-content, .night-hours-view .accordion-item-content {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    padding: 0;
    overflow: hidden;
    transition: grid-template-rows .3s ease;
    margin-left: .75rem;
}

#activities-details-tab .accordion-item-content > *, #vehicle-activities .accordion-item-content > *, .night-hours-view .accordion-item-content > * {
    min-height: 0;
    overflow: hidden;
}

/* The vehicle detail carried its padding on the content box (zeroed above so the collapsed row is
   truly 0 high); move it onto the inner child so it clips away together with the animation. */
#vehicle-activities .acc-body {
    padding: 1em;
}

/* The open content is inset .75rem on the left but its padding is zeroed below, so the
   right-hand tiles otherwise sit flush against the edge. Mirror the left inset on the right
   for the driver activity detail and both night views (the vehicle detail is capped at 65rem
   and already stays clear, so it is deliberately left out). */
#activities-details-tab .accordion-item-content, .night-hours-view .accordion-item-content {
    margin-right: .75rem;
}

/* The generic open-accordion rule (.accordion input:checked ~ .accordion-item-content) re-adds
   `padding: 1em`, which the collapsed base rule above deliberately zeroes. The driver/vehicle
   activity selectors carry an id, so they already outweigh it; the night view is class-only and
   lost, so on open it gained 14px of side padding - the content stopped filling the width (a gap
   on the right) and shifted 28px when toggled. Keep the padding zeroed here too so all three views
   fill the same width and the expand/collapse animation has no width reflow to jump on. */
#activities-details-tab .accordion input:checked ~ .accordion-item-content,
#vehicle-activities .accordion input:checked ~ .accordion-item-content,
.night-hours-view .accordion input:checked ~ .accordion-item-content {
    grid-template-rows: 1fr;
    padding: 0;
}

/* Chromium cannot grow a 0fr track (see above), so it snapped these panels open. Where
   interpolate-size exists it lets height:auto join a transition, so swap the grid animation for a
   height 0<->auto one that expands as smoothly as it collapses. Other engines keep the grid path. */
@supports (interpolate-size: allow-keywords) {
    #activities-details-tab, #vehicle-activities, .night-hours-view {
        interpolate-size: allow-keywords;
    }

    #activities-details-tab .accordion-item-content, #vehicle-activities .accordion-item-content, .night-hours-view .accordion-item-content {
        display: block;
        height: 0;
        transition: height .3s ease;
    }

    #activities-details-tab .accordion input:checked ~ .accordion-item-content,
    #vehicle-activities .accordion input:checked ~ .accordion-item-content,
    .night-hours-view .accordion input:checked ~ .accordion-item-content {
        height: auto;
    }
}

/* On the grid path a 0fr track still reserves the item's own padding, margin and border (see the
   shift list for the long version), so the vehicle detail held 28px of every collapsed day open.
   The driver and night panels carry their inset further in and stay at zero, so only .acc-body
   needs folding. The side padding is untouched - it costs no height. */
@supports not (interpolate-size: allow-keywords) {
    #vehicle-activities .acc-body {
        padding-top: 0;
        padding-bottom: 0;
        transition: padding-top .3s ease, padding-bottom .3s ease;
    }

    #vehicle-activities .accordion input:checked ~ .accordion-item-content .acc-body {
        padding-top: 1em;
        padding-bottom: 1em;
    }
}

#activities-details-tab table, .night-hours-view table {
    table-layout: fixed;
}

/* The day summary is split into two stacked rows: the four coloured activity types on top
   (dds-primary), the uncoloured unknown time plus the event/check/violation/vehicle counts
   below (dds-secondary). border-box keeps the 1% padding inside the column width so the
   columns sum to 100% and do not overflow their container. */
#activities-details-tab .driver-day-summary th, #activities-details-tab .driver-day-summary td {
    padding: 1%;
    text-align: center;
    box-sizing: border-box;
}

#activities-details-tab .dds-primary th, #activities-details-tab .dds-primary td {
    width: 15%;
}

/* The working-hours total (driving + work) gets the wide last column, like the night
   summary's total. Its two symbols are joined by a plus so it reads as their sum. */
#activities-details-tab .dds-primary th:last-child, #activities-details-tab .dds-primary td:last-child {
    width: 40%;
}

#activities-details-tab .dds-plus {
    margin: 0 .2rem;
    vertical-align: middle;
    color: var(--text);
    position: relative;
    top: -.5rem;
}

#activities-details-tab .dds-secondary {
    margin-top: .75rem;
}

#activities-details-tab .dds-secondary th, #activities-details-tab .dds-secondary td {
    width: 15%;
}

#activities-details-tab .dds-secondary th:last-child, #activities-details-tab .dds-secondary td:last-child {
    width: 40%;
}

/* Colour the activity symbols in their timeline colour instead of a coloured underline; the
   unknown symbol and the event icons stay uncoloured in the second row. */
#activities-details-tab .driver-day-summary .driving svg { fill: #ff0000; border-bottom: none; }
#activities-details-tab .driver-day-summary .work svg { fill: var(--blue); border-bottom: none; }
#activities-details-tab .driver-day-summary .available svg { fill: var(--yellow); border-bottom: none; }
#activities-details-tab .driver-day-summary .break svg { fill: #66ff33; border-bottom: none; }
#activities-details-tab .driver-day-summary .unknown svg { border-bottom: none; }

/* The vehicle day summary mirrors the driver's: four coloured activity types plus the
   driving+work total on top (vds-primary), and - since a vehicle has no card-specific counts -
   only the drivers that drove it on the second row (vds-secondary). */
#vehicle-activities .vehicle-day-summary {
    table-layout: fixed;
}

#vehicle-activities .vehicle-day-summary th, #vehicle-activities .vehicle-day-summary td {
    padding: 1%;
    text-align: center;
    box-sizing: border-box;
}

#vehicle-activities .vds-primary th, #vehicle-activities .vds-primary td {
    width: 15%;
}

/* The working-hours total (driving + work) gets the wide last column, like the driver summary;
   its two symbols are joined by a plus so it reads as their sum. */
#vehicle-activities .vds-primary th:last-child, #vehicle-activities .vds-primary td:last-child {
    width: 40%;
}

#vehicle-activities .vds-plus {
    margin: 0 .2rem;
    vertical-align: middle;
    color: var(--text);
    position: relative;
    top: -.5rem;
}

/* A single full-width cell listing the drivers, centred by the base rule like the driver summary.
   table-layout:fixed leaves a lone column at its content width (left-aligned in the table), so
   force it to span the whole table - only then does the centred content sit in the middle. */
#vehicle-activities .vds-secondary {
    margin-top: .75rem;
}

#vehicle-activities .vds-secondary th, #vehicle-activities .vds-secondary td {
    width: 100%;
}

/* Several drivers: set each name apart with a gap and a dot, so two names never read as one long
   name. The first name has no leading separator, and a single driver shows none at all. */
#vehicle-activities .vds-secondary .vds-driver:not(:first-child)::before {
    content: "\00B7";
    margin: 0 .65rem;
}

/* Colour the activity symbols in their timeline colour instead of a coloured underline, exactly
   like the driver day summary. */
#vehicle-activities .vehicle-day-summary .driving svg { fill: #ff0000; border-bottom: none; }
#vehicle-activities .vehicle-day-summary .work svg { fill: var(--blue); border-bottom: none; }
#vehicle-activities .vehicle-day-summary .available svg { fill: var(--yellow); border-bottom: none; }
#vehicle-activities .vehicle-day-summary .break svg { fill: #66ff33; border-bottom: none; }

#activities-details-tab .driver-card-insertions td, #activities-details-tab .driver-card-insertions th {
    padding: 1%;
    width: 7%;
}

#activities-details-tab .driver-card-insertions td:first-child, #activities-details-tab .driver-card-insertions th:first-child {
    width: 17%;
}

#activities-details-tab .driver-card-insertions td:nth-child(3), #activities-details-tab .driver-card-insertions th:nth-child(3) {
    width: 12%;
}

#activities-details-tab .driver-card-insertions td:nth-child(4), #activities-details-tab .driver-card-insertions th:nth-child(4) {
    width: 22%;
}

#activities-details-tab .driver-card-insertions td:nth-child(5), #activities-details-tab .driver-card-insertions th:nth-child(5) {
    width: 13%;
}

#activities-details-tab table.driver-card-insertions svg {
    padding: 0 .25rem 0 0;
    vertical-align: text-bottom;
}

#activities-details-tab table.driver-card-insertions svg.fa-rotate-180 {
    padding: 0 0 0 .25rem;
}

#activities-details-tab table.vehicle-activities td {
    display: inline-flex;
    flex-direction: column;
    width: 31%;
    padding: 1%;
}

#activities-details-tab table.vehicle-activities td div.activities {
    display: inline-flex;
    flex-direction: row;
    gap: 0.5rem;
    margin: 0 auto;
}

#activities-details-tab table.vehicle-activities td div.activities div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: .25rem;
    color: var(--text);
    letter-spacing: 0;
}

#activities-details-tab table.vehicle-activities td div.license-plate {
    margin-bottom: .5rem;
    border-bottom: 0.05rem solid var(--border-dark);
    text-align: center;
}

#activities-details-tab table.vehicle-activities td svg {
    width: auto;
    fill: var(--text-dark);
}

/* Use the reworked coloured icons (like the day/night summaries): colour each activity
   symbol itself instead of putting a dark icon on a coloured pill. */
#activities-details-tab table.vehicle-activities td div.vehicle-driving svg {
    fill: var(--red);
}

#activities-details-tab table.vehicle-activities td div.vehicle-work svg {
    fill: var(--blue);
}

#activities-details-tab table.vehicle-activities td div.vehicle-available svg {
    fill: var(--yellow);
}

#activities-details-tab table.vehicle-activities td div.vehicle-break svg {
    fill: var(--green);
}
#activities-details-tab .violations-evaluation th, #activities-details-tab .violations-evaluation td {
    padding: 1%;
    width: 8%;
}

#activities-details-tab .violations-evaluation th:first-child, #activities-details-tab .violations-evaluation td:first-child {
    width: 16%;
}

#activities-details-tab .violations-evaluation th:nth-child(3), #activities-details-tab .violations-evaluation td:nth-child(3) {
    width: 10%;
}

#activities-details-tab .violations-evaluation th:last-child, #activities-details-tab .violations-evaluation td:last-child {
    width: 58.5%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: break-spaces;
}

#activities-details-tab .border-crossings th, #activities-details-tab .border-crossings td {
    padding: 1%;
    width: 18%;
}

#activities-details-tab .loads-unloads th, #activities-details-tab .loads-unloads td {
    padding: 1%;
    width: 22%;
}

#activities-details-tab .events-faults th:first-child, #activities-details-tab .events-faults td:first-child {
    width: 13.5%;
}

#activities-details-tab .events-faults th, #activities-details-tab .events-faults td {
    padding: 1%;
    width: 10%;
}

#activities-details-tab .events-faults th:nth-child(2), #activities-details-tab .events-faults td:nth-child(2) {
    width: 23.5%;
}

#activities-details-tab .events-faults th:last-child, #activities-details-tab .events-faults td:last-child {
    width: 45%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: break-spaces;
}

#activities-details-tab .traffic-control th, #activities-details-tab .traffic-control td {
    padding: 1%;
    width: 10%;
}

#activities-details-tab .traffic-control th:nth-child(2), #activities-details-tab .traffic-control td:nth-child(2) {
    width: 13.5%;
}

#activities-details-tab .traffic-control th:nth-child(3), #activities-details-tab .traffic-control td:nth-child(3) {
    width: 21%;
}

#activities-details-tab .traffic-control th:last-child, #activities-details-tab .traffic-control td:last-child {
    width: 30%;
}

#activities-details-tab .traffic-control svg {
    padding: 0 .5rem 0 0;
    vertical-align: text-bottom;
}

/* Night hours. Mirrors the details tab layout, but one row per night or per calendar day
   instead of per calendar day only. Scoped by class, not by the container id: the shift and
   the calendar view are two containers and would otherwise need every rule here twice.
   The timeline comes from SvgGenerator::generateNightTimeline rather than the day timeline -
   the shift window spans two dates and does not fit the latter's fixed 0-1440 minute axis. */
.night-hours-view .night-wrapper {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    gap: .75rem;
    padding: 1rem 1rem 0 1rem;
    height: auto;
    background-color: var(--menubg);
}

/* The over-midnight view shows two dates next to a time axis, which does not fit the 5rem the
   other timeline views use - it takes the width off the timeline instead. Only this view widens;
   the calendar day shows a single date and stays narrow. All three have to move together: the
   grid column, the date cell inside it and the accordion button below, or the button stops
   sitting centred under the date. Bounded below at 1201px because everything stacks under
   75rem (=1200px), where the column goes full width. */
@media (min-width: 1201px) {
    #night-hours-tab .night-wrapper {
        grid-template-columns: 6.5rem minmax(0, 1fr);
    }

    #night-hours-tab .tl-date-map,
    #night-hours-tab .accordion-item-label {
        width: 6.5rem;
    }
}

.night-hours-view .night-timeline {
    min-width: 0;
    height: 7rem;
    align-self: center;
    display: flex;
    align-items: center;
}

/* Both night timelines take a fixed 7rem height (like the activity timeline) so their size does
   not scale with the column width - the shift view was tiny at FHD, where the inline summary
   narrows the column, and larger at QHD. The shift view's width is automatic (isotropic, from the
   viewBox, so bars are not stretched); the calendar view overrides width to 100% in has-zoom. */
.night-hours-view .night-timeline > svg {
    display: block;
    height: 7rem;
    width: auto;
    max-width: 100%;
}

/* Calendar-day view only: the timeline cell stacks the SVG and the zoom control just like
   the activity view, so the row grows downward and the other cells align to the top. The
   SVG takes the same fixed 7rem height as the activity timeline so the zoom crop keeps a
   constant height instead of springing with the window width. */
.night-hours-view .night-wrapper.has-zoom {
    align-items: start;
}

.night-hours-view .night-wrapper.has-zoom .night-timeline {
    flex-direction: column;
    align-items: stretch;
    align-self: start;
    height: auto;
}

.night-hours-view .night-wrapper.has-zoom .night-timeline > svg {
    height: 7rem;
    width: 100%;
}

/* The window, behind the bars. Marks the whole axis in the shift view and the one or two
   night parts of the day in the calendar view. */
.night-hours-view .nb {
    fill: var(--hl);
    fill-opacity: .12;
}

/* Calendar view: the day around the night, drawn greyed under the coloured night bars. The
   two classes beat the single-class .t0..t4 fill; the bar keeps its type's height. */
.night-hours-view .tg {
    fill: #666;
}

/* The night's total only ever appears labelled - in the summary table and in the accordion
   heading. The bare number that used to sit beside the timeline is gone. */
.night-hours-view .night-total {
    font-weight: 600;
}

.night-hours-view .night-summary th, .night-hours-view .night-summary td {
    padding: 1%;
    width: 15%;
    text-align: center;
    /* Without border-box the 1% padding is added on top of each column's width, so the
       columns sum past 100% and the table overflows its container (the label spilled out
       to the right). border-box folds the padding into the width. */
    box-sizing: border-box;
}

.night-hours-view .night-summary th:last-child, .night-hours-view .night-summary td:last-child {
    width: 40%;
}

/* The used-vehicles table below the night summary, mirroring the day summary's second table.
   Its single column spans the full width - placed after the 40% rule, it wins at equal
   specificity. */
.night-hours-view .night-summary-secondary {
    margin-top: .75rem;
}

.night-hours-view .night-summary-secondary th:last-child,
.night-hours-view .night-summary-secondary td:last-child {
    width: 100%;
}

/* Colour the summary symbols in their activity colour (matching the timeline bars) instead
   of showing a coloured line beneath a white icon; drop that underline. */
.night-hours-view .night-summary .driving svg { fill: #ff0000; border-bottom: none; }
.night-hours-view .night-summary .work svg { fill: var(--blue); border-bottom: none; }
.night-hours-view .night-summary .available svg { fill: var(--yellow); border-bottom: none; }
.night-hours-view .night-summary .break svg { fill: #66ff33; border-bottom: none; }

/* The global `span svg` rule pads every wrapped symbol with 1rem on each side, so each icon in
   the total column's header claims 3rem instead of the 1rem it draws. Two icons still fitted the
   inline summary; the third one a company gets from counting availability as night work pushed
   the header past the column's right edge. The symbols carry their own spacing here. */
.night-hours-view .night-summary th span svg {
    margin: 0 .3rem;
}

/* The "+" between the driving and work symbols in the total column's header, matching the
   day summary. top nudges it back to the icons' optical middle (they sit low on the line). */
.night-hours-view .night-summary .dds-plus {
    margin: 0 .2rem;
    vertical-align: middle;
    color: var(--text);
    position: relative;
    top: -.5rem;
}

.night-hours-view p.hint {
    color: var(--text2);
    font-size: .8rem;
    margin: .5rem 0 0 0;
}

/* Summary tables live in two places: inside the accordion (default) and, at wide
   resolutions, inline to the right of the timeline row. The Twig renders both copies;
   exactly one is visible at a time. Below the thresholds the inline copy stays hidden
   and the accordion keeps the summary, so nothing changes on narrower screens.
     - Activities > detailed overview : QHD and up (>= 2500px)
     - Night hours  > calendar day    : QHD and up (>= 2500px)
     - Night hours  > shift           : FHD and up (>= 1900px, includes QHD) */
.day-summary-inline,
.night-summary-inline {
    display: none;
}

/* FHD and up: the shift view has room for the summary beside the timeline. */
@media (min-width: 1900px) {
    /* Same widened date column as below FHD, now with the inline summary as a third track. */
    #night-hours-tab .night-wrapper {
        grid-template-columns: 6.5rem minmax(0, 1fr) auto;
    }
    #night-hours-tab .night-summary-inline {
        display: block;
        align-self: center;
        width: 24rem;
    }
    #night-hours-tab .night-summary-section {
        display: none;
    }
    /* Every night now carries the inline summary with the same coloured symbols, so the info-bar
       legend is redundant from FHD up - exactly as the activity detail hides its legend. Below
       1900px the summary sits in the accordion and the legend returns. */
    #night-hours-tab .activity-legend {
        display: none;
    }
}

/* QHD and up: the wider activity summary and the calendar-day night summary fit too. */
@media (min-width: 2500px) {
    #activities-details-tab .day-wrapper {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
    }
    #activities-details-tab .day-summary-inline {
        display: block;
        align-self: center;
        width: 30rem;
    }
    #activities-details-tab .day-summary-section {
        display: none;
    }

    /* The vehicle detailed overview gets the same inline summary beside the timeline. */
    #vehicle-activities .day-wrapper {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
    }
    #vehicle-activities .day-summary-inline {
        display: block;
        align-self: center;
        width: 30rem;
    }
    #vehicle-activities .day-summary-section {
        display: none;
    }

    /* The inline summary takes the timeline column's right edge - and with it the tile pins -
       30.75rem further left, so the info bar's pin follows to stay in the same column. */
    #activities-details-tab .activity-timeline-select-all,
    #vehicle-activities .activity-timeline-select-all {
        margin-right: calc(31.95rem + 1px);
    }

    /* Every day/night now carries the inline summary with the same symbols, so the legend in the
       info bar is redundant here. The calendar-day night view reaches its inline summary at this
       same 2500px (the shift view already dropped its legend at 1900px above). Below 2500px the
       summary sits in the accordion and the legend returns. */
    #activities-details-tab .activity-legend,
    #vehicle-activities .activity-legend,
    #night-hours-calendar-tab .activity-legend {
        display: none;
    }

    #night-hours-calendar-tab .night-wrapper {
        grid-template-columns: 5rem minmax(0, 1fr) auto;
    }
    /* The calendar row is taller than the timeline graphic (the zoom slider sits below it), so
       align to the top and centre the summary within the timeline's own 7rem height - it then
       sits level with the timeline bars, like the shift tab. */
    #night-hours-calendar-tab .night-summary-inline {
        display: grid;
        align-items: center;
        align-self: start;
        height: 7rem;
        width: 24rem;
    }
    #night-hours-calendar-tab .night-summary-section {
        display: none;
    }
}

#activities-list-tab svg.fa-circle-chevron-right {
    padding-bottom: 0 !important
}

.activities-table tr {
    display: flex;
    flex-direction: row;
}

/* Centre each row's cells vertically. The activity symbol in the first cell makes a row taller
   than its single line of text, and the flex row's default stretch left the text (and the other
   cells) sitting at the top, so the gap above the text was smaller than the gap below. Centring
   gives every row an equal top/bottom breathing space. Scoped to the three detailed tables:
   activity detail and both night-hours views. */
#activities-details-tab .activities-table tr,
.night-hours-view .activities-table tr {
    align-items: center;
}

/* Match the row height of the driver-card table sitting next to these (the "Fahrerkarte" tile),
   so the two line up. The shared cell rule below pads 1% on every side (~10px top and bottom on a
   wide table) and the first-cell symbol adds another .25rem, which made the rows noticeably taller
   than the neighbour. Trade the percentage vertical padding for a small fixed one and drop the
   symbol's extra vertical padding (align-items above now handles the centring). .52rem lands the
   flex row (whose 1rem symbol is a touch taller than the text line) on the same ~36.5px as the
   neighbour. Horizontal padding stays on the shared 1% rule. Scoped to the three detailed tables. */
#activities-details-tab .activities-table th, #activities-details-tab .activities-table td,
.night-hours-view .activities-table th, .night-hours-view .activities-table td,
#act-list .activities-table th, #act-list .activities-table td,
#driver-shifts .activities-table th, #driver-shifts .activities-table td {
    padding-top: .52rem !important;
    padding-bottom: .52rem !important;
}

#activities-details-tab .activities-table td svg,
.night-hours-view .activities-table td svg,
#act-list .activities-table td svg,
#driver-shifts .activities-table td svg {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.activities-table th, .activities-table td {
    padding: 1% !important;
    width: 12.2% !important;
}

#vehicle-activities .activities-table th, #vehicle-activities .activities-table td {
    padding: 1% !important;
    width: 9.5% !important;
}

#vehicle-activities .activities-table th:nth-child(8), #vehicle-activities .activities-table td:nth-child(8) {
    padding: 1% !important;
    width: 17.5% !important;
}

.activities-table {
    margin-bottom: 2rem;
}

.activities-table td:first-child svg {
    padding-left: 1rem;
    width: 1rem;
    height: 1rem;
    fill: var(--act-color, var(--text));
}

/* --act-color is set per row by the .act-* rules below and inherits down to the symbol; every
   other symbol keeps the plain text colour through the fallback. */
#activities-details-tab table svg, #activities-list-tab table svg, #act-weekly th svg, #driver-shifts-head .head-elements .cell svg, #vehicle-activities table svg, .night-hours-view table svg {
    height: 1rem;
    width: 1rem;
    fill: var(--act-color, var(--text));
    padding-bottom: 0.5rem;
}

/* A row of the detailed activity table wears the colour of its activity type, the same one the
   info-bar legend and the day summary use. The colour rides on custom properties so the symbol
   rule above stays the single place that fills it; --act-rgb carries the same colour as raw
   channels for the translucent derivatives below. The unknown type stays uncoloured, as it is
   in the legend. */
.activities-table tbody tr.act-driving   { --act-color: #ff0000;       --act-rgb: 255, 0, 0; }
.activities-table tbody tr.act-work      { --act-color: var(--blue);   --act-rgb: 0, 153, 255; }
.activities-table tbody tr.act-available { --act-color: var(--yellow); --act-rgb: 253, 177, 3; }
.activities-table tbody tr.act-break     { --act-color: #66ff33;       --act-rgb: 102, 255, 51; }

/* Just a breath of the colour behind the row - the hover highlight sets a solid background and
   wins on specificity, so hovering still reads. */
.activities-table tbody tr.act-driving,
.activities-table tbody tr.act-work,
.activities-table tbody tr.act-available,
.activities-table tbody tr.act-break {
    background-color: rgba(var(--act-rgb), .03);
}

/* The symbol gets a soft halo in its own colour, so it stands out against the tinted row. */
.activities-table tbody tr.act-driving td:first-child svg,
.activities-table tbody tr.act-work td:first-child svg,
.activities-table tbody tr.act-available td:first-child svg,
.activities-table tbody tr.act-break td:first-child svg {
    filter: drop-shadow(0 0 .2rem rgba(var(--act-rgb), .55));
}

#activities-details-tab table svg, .night-hours-view table svg {
    padding-top: .25rem;
    padding-bottom: .25rem;
}

#fs-driving-license {
    margin-bottom: 4rem
}

div#vehicle-technical-data {
    min-width: 18rem;
    max-width: 33%;
}

div#company-locks {
    margin-top: 3rem;
}

div#company-locks dl.scroll {
    max-height: calc(100vh - 24.5rem);
    overflow-y: scroll;
}

div#company-locks dl dt {
    width: calc(33% - 1rem);
    min-width: calc(33% - .5rem);
}

div#company-locks dl dd {
    width: calc(67% - 1rem);
}

#control-driving-license {
    margin-top: .5rem;
}
div#driving-license-controls, .overview-tab .driving-license-controls {
    padding-top: 1rem;
    max-height: calc(100vh - 11rem);
    overflow-y: scroll;
}

div#driving-license-controls .accordion-item-label, .overview-tab .driving-license-controls .accordion-item-label {
    background-color: var(--dbox);
}

div#driving-license-controls .accordion-item-label:hover, .overview-tab .driving-license-controls .accordion-item-label:hover {
    background-color: var(--hov-dark);
}

#driving-license-control .table th,
#driving-license-control .table td {
    width: calc(20% - 1rem);
    text-align: left;
}

span svg {
    margin: 0 1rem;
    height: 1rem;
    width: 1rem !important;
    fill: var(--text);
}

p span {
    float: right;
}

p span.birthdate {
    float: none;
    margin-left: 2rem;
}

th svg.violation {
    height: 2rem !important;
    width: 2.5rem !important;
}

th svg.vehicle {
    height: 2rem !important;
    width: 2rem !important;
}

#driver-overview-tab p, a {
    font-size: .9em;
    padding: 0.375rem .5rem;
    line-height: .9em;
}

#driver-overview-tab p:not(.no-border) {
    border-bottom: .005rem solid var(--border-dark);
}

#driver-overview-tab #overview-graph {
    width: 85%;
    cursor: default;
}

#driver-overview-tab #violations-legend {
    margin: 1rem 0 1rem 1.5rem;
}

#driver-overview-tab #overview-legend {
    display: flex;
    gap: 2rem;
    margin: 4rem 0 1.5rem 1.5rem;
}

#driver-overview-tab p.data-available {
    border-bottom: .25rem solid var(--green);
}

#driver-overview-tab p.no-data-available {
    border-bottom: .25rem solid var(--red);
}

#driver-overview-tab p.driver-present {
    border-bottom: .25rem solid var(--blue);
}

#driver-overview-tab p.not-relevant {
    border-bottom: .25rem solid #eeeeee;
}

#violations-graph svg text {
    cursor: default;
}

#driver-overview-tab g.hand, #driver-overview-tab text.hand {
    cursor: pointer;
}

#driver-overview-tab g.hand:hover circle.cls-2 {
    fill: var(--hl);
}

#driver-overview-tab div.grid {
    margin-bottom: .5rem;
}

#driver-overview-tab div.grid.big-spacing {
    margin-bottom: 1rem;
}

.opened svg {
    color: var(--hl);
    transform: rotate(90deg) !important;
}

.table th.xtrawide, .table td.xtrawide {
    width: 9rem;
}

.table th.uwide, .table td.uwide {
    width: 25rem;
    text-align: left;
}

#act-weekly.table thead tr {
    /* One header row of the same height as every other page's band: the driver info bar sits in
       the wide first cell and the activity column symbols in theirs, so there is no separate
       symbol row (and its gap) below. Flex rather than block for two reasons: it drops the
       whitespace between the inline cells, which used to push every symbol a further 6px right
       of its own column, and it lets the symbols wrap as one group once the info bar claims the
       whole line (.head-stacked below). */
    box-sizing: border-box;
    height: calc(25px + 1rem);
    display: flex;
    flex-wrap: wrap;
    border-bottom: 0.005rem solid var(--border);
}

/* Each header cell fills the row and centres its own content, so the info bar and the column
   symbols share one middle line. The cells keep their set widths, so they stay aligned with the
   body columns; only the first one keeps its left alignment. */
#act-weekly.table thead th {
    --band-h: calc(25px + 1rem);
    height: var(--band-h);
    padding-top: 0;
    padding-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Flex items shrink by default; the cells have to keep their column width instead. */
    flex: none;
}

#act-weekly.table thead th:first-child {
    justify-content: flex-start;
}

/* The vehicle column is 12rem wide and left-aligned in the body, so its symbol belongs above the
   plates rather than in the middle of a 3.5rem cell. */
#act-weekly.table thead th:last-child {
    width: 12rem;
    justify-content: flex-start;
}

/* A long driver name used to fill the whole line and print over the activity symbols. Once it no
   longer fits, layoutWeeklyHeader() sets .head-stacked: the info bar then takes a line of its own
   - the same bordered band every other tab shows - and the symbols drop onto a second line, still
   above their own columns. */
#act-weekly.table.head-stacked thead tr {
    height: auto;
}

#act-weekly.table.head-stacked thead th:first-child {
    width: 100%;
    padding-right: 0;
    height: auto;
    min-height: var(--band-h);
    border-bottom: 0.005rem solid var(--border);
    /* A name longer than the entire line wraps onto further lines instead of running out of the
       table; the band grows with it. */
    white-space: normal;
    flex-wrap: wrap;
}

/* Indent the wrapped symbol row by the width of the first body column (its 42rem reservation less
   the 1rem of cell padding the reservation does not cover), so every symbol still sits above the
   column it belongs to. */
#act-weekly.table.head-stacked thead th:nth-child(2) {
    margin-left: calc(100% - 41rem);
}

/* The info bar keeps the driver-page font size, not the smaller table-header size. */
#act-weekly thead th.data-area {
    font-size: 1rem;
}

/* The column symbols carry their activity colour themselves instead of the underline the symbols
   wear elsewhere - the same look the info-bar legend and the day summaries use. Unknown stays
   uncoloured, as it is in the legend. */
#act-weekly thead th.driving svg   { fill: #ff0000;       border-bottom: none; }
#act-weekly thead th.work svg      { fill: var(--blue);   border-bottom: none; }
#act-weekly thead th.available svg { fill: var(--yellow); border-bottom: none; }
#act-weekly thead th.break svg     { fill: #66ff33;       border-bottom: none; }
#act-weekly thead th.unknown svg   { border-bottom: none; }

/* Each activity column wears a breath of its own colour, exactly as the detailed activity table
   tints its rows; --act-rgb carries the colour as raw channels for the translucent background. */
#act-weekly tbody td.act-driving   { --act-rgb: 255, 0, 0; }
#act-weekly tbody td.act-work      { --act-rgb: 0, 153, 255; }
#act-weekly tbody td.act-available { --act-rgb: 253, 177, 3; }
#act-weekly tbody td.act-break     { --act-rgb: 102, 255, 51; }

#act-weekly tbody td.act-driving,
#act-weekly tbody td.act-work,
#act-weekly tbody td.act-available,
#act-weekly tbody td.act-break {
    background-color: rgba(var(--act-rgb), .03);
}

/* The tinted cells have to span the full row height, or the colour breaks into blocks between the
   rows. The day rows are as tall as their timeline cell, so the value cells are stretched to match
   and keep their content on the timeline's baseline. */
#act-weekly.table tbody tr:not(.week):not(.week-details) td:not(:first-child) {
    height: 2.55rem;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
}

#act-weekly.table tbody tr:not(.week):not(.week-details) td:last-child {
    justify-content: flex-start;
}

#act-weekly.table tr {
    border: none;
}

#act-weekly.table td:first-child {
    height: 2.55rem;
    width: calc(100% - 42rem);
    text-align: left;
}

#act-weekly.table th:first-child {
    padding: 0 1rem 0 0;
    width: calc(100% - 42rem);
    text-align: left;
}

#act-weekly.table td {
    padding: 0.375rem 0.5rem;
    vertical-align: bottom;
}

#act-weekly.table td:last-child{
    width: 12rem;
    text-align: left;
}

/* DRIVER SHIFTS START */
#driver-shifts-head, #driver-shifts-head .data-area {
    margin: 0;
    border-bottom: solid 0.005rem var(--border);
    background: var(--bg);
}

#driver-shifts-head .head-elements {
    display: flex;
    flex-direction: row;
    margin: 0.25rem 0;
    height: 2.5rem;
    text-transform: uppercase;
}

#driver-shifts-head div.top-border {
    border-top: 0.005rem solid var(--border);
}

#driver-shifts-head div.left-border {
    margin-left: .5%;
    padding-left: 0 !important;
    border-left: 0.005rem solid var(--border);
}

#driver-shifts-head div.right-border {
    margin-right: .5%;
    padding-right: 0 !important;
    border-right: 0.005rem solid var(--border);
}

#driver-shifts .shift .accordion-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

#driver-shifts .shift:hover {
    background: var(--hov);
}

/* The column symbols carry their activity colour themselves instead of the underline they wear
   elsewhere, matching the weekly and list overviews. Only the activity symbol is coloured - the
   small FontAwesome markers (single/team, short/long break) merely qualify the column and keep the
   text colour, but lose the underline too. */
#driver-shifts-head .head-elements .cell.driving svg:not(.svg-inline--fa)   { fill: #ff0000;       border-bottom: none; }
#driver-shifts-head .head-elements .cell.work svg:not(.svg-inline--fa)      { fill: var(--blue);   border-bottom: none; }
#driver-shifts-head .head-elements .cell.available svg:not(.svg-inline--fa) { fill: var(--yellow); border-bottom: none; }
#driver-shifts-head .head-elements .cell.break svg:not(.svg-inline--fa)     { fill: #66ff33;       border-bottom: none; }
#driver-shifts-head .head-elements .cell .svg-inline--fa                    { border-bottom: none; }

/* Each activity column wears a breath of its own colour; --act-rgb carries it as raw channels for
   the translucent background. The cells are flex items of the shift row, so they already span its
   full height and the tint reads as one continuous column. The shift's hover colour sits behind
   the 3% tint and stays legible. */
#driver-shifts div.cell.act-driving   { --act-rgb: 255, 0, 0; }
#driver-shifts div.cell.act-work      { --act-rgb: 0, 153, 255; }
#driver-shifts div.cell.act-available { --act-rgb: 253, 177, 3; }
#driver-shifts div.cell.act-break     { --act-rgb: 102, 255, 51; }

#driver-shifts div.cell.act-driving,
#driver-shifts div.cell.act-work,
#driver-shifts div.cell.act-available,
#driver-shifts div.cell.act-break {
    background-color: rgba(var(--act-rgb), .03);
}

/* Smooth expand/collapse instead of an instant jump, the same technique the timeline accordions
   use: a grid whose single row grows out of 0fr, swapped for a height 0<->auto animation wherever
   interpolate-size exists (Chromium will not interpolate a track growing out of 0fr). The panel is
   a flex item of the shift row, so it has to keep its full width while collapsed too - otherwise it
   would sit in the same flex line as the cells instead of below them. */
#driver-shifts .accordion-item-content {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    padding: 0;
    overflow: hidden;
    background: var(--bg);
    transition: grid-template-rows .3s ease;
}

#driver-shifts .accordion-item-content > * {
    min-height: 0;
    overflow: hidden;
}

#driver-shifts .accordion input:checked ~ .accordion-item-content {
    grid-template-rows: 1fr;
    padding: 0;
}

@supports (interpolate-size: allow-keywords) {
    #driver-shifts {
        interpolate-size: allow-keywords;
    }

    #driver-shifts .accordion-item-content {
        display: block;
        height: 0;
        transition: height .3s ease;
    }

    #driver-shifts .accordion input:checked ~ .accordion-item-content {
        height: auto;
    }
}

/* The chevron turns with the panel rather than snapping to its new angle. */
#driver-shifts .accordion-item-label svg {
    transition: transform .3s ease, color .3s ease;
}

/* .shift-details IS the panel, not a child of it - its width is what makes the panel wrap below the
   cells instead of sharing their flex line. The panel's own padding and border are zeroed above so
   that the collapsed row is truly zero high (padding and a border would still be drawn); the inset
   and the separator move onto the inner .grid, where they are clipped away with the content. The
   geometry stays as it was: separator flush under the shift row, 1em of air, the tiles, 1em of air. */
#driver-shifts div.shift-details {
    width: calc(100% - 1rem);
}

#driver-shifts div.shift-details > .grid {
    margin: 0 0 1em 1em;
    padding-top: 1em;
    border-top: solid 0.005rem var(--border-dark);
}

#driver-shifts div.rest-time {
    width: 81%;
    padding-right: 19%;
    text-align: center;
    line-height: 2rem;
    border-bottom: solid 0.005rem var(--border-dark);
}

#driver-shifts div.cell, #driver-shifts-head .head-elements div.cell {
    display: inline-block;
    padding: .325rem .5%;
    font-weight: 300;
    font-size: .9em;
    line-height: 1.75em;
    cursor: default;
}

#driver-shifts-head .head-elements div.cell {
    line-height: 2.5em;
}

#driver-shifts label.w1, #driver-shifts-head .head-elements div.w1{
    width: 2%;
}

#driver-shifts div.w2, #driver-shifts-head .head-elements div.w2 {
    width: 10%;
}

#driver-shifts div.w3, #driver-shifts-head .head-elements div.w3 {
    width: 4%;
    text-align: center;
}

#driver-shifts div.w4, #driver-shifts-head .head-elements div.w4 {
    width: 24%;
}

#driver-shifts label.w1.accordion-item-label {
    padding: .325rem .5%;
    cursor: pointer;
}

#driver-shifts-head .head-elements .cell .svg-inline--fa {
    padding-left: 0;
    padding-right: 0;
    margin-left: .25rem;
}

#driver-shifts-head svg.fa-person-digging, #driver-shifts-head svg.fa-truck-moving {
    height: 1.35rem !important;
    width: 1.35rem !important;
}

div.shift-details .grid {
    border-bottom: solid 0.005rem var(--border-dark);
}

/* Engines without interpolate-size (Firefox) run the 0fr grid path above. A 0fr track sizes to the
   item's automatic minimum, and min-height:0 only zeroes its content - the item's own margin,
   padding and border still count, so the inset .grid carries kept 30px of every collapsed shift
   row alive and the list read as if every row sat half open. Fold the inset away with the row and
   bring it back on the same curve. Chromium animates height instead and is left untouched. */
@supports not (interpolate-size: allow-keywords) {
    #driver-shifts div.shift-details > .grid {
        margin-bottom: 0;
        padding-top: 0;
        border-top-width: 0;
        border-bottom-width: 0;
        transition: margin-bottom .3s ease, padding-top .3s ease, border-width .3s ease;
    }

    #driver-shifts .accordion input:checked ~ .accordion-item-content > .grid {
        margin-bottom: 1em;
        padding-top: 1em;
        border-top-width: .005rem;
        border-bottom-width: .005rem;
    }
}

div.shift-graph {
    height: calc(100vh - 15rem);
    width:100%;
}
/* DRIVER SHIFTS END */

/* NIGHT HOURS GRAPH START */
/* The night distribution graph reuses .shift-graph, but sits full width below the night's
   tables rather than filling a column on its own, so it takes a fixed, contained height
   instead of the shift graph's viewport-tall one. Scoped to the night view so it outweighs
   both .shift-graph rules (the base one and the responsive one in the media query below). */
.night-hours-view div.night-graph {
    height: 28rem;
    width: 100%;
}
/* NIGHT HOURS GRAPH END */

th svg, span svg {
    padding-bottom: 0.5rem;
}
/* The day detail expands and collapses smoothly instead of jQuery animating a row's width, height
   and opacity at once. Same technique as the timeline accordions: the cell is a grid whose single
   row grows out of 0fr, so the real content height drives it without a magic max-height. Chromium
   refuses to interpolate a track growing out of 0fr, so the @supports block further down swaps in
   an equivalent height 0<->auto animation there. The row itself stays in the layout at zero height,
   hence no border of its own. */
#act-list.table tr.day-data {
    display: flex;
    align-items: flex-start;
    border-bottom: 0;
}

#act-list.table tr.day-data > td.list-details {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows .3s ease;
}

#act-list.table tr.day-data.open > td.list-details {
    grid-template-rows: 1fr;
}

#act-list .list-details > * {
    min-height: 0;
    overflow: hidden;
}

@supports (interpolate-size: allow-keywords) {
    #activities-list-tab {
        interpolate-size: allow-keywords;
    }

    #act-list.table tr.day-data > td.list-details {
        display: block;
        height: 0;
        transition: height .3s ease;
    }

    #act-list.table tr.day-data.open > td.list-details {
        height: auto;
    }
}


/* The chevron turns with the panel rather than snapping to its new angle. */
#act-list .acc svg {
    transition: transform .3s ease, color .3s ease;
}

#act-list.table tr {
    display: flex;
    flex-direction: row;
}

#act-list.table tr.week td {
    width: 100%;
    text-align: center;
}

#act-list th, #act-list td {
    width: 5.5rem;
}

/* The child combinator keeps these column rules on the list itself - the detail tile nested inside
   carries the detailed overview's own table and must not inherit the list's header metrics. */
#act-list > thead th:nth-child(2) {
    line-height: 1.85rem;
}

#act-list th:last-child, #act-list td:last-child {
    padding-left: 0;
    width: auto;
    text-align: left;
}

#act-list td:nth-child(3), .list-details td:nth-child(3) {
    text-align: left;
}

#act-list > thead tr {
    border-bottom: solid 0.005rem var(--border);
}

/* The column symbols carry their activity colour themselves instead of the underline the symbols
   wear elsewhere - the same look the weekly overview and the day summaries use. Unknown stays
   uncoloured, as it is in the legend. */
#act-list > thead th.driving svg   { fill: #ff0000;       border-bottom: none; }
#act-list > thead th.work svg      { fill: var(--blue);   border-bottom: none; }
#act-list > thead th.available svg { fill: var(--yellow); border-bottom: none; }
#act-list > thead th.break svg     { fill: #66ff33;       border-bottom: none; }
#act-list > thead th.unknown svg   { border-bottom: none; }

/* Each activity column wears a breath of its own colour, exactly as the weekly overview tints its
   columns and the detailed table its rows; --act-rgb carries the colour as raw channels for the
   translucent background. The cells are flex items of the row, so they already span its full
   height and the tint reads as one continuous column. */
#act-list > tbody td.act-driving   { --act-rgb: 255, 0, 0; }
#act-list > tbody td.act-work      { --act-rgb: 0, 153, 255; }
#act-list > tbody td.act-available { --act-rgb: 253, 177, 3; }
#act-list > tbody td.act-break     { --act-rgb: 102, 255, 51; }

#act-list > tbody td.act-driving,
#act-list > tbody td.act-work,
#act-list > tbody td.act-available,
#act-list > tbody td.act-break {
    background-color: rgba(var(--act-rgb), .03);
}

#act-list .week {
    line-height: 2rem;
    text-align: center;
    border-bottom: solid 0.005rem var(--border);
}

#act-list .week td {
    height: 2rem;
    line-height: 3rem;
}

/* The cell is only the clipping frame for the animation now - the grey tile is the .section inside
   it, exactly as in the detailed overview. Its vertical breathing room moved onto the wrapper so it
   is clipped away with the rest when the panel closes. */
#act-list .list-details {
    width: 70% !important;
    margin: 0 7rem;
    padding: 0 !important;
    background: none;
}

#act-list .list-details-inner {
    padding-top: 1rem;
}

/* Same as the other two lists: on the grid path the wrapper's own padding survives the 0fr track,
   which left 16px under every collapsed day. Fold it away with the row. */
@supports not (interpolate-size: allow-keywords) {
    #act-list .list-details-inner {
        padding-top: 0;
        transition: padding-top .3s ease;
    }

    #act-list.table tr.day-data.open > td.list-details .list-details-inner {
        padding-top: 1rem;
    }
}

/* The detailed overview shows this tile inside an accordion, where the generic rule zeroes the
   heading's margin; keep it flush here too so the two read the same. */
#act-list .list-details .section h3 {
    margin: 0;
}

/* The list is a .table.wide, and both that and the shared .table rules are descendant selectors -
   they reach past the cell into the tile's own table and would centre its header and shrink its
   text a second time (.9em of an already .9em cell). Put the tile back on the metrics it has in
   the detailed overview; 1em resolves against the surrounding cell, which is that same size. */
#act-list .list-details .section h3,
#act-list .list-details .activities-table th,
#act-list .list-details .activities-table td {
    font-size: 1em;
}

#act-list .list-details .activities-table th,
#act-list .list-details .activities-table td {
    text-align: left;
}

#act-list .list-details .activities-table thead tr {
    border-bottom: .05rem solid var(--border-dark);
}

table#act-list .w3 {
    width: 3rem;
}

div.section {
    padding: 1rem;
    margin: 0 0 1rem 0;
    background: var(--dbox);
}

#activities-details-tab div.section h3 svg, .night-hours-view div.section h3 svg {
    width: 1rem;
    height: 1rem;
    padding: 0 .5rem 0 0;
    vertical-align: text-bottom;
}

.list-details thead, div.section thead {
    background: var(--dbox);
}

.week-details {
    padding: 0;
}

#act-weekly .week-details td:first-child
{
    height: 2rem;
    text-align: right;
    line-height: 2rem;
}

.week-details td{
    height: 2rem;
}

#act-weekly .week td 
{
    padding: 0 .5rem;
}

#act-weekly .week td:first-child
{
    height: 2rem;
    text-align: center;
    line-height: 3rem;
}

#act-weekly tr.week
{
    border-bottom: solid .05rem var(--border);
}

#act-weekly .week-details td:not(:first-child)
{
    line-height: 2rem;
    border-top: solid .05rem var(--border);
}

#vehicle-data-popup .grid .column:not(:last-child) {
    padding-right: 10%;
}

#personal-data textarea, #vehicle-data textarea {
    margin-right: 0;
    padding-left: 0.5rem;
    height: 2rem;
    width: calc(100% - 1rem);
    border: none;
    border-bottom: 0.05rem solid var(--border-dark);
    background: transparent;
    resize: vertical;
}

#double-driving-staff {
    margin-top: 3rem
}

#double-driving-staff svg {
    margin: 0.875rem 2rem;
    width: 2rem;
    height: 2rem;
}

#double-driving-staff .button {
    margin: 1rem 0
}

div#double-driving-staff-data {
    display: flex;
    flex-direction: row;
    gap: 5%
}

div#double-driving-staff-data dt, div#double-driving-staff-data dd {
    height: 1.25rem;
}

#double-driving-staff-form input, #double-driving-staff-form label.checkbox {
    margin: 0;
}

#double-driving-staff-form input.half-length {
    float: left;
    width: calc((100% - 2.7rem) / 2);
    margin-right: 0.625rem;
}

#double-driving-staff-form label.fourth-length {
    float: left;
    width: calc((100% - 5.4rem) / 4);
    margin-right: 0.625rem;
}

#double-driving-staff-form
{
    padding: 0 .5rem;
    background: var(--menubg);
}

#double-driving-staff-form dt {
    width: calc(40% - .5rem);
}

#double-driving-staff-form dd {
    width: calc(60% - 1rem);
    overflow: visible;
}

#double-driving-staff-form dd .ui.dropdown .menu {
    margin-left: -.25rem;
}

div#double-driving-staff-data div.driver-data, div#double-driving-staff-data .form {
    width: 30%;
}

div#double-driving-staff-data .form .ui.dropdown {
    display: flex;
    margin: 0;
    padding: 0.2rem 0.3rem;
    height: 0.9rem;
    width: calc(100% - 1.35rem);
    border: 1px solid var(--dropbg);
    font-size: .9em;
}

div#double-driving-staff-data svg.fa-share {
    float:right
}

div#double-driving-staff-data svg.fa-share:hover {
    cursor: pointer;
    color: var(--hl);
}

#old-driver-cards {
    margin-top: 9rem;
}

#old-driver-cards-title {
    margin-top: 6.5rem;
}

#old-driving-licenses {
    margin-top: 3rem
}

#old-driving-licenses-title {
    margin-top: 1rem;
}

#old-driver-cards .accordion-item, #old-driving-licenses .accordion-item {
    background: var(--menubg);
}

#driver-master-data .accordion {
    margin: 1rem 0;
}

#driver-master-data h2 {
    float: left;
}

div#declaration-of-consent {
    margin-top: .25rem;
}   

div#declaration-of-consent, div#acknowledgement-of-receipt {
    display: inline-block;
    width: 100%;
}

#driver-master-data #driver-groups-data, #driver-master-data #driver-locations-data {
    margin-top: 3rem;
}

#driver-master-data #locations-change-list {
    width: 100%;
}

#driver-master-data #update-driver-location label span.info {
    float: right;
    padding: 0.1rem;
}

#driver-master-data #update-driver-location svg {
    height: 0.8rem;
    width: 0.8rem;
    margin-right: 0.75rem;
}

#update-driver-location div.section, #update-vehicle-location div.section {
    width: 100%;
}

#update-vehicle-location div.checkboxText {
    display: inline-block;
    max-width: 27.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#update-vehicle-location label.checkbox {
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: hidden;
}

.time-line {
    display: flex;
    flex-direction: row;
    margin-bottom: .5rem;
}

/* Carries the year and month toggles on the left and the temporary settings handle on the right. */
.time-line-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.time-line label:not(.checkbox) {
    line-height: 1.5rem;
}

.time-line label.checkbox {
    width: 4rem;
    margin: 0 0.25rem;
}

#violations-overview {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#violations-overview div.grid, .login-page div.grid {
    margin: 0;
}

#driver-overview-tab div.grid {
    overflow-x: hidden;
}

.violation-list {
    height: calc(100vh - 12.125rem);
    overflow-y: scroll;
    background: var(--menubg);
}

.violation-tile.active {
    display: block;
}

.violation-tile.hidden, input.hidden, div.hidden, button.hidden, svg.hidden, p.hidden {
    display: none !important;
}

.violation-tile {
    display: none;
    margin: 1rem 0;
    border-bottom: 0.05rem solid var(--border-dark);
    padding: 0 0 0.25rem 0;
}

.violation-tile p, .violation-tile h4 {
    padding-left: .25rem;
}

.year-toggle {
    margin-right: 2rem !important;
}

.year-toggle span {
    background: var(--sel) !important;
}
/* TABLES END */

/* GRID START */
div.grid {
    display: flex;
    margin-bottom: 1rem;
    width: 100%;
}

div.grid.big-spacing {
    margin-bottom: 1.5rem;
}

div.grid.no-spacing {
    margin-bottom: 0;
}

.grid .column:not(:last-child) {
    padding-right: 2rem;
}

div.grid .column.one {
 width: 12.5%;
}

div.grid .column.two {
    width: 25%;
}

div.grid .column.three {
    width: 37.5%
}

div.grid .column.four {
    width: 50%;
}

div.grid .column.five {
    width: 62.5%;
}

div.grid .column.six {
    width: 75%;
}

div.grid .column.seven {
    width: 87.5%;
}

div.grid .column.eight {
    width: 100%;
}

div.grid .column.max.four {
    width: 50%;
    max-width: 44rem;
}

div.grid .column.min.four {
    min-width: 50%;
    flex-grow: 100;
}

/* GRID END */

/* FIELDS START */
form .fields {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    width: 100%;
}

form .fields label.title {
    margin: 0.75rem 0 0.35rem 0;
    display: block;
    width: 100%;
}

form .fields .field.one {
 width: 16.66%;
}

form .fields .field.two {
    width: 33.32%;
}

form .fields .field.three {
    width: 49.98%
}

form .fields .field.four {
    width: 66.64%;
}

form .fields .field.five {
    width: 83.3%;
}

form .fields .field.six {
    width: 99.96%;
}

.popup.double form .fields .field.one, .popup.triple form .fields .field.one {
    width: 7.5%;
}

.popup.double form .fields .field.two, .popup.triple form .fields .field.two {
    width: 15%;
}

.popup.double form .fields .field.three, .popup.triple form .fields .field.three {
    width: 22.5%
}

.popup.double form .fields .field.four, .popup.triple form .fields .field.four {
    width: 30%;
}

.popup.double form .fields .field.five, .popup.triple form .fields .field.five {
    width: 37.5%;
}

.popup.double form .fields .field.six, .popup.triple form .fields .field.six {
    width: 45%;
}

form .fields .field.margin {
    margin-right: 10%;
} 

[type=color], [type=date], [type=datetime-local], [type=datetime], [type=email], [type=month], [type=number],
[type=password], [type=search], [type=tel], [type=text], [type=time], [type=url], [type=week], textarea, label.checkbox {
    display: block;
    margin: 0.25rem 0.75rem 0.25rem 0;
    padding: 0.2rem 0.3rem;
    height: .9rem;
    width: calc(100% - 1.35rem);
    border: 1px solid var(--dropbg);
    background-color: var(--menubg);
    font-size: .9em;
    font-weight: 400;
    color: var(--text);
}

input[disabled]:not(input[type="color"]), .ui.dropdown.disabled {
    opacity: .3;
}

[type=color] {
    height: 1.5rem;
}

label.checkbox {
    padding-right: 0;
}

.locations-list label.checkbox {
    width: 100%;
    box-sizing: border-box;
    margin-right: 0;
    padding-right: 0 !important;
    height: auto;
    min-height: 1.1rem;
}

label.checkbox.red {
    border: 0.05rem solid var(--red);
}

label.checkbox.green {
    border: 0.05rem solid var(--green);
}

dd [type=color] {
    margin: 0;
    padding: 0;
    height: 1rem;
    width: 3rem;
}

.field [type=text]:focus, .field [type=date]:focus {
    outline: 0;
    background-color: var(--hov);
    transition: border-color .25s ease-in-out;
}

input::-webkit-datetime-edit-day-field:focus,
input::-webkit-datetime-edit-month-field:focus,
input::-webkit-datetime-edit-year-field:focus {
    background-color: var(--sel);
    outline: none;
}

.checkbox {
    display: block;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #191C24;
    line-height: 1.1rem;
  }

/* Hide the browser's default checkbox */
.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }

  /* Create a custom checkbox */
  .checkmark {
    float: left;
    height: .8rem;
    width: .8rem;
    margin-right: 0.25rem;
    background-color: #191C24;
    border: 0.005rem solid var(--border-dark);
  }

  .checkbox span.checkboxText {
    display: inline-block;
    max-width: 9.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkbox span.checkboxText.checkboxIcon {
    max-width: calc(100% - 2.25rem);
  }

  /* On mouse-over, add a grey background color */
  .checkbox:hover input ~ .checkmark {
    background-color: #393f4f;
  }

  /* When the checkbox is checked, add a blue background */
  .checkbox input:checked ~ .checkmark {
    background-color: #191C24;
  }

  .checkbox input:checked:hover {
    background-color: #393f4f;
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  
  /* Show the checkmark when checked */
  .checkbox input:checked ~ .checkmark:after {
    display: block;
  }
  
  /* Style the checkmark/indicator */
  .checkbox .checkmark:after {
    left: 0.6rem;
    top: 0.15rem;
    width: 0.25rem;
    height: 0.7rem;
    border: solid var(--hl);
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }

.checkbox span.fi {
    margin: 0 .2rem;
}

.checkbox.disabled {
    opacity: .4;
}

.field .ui.dropdown {
    display: flex;
    margin: 0.25rem 0.75rem 0.25rem 0;
    padding: 0.2rem 0.3rem;
    height: 0.9rem;
    width: calc(100% - 1.35rem);
    border: 1px solid var(--dropbg);
    font-size: .9em;
}

.field .ui.dropdown.active.visible {
    background-color: var(--hov);
}

.field .ui.dropdown .menu {
    left: 0;
    width: 100%;
    top: calc(100% + 0.05rem);
}

/* FIELDS END */

/* SVG START */
.st {
    fill: var(--text);
    font-size: .9em;
    cursor: default;
}

.st.red.arrow {
    fill: var(--red);
}

.st.arrow.yellow {
    fill: var(--yellow);
}

.tl {
    stroke:#fff;
    stroke-width:1;
}

.vc {
    fill: var(--text);
    font-size: 2.5em;
}

.om {
    fill: var(--text);
    font-size: 2.5em;
}

.t20 {
    stroke:#66ff33;
    stroke-width:8;
}

.t21 {
    stroke:var(--yellow);stroke-width:12;
}

.t22 {
    stroke:var(--blue);stroke-width:16;
}

.t23 {
    stroke:#ff0000;stroke-width:20;
}

.t24 {
    stroke:#a5a5a5;stroke-width:4;
}

.arrow {
    fill: var(--text);
}

.st.lp:hover, .st.dn:hover {
    fill: var(--hl);
}

#ls1:hover~#als1 {
    fill: var(--hl);
}
#ls1:hover~#tvu1 {
    fill: var(--hl);
}
#ls2:hover~#als2 {
    fill: var(--hl);
}
#ls2:hover~#tvu2 {
    fill: var(--hl);
}
#ls3:hover~#als3 {
    fill: var(--hl);
}
#ls3:hover~#tvu3 {
    fill: var(--hl);
}
#ls4:hover~#als4 {
    fill: var(--hl);
}
#ls5:hover~#als5 {
    fill: var(--hl);
}
#ls6:hover~#als6 {
    fill: var(--hl);
}
#ls7:hover~#als7 {
    fill: var(--hl);
}
#ls8:hover~#als8 {
    fill: var(--hl);
}
#ls9:hover~#als9 {
    fill: var(--hl);
}
#ls10:hover~#als10 {
    fill: var(--hl);
}

.ln {
    stroke:var(--bg);
    stroke-width:2;
}

.lnW {
    stroke:var(--text);
    stroke-width:.8;
}

.sd {
    height: 37px;
    fill:#535353;
}

.tvu {
    height: 37px;
    fill:transparent;
}

.t0 {
    height: 9px;
    fill:#66ff33;
}

.t1 {
    height: 13px;
    fill:var(--yellow);
}

.t2 {
    height: 17px;
    fill:var(--blue);
}

.t3 {
    height: 21px;
    fill:#ff0000;
}

.t4 {
    height: 4px;
    fill:#a5a5a5;
}

/* Marks the periods a recorded attestation covers, on its own line below the day timeline's
   flags and arrows. */
.att {
    fill: var(--attestation);
}

/* The attestation tile icon (Aktivitaeten > Detailuebersicht) wears the same colour as the
   attestation bar on the day timeline (.att above), so the tile and its marked period read as
   one. FontAwesome icons take their colour from `color` (their paths use currentColor). */
.attestation-icon {
    color: var(--attestation);
}

/* The attestation marker is centred in the tile (like the toggle icon) and pulled down onto the
   attestation bar drawn near the bottom of the day timeline - rect.att sits at viewBox y 118/120 of
   the fixed 7rem SVG, so 7.1rem below the tile top lines the icon up with that period line. It is an
   indicator, not a control: the generic `.tl-date-map svg` rule's pointer cursor is reset, and
   overflow:visible keeps the glyph from being shaved like the toggle. */
#activities-details-tab .tl-date-map {
    position: relative;
}
#activities-details-tab .tl-date-map .attestation-icon {
    cursor: pointer;
    overflow: visible;
    position: absolute;
    left: 50%;
    top: 7.1rem;
    transform: translate(-50%, -50%);
    margin: 0;
}

/* The `.attestation-icon` class now sits on the wrapping <a>, so the icon element inside only carries
   FontAwesome's `.svg-inline--fa { color: var(--text) }` and would render white. Re-apply the
   attestation colour to the icon itself (beats that rule on specificity). */
#activities-details-tab .tl-date-map .attestation-icon svg,
#activities-details-tab .tl-date-map .attestation-icon i {
    color: var(--attestation);
}

/* The day note bubble, centred under the attestation marker and always at the same height, so the
   bubbles of all days stand in one line whether a day has an attestation or not. An inline SVG with
   two paths instead of a FontAwesome glyph: "has a note" is a blue ring around a grey filling - two
   colours on one shape. The outline path carries the ring (its inner contour cuts the hole), the fill
   path is exactly that hole. Blue is --blue and not --hl: the white-label themes recolour --hl. */
#activities-details-tab .tl-date-map .day-note-toggle {
    position: absolute;
    left: 50%;
    top: 9.3rem;
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    /* `#driver-overview-tab p, a` pads every link of the page. */
    padding: 0;
    line-height: 0;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
#activities-details-tab .tl-date-map .day-note-toggle:focus {
    outline: none;
}
#activities-details-tab .tl-date-map .day-note-toggle .day-note-icon {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: visible;
    cursor: pointer;
}
#activities-details-tab .tl-date-map .day-note-toggle .day-note-fill {
    fill: none;
}
#activities-details-tab .tl-date-map .day-note-toggle .day-note-outline {
    fill: var(--tool);
    transition: fill .15s ease;
}
#activities-details-tab .tl-date-map .day-note-toggle.has-note .day-note-fill {
    fill: var(--text-mid);
}
#activities-details-tab .tl-date-map .day-note-toggle.has-note .day-note-outline {
    fill: var(--blue);
}
#activities-details-tab .tl-date-map .day-note-toggle:hover .day-note-outline,
#activities-details-tab .tl-date-map .day-note-toggle:focus-visible .day-note-outline {
    fill: var(--hl);
}

/* The note as tooltip: in the house theme (tg), but keeping the writer's line breaks. */
.tippy-box[data-theme~='day-note'] .tippy-content {
    white-space: pre-line;
    overflow-wrap: anywhere;
    text-align: left;
}

/* The day note dialog (drivers/popups/day-note.twig). */
#day-note-popup .popup-content {
    min-height: 0;
    overflow: hidden;
    color: var(--text);
}
/* The house text-field rule squeezes every textarea to one .9rem line with a margin that overhangs. */
#day-note-popup textarea.day-note-body {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 9rem;
    margin: .75rem 0 .5rem;
    padding: .4rem .5rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}
#day-note-popup textarea.day-note-body[readonly] {
    cursor: default;
}
#day-note-popup .day-note-meta {
    min-height: 1.2em;
    font-size: .8em;
    color: var(--text-mid);
    white-space: pre-line;
}
#day-note-popup .day-note-message {
    margin: .5rem 0 0;
    font-size: .85em;
    color: var(--yellow);
    white-space: pre-line;
}
#day-note-popup .day-note-message:empty {
    display: none;
}
/* .popup-content clips its overflow, so a long stored version scrolls inside its own box. */
#day-note-popup .day-note-stored {
    margin: .5rem 0 0;
    padding: .3rem .5rem;
    border-left: 2px solid var(--text-mid);
    font-size: .85em;
}
#day-note-popup .day-note-stored-label {
    color: var(--text-mid);
}
#day-note-popup .day-note-stored-body {
    max-height: 8rem;
    overflow: auto;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
#day-note-popup .day-note-actions,
#day-note-popup .day-note-confirm {
    margin-top: 1rem;
}
#day-note-popup .day-note-confirm-question {
    margin: 0 0 1rem;
    font-size: .9em;
}
/* The fixed 6rem of .button-primary does not hold "Запазване" or "Annulla" with the page's letter spacing. */
#day-note-popup .button-primary {
    width: auto;
    min-width: 6rem;
    margin: 0 0 0 1rem;
    padding: 0 .75rem;
    white-space: nowrap;
}
#day-note-popup .day-note-delete {
    float: left;
    margin-left: 0;
}
#day-note-popup .button-primary[disabled] {
    opacity: .5;
    cursor: default;
}

.break svg {
    border-bottom: .25rem solid #66ff33;
}

.available svg {
    border-bottom: .25rem solid var(--yellow);
}

.work svg {
    border-bottom: .25rem solid var(--blue);
}

.driving svg {
    border-bottom: .25rem solid #ff0000;
}

.unknown svg {
    border-bottom: .25rem solid #a5a5a5;
}

.ct0 {
    height: 33px;
    fill:#66ff33;
}

.ct1 {
    height: 33px;
    fill:var(--yellow);
}

.ct2 {
    height: 34px;
    fill:var(--blue);
}

.ct3 {
    height: 35px;
    fill:#ff0000;
}

.ct4 {
    height: 33px;
    fill:#a5a5a5;
}

.st0 {
    height: 15px;
    fill:#66ff33;
}

.st1 {
    height: 15px;
    fill:var(--yellow);
}

.st2 {
    height: 15px;
    fill:var(--blue);
}

.st3 {
    height: 15px;
    fill:#ff0000;
}

.st4 {
    height: 15px;
    fill:#a5a5a5;
}

.tl-date-map {
    width: 5rem;
    padding-top: 1.5rem;
    font-size: .8rem;
    text-align: center;
}

/* A night running over midnight carries two dates: it starts on the lower one and ends on the
   upper one. A small time axis beside them says so without words - a dot marks the start at the
   bottom, an arrow head the end at the top. Axis and dates form one group, centred in the column;
   that is why the column is wider here than in the other timeline views (see the 1201px block). */
.night-range {
    display: grid;
    grid-template-columns: .75rem auto;
    justify-content: center;
    align-items: center;
    gap: 0 .4rem;
    line-height: 1.5;
    text-align: left;
}

.night-rail {
    grid-row: 1 / 3;
    align-self: stretch;
    position: relative;
    width: .75rem;
}

/* The rail runs between the two markers, gaining colour towards the end of the night. */
.night-rail::before {
    content: "";
    position: absolute;
    left: 50%;
    top: .45rem;
    bottom: .34rem;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(to top, var(--tool), var(--hl));
}

.night-rail::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: .1rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    transform: translateX(-50%);
    background: var(--tool);
}

.night-rail i {
    position: absolute;
    left: 50%;
    top: .08rem;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: .3rem solid transparent;
    border-right: .3rem solid transparent;
    border-bottom: .44rem solid var(--hl);
}

.night-range-from {
    color: var(--text-mid);
}

@media (max-width: 75rem) {
    #activities-details-tab .day-wrapper, #vehicle-activities .day-wrapper, .night-hours-view .night-wrapper {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    .tl-date-map {
        width: 100%;
        padding-top: 0;
    }

    .activity-timeline-selection {
        width: 100%;
    }

    /* Stacked layout: tile sits above the timeline, so aligning to the bar's height is meaningless -
       let the attestation marker flow under the date again instead of floating at 7.1rem. */
    #activities-details-tab .tl-date-map .attestation-icon {
        position: static;
        transform: none;
    }

    /* In the row the icons stand side by side; the padding the centred column drops is their gap. */
    #activities-details-tab .tl-date-map svg.svg-inline--fa, #vehicle-activities .tl-date-map svg.svg-inline--fa {
        padding-right: .813rem;
    }

    /* Same for the note bubble: at 9.3rem it would land on the timeline below the tile. On the
       baseline, like the FontAwesome icons next to it. */
    #activities-details-tab .tl-date-map .day-note-toggle {
        position: static;
        display: inline-block;
        transform: none;
        vertical-align: baseline;
    }
}
/* SVG END */

/* LOGIN */
#modules {
    max-width: 27rem;
}

#modules h1 {
    margin: 2rem 0 3rem 0.7rem;
}

.module-info {
    padding-left: .5rem;
    border-left: 0.2rem solid var(--hl);
}

.module-info ul {
    padding-left: 1rem;
    line-height: 1.5em;
    color: var(--text);
}

.module-description {
    margin-bottom: 3rem;
    padding-left: 0.7rem;
}

.module-description p {
    margin-bottom: 0.5rem;
    line-height: 1.1em;
    color: var(--text);
}

#login {
    margin: auto;
    width: 100%;
    max-width: 14rem;
    padding: 1rem 2rem;
    background: var(--sel);
    border-radius: 5px;
}

#login h2 {
    margin-bottom: 1rem;
    text-align: center;
    background: none;
    border: none;
}

#login input, #fa-text input {
    margin-bottom: 0.75rem;
    height: 1.2rem;
    width: calc(100% - .6rem);
    color: var(--text-dark);
    background: var(--text);
}

#login-form {
    position: absolute;
    width: 18rem;
    height: 14rem;
    margin-top: 14rem;
    margin-left: calc((25% - 18rem)/2);
    z-index: 101;
}

#login-form a {
    padding: 0.375rem 2.125rem;
    line-height: 2.9em;
}

#login-page-banner {
    position: absolute; 
    bottom: calc((50vh - 12rem) / 2);
    left: 1rem;
    width: calc(100vw - 2rem);
    z-index: 100
}

.button {
    display: inline-block;
    padding: 0.125rem;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
    border: none;
}

.button-primary {
    margin: 0 0 0 1rem;
    width: 6rem;
    font-size: .9em;
    line-height: 2em;
    letter-spacing: 1px;
    word-spacing: 2px;
    color: var(--text);
    background: var(--tool);
    border: none;
}

.button-primary.wide {
    width: 9rem;
}

.button-primary.wider {
    width: 8rem;
}

.button-primary.midwide {
    width: 10.5rem;
}

.button-primary.xtrawide {
    width: 15rem;
}

.button-primary.uwide {
    width: 22rem;
}

.button-primary:hover {
    background: var(--bhov);
}

#password-change {
    margin: 2rem auto;
    width: 15rem;
}

#password-change-text, #fa-text {
    margin: 10rem auto 0 auto;
    width: 36rem;
    z-index: 101;
}

#fa-text {
    position: absolute;
    padding: 1rem;
    background: var(--sel);
    border-radius: 5px;
    text-align: center;
}

#password-change-text p, #fa-text p {
    margin: 1rem 0;
    width: 100%;
    text-align: center;
}

#password-change-text h3, #fa-text h3 {
    text-align: center;
}

#password-change .button-primary {
    margin: 0;
}

#password-change [type=password] {
    margin: .25rem 0;
    width: calc(100% - .6rem);
}

/* ul */
ul {
    display: block;
    margin: 0;
    padding: 0;
    margin-block-start: 0;
    margin-block-end: 2em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0;
    list-style-type: disc;
    color: var(--text);
}

ul li {
    display: list-item;
    margin: 0 0 1rem 0;
    padding: 0;
    text-align: -webkit-match-parent;
    list-style: none;
}

/* dl */
dl {
    display: inline-block;
    margin: 0 0 1rem 0;
    height: auto;
    width: 100%;
    color: var(--text);
}

dt, dd {
    display: block;
    flex-wrap: nowrap;
    align-content: space-between;
    justify-content: flex-start;
    align-items: center;
    gap: 0.25rem;
    float: left;
    margin: 0;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
    height: 1rem;
    width: calc(50% - 1rem);
    font-size: .9em;
    line-height: 1.25em;
    border-bottom: .05rem solid var(--border-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

dd {
    float: right;
    min-width: calc(50% - .5rem);
}

dt.no-border, dd.no-border {
    border: none;
}

dl.no-border dt, dl.no-border dd {
    border: none;
}

dl.no-border {
    border-bottom: .05rem solid var(--border-dark) !important;
}

dd .svg-inline--fa {
    padding: 0;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: text-bottom;
}

dd a {
    padding-left: 0;
}


dl#official-form-data dt{
    width: calc(62% - 1rem);
}

dl#official-form-data dd{
    width: calc(38% - 1rem);
    min-width: calc(38% - .5rem);
}


dl.violation-profile p {
    margin-left:.5rem;
}

.popup .working-time-condition, .popup .working-breaks {
    height: 100%;
    background: var(--dbox);
    padding-left: 2%;
    padding-bottom: 0.25rem;
}

.popup .working-breaks-condition {
    height: 100%;
    margin-top: 1rem;
    padding-top: .25rem;
    padding-left: 2%;
    background: var(--dbox);
}

.popup .working-time-condition label.title, .popup .working-breaks label.title {
    margin: 0;
    padding: 0.75rem 0 0.35rem 0;
}

.popup .working-time-condition [type=text], .popup .working-breaks [type=text] {
    margin: 0.25rem 0.75rem 0 0;
}

.popup .high.working-time-condition,.popup .high.working-breaks {
    padding: 0 !important;
}

#work-and-social dl dt, #work-and-social dl dd {
    height: 2rem;
}

#work-and-social dl dt {
    width: calc(65% - 1rem);
    line-height: 2rem;
}

#work-and-social dl dd {
    width: calc(35% - 0.5rem);
    min-width: calc(35% - 0.5rem);
}

#work-and-social a {
    margin: 0 !important;
}

.reminder-settings .settings-group {
    margin-bottom: 1.5rem;
}

.reminder-settings .settings-group:last-child {
    margin-bottom: 0;
}

.reminder-settings .settings-group h3 {
    margin: 0 0 .5rem 0;
}

.reminder-settings .settings-group dl {
    margin: 0;
}

.reminder-settings-form h4 {
    margin: 0.5rem 0 0 0;
    color: var(--text-mid);
}

.reminder-settings-section {
    margin-top: 1.5rem;
}

.reminder-settings-section:first-child {
    margin-top: 0;
}

.reminder-settings-section h3 {
    margin: 0 0 .5rem 0;
}

.popup-content .reminder-settings-section h3 {
    background: none;
    padding: 0 0 0 .25rem;
    width: calc(100% - .25rem);
}

.reminder-column h3 {
    margin-bottom: 1rem;
}

.reminder-column h3.no-top-margin {
    margin-top: 1.5rem;
}

.reminder-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem 0.75rem;
    margin: 0 0 0.75rem;
}

.reminder-grid.single {
    grid-template-columns: minmax(0, 1fr);
}

.reminder-grid .reminder-field,
.reminder-grid .reminder-field.half,
.reminder-grid .reminder-field.full {
    width: auto !important;
    margin: 0 !important;
}

.reminder-grid .reminder-field.full {
    grid-column: 1 / -1;
}

.reminder-grid .reminder-field .ui.dropdown {
    margin: 0.25rem 0.75rem 0.25rem 0;
    width: calc(100% - 1.35rem);
}

.reminder-field {
    margin-bottom: .35rem;
}

#overlay {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--tool);
    width: 100%;
    height: 100%;
    opacity: 0.8;
    z-index: 100;
  }
  .popup {
    display: none;
    position: absolute;
    top: 1rem;
    left: calc((100vw - 35rem)/2);
    height: auto;
    width: 35rem;
    background: var(--bg);
    z-index: 200;
  }

  .popup.wide {
    width: 48rem;
    left: calc((100vw - 48rem)/2);
  }

  .popup.double, .popup.wider {
    width: 72rem;
    left: calc((100vw - 72rem)/2);
  }

  .popup.map {
    width: calc((100vw - 10rem));
    left: 5rem;
  }

  .popup.triple {
    width: 114rem;
    left: calc((100vw - 114rem)/2);
  }

  .popup-close, #temp-settings-close {
    float: right;
    padding: .5rem .5rem 0 .5rem;
    color: var(--text);
    cursor: pointer;
  }

  .popup-content {
    padding: 1.25rem;
    min-height: 20rem;
  }

  .popup-content .grid.scroll {
    overflow-y: scroll;
    max-height: calc(100vh - 5rem);
  }

  .popup div.grid {
    margin: 0;
  }

  .popup .grid .column.hidden {
    display: none;
  }

  .popup-content h3 {
    background: var(--dbox);
    padding: 0.25rem;
    width: calc(100% - .5rem);
  }

  .popup-content h3.no-top-margin {
    margin-top: 0;
  }

  .popup-content textarea {
    max-width: 100%;
  }
  .popup-content p .button {
    margin: 1rem 0 0;
    padding-bottom: 0;
  }

  .popup-content p .button svg{
    padding-top: .125rem;
    height: 1rem;
  }

.popup .button-primary {
    margin: 0 1rem 1rem;
}

#message-popup, #alert-popup, #second-layer-message-popup, #confirm-popup {
    top: calc((100vh - 12rem)/2);
}

#second-layer-message-popup {
    background: var(--dropbg);
}

#message-popup .popup-content, #alert-popup .popup-content, #second-layer-message-popup .popup-content, #confirm-popup .popup-content {
    padding: 1rem 1rem 2rem 1rem;
    min-height: 8rem;
}

#message-popup p, #alert-popup p, #second-layer-message-popup p, #confirm-popup p {
    margin: 0 1rem;
    padding: 1rem 0 4rem 0;
    vertical-align: text-bottom;
    font-size: 1.1em;
}

#message-popup p span,#confirm-popup p span {
    float:none;
}

div.upload {
    display:inline-block;
    position:relative;
    height: auto;
    min-height: 11rem;
    width: 100%;
    color: var(--text);
}

div.upload input[type="file"] {
    position:absolute;
    display: inline-block;
    left:0;
    width: 12rem;
    height: 11rem;
    opacity: 0;
    cursor:pointer;
    z-index: 1000;
}

div.company-logo-request-section {
    clear: both;
    margin-top: 5rem;
}

.logo-request-description-primary {
    margin: 1rem 0;
}

div.upload svg {
    width: 12rem;
    padding: 1.5rem 0 3.5rem 0;
    background: var(--dropbg);
    height: 6rem;
    color: var(--blue);
    border: 0.05rem dashed var(--blue);
}

div.upload p {
    position: absolute;
    top: 9rem;
    left: 0;
    width: 12rem;
    text-align: center;
}

div.upload span.file-names {
    width: calc(100% - 14rem);
    float: right;
    background: var(--dropbg);
    left: 13rem;
    padding: 0.5rem;
    height: 10.2rem;
    font-size: .9em;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

div.upload #choose-files {
    display: none;
}

div#upload-zip-files {
    margin: 0 auto;
    width: 40rem;
}

/* settings slider */
#temp-settings {
    position: absolute;
    right: 0;
    top: 3.125rem;
    height: calc(100% - 3.125rem);
    overflow-x: hidden; /* Needed for initial hidden state */
    z-index: 10;
}

#temp-settings > div {
    height: 100%;
    float: left;
}

#temp-settings-content {
    width: 30rem;
    margin-right: -30rem;
    background-color: var(--dropbg);
}

#temp-settings-content > p {
    padding: 10px;
}

/* Aligned with the first row of year and month toggles it sits next to. */
#temp-settings-handle {
    display: flex;
    align-items: center;
    height: 1.5rem;
}

#temp-settings-handle svg {
    padding: 0 .25rem 0 1rem;
    cursor: pointer;
}

#temp-settings-handle svg:hover {
    color: var(--hl);
}

#temp-settings label.checkbox {
    background: var(--dropbg);
}

#temp-settings h3 {
    margin-top: 1rem;
}

/* output */
.report-settings label {
    display: block;
    margin: 0.25rem 0;
    padding: .2rem .3rem .4rem .3rem;
    width: calc(100% - .75rem);
    font-size: 1em;
    border-bottom: 0.05rem solid var(--border-dark);
}

#attestations label.checkbox, .report-units label.checkbox {
    margin-left: .5rem;
    text-overflow: ellipsis;
    overflow-x: hidden;
    overflow-y: hidden;
}

#download-manager .report-units .button {
    margin-top: .25rem;
    width: 100%;
}

#generate-attestations-report .report-settings label.title {
    margin: 0;
    padding: .35rem .3rem 0 .3rem;
    border: none;
}

#generate-attestations-report .report-settings label.checkbox {
    margin: .05rem 0;
}

#generate-attestations-report input {
    width: calc(100% - .75rem);
}

#generate-attestations-report .report-settings .ui.dropdown {
    margin: .25rem 0;
}

#generated-attestations-reports, #generated-drivers-reports,
#generated-vehicles-reports, #generated-fleet-reports, #generated-official-forms-reports {
    max-height: calc(100vh - 21.75rem);
    overflow-y: scroll;
    overflow-x: hidden;
}

#generated-attestations-reports a, #generated-drivers-reports a,
#generated-vehicles-reports a, #generated-fleet-reports a, #generated-official-forms-reports a
{
    padding: 0;
}

#generated-drivers-reports label.checkbox, #generated-vehicles-reports label.checkbox, #generated-fleet-reports label.checkbox{
    margin: 0.25rem 0.25rem 0.25rem 0;
    width: 100%;
}

#generated-vehicles-reports span.checkboxText {
    max-width: calc(100% - 2rem);
}

#generated-fleet-reports span.checkboxText {
    max-width: calc(100% - 1.25rem);
}

.report-settings [type=text]
{
    width: calc(100% - .75rem);
}

.report-settings label input {
    margin-top: .1rem;
}

.report-settings .ui.dropdown, #cal-drivers, #cal-vehicles {
    margin: .25rem 0 1rem 0;
}

.report-settings .ui.dropdown {
    border: 0.005rem solid var(--border-dark);
}

.report-settings .ui.dropdown .svg-inline--fa {
    margin-right: 0.25rem;
}

input[type='radio']:after {
    width: .7rem;
    height: .7rem;
    top: -1px;
    left: -1px;
    border-radius: .5rem;
    position: relative;
    background-color: var(--tool);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid var(--bg);
}

input[type='radio']:checked:after {
    width: .7rem;
    height: .7rem;
    top: -1px;
    left: -1px;
    border-radius: .5rem;
    position: relative;
    background-color: var(--hl);
    content: '';
    display: inline-block;
    visibility: visible;
    border: 2px solid var(--bg);
}

p.report-group {
    margin-left: .25rem;
    font-size: .7rem;
}

.check-all.button-primary
{
    width: calc(100% - .6rem);
    margin: 0 0 1rem 0;
}

#generate-driver-report .button-primary
{
    position: relative;
    top: 15rem;
    width: calc(100% - .6rem);
    margin-bottom: -1rem;
}

.report-units {
    display: flex;
    flex-direction: column;
    margin: 0 0 0 3rem;
    width: 15.625rem;
}

.report-units svg {
    margin-right: .25rem;
    height: 1rem;
    width: .75rem;
    vertical-align: top;
}

.report-units div.scroll {
    max-height: calc(100vh - 10rem);
    overflow-x: hidden;
    overflow-y: scroll;
}

.report-units .hidden {
    display: none;
}

label.hidden {
    display: none;
}

input[name="creation_date"] {
    margin-bottom: 1.5rem;
}

#attestations table 
{
    width: 100%;
}

.driver-box {
    margin-bottom: .25rem;
    padding: 0.25rem;
    width: 100%;
    max-width: 17rem;
    background: var(--dbox);
    overflow-x: hidden;
}

.driver-box label.title {
    max-width: 17rem;
    overflow-x: hidden;
    text-overflow: ellipsis;
    display: block;
}


.driver-box label.checkbox {
    margin-left: .5rem;
}

/* digital clock */

#digital-clock {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    width:100%;
}
#time{
    width: 12rem;
    font-family: "Roboto", 'sans-serif';
    font-size:3em;
}

#date {
    padding-top: 1.25rem;
    width: auto;
    letter-spacing:3px;
    font-size:1.5em;
    font-family: "Roboto",sans-serif;
    color:var(--text);
}

/* reports start */
.reports-wrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.reports-wrapper form:not(#driver-reports-tab form):not(#vehicle-reports-tab form) {
    display: flex;
    flex-direction: row;
}

.reports-wrapper .report-settings {
    display: flex;
    flex-direction: column;
    width: 20.2rem;
}

#fleet .reports-wrapper .report-settings {
    width: 41rem;
}

.reports-wrapper #report-type, .reports-wrapper #advanced-settings{
    margin-bottom: 3rem;
}

/* The driver file is the only mask with a section below the period picker ("Einstellungen
   optional"), so the period block needs the same gap underneath it that the report list and
   the language block already carry. Scoped to that tab: in the output area the language
   dropdown follows the picker, and it is meant to sit close. */
#driver-reports-tab .report-time-period {
    margin-bottom: 3rem;
}

.reports-wrapper .report-buttons {
    display: flex;
    flex-direction: column;
    margin: 0 2.5rem;
    min-width: 14rem;
    max-width: 17rem;
}

.reports-wrapper .report-buttons svg {
    width: 1rem;
    padding: 0 0.5rem 0 0;
    vertical-align: middle;
}

#generated-drivers-reports {
    margin-bottom: 1rem;
    max-height: calc(100vh - 24rem);
}

#generated-drivers-reports .svg-inline--fa, #generated-vehicles-reports .svg-inline--fa, #generated-fleet-reports .svg-inline--fa {
    padding: 0 .5rem 0 1.5rem;
    width: 1.25rem;
}

#generated-drivers-reports .svg-inline--fa.fa-eye, #generated-vehicles-reports .svg-inline--fa.fa-eye, #generated-fleet-reports .svg-inline--fa.fa-eye {
    cursor: pointer;
}

#generated-drivers-reports table, #generated-vehicle-reports table, #generated-fleet-reports table {
    width: 100%;
}

#generated-drivers-reports table td:first-child,
#generated-vehicles-reports table td:first-child {
    max-width: 13rem;
}

#generated-fleet-reports table td:first-child {
    max-width: 9rem;
}

a.green svg {
    color: var(--green);
}

.preview-wrapper {
    position: absolute;
    left: 77rem;
    -moz-transform: scale(0.58);
    -moz-transform-origin: 0 0;
    transform: scale(0.58);
    -o-transform: scale(0.58);
    transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform: scale(0.58);
    -webkit-transform-origin: 0 0;
}

@media only screen and (min-height: 1000px) and (max-height: 1300px) {
    .preview-wrapper {
        transform: scale(0.63);
        -moz-transform: scale(0.63);
        transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.63);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.63);
        -webkit-transform-origin: 0 0;
    }
}

@media only screen and (min-height: 1300px) {
    .preview-wrapper {
        transform: scale(0.82);
        -moz-transform: scale(0.82);
        transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.82);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.82);
        -webkit-transform-origin: 0 0;
    }

    div.shift-graph {
        height: calc(100vh - 30rem);
    }
}

.preview-wrapper.active {
    background: white;
}

.preview
{
    height: 1425px;
    width: 1010px;
    border: 0.05rem solid var(--border-dark);
}

.button-primary.report {
    width: 100%;
    margin: 0 0 1rem 0;
}

.report-actions {
    display: none;
    margin-top: .5rem;
}

.report-actions.visible {
    display: flex;
    flex-direction: column;
}
/* reports end */

/* dash cal */
#dashboard div.grid {
    margin-bottom: 0;
}

#dashboard-doko-summary {
    display: grid;
    grid-template-columns: 12.5% repeat(5, 1fr);
    gap: 1rem;
    margin: 0 1rem 1rem 0;
}

.doko-summary-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 5.5rem;
    padding: .5rem .5rem .75rem;
    background: var(--dbox);
    border-radius: .75rem;
    box-sizing: border-box;
}

.doko-summary-card-title {
    margin-bottom: 0;
    padding: 0 0 .25rem 0;
    font-size: .9em;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--text-mid);
    letter-spacing: 0;
    border-bottom: solid .1rem var(--border-dark);
}

.doko-summary-profile .doko-summary-card-title {
    color: var(--text);
    text-transform: none;
}

.doko-summary-card-value {
    font-size: .8em;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: 0;
}

.doko-summary-profile .doko-summary-card-label {
    margin-bottom: .35rem;
}

.doko-summary-profile .doko-summary-card-value {
    font-size: .9em;
    line-height: 3em;
}

.doko-summary-card-label {
    font-size: .9em;
    line-height: 1.4;
    color: var(--text);
    letter-spacing: 0;
    border-bottom: 1px solid var(--border-dark);
}

.doko-summary-stats {
    display: grid;
    gap: .75rem;
}

.doko-summary-stats.three {
    grid-template-columns: repeat(3, 1fr);
}

.doko-summary-stats.two {
    grid-template-columns: repeat(2, 1fr);
}

.doko-summary-stats.four {
    grid-template-columns: repeat(4, 1fr);
}

.doko-summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    text-align: center;
}

.doko-summary-stat .value {
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.5em;
    color: var(--text);
}

.doko-summary-stat .value.ok {
    color: var(--green);
}

.doko-summary-stat .value.soon {
    color: var(--yellow);
}

.doko-summary-stat .value.overdue {
    color: var(--red);
}

.doko-summary-stat .value.neutral {
    color: var(--text);
}

.doko-summary-stats-neutral .doko-summary-stat .value {
    color: var(--text);
}

.doko-summary-stat .value.clickable.has-popup {
    cursor: pointer;
}

.doko-summary-stat .value.clickable.has-popup:hover {
    opacity: .85;
}

.doko-summary-stat .label {
    font-size: .75em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--text-mid);
    letter-spacing: 0;
    white-space: nowrap;
}

#dashboard.grid .dashboard-left.column:not(:last-child) {
    padding: 0;
    height: calc(100vh - 1rem);
}


#dashboard.grid .dashboard-right.column {
    /* keep the 1rem right gutter (like every other column) so the widgets
       don't touch the screen edge — matches the vertical gap between them */
    padding: 0 1rem 0 0;
    height: calc(100vh - 1rem);
}

#dashboard.grid .column {
   padding-right: 1rem;
}

#dashboard div.grid .column {
    display: flex;
    flex-direction: column;
}

#dashboard h3 {
    margin: 0;
    padding: .125rem 0;
    text-align: center;
}

#dashboard h4 {
    padding-top: 0.75rem;
    font-size: .85em;
    font-weight: 400;
}

/* Driving bans and messages share one row of the middle column. Both are 7rem high, which is
   what the banner alone used to take, so nothing below them moves down. */
#dashboard-top-row {
    display: flex;
    gap: 1rem;
    width: 100%;
    /* The banner's old 7rem plus its 0.5rem top padding - the row keeps exactly the height the
       banner used to have on its own, so nothing below it moves. No margin: the column is a flex
       column with a 1rem gap of its own, and a margin on top of that made the gap down to the
       widgets twice the gap between the two boxes. */
    height: 7.5rem;
}

#dashboard-top-row > * {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    box-sizing: border-box;
}

#dashboard-banner {
    margin-bottom: 0;
    padding: 0.5rem 1rem 0 1rem;
    background: var(--dbox);
    border-radius: .75rem;
    z-index: 1;
    font-size: .9em;
    line-height: 1.2em;
}

#dashboard-banner h3 {
    margin-bottom: 0.5rem;
    border-bottom: 0.005rem solid var(--border-dark);
    font-size: 1.2em;
    text-align: left;
}

#dashboard-banner span.holiday-date {
    display: inline-block;
    margin-bottom: 0.5rem;
    border-bottom: 0.125rem solid var(--red);
}

#dashboard-banner .slideshow {
    position: relative;
    padding: 0 1rem;
    height: 4.5rem;
    width: calc(100% - 2rem);
    color: var(--text);
    overflow: hidden;
}

#dashboard-banner .slideshow .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2rem);
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.4s, visibility 0.4s;
}

#dashboard-banner .slideshow .slide.is-active {
    visibility: visible;
    opacity: 1;
}

#dashboard-banner .slideshow.clickable {
    cursor: pointer;
}

#dashboard-banner .slideshow.clickable:hover .holiday-date {
    border-bottom-color: var(--hl);
}

/* No height of its own - the row sets it, so the two boxes cannot drift apart. */
#dashboard-messages {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem 0.5rem 1rem;
    background: var(--dbox);
    border-radius: .75rem;
    z-index: 1;
    font-size: .9em;
    line-height: 1.2em;
    overflow: hidden;
}

#dashboard-messages h3 {
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
    padding: .125rem 0;
    border-bottom: 0.005rem solid var(--border-dark);
    font-size: 1.2em;
    text-align: left;
}

/* The list is what scrolls, never the box - the dashboard is laid out to the viewport height. */
#dashboard-messages .info-message-list {
    flex: 1 1 auto;
    gap: .25rem;
    min-height: 0;
    overflow-y: auto;
    padding-right: .25rem;
}

#dashboard-messages .info-message-empty {
    margin-top: .25rem;
}

#dashboard-calendar {
    width: calc(30% - 0.5rem);
    aspect-ratio: 1 / 1;
    padding: 1rem;
    background: var(--dbox);
    border-radius: .75rem;
    z-index: 1;
}

#dashboard-calendar .fc .fc-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
}

#dashboard-calendar .fc .fc-toolbar-chunk {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .5rem;
}

.fc .fc-toolbar-chunk:last-child:empty {
    display: none !important;
}

#dashboard-calendar .fc .fc-button-group {
    display: flex;
    flex-wrap: nowrap;
}

#dashboard-calendar .fc .fc-toolbar-title {
    white-space: nowrap;
}

.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
    position: relative;
    min-height: 2em;
}

/* Day-cell event icons: lay the (up to three) icons out in a single centered,
   evenly-spaced horizontal row with a constant height. FullCalendar stacks the
   event "harnesses" vertically by default, which made cells — and the whole
   calendar — grow taller with each extra icon. A fixed-height flex row keeps the
   calendar the same height regardless of how many icons a day holds. */
#dashboard-calendar .fc-daygrid-day-events {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: .5rem;
    height: 2em;
    min-height: 2em;
    margin-top: 1px;
    overflow: hidden;
}

/* Neutralize FullCalendar's clearfix pseudo-elements so they don't become flex
   items and throw off the centering / spacing. */
#dashboard-calendar .fc-daygrid-day-events::before,
#dashboard-calendar .fc-daygrid-day-events::after {
    content: none;
}

/* Each event becomes an inline icon instead of a stacked block. */
#dashboard-calendar .fc-daygrid-event-harness {
    position: static;
    margin: 0;
    flex: 0 0 auto;
}

#dashboard-calendar .fc-daygrid-event-harness .fc-daygrid-event {
    margin: 0;
}

#dashboard-calendar .fc-daygrid-day-events a {
    padding: .1rem 0;
    line-height: 1;
}

/* The event title is empty, so FullCalendar fills it with a non-breaking space
   that sits to the right of the icon glyph (rendered via ::before) and pushes
   the visible icon off-centre. Collapse that whitespace to zero width and
   restore the glyph size explicitly (12.6px = the former .9em at the 14px
   calendar base) so the icons are truly centred and evenly spaced. */
#dashboard-calendar .fc-daygrid-day-events .fc-event-title {
    font-size: 0;
    padding: 0;
}

#dashboard-calendar .fc-daygrid-day-events .fc-event-title::before {
    font-size: 12.6px;
}

/* The empty "+more" placeholder must not participate in the row. */
#dashboard-calendar .fc-daygrid-day-bottom {
    display: none;
}

#dashboard #violations-graph {
    margin-right: 1rem;
    padding: 1rem;
    height: calc(33.3% - 3rem);
    background: var(--dbox);
}

#dashboard #violations-graph p {
    font-size: .85em;
    border-bottom: .05rem solid var(--border-dark);
}

.conspicuousness {
    margin-bottom: 1rem;
    padding: 1rem;
    width: calc(100% - 2rem);
    background: var(--dbox);
    border-radius: .75rem;
}

.conspicuousness h3 {
    text-align: left;
    border: none;
}

.conspicuousness p {
    font-size: .8em;
    line-height: .9em;
    letter-spacing: 0;
    color: var(--text-mid);
}
.conspicuousness a {
    padding: 0;
    font-size: .85em;
    line-height: 3em;
    cursor: default;
}
.conspicuousness a.red {
    padding-bottom: 0.15rem;
    line-height: 2.75em;
    color: var(--text);
    border-bottom: .125rem solid var(--red);
    cursor: pointer;
}
.conspicuousness a.blue {
    padding-bottom: 0.15rem;
    line-height: 2.75em;
    color: var(--text);
    border-bottom: .125rem solid var(--blue);
    cursor: pointer;
}

/* The way out of a deadline row to the page the topic is worked on. It needs its
   own class for the same reason .red and .blue have one: the generic
   .conspicuousness a above is written for the labels, which are inert until they
   have a popup to open, and hands every anchor cursor: default. No line-height
   here on purpose - dashboard-widgets.css pins every row anchor to 1.2 and wins
   on specificity, and a second figure would only be one to keep in step. */
.conspicuousness a.deadline-goto {
    float: right;
    padding: 0 0 0 .5rem;
    color: var(--text-mid);
    cursor: pointer;
}

.conspicuousness a.deadline-goto:hover {
    color: var(--text);
}

/* The row glyph rule paints everything in the row in the accent colour at the
   size of the icon that says what the row is ABOUT; this one is a control at the
   other end of it. Written with the id because that rule carries one too, and an
   id outweighs any number of classes whatever the load order is. */
#dashboard .conspicuousness a.deadline-goto .svg-inline--fa {
    padding: 0;
    height: .8rem;
    color: inherit;
}

/* The linked text inside a dashboard widget - the licence-control list row and
   the next-training tile's date. Anchors are already --text and undecorated
   house-wide, so nothing moves until the pointer is over it, which is the whole
   point: the count beside the row and the label under the date must stay the
   things that are read, not a blue word. The rule is here rather than beside the
   other .dashboard-widget-* rules because that stylesheet ships under its own
   hash and this change belongs to the one being re-cut. */
.dashboard-widget-list-link:hover {
    text-decoration: underline;
}

/* The mark a booked training day carries in the dashboard calendar, the fourth
   beside the vehicle, the driver and the birthday. The events are flattened with
   an empty title, so this glyph is the whole of what is visible - a class with no
   rule here draws an empty coloured block and tells nobody anything.

   It sits in THIS stylesheet and not beside its three neighbours in main.min.css,
   which is where it belongs by subject, because main.min.css is the one sheet
   base.html.twig loads that has no entry in the manifest: it goes out under its
   literal path with a year of immutable caching, so a rule added there reaches
   nobody who has opened the dashboard before. This file is re-cut under a new name
   with every change and therefore arrives. Load order does the rest - app.css is
   linked after main.min.css, so at equal specificity this wins.

   Same family and weight as the three neighbours, which fontawesome.mic.css
   defines and which have always drawn. */
.fc-fqn .fc-event-title::before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    color: rgb(240, 177, 41);
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f19d";
}

/* An async widget tile standing in the VERA chart column rather than in the
   widget grid. The generic placeholder is written for that grid, which runs left
   to right, so its flex-basis of 16rem means WIDTH there and HEIGHT here - a tile
   holding one date would otherwise reserve sixteen rem of the column and take it
   off the charts below. The same correction the quick-actions tile carries one
   file further on, but without the :has() scope: a browser that does not support
   :has() keeps the old flow and still lays this column out top to bottom. */
.dashboard-right .dashboard-widget-placeholder {
    flex: 0 0 auto;
}

#downloads div.chart-wrapper
{
    width: 33.3%;
    height: 100%;
}

#downloads div.chart-wrapper-single
{
    width: 100%;
    height: 100%;
}

#downloads.single, #legend.single {
    margin: 0;
}

#chart, #chart2, #chart3, #chart4 {
    height: calc(100% - 1.5rem);
}
.conspicuousness .row {
    display: flex;
    flex-direction: row;
    padding: .5rem 0;
    height: 2.13rem;
    border-bottom: .05rem solid var(--border-dark);
}

.conspicuousness .svg-inline--fa {
    padding: .25rem 0.35rem;
    height: 1.75rem;
    color: var(--yellow);
}

.conspicuousness .description {
    width: 100%;
}

.conspicuousness .button-primary {
    margin: .5rem 0 0 0.5rem;
    width: 4rem;
    font-size: .8em;
    line-height: 1.8em;
    color: var(--text);
}

#violations-ratio, #downloads {
    margin: 1rem 1rem 0 0;
    padding: .5rem;
    height: calc(33.3% - 1.7rem);
    background: var(--dbox);
}

#downloads {
    height: calc(33.3% - 4.7rem);
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

#legend {
    margin: 0 1rem 0 0;
    padding: .5rem calc(50% - 7.8rem);
    height: 1.45rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 2rem;
    background: var(--dbox);
}

#legend p {
    height: 1rem;
    font-size: .85em;
    line-height: .85em;
}

#legend p.not-due {
    border-bottom: 0.25rem solid var(--green);
}
#legend p.due-soon {
    border-bottom: 0.25rem solid var(--yellow);
}
#legend p.overdue {
    border-bottom: 0.25rem solid var(--red);
}

#downloads div {
    margin: .25rem 0;
}

#downloads h4
{
    margin: 0;
    text-align: center;
    line-height: 0.5rem;
}

#downloads h4 svg
{
    color: var(--yellow);
}

#dashboard-info-popup .section {
    display: none;
    overflow: hidden;
    overflow-y: scroll;
    max-height: calc(100vh - 10rem);
}

#dashboard-info-popup .section.visible {
    display: block;
}

#dashboard button.red {
    border-bottom: .1rem solid var(--red);
    border-right: .1rem solid var(--red);
}

#dashboard button.blue {
    border-bottom: .1rem solid var(--blue);
    border-right: .1rem solid var(--blue);
}

#dashboard button:disabled {
    background: var(--bhov);
}

/* dash cal end */

/* assign popup */
#assign-driver-cards-vehicles-popup dt, #assign-driver-cards-vehicles-popup dd {
    height: 1.5rem;
    line-height: 2em;
}

#assign-driver-cards-vehicles-popup table thead {
    background:none;
}

#assign-driver-cards-vehicles-popup input {
    margin: 0;
    width: calc(100% - .7rem);
}

#assign-driver-cards-vehicles-popup .ui.dropdown {
    border: .005rem solid var(--yellow);
}

#assign-driver-cards-vehicles-popup .ui.dropdown .svg-inline--fa {
    padding: 0 .25rem;
}

dd.dropdown {
    overflow: visible;
}

#dashboard-info-popup .accordion {
    overflow-y: scroll;
    max-height: calc(calc(100vh - 11rem)/2);
}

#new-driver-cards .table th:nth-child(2), #new-driver-cards .table td:nth-child(2),
#refused-driver-cards .table th:nth-child(2), #refused-driver-cards .table td:nth-child(2){
   width: 22rem;
}

#assign-driver-cards-vehicles-popup #new-driver-cards-vehicles {
    max-height: calc(100vh - 4rem);
    overflow-y: scroll;
}
#assign-driver-cards-vehicles-popup .table{
width: calc(100% - 1rem);
margin: .5rem .5rem 2rem .5rem ;
}
#assign-driver-cards-vehicles-popup .table th, #assign-driver-cards-vehicles-popup .table td {
    width: 11rem;
    color: var(--text);
}

#assign-driver-cards-vehicles-popup .table th:first-child, #assign-driver-cards-vehicles-popup .table td:first-child {
    width: 2rem;
}

#assign-driver-cards-vehicles-popup label.checkbox {
    background: none;
    border: none
}

#new-driver-cards-wrapper, #refused-driver-cards-wrapper,
#new-vehicles-wrapper, #refused-vehicles-wrapper {
    background: var(--menubg);
}

/* Rejected entries: one collapsed checkbox accordion per side (assign-driver-cards-vehicles.twig).
   Everything carries the popup id, because the generic accordion rules would otherwise win: the open
   state (.accordion input:checked ~ .accordion-item-content) adds `padding: 1em` back, and every span
   in a label (.accordion-item-label span) becomes a red pill. Red is kept for new entries here, so the
   counter is yellow like the top-bar button and the menu badge for rejected-only lists. No background
   is set on the label: the generic popup rules colour it and keep the hover and open states. */
#assign-driver-cards-vehicles-popup .assign-rejected {
    margin-top: 2rem;
}

#assign-driver-cards-vehicles-popup .assign-rejected .accordion-item-label {
    margin: 0;
    padding: .25rem;
    font-size: .9em;
    font-weight: 400;
    line-height: 1.2rem;
    text-transform: uppercase;
    border-bottom: .05rem solid var(--border);
}

#assign-driver-cards-vehicles-popup .assign-rejected .accordion-item-label svg.fa-chevron-right {
    margin: .15rem .25rem 0 0;
}

#assign-driver-cards-vehicles-popup .assign-rejected .accordion-item-label span.assign-rejected-count,
#assign-driver-cards-vehicles-popup .assign-rejected input:checked + .accordion-item-label span.assign-rejected-count {
    float: right;
    margin: 0 .5rem 0 0;
    padding: 0 .5em;
    color: var(--text-dark);
    background-color: var(--yellow);
    border-radius: 2em;
}

#assign-driver-cards-vehicles-popup .assign-rejected .accordion-item-content,
#assign-driver-cards-vehicles-popup .assign-rejected input:checked ~ .accordion-item-content {
    padding: 0;
}

#assign-driver-cards-vehicles-popup .assign-rejected-hint {
    margin: .5rem .5rem 0;
    font-size: .8rem;
    line-height: 1.1rem;
    color: var(--text-mid);
}

/* "Visible for" column of the rejected lists. The vehicle table has to fit the 37.5% column of the
   triple popup (table about 39.7rem): 2rem + 11rem + 11rem + 8rem, each plus 1rem cell padding, is
   36rem. 8rem keeps the longest header ("Visibile ancora", 7.3rem) on one line. */
#assign-driver-cards-vehicles-popup .table th.days-left,
#assign-driver-cards-vehicles-popup .table td.days-left {
    width: 8rem;
}

div.select-company {
    width: 25rem;
}

:focus-visible {
    outline: none;
}

/* switch start */
.switch {
    position: relative;
    display: block;
    margin-top: .5rem;
    width: 30px;
    height: 18px;
  }

  .switch-wrapper.short .switch {
    margin: 0;
    height: 14px;
  }

  .switch-wrapper {
    display: flex;
    flex-direction: row;
    gap: .25rem;
}

.switch-wrapper .title {
    height: 2rem;
    line-height: 2.1rem;
}

.switch-wrapper.short .title {
    height: .9rem;
    line-height: .9rem;
    font-size: .8em;
}

  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-dark);
    -webkit-transition: .4s;
    transition: .4s;
  }

  .slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 3px;
    bottom: 3px;
    background-color: var(--text);
    -webkit-transition: .4s;
    transition: .4s;
  }

  .switch-wrapper.short .slider:before {
    height: 8px;
  }

  input:checked + .slider:before {
    background-color: var(--hl);
  }

  input:checked + .slider:before {
    -webkit-transform: translateX(12px);
    -ms-transform: translateX(12px);
    transform: translateX(12px);
  }
  /* switch end */

  /* toggle start */
/* The switch - the box around the slider */
.toggle {
    position: relative;
    display: inline-block;
    margin: 0 .25rem;
    padding: 0.2rem 0.3rem;
    width: 4rem;
    height: .9rem;
    border: 0.05rem solid var(--dropbg);
    color: var(--text);
  }
  
  /* Hide default HTML checkbox */
  .toggle input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  /* The slider */
  .toggle .check {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--menubg);
    -webkit-transition: .2s;
    transition: .2s;
  }

.toggle span {
    line-height: 1.2rem;
    padding-left: 1rem;
}

  .toggle input:checked + .check {
    border: 0.05rem solid var(--green);
  }
  /* toggle end */

  #user-administration-tab .button-primary, #groups-tab .button-primary,
  #locations-tab .button-primary, #work-profiles-tab .button-primary, #violation-profiles-tab .button-primary{
    margin: 1rem .8rem 1rem 0;
  }

  .work-profile-data span.right {
    width: 50%;
  }

  #administration-groups label.checkbox {
    width: 25rem;
  }

  #administration-groups label.checkbox .checkmark, #user-list label.checkbox .checkmark {
    float: right;
  }

#administration-groups label.checkbox .checkmark::after, #user-list label.checkbox .checkmark::after {
  float: right;
  right: 0.85rem;
  left: auto;
}

#fa-title {
    margin-bottom: 1rem;
}

dl#user-info {
    margin-top: 3.5rem;
}

p.totp-offer {
    margin-top: 3rem;
    margin-bottom: 1rem;
}

.buttons-group {
    display: flex;
    flex-direction: row;
}

/* One block per module, side by side. Not a table any more: the modules are
   independent of one another, and a shared row tied the file explorer's four
   rights apart - two at the top, two three rows further down, level with the
   headings of the neighbouring columns.

   auto-fit rather than a fixed column count because the Vera block is gated:
   this is three blocks or four, and the fourth is what used to break it. */
.permissions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1rem 1.5rem;
    align-items: start;
}

/* Three things have to hold at once here, and each was measured:

   height: auto - a collective rule for form fields ([type=color], [type=date],
   … , textarea, label.checkbox) gives every one of these labels the fixed
   height of an input. A label needing two lines therefore never grew and its
   second line landed on the label below: 18 px of box around 34 px of text.

   flex with order: -1 - the tick stands last in the markup, because the
   checked-state selector is input:checked ~ .checkmark and needs it after the
   input. Floated, it drops below a block-level label; as a flex item it can be
   ordered in front without moving in the markup.

   min-width: 0 - a flex item will not shrink below its longest word by default,
   and "Unternehmenseinstellungen" is one word of 212 px in a column of 158. It
   hung into the neighbouring module until this was set. */
.permissions label.checkbox {
    display: flex;
    align-items: flex-start;
    height: auto;
    margin: 0;
    padding: .1rem 0;
    border: none;
    background: none;
    font-size: .85rem;
    line-height: 1.3;
  }

.permissions label.checkbox .checkmark {
    float: none;
    order: -1;
    flex: 0 0 auto;
    margin: .15rem .35rem 0 0;
  }

.permissions .permission-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

/* The module's name. The rule sets it apart from the group headings below it,
   which is what the table's header row used to do. */
.permission-module > h4 {
    margin: 0 0 .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--border-dark);
    color: var(--text);
    font-size: .8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* "(Führerscheinkontrolle)" behind Doko: the explanation is not part of the
   name, so it does not shout along with it. */
.permission-module > h4 span {
    color: var(--text-mid);
    text-transform: none;
    letter-spacing: 0;
}

.permission-module > h5 {
    margin: .7rem 0 .25rem;
    color: var(--text-mid);
    font-size: .8rem;
    font-weight: 400;
}

.permission-module > h5:first-of-type {
    margin-top: 0;
}

.dot {
    position: absolute;
    height: 0.313rem;
    width: 0.313rem;
    top: 0.9rem;
    left: 2.2rem;
    background-color: var(--red);
    border-radius: 50%;
    display: inline-block;
}

.status-dot {
    margin-left: 1rem;
    height: 0.5rem;
    width: 0.5rem;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.red {
    background-color: var(--red);
}

.status-dot.green {
    background-color: var(--green);
}

.status-dot.yellow {
    background-color: var(--yellow);
}

.dot.yellow, .main-menu li .tag.yellow
{
    background-color: var(--yellow);
}

/* speed data */
#speed-data-wrapper
{
    display: flex;
    flex-direction: row;
    gap: 3rem;
}

#speed-data-wrapper form {
    width: 20.125rem;
}

#speed-data-wrapper input {
    margin: 1rem 0;
width: calc(100% - 0.675rem);
}

#speed-data-wrapper .litepicker {
    padding: 1rem 0;
    min-height: 14.5rem;
}

#speed-table thead {
    background: var(--dbox);
}

#speed-table tbody {
    display: block;
    height: 19.7rem;
    overflow-y: scroll;
    background: var(--dbox);
}

#speed-table.table {
    width: 18rem;
}

#speed-table.table td {
    width: 7.75rem;
    background: var(--dbox);
}

#speed-table.table th:last-child, #speed-table.table td:last-child {
    padding-left: .5rem;
}

#speed-data-chart {
    padding: 1rem 0.5rem;
    background: var(--dbox);
}

/* info */
/* The information tab. Every block on it is a card now: a heading strip and a body under it,
   inside one bordered box. They used to be two siblings held together by a "h2 + dl" rule -
   which cannot draw a border around both halves, and left the one block that is not a
   definition list, the rights matrix, standing on the page background with a header floating
   above it.
   All three brands share these rules: head, cards and the two data columns are the same markup
   in info-content.twig, _tz and _si, and only the contact column differs. */
#info {
    /* Grid rather than the flex of div.grid: the header spans the whole width, and the fixed
       percentages of .column.two/.four left the cards short of their content. Two boxes: the
       cards, and the brand panel beside them.

       --info-gap is the one distance between two cards - across, down, and towards the brand
       panel. The cards used to carry a margin of their own, which the row gap of the grid then
       did not match: two blocks in a column sat 20px apart and the wide one below them 0. */
    --info-gap: 1.5rem;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21rem);
    align-items: start;
    gap: var(--info-gap);
    margin: 0 1rem 0 0;
    padding-bottom: 1.5rem;
    width: calc(100% - 1rem);
}

/* The cards: two columns, with the wide blocks below spanning both. */
#info .info-main {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* start for the rows, stretch for the cards: the rows sit at the top of the page, and two
       cards side by side end on the same line even when one carries a row less. */
    align-content: start;
    align-items: stretch;
    gap: var(--info-gap);
    min-width: 0;
}

#info .info-card-wide {
    grid-column: 1 / -1;
}

#info .info-brand {
    min-width: 0;
}

/* --- the page header --- */

/* The title used to sit in the first column and the greeting in the second, on two different
   baselines, and both pushed the card below them a heading's height down. */
#info .info-head {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .25rem 2rem;
    margin: 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border-dark);
}

#info h1 {
    margin: 0;
    font-size: 1.6em;
    font-weight: 300;
}

#info .info-greeting {
    margin: 0;
    text-align: right;
}

/* "p span { float: right }" is a house rule of the driver pages. Floated, the two spans come
   out in reverse order - the lead first and the separator dot at the head of the line. */
#info .info-greeting span {
    float: none;
}

/* The lead is the second half of the greeting, so it is dimmed and the two are separated by a
   dot rather than by a line break - the window is at least 1600px wide and they fit on one. */
#info .info-lead {
    color: var(--text-mid);
}

#info .info-lead::before {
    content: "·";
    margin: 0 .5rem;
    color: var(--border);
}

/* --- the card --- */

.info-card {
    /* overflow, so the rounded corners cut the heading strip - it is a full-width block */
    overflow: hidden;
    margin: 0;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .75rem;
    box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .28);
}

/* The base h2 is content-box at calc(100% - .5rem) and carries a border of its own; both would
   leave the strip a different width from the body under it, which is what made the old blocks
   look stepped. */
#info .info-card > h2 {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    padding: .6rem .9rem;
    width: 100%;
    background: var(--hov-dark);
    border-bottom: 1px solid var(--border-dark);
    color: var(--text);
    font-size: .95em;
    font-weight: 400;
    letter-spacing: .04em;
}

/* FontAwesome pads every icon by .813rem and forces it to 1.375rem, which would push the
   heading a thumb's width to the right and blow the strip open. */
#info .info-card > h2 .svg-inline--fa {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: .95rem;
    height: .95rem;
    color: var(--hl);
}

/* The same icon before the script has swapped it, and on the webfont path where it stays an
   <i>: sized by its font, not by a box, or the glyph is cut off. */
#info .info-card > h2 > i {
    flex: 0 0 auto;
    width: .95rem;
    color: var(--hl);
    font-size: .95rem;
    text-align: center;
}

#info .info-card-body {
    padding: .9rem;
}

/* --- the data lists --- */

/* dt and dd are floated, exactly one line high and clipped with an ellipsis in the base sheet,
   which cut every company name short. As a two-column grid they wrap instead, and the term and
   its value stay on one row. */
#info .info-data {
    display: grid;
    /* Capped rather than auto: "Vertragslaufzeit beträgt" is the longest term in the tree and
       at max-content it left the value 99px on a 1600px window - the company name came out
       four lines high. */
    grid-template-columns: minmax(5rem, 44%) minmax(0, 1fr);
    margin: 0;
    padding: .25rem .9rem .6rem;
    width: auto;
}

#info .info-data dt,
#info .info-data dd {
    float: none;
    height: auto;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: .45rem .5rem .45rem 0;
    border-bottom: 1px solid var(--border-dark);
    font-size: .92em;
    line-height: 1.35;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* The term wraps at word boundaries, the value anywhere. Terms are ordinary German words and
   broke mid-word ("Vertragsabsc / hluss am") under the overflow-wrap the values need for a
   mail address; without body's letter-spacing the longest of them, "Vertragsabschluss", fits
   the column on a 1600px window. */
#info .info-data dt {
    padding-right: 1rem;
    color: var(--text-mid);
    letter-spacing: normal;
    word-spacing: normal;
    overflow-wrap: normal;
}

/* The last row closes the card; a rule under it would hang in the padding. */
#info .info-data dt:last-of-type,
#info .info-data dd:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

/* Three states, one of which is worth noticing. As a badge the answer is read before the row
   it stands in. */
#info .info-badge {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: 999rem;
    font-size: .8rem;
    line-height: 1.45;
}

#info .info-badge + .info-badge {
    margin-left: .35rem;
}

#info .info-badge.ok {
    background: rgba(102, 255, 51, .12);
    color: var(--green);
}

#info .info-badge.warn {
    background: rgba(253, 177, 3, .14);
    color: var(--yellow);
}

/* --- the figures --- */

/* Four counts. In a definition list the number was set in the same size as the long label it
   stood against; as tiles it is the thing that is read, and the block carries the column
   instead of trailing off after four thin lines. */
#info .info-figures {
    display: grid;
    /* Four fixed tracks, not auto-fit: the block is as wide as the page now, and a group that
       reaches only one of the four counts had that single tile stretched across 1280px. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: .9rem;
    list-style: none;
}

/* ul li brings a 1rem bottom margin from the base sheet; the gap does the spacing here. */
#info .info-figures li {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    margin: 0;
    padding: .6rem .7rem;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: .5rem;
}

#info .info-figure-value {
    color: var(--text);
    font-size: 1.7rem;
    font-weight: 300;
    line-height: 1.1;
}

#info .info-figure-label {
    color: var(--text-mid);
    font-size: .78rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* --- the rights matrix --- */

/* Read-only here: what the group may not do is dimmed rather than shown as an empty box of the
   same weight as a ticked one. Scoped to #info and to the disabled copy, because the same
   include is the editable form on the administration page. */
#info .permissions label.checkbox input[type=checkbox]:disabled:not(:checked) ~ .permission-label {
    color: var(--text-mid);
    opacity: .65;
}

#info .permissions label.checkbox .checkmark {
    margin-right: .5rem;
}

/* The four modules stay on one row - the matrix is read across, and a module wrapping to a
   second row leaves the width of two columns empty beside it. Across two columns of the page
   each comes out around 320px wide; inside the middle column alone they were 204px, the width
   at which "Unternehmenseinstellungen" (one word, 25 characters) starts breaking mid-word
   under the overflow-wrap the long labels need as a net. */
#info .permissions {
    grid-template-columns: repeat(auto-fit, minmax(12.75rem, 1fr));
    gap: 1rem 1.75rem;
}

/* body sets letter-spacing: 1px and word-spacing: 2px, which adds 18px to a word like
   "Benutzerverwaltung" - enough to push it into a second line, broken mid-word by the
   overflow-wrap the long labels need as a net. In four narrow columns the tighter setting is
   the readable one, and the longest label in the tree ("Unternehmenseinstellungen", 25
   characters) then measures 159px against the 167px a column leaves it. */
#info .permissions .permission-label {
    letter-spacing: normal;
    word-spacing: normal;
    font-size: .86em;
}

/* --- the contact card on the right --- */

/* One set of rules for all three brands. The brand sheets load after this one and style their
   contact card with a single id, so every rule that has to win names #info in front of it. */
#info .info-brand > .info-card {
    display: block;
    margin-top: 0;
    padding-bottom: 0;
}

#info .brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem .9rem;
    border-bottom: 1px solid var(--border-dark);
}

#info .brand-mark svg#logo,
#info .brand-mark img {
    margin: 0;
    width: 62%;
    max-width: 13rem;
    height: auto;
}

/* Contact data is a term and a value; a download is a heading and the buttons under it. They
   used to share one definition list, which meant a download had to be filed under a term -
   two of them got an empty <dt> to sit beside, and the rows came out at four different heights. */
/* The label over the value, not beside it: this column is 17.5rem at its narrowest and a
   two-column row left a long support address 111px, which broke it across four lines. Stacked,
   it also reads like the download groups under it - a small grey heading and its content. */
#info .brand-contact {
    display: block;
    margin: 0;
    padding: .5rem .9rem .7rem;
    width: auto;
}

#info .brand-contact dt,
#info .brand-contact dd {
    float: none;
    height: auto;
    min-width: 0;
    width: auto;
    margin: 0;
    border: 0;
    line-height: 1.35;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
}

#info .brand-contact dt {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .75rem 0 .15rem;
    color: var(--text-mid);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#info .brand-contact dt:first-of-type {
    padding-top: .25rem;
}

/* Indented by the icon and its gap, so the value lines up with the label's text. */
#info .brand-contact dd {
    padding: 0 0 .55rem 1.3rem;
    border-bottom: 1px solid var(--border-dark);
    font-size: .95em;
}

#info .brand-contact dt .svg-inline--fa {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: .8rem;
    height: .8rem;
    color: var(--text-mid);
}

#info .brand-contact dt > i {
    flex: 0 0 auto;
    width: .85rem;
    color: var(--text-mid);
    font-size: .8rem;
    text-align: center;
}

#info .brand-contact dd:last-of-type {
    padding-bottom: 0;
    border-bottom: 0;
}

#info .brand-downloads {
    padding: .3rem .9rem .9rem;
    border-top: 1px solid var(--border-dark);
}

#info .brand-downloads h5 {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 1rem 0 .45rem;
    color: var(--text-mid);
    font-size: .78rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
}

#info .brand-downloads h5:first-child {
    margin-top: .6rem;
}

/* Spelled out to a, and with #info in front: the brand sheets load after this one and carry
   ".button.wide { margin: 0 }" and "a.button { padding: .125rem 0 }" under a single id, so
   the later rule won and the buttons sat flush against each other. */
#info .brand-downloads a.button.button-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    box-sizing: border-box;
    margin: 0 0 .45rem;
    padding: .4rem .6rem;
    width: 100%;
    border-radius: .3rem;
    text-align: center;
}

#info .brand-downloads a.button.button-primary:last-child {
    margin-bottom: 0;
}

#info .brand-downloads a.button .svg-inline--fa {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    width: .85rem;
    height: .85rem;
}

#info .brand-downloads a.button > i {
    flex: 0 0 auto;
    font-size: .85rem;
}

#info .brand-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: .7rem .9rem;
    border-top: 1px solid var(--border-dark);
}

#info .brand-links a {
    padding: 0;
    color: var(--text-mid);
    font-size: .82rem;
    line-height: 1.4;
}

#info .brand-links a:hover {
    color: var(--text);
    text-decoration: underline;
}

/* .tab-container.scroll forces a scrollbar whether or not anything overflows, and this tab is
   shorter than the window at every usual height - the bar stood there dead. auto still scrolls
   it on a short window. */
#info-tab {
    overflow-y: auto !important;
}

/* The blocks divide the card between them; the grid above does the counting.
   The rule that used to stand here fixed every cell at a third of the width and
   was written when there were three modules - with the file explorer as a
   fourth it put 133 % on a 100 % card, and the fourth column hung 247 px out of
   it, behind the contact panel. */

.info-message-empty {
    margin: 0;
    color: var(--lighttext);
}

.info-message-list {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.info-message-item {
    appearance: none;
    border: 0;
    box-shadow: none;
    outline: none;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .25rem .5rem;
    background: var(--dropbg);
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.info-message-item.is-new {
}

.info-message-content {
    min-width: 0;
}

.info-message-title {
    min-width: 0;
}

.info-message-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    margin-left: auto;
    align-self: center;
}

.info-message-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: .16rem .5rem;
    background-color: var(--red);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: .9;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}

.info-message-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin: 0;
    color: var(--lighttext);
    font-size: .8rem;
    line-height: 1;
    align-self: center;
}

.info-message-arrow .svg-inline--fa {
    width: 1rem;
    height: 1rem;
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.driving-ban-list {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.driving-ban-list li {
    display: grid;
    grid-template-columns: 11rem 1fr 1fr;
    align-items: baseline;
    gap: 1rem;
    padding: .35rem .5rem;
    background: var(--dropbg);
}

.driving-ban-list li.today {
    border-left: .25rem solid var(--red);
    padding-left: .25rem;
}

.driving-ban-list .driving-ban-date {
    color: var(--lighttext);
    white-space: nowrap;
}

.driving-ban-list .driving-ban-where {
    color: var(--lighttext);
}

#info-message-popup .popup-content p {
    white-space: pre-line;
    background: var(--dbox);
    padding: .5rem;
    margin-bottom: 1rem;
}

.main-menu .tools-menu-link {
    position: relative;
}

.main-menu .account {
    bottom: 16rem !important;
}

.main-menu .language {
    bottom: 22rem !important;
}

.main-menu .administration {
    bottom: 7rem !important;
}

#user-notification-settings {
    margin-bottom: 1rem;
}

.notification-settings-status-table {
    margin-bottom: .75rem;
}

#user-notification-settings .notification-settings-table {
    width: 100%;
    table-layout: fixed;
}

#user-notification-settings .notification-settings-table thead {
    display: table-header-group;
}

#user-notification-settings .notification-settings-table tbody {
    display: table-row-group;
}

#user-notification-settings .notification-settings-table tr {
    display: table-row;
}

#user-notification-settings .notification-settings-table th {
    display: table-cell;
    width: auto;
    font-weight: 300;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

#user-notification-settings .notification-settings-table th:first-child {
    padding-right: 2rem;
}

#user-notification-settings .notification-settings-table td {
    display: table-cell;
    width: auto;
    vertical-align: middle;
}

#user-notification-settings .notification-settings-table td:not(:first-child) {
    text-align: center;
}

#user-notification-settings .notification-settings-label {
    width: 34%;
    white-space: nowrap;
}

#user-notification-settings .notification-settings-label-column {
    width: 34%;
}

#user-notification-settings .notification-settings-state {
    width: 16rem;
}

#user-notification-settings .notification-settings-flag {
    width: 6rem;
    text-align: center;
    white-space: nowrap;
}

#user-notification-settings .notification-settings-flag-column {
    width: 6rem;
}

#user-notification-settings .notification-settings-subhead td {
    background: none;
    text-transform: uppercase;
    color: var(--text-mid);
    padding-top: .35rem;
    padding-bottom: .2rem;
    padding-left: 0;
    font-size: .85em;
    border-bottom: 0.05rem solid var(--border);
}

#user-notification-settings .notification-settings-subhead:not(:first-child) td {
    border-top: .75rem solid transparent;
}

.notification-settings-block {
    max-width: 52rem;
}

#edit-user-notification-settings-popup .notification-settings-block {
    max-width: none;
    width: 100%;
    margin-bottom: 1rem;
}

.notification-toggle {
    margin-bottom: 1rem;
}

.notification-toggle-row {
    margin-bottom: 1.25rem;
}

.notification-toggle-checkbox {
    background: none;
    border: none;
    width: auto;
    min-height: 0;
    padding: 0 0 0 2rem;
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1rem;
}

.notification-toggle-checkbox .checkmark {
    left: 0;
}

.notification-settings-group {
    margin-top: 1.25rem;
}

.notification-settings-group h3 {
    margin: 0 0 .5rem 0;
    background: none;
    color: var(--text-mid);
    padding: 0 0 0 .25rem;
    width: calc(100% - .25rem);
    font-size: .85em;
    border-bottom: 0.05rem solid var(--border);
}

.notification-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .35rem .75rem;
}

.notification-settings-grid label.checkbox,
.notification-event-checkbox,
.notification-toggle {
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 1.1rem;
}

.notification-event-checkbox {
    margin-bottom: .35rem;
}

#user-notification-settings .notification-settings-checkbox-cell {
    width: 8.5rem;
    text-align: left;
    white-space: nowrap;
    padding: 0.125rem 0.175rem;
}

#user-notification-settings .notification-settings-status-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .35rem;
    white-space: nowrap;
}

#user-notification-settings .notification-settings-flag {
    text-align: left;
}

#user-notification-settings .notification-settings-table td:not(:first-child) {
    text-align: left;
}

#user-notification-settings .notification-settings-checkbox-cell .notification-event-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    min-height: 1rem;
    margin: 0 .25rem;
    padding: 0;
    background: none;
    border: none;
    vertical-align: middle;
}

#user-notification-settings .notification-settings-checkbox-cell .notification-event-checkbox .checkmark {
    float: none;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
}

.disabled-checkbox {
    opacity: 1;
    cursor: default;
}

#user-notification-settings .disabled-checkbox .checkmark {
    background: transparent;
    border: 0.05rem solid var(--border);
    width: 1rem;
    height: 1rem;
}

#user-notification-settings .disabled-checkbox .checkmark::after {
    float: none;
    left: 0.3rem;
    right: auto;
    top: 0;
}

.reminder-settings-table th,
.reminder-settings-table td {
    display: table-cell;
    width: auto;
    padding: 0.4rem 0.5rem;
    vertical-align: top;
}

.reminder-settings-table {
    width: 100%;
    table-layout: fixed;
}

.reminder-settings-table .label-column {
    width: 46%;
}

.reminder-settings-table .value-column {
    width: 27%;
}

.reminder-settings-table .days-column {
    width: 9rem;
    white-space: nowrap;
}

#edit-user-notification-settings-popup .notification-settings-edit-table .label-column {
    width: 34%;
}

#edit-user-notification-settings-popup .notification-settings-edit-table .days-column {
    width: 8.5rem;
    text-align: left;
}

.notification-settings-empty-cell {
    background: transparent;
}

.notification-settings-edit-table .notification-event-checkbox {
    display: block;
    width: 1rem;
    min-height: 1rem;
    margin: 0 .25rem 0 0;
    padding: 0;
    background: none;
    border: none;
    line-height: 1rem;
}

.notification-settings-edit-table .notification-event-checkbox .checkmark {
    display: block;
    float: none;
    position: relative;
    width: .8rem;
    height: .8rem;
    margin: 0;
    top: 0;
    left: 0;
}

.notification-settings-edit-table .notification-event-checkbox .checkmark::after {
    left: 0.25rem;
    top: 0.02rem;
    width: 0.2rem;
    height: 0.5rem;
}

#edit-user-notification-settings-popup .notification-settings-status-value {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    white-space: nowrap;
}

#edit-user-notification-settings-popup .notification-settings-status-value .notification-event-checkbox {
    margin: 0;
}

#edit-user-notification-settings-popup .notification-settings-edit-table th {
    text-align: left;
}

#edit-user-notification-settings-popup .notification-settings-edit-table td:not(:first-child) {
    text-align: left;
}

.notification-toggle-checkbox .checkmark::after {
    left: 0.25rem;
    top: 0.02rem;
    width: 0.2rem;
    height: 0.5rem;
}

#edit-user-notification-settings-popup .popup-content {
    width: calc(100% - 2rem);
}


.reminder-settings-table .reference-column {
    width: 14rem;
    white-space: nowrap;
}

.reminder-settings-table th {
    white-space: nowrap;
}

.reminder-settings-table-deadlines {
    table-layout: auto;
}

.reminder-settings-table-edit.reminder-settings-table-downloads {
    table-layout: auto;
}

.reminder-settings-table-edit td input,
.reminder-settings-table-edit th input {
    width: calc(100% - 0.8rem);
    margin-top: 0.25rem;
}

.reminder-settings-table-edit td .title {
    display: block;
    margin-bottom: 0.15rem;
}

.reminder-settings-table-edit .days-column input {
    width: calc(100% - 0.8rem);
    min-width: 4.5rem;
}

.reminder-settings-table-edit .reference-column {
    white-space: nowrap;
}

.reminder-settings-table th {
    text-transform: uppercase;
}

.reminder-settings-table th.uwide,
.reminder-settings-table td.uwide {
    width: 16rem;
}

.main-menu .menu-bubble {
    position: absolute;
    top: .25rem;
    left: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    height: 1rem;
    border-radius: 999rem;
    background-color: var(--red);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.2;
    z-index: 10001;
}

@media (max-width: 900px) {
    .info-message-item {
        grid-template-columns: 1fr;
    }

    .info-message-arrow {
        display: none;
    }

    .info-message-topline {
        flex-wrap: wrap;
    }
}

/* loader */
#tab-loader{
    display: none;
    position: absolute;
    top: 3rem;
    right: 0;
    bottom: 0;
    padding-top: 5rem;
    width: calc(100% - 30.5rem);
    background: var(--bg);
    z-index: 100;
}

#tab-loader.revert {
    top: calc(100vh - 30rem);
}

.loader {
    margin: 0 auto;
    width: 3.5rem;
}

.loader .circle {
    width: 3rem;
    height: 3rem;
    border: .25rem solid #f3f3f3; /* Light grey */
    border-top: .25rem solid #3498db;
    border-radius: 50%;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#tab-loader.active {
    display: flex;
}

/* tooltip */
.tippy-box[data-theme~='tg']{background-color:var(--hov);color:var(--ttip);letter-spacing:0;border-radius:5px;border:1px solid var(--border)}.tippy-box[data-theme~='tg']::after{background-color:var(--hov)}/* The arrow takes the colour of the box, not of the text in it: --ttip is #fff, which drew a white triangle against the dark box on every tooltip in the frontend. The two sideways placements had no rule at all - the tool shelf is the first thing here that opens to the side. */.tippy-box[data-theme~='tg'][data-placement^='top']>.tippy-arrow::before{border-top-color:var(--hov)}.tippy-box[data-theme~='tg'][data-placement^='bottom']>.tippy-arrow::before{border-bottom-color:var(--hov)}.tippy-box[data-theme~='tg'][data-placement^='left']>.tippy-arrow::before{border-left-color:var(--hov)}.tippy-box[data-theme~='tg'][data-placement^='right']>.tippy-arrow::before{border-right-color:var(--hov)}

/* main menu */
.main-menu{position:absolute;display:flex;flex-direction:column;top:0;bottom:0;left:0;padding-top:4rem;height:100%;width:3rem;font-size:1.1em;background-color:var(--menubg);transition:width 206ms .3s ease;overflow-x:hidden;overflow-y:hidden;box-sizing:border-box;z-index:100}.main-menu ul,.main-menu li{display:inline-block;list-style:none;outline:0;margin:0;padding:0}.main-menu>ul{height:100%;width:100%;margin-top:5rem;overflow-y:auto;overflow-x:hidden}.main-menu li{margin:.625rem 0;width:15rem}.main-menu li:hover{background-color:var(--hov)}.main-menu li.active svg.svg-inline--fa{padding:0 .813rem 0 .563rem;border-left:.25rem solid var(--hl)}.main-menu li .tag{background-color:var(--red);color:var(--text);padding:.1rem .5em;border-radius:2em;margin-left:auto;margin-right:.75em}.main-menu li a{position:relative;display:flex;padding:.825rem 0;width:100%;align-items:center;vertical-align:middle;white-space:nowrap;color:var(--text);text-decoration:none}.main-menu .svg-inline--fa, .main-menu .language span{padding:0 .813rem;width:1.375rem;height:1.375rem;text-align:center;color:var(--text);z-index:9999}.main-menu .language span{height:1rem}.bottom-menu{position:absolute;display:block!important;bottom:2.5rem;width:100%}.main-menu .administration{bottom:7rem}.main-menu .language{bottom:16rem}input.hamburger{display:none}input.hamburger:checked ~ nav.main-menu{height:100vh}input.hamburger:checked ~ nav.main-menu{width:15rem}input.hamburger:checked ~ label>i{background-color:transparent;transform:rotate(90deg)}input.hamburger:checked ~ label>i:before{transform:translate(-50%,-50%) rotate(45deg)}input.hamburger:checked ~ label>i:after{transform:translate(-50%,-50%) rotate(-45deg)}input.hamburger:checked ~ label close{color:var(--text);width:100%}input.hamburger:checked ~ label open{color:var(--menubg);width:0}label.hamburger{position:fixed;display:block;height:1.4rem;top:1.5rem;left:.8rem;width:1.4rem;z-index:9999}label.hamburger:hover{cursor:pointer}label.hamburger text close,label.hamburger text open{text-transform:uppercase;text-align:center;position:absolute;transform:translateY(24px);text-align:center;overflow:hidden;transition:width .25s .35s,color .45s .35s;font-size:6px}label.hamburger text close{color:var(--text);right:0;width:0}label.hamburger text open{color:var(--text);width:100%}label.hamburger>i{position:absolute;width:100%;height:2px;top:50%;background-color:var(--text);pointer-events:auto;transition-duration:.35s;transition-delay:.35s}label.hamburger>i:before,label.hamburger>i:after{position:absolute;display:block;width:100%;height:2px;left:50%;background-color:var(--text);content:"";transition:transform .35s;transform-origin:50% 50%}label.hamburger>i:before{transform:translate(-50%,-7px)}label.hamburger>i:after{transform:translate(-50%,7px)}


/* accordion */
.accordion {
    overflow: hidden;
}

.accordion input {
    display: none;
}

.accordion-item {
    width: 100%;
    overflow: hidden;
}
.accordion-item-label {
    display: flex;
    justify-content: start;
    gap: 0.5rem;
    padding: 1em;
    cursor: pointer;
}

.vera-settings-locations-accordion .accordion-item-label {
    background: var(--dbox);
    margin: .25rem 4px 0;
}

.accordion .fa-chevron-right {
    height: .9rem;
    width: .9rem;
}

.accordion-item-content {
    display: none;
    max-height: 0;
    padding: 0 1em;
    overflow: hidden;
}

.accordion-item-content h3 {
    margin: 0;
}

.accordion input:checked + .accordion-item-label svg.fa-circle-chevron-right,
.accordion input:checked + .accordion-item-label svg.fa-chevron-right {
   transform: rotate(90deg) !important;
   color: var(--hl);
}
.accordion input:checked + .accordion-item-label svg.fa-circle-chevron-down {
   transform: rotate(180deg) !important;
   color: var(--hl);
}
.accordion input:checked ~ .accordion-item-content {
    display: block;
    max-height: 100%;
    padding: 1em;
}

.popup .accordion-item-label {
    display: block;
    margin-bottom: 1rem;
    font-size: 1em;
    line-height: 1.1em;
    background: var(--dbox);
}

.accordion-item-label span {
    padding: 0.1rem 0.5em;
    margin-left: auto;
    margin-right: 0.85em;
    background-color: var(--red);
    color: var(--text);
    border-radius: 2em;
}

.popup .accordion-item-label:hover {
    background: var(--dropbg);
}

.popup .accordion-item-label svg.fa-chevron-right {
    float: right;
}

.popup .accordion input:checked + .accordion-item-label {
   background: var(--sel);
}

#dashboard-info-popup h2 {
    margin: 1rem 0;
}

#dashboard-info-popup label .svg-inline--fa {
    margin-right: 0.25rem;
    height: 0.9rem;
    width: 1.1rem;
}

#dashboard-info-popup .accordion-item a {
    float: left;
    margin-right: 1rem;
    padding: 0.8rem 0.5rem;
    height: 100%;
    border-right: 1px solid var(--border);
    background: var(--dropbg);
}

#dashboard-info-popup .accordion-item a svg {
    height: 1.1rem;
    width: 1.1rem;
}

#dashboard-info-popup .accordion-item a:hover svg {
    color: var(--red);
}

#dashboard-info-popup ul li {
    padding: 0.25rem 0 0.25rem 0.5rem;
    border-bottom: 0.05rem solid var(--border-dark);
}

#dashboard-calendar-day-popup ul {
    margin: 0;
    padding-left: 1.25rem;
}

#dashboard-calendar-day-popup ul li {
    margin-bottom: .5rem;
}

/* The participants of one training day, inside that day's own bullet. The rule
   above already indents a nested list; what it does not do is bound one, and a
   day takes up to a hundred people (ToolsController::FQN_APPOINTMENT_DRIVER_LIMIT).
   Bounded and scrollable the way the explorer's delete list is - this is a real
   dialogue and the pointer can reach it, which is the whole difference between
   here and the hover.

   The specificity carries it without !important: `#id .class` beats `#id ul`,
   and `#id .class li` beats `#id ul li`. */
#dashboard-calendar-day-popup .fqn-cal-people {
    margin: .25rem 0 0;
    padding-left: 1rem;
    max-height: 14rem;
    overflow-y: auto;
    list-style-type: disc;
}

/* The application gives every li a rem of its own, which turns twenty names into
   twenty paragraphs, and every `ul li` list-style: none, which takes the marker
   away. Both have to be said again here. */
#dashboard-calendar-day-popup .fqn-cal-people li {
    margin: 0;
    list-style: disc;
    font-size: .85rem;
    line-height: 1.5;
}

/* The hover's own overflow marker. Here every name stands, so it would be
   counting people who are printed right below it.

   It has to be written INSIDE the list, the way it is here. Put beside it -
   `#dashboard-calendar-day-popup .fqn-cal-more` - it carries one class where the
   rule above carries one class AND the element, and a tie in the class column is
   decided by the element column: the name rule would win and the sentence would
   come out looking like a name. Naming `li` as well is not what saves it (the
   second class already does) and is written for symmetry with that rule. */
#dashboard-calendar-day-popup .fqn-cal-people li.fqn-cal-more {
    display: none;
}

/* Not a participant but a sentence about the list, so it carries no bullet. */
#dashboard-calendar-day-popup .fqn-cal-people li.fqn-cal-hidden {
    margin-top: .25rem;
    list-style: none;
    color: var(--text-mid);
}

#dashboard-info-popup .active-list, #dashboard-info-popup .inactive-list {
    display: none;
}

#dashboard-info-popup .active-list.visible, #dashboard-info-popup .inactive-list.visible {
    display: block;
}

#driver-card-validity li:hover, #driving-license-validity li:hover, #birthdays li:hover,
#vehicle-lock li:hover, #tacho-calibration li:hover, #adr-certificate-validity li:hover,
#dqc-validity li:hover, #drivers-checks li:hover, #drivers-nfc li:hover, #drivers-no-nfc li:hover{
    background: var(--hov);
    cursor: pointer;
}

#access-denied {
    margin: 2rem 0 0 5rem;
}

#error-page {
    position: absolute;
    margin-top: 7rem;
    width: 50%;
    text-align: right;
    z-index: 6;
}
#error-page h1 {
    margin: 5.5rem 20rem 1.5rem 0;
}
#error-page a, #error-page p {
    margin: 1.5rem 20rem 1.5rem 0;
    font-size: 1.2em;
}

#error-page a {
background: #fff;
color: #000;
-webkit-box-shadow: 2px 1px 3px 0px rgba(66,66,66,0.88);
box-shadow: 2px 1px 3px 0px rgba(66,66,66,0.88);
border: 1px solid #666;
}

#app-users-tab a {
    display: block;
    margin-bottom: 4rem;
}

#app-users-form .table {
    margin-bottom: 1rem;
}

#app-users-form .table td {
    padding: 0rem 0.5rem;
}

#app-users-form .table th:first-child, #app-users-form .table td:first-child {
    width: 2rem;
}

#app-users-form .table td:first-child label, #create-app-keys-form .table td:first-child label{
    border: none;
    background: none;
}

#app-users-form .table th:nth-child(2), #app-users-form .table td:nth-child(2) {
    width: 3rem;
}

#app-users-form .table th:nth-child(3), #app-users-form .table td:nth-child(3),
#app-users-form .table th:nth-child(4), #app-users-form .table td:nth-child(4),
#app-users-form .table th:nth-child(5), #app-users-form .table td:nth-child(5),
#create-app-keys-form .table th:nth-child(3), #create-app-keys-form .table td:nth-child(3),
#create-app-keys-form .table th:nth-child(4), #create-app-keys-form .table td:nth-child(4),
#create-app-keys-form .table th:nth-child(5), #create-app-keys-form .table td:nth-child(5) {
    width: 10rem;
}

/* Groups: give the (max 30-char) name column more room than the shared 10rem. */
#app-users-form .table.app-group-table th:nth-child(3),
#app-users-form .table.app-group-table td:nth-child(3) {
    width: 18rem;
}

#app-users-form h3 {
    margin: 0 0 2rem 0;
    text-transform: none;
}

#app-users-form .app-user-actions .button {
    width: auto;
    white-space: nowrap;
    margin-right: 0.5rem;
}

/* Give the app-account button labels room on the left/right so they don't look
   cramped, and keep them on a single line (e.g. "Änderung speichern"). */
#app-users-form .button,
#app-delete-popup .button,
#app-edit-popup .button {
    width: auto;
    white-space: nowrap;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

#app-delete-popup .popup-content {
    min-height: 0;
    overflow: hidden;
}

#app-delete-popup .app-delete-list {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
    max-height: 12rem;
    overflow-y: auto;
}

#app-edit-popup .popup-content {
    min-height: 0;
    overflow: hidden;
}

#app-edit-popup .app-edit-code-value {
    margin: 0.35rem 0 0.75rem;
    font-weight: bold;
}

#app-users-tab h3 {
    margin: 0 0 2rem 0;
}

#create-app-keys-form h3 {
    margin: 0 0 1rem 0;
}

#create-app-keys-form .table {
    margin-bottom: 1rem;
}

#create-app-keys-form .table th:nth-child(5), #create-app-keys-form .table td:nth-child(5) {
    width: 32rem;
}

#app-keys-create-popup .popup-content .grid.scroll {
    max-height: calc(100vh - 7rem);
}

#app-keys-create-popup.popup .button-primary {
    margin: 1rem 1rem 1rem;
}

#create-terminal-install-code-form {
    margin-bottom: 3rem;
}

#terminals-install-codes th, #terminals-install-codes td,
#active-terminals th, #active-terminals td {
    width: 14rem;
}

#active-terminals .fa-pencil {
    cursor: pointer;
}

.wsel {
    width: 1000px;
    height: 200px;
}

.sel {
    width: 100px;
    height: 100px;
    padding: 10px;
    background-color: red;
}









.driver-tile {
    display: flex;
    flex-direction: row;
    height:40px;
    width: 15.75%;
    background: var(--dbox);
}

.driver-tile .w1, .head-tile .w1 {
    border-left:1px solid var(--border-dark);
    border-right:1px solid var(--border-dark);
    border-bottom:1px solid var(--border-dark);
    width:18%;
    line-height: 2rem;
    padding: 2%;
    font-size: .9em;
}

.driver-tile .w2, .head-tile .w2 {
    border-bottom:1px solid var(--border-dark);
    width:74%;
    line-height: 2rem;
    padding: 2%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9em;
}

.driver-tile .w2 span {
    display: inline-block;
    margin-right: 0.25rem;
    width: 0.25rem;
    height: 1em;
}

#drivers-calendar .driver-tile p {
    height: 1.75rem;
    line-height: 1.75rem;
    color: var(--text-dark);
    text-align: center;
}

#drivers-calendar .driver-tile svg.driver-data {
    padding: 0.25rem 0;
}

#drivers-calendar, #drivers-mwl-overview {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 9rem);
    width: 100%;
    overflow-y: scroll;
    background: var(--sel);
}

#drivers-calendar #calendar-head {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    background: var(--sel);
}

#calendar-head .calendar-row {
    border-bottom:1px solid var(--border);
}

#calendar-body .calendar-row:hover .driver-tile {
    background: var(--tool);
}

#calendar-body .calendar-row .driver-data {
    color: var(--dbox);
    cursor: pointer;
}

#calendar-body .calendar-row:hover .driver-data {
    color: var(--text);
}

#calendar-head .month-name {
    padding: 0 .25rem;
    line-height: 1.8em;
}

#calendar-head label {
    float: left;
    font-size: 1em;
}

#calendar-head #sort-tile {
    padding: 0;
}

#calendar-head #aza-sort {
    margin: 0 4rem 0 .5rem
}

#driver-names-wrap {
    width: 15.75%;
}

#drivers-calendar .calendar-row, #drivers-mwl-overview .mwl-row{
    display: flex;
    flex-direction: row;
    width:100%;
}

#drivers-calendar #calendar-body .calendar-row, #drivers-mwl-overview #calendar-body .mwl-row{
    display: none;
    width:100%;
}

#drivers-calendar #calendar-body .calendar-row.visible {
    display: flex;
    flex-direction: row;
}

.mwl-row .w3 {
    display: flex;
    flex-direction: column;
    border-right:1px solid var(--border-dark);
    border-bottom:1px solid var(--border-dark);
    width:9%;
    height: 39px;
    padding: 0;
    line-height: 2em;
    text-align: center;
    user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;
}


.calendar-row .w3 .odt {
    height: 33%;
}

.calendar-row .w30 {
    border-right:1px solid var(--border-dark);
    border-bottom:1px solid var(--border-dark);
    width:1374px;
    height: 29px;
    padding: 5px 0 5px 5px;
    cursor: pointer;
}

.calendar-row .w31 {
    border-right:1px solid var(--border-dark);
    border-bottom:1px solid var(--border-dark);
    width:1420px;
    height: 29px;
    padding: 5px 0 5px 5px;
    cursor: pointer;
}

.calendar-row .w3 {
    border-right:1px solid var(--border-dark);
    border-bottom:1px solid var(--border-dark);
    width:2.66%;
    height: 29px;
    padding: 5px 0;
    font-size: .7em;
    text-align: center;
    user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select:none;
    cursor: pointer;
}

.calendar-row .w3 svg {
    float: right;
    height: 0.8rem;
    padding: 0;
}

#drivers-calendar #calendar-body.info .w3 {
    display: none !important;
}

.calendar-row .w3.divider, #calendar-head .month-name {
    border-left:1px solid var(--border);
}

.calendar-row.w30 .w3 {
    width:2.75%;
}

.calendar-row.w29 .w3 {
    width:2.85%;
}

.calendar-row.w28 .w3 {
    width:2.95%;
}

.calendar-row .w3.selected {
    color: var(--text-dark);
    background: var(--sel-light);
}

#drivers-calendar #calendar-head .we {
    color: var(--hl) !important;
}
.calendar-row .we {
    background: var(--hov-dark);
}

#calendar-head .calendar-row .w3 {
    height: 15px;
}

#calendar-head .calendar-row .w3.hover {
    background: var(--tool);
}

.head-tile {
    display: flex;
    height: 26px;
    background: var(--dbox);
}

#drivers-mwl-overview .head-tile {
    height: 100%;
}

#drivers-mwl-overview .head-tile .w1, #drivers-mwl-overview .head-tile .w2 {
    line-height: 2em;
}
.head-tile .w1, .head-tile .w2 {
    line-height: 1.5em;
}

.head-tile svg {
    height: 0.7rem;
    padding: 0;
}

.head-tile .right {
    text-align: right;
}

.tt1 {
    background: #7a9dab !important;
}

.tt2 {
    background: #7a9dab !important;
}

.tt3 {
    background: #1c7f9d !important;
}

.tt4, .tt5, .tt6 {
    background: #099f61c2 !important;
}

#overview-legend {
    height: 1.75rem;
    margin: 0 0 1rem 0;
}

#overview-legend .switch-wrapper {
    float: inline-start;
}

#overview-legend .switch-wrapper label.title {
    font-size: 1em;
}

#overview-legend p.vacation {
    float: right;
    border-bottom: .25rem solid #7a9dab;
}

#overview-legend p.sickness {
    float: right;
    margin: 0 2rem;
    border-bottom: .25rem solid #1c7f9d;
}

p#drivers-off {
    display: inline-flex;
    margin-right: 0.5rem;
    line-height: 1.75em;
    float: right;
    color: var(--yellow);
    word-spacing: 0px;
}

p#drivers-off svg {
    padding: 0 .5rem 0 0 ;
    color: var(--yellow);
}

/* calendar overview  */
#month-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
    max-height: calc(100vh - 7.5rem);
    overflow-y: scroll;
}

.month-calendar {
    display: flex;
    flex-direction: column;
    flex: 1 0 30%;
    background: var(--hov);
    border-top: 1px solid var(--border-dark);
    border-left: 1px solid var(--border-dark);
}

.month-calendar .month-name {
    padding: 0.25rem 1rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
}

.month-calendar .week-day-names, .month-calendar .calendar-row {
    display: flex;
    flex-direction: row;
}

.month-calendar .week-day-names .we, .month-calendar .calendar-row .we {
    color: var(--yellow) !important;
}

.month-calendar .calendar-row .we span {
    color: var(--text) !important;
}

.month-calendar .week-day-names {
    border-bottom: 1px solid var(--border);
}

.month-calendar .week-day-names .day-name, .month-calendar .calendar-row .calendar-day {
    height: 2rem;
    width: 14.2%;
    text-align: center;
    border-right: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
    font-size: .7em;
}

.month-calendar .week-day-names .day-name {
    height: 1rem;
    line-height: 1.75em;
}

.month-calendar .calendar-row .calendar-day {
    height: 3.75rem;
}

.calendar-day .number, .calendar-day .day-info {
    height: 1.5rem;
}

.calendar-day .day-info span
{
    display: inline-block;
    margin: 0 5% .1rem 5%;
    width: 90%;
    line-height: 1.25em;
    cursor: default;
}

.calendar-day .day-info span.u {
    background: #7a9dab;
}

.calendar-day .day-info span.s {
    background: #1c7f9d;
}

#working-times-tab .search-section {
    float: left;
    margin: .25rem 0;
    padding: 0;
    background: none;
}

#working-times-tab .search-section #search-field {
    width: 11rem;
}

#working-times-tab .search-section #new-driver {
    margin: 0 2rem;
}

div.divider {
    border-top: 1px solid var(--border-dark);
    height: 0;
    margin: 1.5em 0 0 0;
}

#driver-data-zema-popup .popup-menu {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    width: 100%;
}

p.whatsapp-head {
    margin: 1rem 0 1.5rem 0;
}

p.whatsapp-head svg {
    margin-right: 0.5rem;
    padding: 0.1rem;
    vertical-align: bottom;
    color: #53cc60;
}

div#message-samples, div#email-samples {
    display: flex;
    flex-direction: row;
    gap: 1.45rem;
    flex-wrap: wrap;
}

div.message-icon {
    margin-top: 1.5rem;
    padding: 1rem 0.5rem;
    height: 4rem;
    width: 6rem;
    background: var(--menubg);
    color: var(--text);
    text-align: center;
    border-radius: 0.5rem;
}

div.message-icon:hover {
    background: var(--hov);
    cursor: pointer;
}

div.message-icon svg {
    height: 3rem;
    width: 4.5rem;
}

div#driver-send-message, div#driver-send-email {
    margin:2rem 0
}

.slideshow {
    position: relative;
    width: 100%;
    height: 220px;
  }
  
  .slideshow .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    transition: opacity 0.4s, visibility 0.4s;
    visibility: hidden;
    opacity: 0;
  }
  
  .slideshow .slide.is-active {
    visibility: visible;
    opacity: 1;
  }
  
  .slideshow .slide img {
    display: block;
    width: 730px;
    height: 220px;
    object-fit: cover;
    margin: 0 auto;
  }
  
  .slideshow .prev,
  .slideshow .next {
    cursor: pointer;
    user-select: none;
    position: absolute;
    font-size: 5em;
    color: #fff;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .slideshow .prev {
    right: auto;
  }

  .preview-section .header, .attestation-of-activities  {
    max-width: 44rem;
  }

  .official-form-sheet {
    max-width: 45rem;
    max-height: 100%;
    overflow: hidden;
  }

  .table.reports {
    display: block;
    max-width: 57.5rem;
    max-height: calc(100vh - 20rem);
    overflow-x: hidden;
    overflow-y: scroll;
    font-size: .7em;
  }

  .table.reports.driver-violations {
    max-height: calc(100vh - 28rem);
  }

  .table.reports tr {
    height: 1rem;
  }

  .table.reports tr.odd{background-color:var(--hov)}
  .table.reports th,.table.reports td{display:table-cell;padding:0 2px;vertical-align:inherit;text-align:left;border-right:1px solid #ddd;width:41px}
  .table.reports th.ra,.table.reports td.ra{text-align:right}
  .table.reports th.la,.table.reports td.la{text-align:left}
  .table.reports tr.empty td{border:none}
  .table.reports.used-vehicles th:first-child{width:67px}
  .table.reports.used-vehicles td:first-child{padding-left:26px}
  .table.reports.used-vehicles th:nth-child(2),.table.reports.used-vehicles td:nth-child(2){width:100px}
  .table.reports.used-vehicles th:nth-child(3),.table.reports.used-vehicles td:nth-child(3){width:136px}
  .table.reports.used-vehicles th:nth-child(4),.table.reports.used-vehicles td:nth-child(4),
  .table.reports.used-vehicles th:nth-child(5),.table.reports.used-vehicles td:nth-child(5){width:156px}
  .table.reports.used-vehicles th:nth-child(6),.table.reports.used-vehicles td:nth-child(6),
  .table.reports.used-vehicles th:nth-child(7),.table.reports.used-vehicles td:nth-child(7){width:86px}
  .table.reports.used-vehicles th:last-child,.table.reports.used-vehicles td:last-child{width:75px}
  .table.reports.used-vehicles td span{background-color:#ffff00; color: var(--text-dark)}

  .table.reports tr.total{font-weight:600;background:#ccc}
  .table.reports tr.total td{color: var(--text-dark)}
  
  .table.reports.driver-shifts th:first-child,.table.reports.driver-shifts td:first-child{padding-left:8px;width:34px}
  .table.reports.driver-shifts th:nth-child(2),.table.reports.driver-shifts td:nth-child(2),
  .table.reports.driver-shifts th:nth-child(3),.table.reports.driver-shifts td:nth-child(3){width:140px}
  .table.reports.driver-shifts th:nth-child(4),.table.reports.driver-shifts td:nth-child(4),.table.reports.driver-shifts th:nth-child(5),
  .table.reports.driver-shifts td:nth-child(5),.table.reports.driver-shifts th:nth-child(6),.table.reports.driver-shifts td:nth-child(6),
  .table.reports.driver-shifts th:nth-child(8),.table.reports.driver-shifts td:nth-child(8){width:58px}
  .table.reports.driver-shifts th:nth-child(7),.table.reports.driver-shifts td:nth-child(7){width:98px}
  .table.reports.driver-shifts th:nth-child(9),.table.reports.driver-shifts td:nth-child(9){width:115px}
  .table.reports.driver-shifts th:last-child,.table.reports.driver-shifts td:last-child{width:85px}


  .table.reports.driver-violations th,.table.reports.driver-violations td{width:53px}
  .table.reports.driver-violations td{padding:20px 2px}
  .table.reports.driver-violations th:first-child,.table.reports.driver-violations td:first-child{padding-left:7px;width:26px}
  .table.reports.driver-violations th:nth-child(2),.table.reports.driver-violations td:nth-child(2){width:83px}
  .table.reports.driver-violations th:last-child,.table.reports.driver-violations td:last-child{padding:0 2px;width:455px;word-spacing: 0;text-wrap: wrap;}
  .table.reports.all-violations{margin-top:50px;width:300px;float:right}
  .table.reports.all-violations td{padding:0 2px}.table.reports.all-violations td:first-child{padding-left:8px;width:240px}
  .table.reports.all-violations td:last-child{width:43px}

  .table.reports.license-controls th,.table.reports.license-controls td{width:160px}
  .table.reports.license-controls th:first-child,.table.reports.license-controls td:first-child{padding-left:8px;width:35px}
  .table.reports.license-controls th:nth-child(4),.table.reports.license-controls td:nth-child(4){width:170px}
  .table.reports.license-controls th:nth-child(5),.table.reports.license-controls td:nth-child(5){width:80px}
  .table.reports.license-controls th:last-child,.table.reports.license-controls td:last-child{width:259px}

  .table.reports.missing-license-controls th,.table.reports.missing-license-controls td,
  .table.reports.drivers-with-nfc-tag th,.table.reports.drivers-with-nfc-tag td
  {width:130px}
  .table.reports.missing-license-controls th:first-child,.table.reports.missing-license-controls td:first-child,
  .table.reports.drivers-with-nfc-tag th:first-child,.table.reports.drivers-with-nfc-tag td:first-child
  {padding-left:8px;width:220px}

  .table.reports.drivers-without-nfc-tag th,.table.reports.drivers-without-nfc-tag td
  {width:190px}
  .table.reports.drivers-without-nfc-tag th:first-child,.table.reports.drivers-without-nfc-tag td:first-child
  {padding-left:8px;width:220px}


  .table.reports.last-dc-download th, .table.reports.last-dc-download td {width:45px}
  .table.reports.last-dc-download th:nth-child(2), .table.reports.last-dc-download td:nth-child(2),
  .table.reports.last-dc-download th:nth-child(4), .table.reports.last-dc-download td:nth-child(4) {width:130px}
  .table.reports.last-dc-download th:nth-child(3), .table.reports.last-dc-download td:nth-child(3) {width:300px}

  .table.reports.last-vehicle-download th, .table.reports.last-vehicle-download td {width:140px}
  .table.reports.last-vehicle-download th:first-child, .table.reports.last-vehicle-download td:first-child,
  .table.reports.last-vehicle-download th:nth-child(5), .table.reports.last-vehicle-download td:nth-child(5) {width:45px}

  .table.reports.unknown-times th,.table.reports.unknown-times td{width: 44rem;}

  .table.reports.unknown-vehicles th,.table.reports.unknown-vehicles td{width:195px}
  .table.reports.unknown-vehicles td:first-child{padding-left:20px;width:177px}
  .table.reports.unknown-vehicles th:nth-child(2),.table.reports.unknown-vehicles td:nth-child(2){width:495px}

  .table.reports.used-driver-cards th,.table.reports.used-driver-cards td{width:41px}
  .table.reports.used-driver-cards th:first-child{width:67px}
  .table.reports.used-driver-cards td:first-child{padding-left:26px}
  .table.reports.used-driver-cards th:nth-child(2),.table.reports.used-driver-cards td:nth-child(2){width:261px}
  .table.reports.used-driver-cards th:nth-child(3),.table.reports.used-driver-cards td:nth-child(3),
  .table.reports.used-driver-cards th:nth-child(4),.table.reports.used-driver-cards td:nth-child(4){width:146px}
  .table.reports.used-driver-cards th:nth-child(5),.table.reports.used-driver-cards td:nth-child(5){width:86px}
  .table.reports.used-driver-cards th:nth-child(6),.table.reports.used-driver-cards td:nth-child(6){width:86px}
  .table.reports.used-driver-cards th:last-child,.table.reports.used-driver-cards td:last-child{width:75px; white-space: break-spaces;}
  .table.reports.used-driver-cards td span{background-color:#ffff00; color: var(--text-dark)}

  .table.reports.unknown-drivers th, .table.reports.unknown-drivers td{width:165px};
  .table.reports.unknown-drivers th:first-child{width:330px}
  .table.reports.unknown-drivers td:first-child{padding-left:20px;width:312px}
  .table.reports.unknown-drivers th:nth-child(3), .table.reports.unknown-drivers td:nth-child(3){width:285px}
  .table.reports.unknown-drivers th:last-child, .table.reports.unknown-drivers td:last-child{width:100px}

    .table.reports.loading-unloading th,.table.reports.loading-unloading td{width:125px}
 
    .table.vehicle-daily-activities.details {
        max-height: none;
        overflow-y: unset;
        overflow-x: auto;
    } 
  .table.reports.vehicle-daily-activities th,.table.reports.vehicle-daily-activities td{width:80px}
  .table.reports.vehicle-daily-activities th:last-child, .table.reports.vehicle-daily-activities td:last-child{width:200px}
  .table.vehicle-daily-activities svg {
    width: .75rem;
    height: .75rem;
    fill: var(--text);
  }

/* ---- Driver report "daily activities details" ---------------------------------------------
   One block per day, laid out like the PDF of the same report: date and legend on one line,
   the detail table below, the day's totals in a bar underneath. The table keeps its own
   horizontal scroll so a narrow preview column never squeezes the ten columns together. */

/* The block reads as a page column like every other report table (57.5rem). The cap sits on the
   day, not on the table, so head bar, table and summary bar share one right edge. */
.daily-activities-report .report-day {
    max-width: 57.5rem;
    margin-bottom: 1.75rem;
}

/* From #content down to the wrapper everything is a flex item with the default min-width:auto,
   so the widest thing inside props the whole column open: the tab grows past the right edge of
   the window and .tab-container{overflow-x:hidden} cuts it off there without a scrollbar - the
   last columns simply were not on screen. Every other report leaves its column half empty and
   never showed it. Letting the chain shrink keeps the report inside the window. */
#content:has(.daily-activities-report),
#content:has(.daily-activities-report) #content-grid,
.tab-container:has(.daily-activities-report),
.tab-container:has(.daily-activities-report) .tab-content,
.reports-wrapper:has(.daily-activities-report) {
    min-width: 0;
}

/* Once the column beside the settings can no longer hold the ten columns - anything below
   roughly a 1750px window - the preview takes a line of its own underneath them, where it has
   the full width, instead of being squeezed and scrolled sideways. */
.reports-wrapper:has(.daily-activities-report) {
    flex-wrap: wrap;
}

/* Under Output > Reports the preview is capped at "everything but 61rem", which on a Full HD
   screen leaves it about 540px - less than this report's ten columns need, so they hung out to
   the right behind a scrollbar. The preview is a flex item next to a fixed-width settings column,
   so the cap only ever gave room away; dropping it for this report hands back around 350px.
   min-width:0 keeps the flex item allowed to shrink, as the default min-width:auto would let the
   table's own minimum push the column wider than its share. The cap is written as
   "#drivers .preview-section", so undoing it needs the id here too - a class-only selector loses. */
#drivers .preview-section:has(.daily-activities-report),
.reports-wrapper .preview-section:has(.daily-activities-report) {
    max-width: none;
    min-width: 0;
    /* The basis is the table's own minimum: is there less room beside the settings, the flex
       container above wraps this onto the next line rather than shrinking it below what it needs. */
    flex: 1 1 42rem;
}

/* A month of days stacks in one scroller, so the date stays in place while its day is on screen. */
.daily-activities-report .report-day-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    padding: .3rem .5rem;
    background-color: var(--dbox);
    border-bottom: 1px solid var(--border-dark);
}

.daily-activities-report .report-day-date {
    font-weight: 600;
    font-size: .85em;
    white-space: nowrap;
}

.daily-activities-report .report-day-legend {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .2rem .9rem;
    font-size: .7em;
}

/* The legend and the summary spell out the same five activity types, so they share one layout. */
.daily-activities-report .report-day-legend span,
.daily-activities-report .report-day-summary-totals span {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.daily-activities-report .report-day-legend svg,
.daily-activities-report .report-day-summary-totals svg {
    width: .7rem;
    height: .7rem;
    fill: var(--act-color, var(--text));
    flex: none;
}

.daily-activities-report .report-day-table {
    overflow-x: auto;
    /* A month of activities runs into thousands of rows; the days that are off screen stay out
       of layout and paint. */
    content-visibility: auto;
    contain-intrinsic-size: auto 20rem;
}

/* The shared .table.reports rules turn every report table into its own vertical scroll box.
   Here the days follow one another in a single flow, so the box is dissolved and the fixed
   layout below takes over the column widths. */
.table.reports.daily-activities-details {
    display: table;
    table-layout: fixed;
    width: 100%;
    /* Below this the German column headings no longer fit; the day block scrolls sideways
       instead of shrinking them into "Einzel/T...". In the driver file the preview column is
       692px wide on anything under a 1900px viewport - the whole grid has to stay inside that,
       which is what the tight cell padding below buys. */
    min-width: 42rem;
    max-width: none;
    max-height: none;
    overflow: visible;
    border-collapse: collapse;
    /* The shared .7em compounds with the .9em on .table th/td down to under 9px. Ten dense
       columns have to stay readable, so the size is set here and the cells inherit it. */
    font-size: .75em;
    /* The body's tracking costs about a tenth of the table width; the PDF grid has none. */
    letter-spacing: normal;
    word-spacing: normal;
}

/* Widths follow the PDF's column grid, widened where a German heading needs it. They are the
   share of the table, so the proportions hold at any width; the cells stay auto so the columns
   win. Every column carries its own heading in full at the min-width above. */
.table.reports.daily-activities-details col.col-begin    { width: 8%; }
.table.reports.daily-activities-details col.col-end      { width: 7%; }
.table.reports.daily-activities-details col.col-duration { width: 8%; }
.table.reports.daily-activities-details col.col-symbol   { width: 3%; }
.table.reports.daily-activities-details col.col-activity { width: 22%; }
.table.reports.daily-activities-details col.col-team     { width: 13%; }
.table.reports.daily-activities-details col.col-slot     { width: 10%; }
.table.reports.daily-activities-details col.col-vehicle  { width: 11%; }
.table.reports.daily-activities-details col.col-km       { width: 7%; }
.table.reports.daily-activities-details col.col-country  { width: 11%; }

.table.reports.daily-activities-details th,
.table.reports.daily-activities-details td {
    width: auto;
    padding: 0 .3rem;
    border-right: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: inherit;
}

.table.reports.daily-activities-details tr {
    height: 1.4rem;
}

/* The PDF sets the head off with a rule instead of a fill; a fill would compete with the
   coloured rows underneath. */
.table.reports.daily-activities-details thead tr {
    height: 1.5rem;
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}

.table.reports.daily-activities-details thead th {
    font-weight: 600;
    color: var(--text-mid);
}

.table.reports.daily-activities-details td.symbol {
    padding: 0;
    text-align: center;
}

.table.reports.daily-activities-details td.symbol svg {
    display: block;
    width: .8rem;
    height: .8rem;
    margin: 0 auto;
    fill: var(--act-color, var(--text));
}

/* An event row - vehicle inserted, distance driven, location entry - carries no activity
   colour, so it is set apart by its lighter text instead. */
.table.reports.daily-activities-details tbody tr.event td {
    color: var(--text-mid);
}

/* The colours are the ones the driver file's day table and the info-bar legend use. --act-rgb
   carries the same colour as raw channels for the translucent row tint below. The unknown type
   only colours its symbol, as the PDF does - its row stays untinted, like everywhere else. */
.daily-activities-report .act-driving   { --act-color: var(--red);      --act-rgb: 255, 0, 0; }
.daily-activities-report .act-work      { --act-color: var(--blue);     --act-rgb: 0, 153, 255; }
.daily-activities-report .act-available { --act-color: var(--yellow);   --act-rgb: 253, 177, 3; }
.daily-activities-report .act-break     { --act-color: var(--green);    --act-rgb: 102, 255, 51; }
.daily-activities-report .act-unknown   { --act-color: var(--text-mid); --act-rgb: 166, 167, 171; }

/* No zebra striping here: the activity colours already group the rows, and a stripe on top of
   them made the block restless. The .table hairline keeps two equal rows apart on its own. */

/* Just a breath of the colour behind the row, the same one the driver file's day table uses. */
.table.reports.daily-activities-details tbody tr.act-driving,
.table.reports.daily-activities-details tbody tr.act-work,
.table.reports.daily-activities-details tbody tr.act-available,
.table.reports.daily-activities-details tbody tr.act-break {
    background-color: rgba(var(--act-rgb), .05);
}

/* The symbol gets a soft halo in its own colour, so it stands out against the tinted row. */
.table.reports.daily-activities-details tbody tr.act-driving td.symbol svg,
.table.reports.daily-activities-details tbody tr.act-work td.symbol svg,
.table.reports.daily-activities-details tbody tr.act-available td.symbol svg,
.table.reports.daily-activities-details tbody tr.act-break td.symbol svg {
    filter: drop-shadow(0 0 .2rem rgba(var(--act-rgb), .55));
}

/* The totals claim a line of their own as soon as they no longer fit beside the caption - the
   way the PDF sets them, and the only layout that survives the longer translations. */
.daily-activities-report .report-day-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .2rem 1rem;
    padding: .35rem .5rem;
    background-color: var(--dbox);
    border-top: 1px solid var(--border-dark);
}

.daily-activities-report .report-day-summary-title {
    font-weight: 600;
    font-size: .75em;
    white-space: nowrap;
}

.daily-activities-report .report-day-summary-totals {
    display: flex;
    flex: 1 1 54rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .2rem .8rem;
    font-size: .7em;
}

.daily-activities-report .report-day-summary-totals .km-total {
    font-weight: 600;
}

.daily-activities-report .report-no-data {
    margin-top: 1rem;
    font-size: .8em;
}

/* ---------------------------------------------------------------------------
   Night hours report ("Ueber Mitternacht") preview.

   Three columns only, but the two date cells carry a weekday name in front of the
   date, which is far wider than the 41px .table.reports gives every cell. The shared
   block also clips silently (overflow-x: hidden, no scrollbar), and in the output
   area the preview column is barely 540px wide - so the table is dissolved into a
   real one with percentage columns rather than fought column by column.
   --------------------------------------------------------------------------- */
.table.reports.night-hours {
    display: table;
    table-layout: fixed;
    width: 100%;
    /* Wide enough for the German heads, narrow enough not to look stretched in the
       driver file, where nothing caps the preview. */
    min-width: 22rem;
    max-width: 40rem;
    max-height: none;
    overflow: visible;
    border-collapse: collapse;
    font-size: .75em;
    /* The body tracking costs about a tenth of the table width - see the daily
       activities table, which has to undo it for the same reason. */
    letter-spacing: normal;
    word-spacing: normal;
}

.table.reports.night-hours th,
.table.reports.night-hours td {
    width: auto;
    padding: .1rem .3rem;
    border-right: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: inherit;
}

/* The head of the third column is the longest word in the table ("SUMME NACHTSTUNDEN"), and
   in the output area the whole preview is only about 540px wide - hence the near-even split
   rather than two wide date columns and a narrow one. */
.table.reports.night-hours col.col-night-start,
.table.reports.night-hours col.col-night-end {
    width: 33%;
}

.table.reports.night-hours col.col-night-total {
    width: 34%;
}

/* driver-header.twig floats its dt/dd pairs, so #header collapses to zero height and
   everything after it slides up beside the floats - the calculation basis line ends up level
   with the table head, and the table itself is squeezed by the floats it sits next to.
   Cleared under this report's own scope: the shared partial is used by every other report,
   which would shift if it were changed underneath them. */
.night-hours-report #header::after {
    content: "";
    display: table;
    clear: both;
}

/* A rule under the heads instead of a filled bar, matching the PDF. */
.table.reports.night-hours thead tr {
    height: 1.4rem;
    background-color: transparent;
    border-bottom: 1px solid var(--border);
}

.table.reports.night-hours thead th {
    font-weight: 600;
    color: var(--text-mid);
}

.table.reports.night-hours tbody tr {
    height: 1.2rem;
}

/* What the sum is made of, set against the right edge below the header block - the
   same place the PDF puts it. */
.night-hours-report .report-calc-basis {
    /* Same cap as the table below it, so the line ends flush with the last column instead of
       drifting off to the right of a preview that is wider than the table. */
    max-width: 40rem;
    margin: .5rem 0 .75rem;
    text-align: right;
    font-size: .8em;
    color: var(--text-mid);
}

.night-hours-report .report-calc-basis .calc-basis-label {
    margin-right: .2rem;
}

/* "p span { float: right }" turns this line inside out - the label lands on the right and the
   symbols read backwards, and the paragraph collapses to zero height because nothing is left
   in the flow. The attestation report undoes the same rule the same way. */
.night-hours-report .report-calc-basis span {
    float: none;
}

/* The symbols are raw SVGs with nothing but a viewBox: without a size rule they render
   at the CSS default of 300x150px. "span svg" already sizes every symbol in the app to 1rem
   with !important and pads it away from the toolbar it was written for, so both have to be
   answered here. The colour travels as a custom property because a plain fill would lose
   against the id-scoped fill rules elsewhere in this file. */
.night-hours-report .report-calc-basis svg {
    width: .8rem !important;
    height: .8rem;
    margin: 0;
    padding-bottom: 0;
    fill: var(--act-color, var(--text));
    vertical-align: -.1rem;
    border-bottom: none;
}

.night-hours-report .act-driving   { --act-color: var(--red); }
.night-hours-report .act-work      { --act-color: var(--blue); }
.night-hours-report .act-available { --act-color: var(--yellow); }

.night-hours-report .dds-plus {
    margin: 0 .15rem;
    color: var(--text-mid);
    vertical-align: middle;
}

.night-hours-report .report-note {
    margin-top: .75rem;
    font-size: .7em;
    color: var(--text-mid);
}

/* The calendar day variant: five columns instead of three, so it needs a little more room and
   its own split. The four-class selector settles the tie with the night variant's col rules,
   which match the same elements through the shared "night-hours" class. */
.table.reports.night-hours.night-hours-calendar {
    min-width: 30rem;
    max-width: 48rem;
}

/* The basis line ends flush with the last column, so it has to follow this table's wider cap. */
.night-hours-calendar-report .report-calc-basis {
    max-width: 48rem;
}

.table.reports.night-hours.night-hours-calendar col.col-night-weekday {
    width: 10%;
}

.table.reports.night-hours.night-hours-calendar col.col-night-date {
    width: 18%;
}

.table.reports.night-hours.night-hours-calendar col.col-night-total {
    width: 28%;
}

/* col-night-piece deliberately carries no width: the pieces share what is left, which is one
   column for a window inside a single day and two for one that wraps midnight. */

/* Two lines in the head now (the caption and the basis under it), so it may not be pinned to
   the single-line height the night variant uses. */
.table.reports.night-hours.night-hours-calendar thead tr {
    height: auto;
}

/* The captions may wrap rather than be cut: in the output area the preview is barely 540px
   wide, and "Summe Nachtstunden" does not fit its column on one line there. The rows keep
   their nowrap - only the head is allowed the second line. */
.table.reports.night-hours.night-hours-calendar thead th {
    padding-top: .2rem;
    padding-bottom: .2rem;
    vertical-align: top;
    white-space: normal;
}

  div#tacho-maintenance-data, div#fleet-ef-data, div#fleet-so-data, div#driver-shifts-violations-data {
    max-height: calc(100vh - 12rem);
    overflow-y: scroll;
  }

  .table.reports.tacho-maintenance {
    margin: .25rem 0 .5rem 0;
    overflow-y: hidden;
  }

  #fleet-ef-data .events-and-faults, #fleet-so-data .speeding-offences  {
    margin: .5rem 0 2rem 0;
    overflow-y: hidden;
  }

  .table.reports.tacho-data {
    margin: .25rem 0 1.5rem 0;
    overflow-y: hidden;
  }

  .table.reports.tacho-maintenance th, .table.reports.tacho-maintenance td,
  .table.reports.tacho-data th, .table.reports.tacho-data td{width:92px}
  .table.reports.tacho-maintenance th:nth-child(2), .table.reports.tacho-maintenance td:nth-child(2){width:105px !important}
  .table.reports.tacho-maintenance th:nth-child(3), .table.reports.tacho-maintenance td:nth-child(3){width:155px !important}
  .table.reports.tacho-maintenance th:last-child, .table.reports.tacho-maintenance td:last-child{width:312px !important}

  .table.reports.events-and-faults th, .table.reports.events-and-faults td {width:110px}
  .table.reports.events-and-faults th:first-child, .table.reports.events-and-faults td:first-child{width:150px !important}
  .table.reports.events-and-faults th:nth-child(2), .table.reports.events-and-faults td:nth-child(2){width:55px !important}
  .table.reports.events-and-faults th:nth-child(5), .table.reports.events-and-faults td:nth-child(5){width:280px !important}
  .table.reports.events-and-faults th:last-child, .table.reports.events-and-faults td:last-child{width:40px !important}

  .table.reports.speeding-offences th, .table.reports.speeding-offences td {width:120px}
  .table.reports.speeding-offences th:first-child, .table.reports.speeding-offences td:first-child{width:250px !important}
  .table.reports.speeding-offences th:nth-child(2), .table.reports.speeding-offences td:nth-child(2){width:75px !important}
  .table.reports.speeding-offences th:nth-child(5), .table.reports.speeding-offences td:nth-child(5){width:90px !important}
  .table.reports.speeding-offences th:last-child, .table.reports.speeding-offences td:last-child{width:90px !important}

  .table.reports.mileage-summary th, .table.reports.mileage-summary td {width:135px}
  .table.driver-validities {
    margin-bottom: 2rem;
    overflow: hidden;
  }
  .table.reports.driver-validities th, .table.reports.driver-validities td {width:200px; border: none;}

  .table.reports.country-codes th, .table.reports.country-codes td {width:135px; padding: 0 .25rem;}
  div.fleet-country-codes {
    max-height: calc(100vh - 18rem);
    overflow-x: hidden;
    overflow-y: scroll;
  }

  div.fleet-country-codes .table.reports.country-codes {
    overflow-y: visible;
    max-height: fit-content;
  }

  .reports.table.driver-shifts-violations {
    margin: .5rem 0;
    overflow-y: hidden;
  }

  .reports.table.driver-shifts-violations th, .reports.table.driver-shifts-violations td {
    border: none;
  }

  #drivers .preview-section {
    max-width: calc(100% - 61rem);
  }

  #vehicles .preview-section {
    max-width: calc(100% - 57.5rem);
  }

  .preview-section h1 {
    font-size: 1.5rem;
  }

.preview-section dl {
    width: 35rem;
}

.preview-section dd {
    width: 22.5rem;
    font-size: .8em;
}

.preview-section dt {
    width: 11rem;
    font-size: .8em;
}

.preview-section p {
    font-size: .8em;
}

/* Match the merged-reports checkbox to the .button-primary.report buttons below it (same outer size and 1rem gap). */
.report-actions label.checkbox.merged-reports {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0 0 1rem 0;
    padding: calc(0.125rem - 1px) 0.125rem;
    line-height: 2em;
}

/* display:flex above outweighs the generic label.hidden rule, so hide explicitly at higher specificity. */
.report-actions label.checkbox.merged-reports.hidden {
    display: none;
}

.report-actions label.checkbox.merged-reports .checkmark {
    /* The span follows the text in the markup; order pulls the box to the left of the label text. */
    order: -1;
    float: none;
    flex: 0 0 auto;
    position: relative;
    margin: 0 0.4rem 0 0;
}

.report-actions label.checkbox.merged-reports .checkmark:after {
    left: 0.3rem;
    top: -0.05rem;
}









.official-form-sheet h2 {
    background: transparent;
    border: none;
}
.official-form-sheet table{display:table;width:100%;border-collapse:separate;box-sizing:border-box;text-indent:initial;border-spacing:0}
.official-form-sheet table tr{display:flex;line-height:14px;border:1px solid;border-bottom:none}
.official-form-sheet table tbody tr:last-child{border-bottom:1px solid;}
.official-form-sheet table tr.tall{height:35px}
.official-form-sheet table th,.official-form-sheet table td{display:inline-block;padding:0 2px;vertical-align:inherit;text-align:left;border-right:1px solid;width:50%}
.official-form-sheet table td{padding:1px 2px}
.official-form-sheet table th:last-child,.official-form-sheet table td:last-child{border:none}
.official-form-sheet table th.wide,.official-form-sheet table td.wide{width:100% !important}
.official-form-sheet table th p{margin: 3px 0;font-size: 14px;font-weight: 400;}
.official-form-sheet #departure-control th{width:40%;border:none}
.official-form-sheet #departure-control td{width:33%}
.official-form-sheet #departure-control td p{float:left; width: 82%;}
.official-form-sheet #vehicle-data tbody tr {height: 40px;}
.official-form-sheet #vehicle-data #first-line td{width:30%}
.official-form-sheet #vehicle-data #first-line td:nth-child(2){width:40%}
.official-form-sheet #vehicle-data #second-line td{width:25%}
.official-form-sheet #vehicle-data #third-line td{width:33%}
.official-form-sheet #vehicle-data td .one {
    float: left;
    margin: 0 8px;
    padding-top: 20px;
}
.official-form-sheet #vehicle-data td .two, .official-form-sheet #vehicle-data td .two-row {
    float: left;
    display: flex;
    flex-direction: column;
    margin: 0 8px;
    padding-top: 4px;
}
.official-form-sheet #vehicle-data td .two-row {
    flex-direction: row;
    padding-top: 21px;
}
.official-form-sheet td svg {
    height: 14px;
    width: 14px;
    fill: var(--text);
}
.official-form-sheet p {
    line-height: 1rem;
    white-space: normal;
}
.official-form-sheet p svg {
    height: 16px;
    width: 16px;}
.official-form-sheet p.right { text-align: right }
.official-form-sheet #daily-control-sheet svg {
    float: right;
    height: 16px;
    width: 16px;
}
.official-form-sheet p.bold {
    font-weight: 800;
}

.official-form-sheet #vehicle-data p.bold
{
    font-size: 11px;
    padding: 6px;
}
.official-form-sheet #daily-control-sheet #first-line td{width:23%}
.official-form-sheet #daily-control-sheet #first-line td:first-child{width:31%}

.official-form-sheet #daily-control-sheet .hours {border-top:none}
.official-form-sheet #daily-control-sheet .hours td{padding-top: 0;width:45px}
.official-form-sheet #daily-control-sheet .hours td:first-child{width:113px}

.official-form-sheet #daily-control-sheet .time-line td{width:11.5px;padding: 2px 0}
.official-form-sheet #daily-control-sheet .time-line td:first-child{width:117px; display: flex; flex-direction: row;}
.official-form-sheet #daily-control-sheet .time-line p {width:75%}
.official-form-sheet #daily-control-sheet .total p {width:90%}
.official-form-sheet #daily-control-sheet .time-line svg, .official-form-sheet #daily-control-sheet .total svg {float:right}
.official-form-sheet #daily-control-sheet .no-border {border:none}
.official-form-sheet #daily-control-sheet .bottom-border{border:none; border-bottom: 1px solid}
.official-form-sheet #daily-control-sheet .right, .official-form-sheet #daily-control-sheet .right td {text-align: right;}

.official-form-sheet #daily-control-sheet tr.places td {padding: 3px 0;}
.official-form-sheet #daily-control-sheet tr.total {border-top: none;}
.official-form-sheet #daily-control-sheet .border-top {border-top: 1px solid !important;}
.official-form-sheet #daily-control-sheet .total td{width:141px; padding: 3px 2px;}
.official-form-sheet #daily-control-sheet .total td:nth-child(3) {width:115px}
.official-form-sheet #daily-control-sheet .total td:nth-child(4) {width:30px}
.official-form-sheet #daily-control-sheet .total td:nth-child(5) {width:103px;display: flex; flex-direction: row;}
.official-form-sheet #daily-control-sheet .total td:last-child{width:160px;}
.official-form-sheet #footer p {margin-top:3px;font-size:9px}
.official-form-sheet #footer svg {
    width: 12px; height: 12px
}
.official-form-sheet .time-line {
    max-height: 1rem;
}
.official-form-sheet #daily-control-sheet tr:last-child td:first-child{width:67%}
.official-form-sheet #daily-control-sheet tr:last-child td:last-child{width:33%}
.official-form-sheet div.box{float: right;margin-right: 10px;width:16px; height:16px;border: 1px solid}

.attestation-of-activities h1,.attestation-of-activities h2,.attestation-of-activities h3{display: block;margin:0;padding:0;font-weight: 400;text-transform: uppercase;font-size: 11px;line-height: 12px; text-align: center; background: transparent;border: none;}
.attestation-of-activities p{display: block;margin: 0; padding: 0 15px;font-size:10px;line-height: 18px}
.attestation-of-activities p span{font-weight: 600; float:none}
.attestation-of-activities p span.space{padding-left:34px}
.attestation-of-activities p span.space-long{padding-left:25px}
.attestation-of-activities p.space-up{margin-top:10px}
.attestation-of-activities h3{font-weight: 600}input{margin:0 10px 0 0; padding: 0}
.attestation-of-activities h4{display: block;margin:0;padding:6px 0;font-size:11px;line-height: 15px;font-weight:400;text-align: center}
.attestation-of-activities h5{display: block;margin: 0; padding: 8px 15px;font-size:11px;line-height: 15px}
.attestation-of-activities span.up{font-size: 11px;vertical-align: super}
.attestation-of-activities #header{padding: 25px 45px 15px}
.attestation-of-activities #content, #footer{display: block;width: 100%;padding:0}
.attestation-of-activities #content{padding-bottom:5px;border:1px solid #fff}
.attestation-of-activities #footer{padding-top:2px;}
.attestation-of-activities #footer p{padding: 2px 15px}
.attestation-of-activities #notes{margin: 0 20px}
.attestation-of-activities #notes p{padding:0}
.attestation-of-activities #notes p span.space-long{padding-left:50px}
.attestation-of-activities div.line{margin:5px 0;width: 40%; border-top:1px solid #fff}
.attestation-of-activities #country p{padding: 5px 8px 0 20px;font-family: Arial, Helvetica, sans-serif; font-size: 40px; line-height: 40px; color: #808080}
.attestation-of-activities p span.left{float: left}
.attestation-of-activities p span.right{float:right}

#map { height: calc(100vh - 10rem); width: calc(100vw - 12rem) }
.leaflet-popup {
    min-width: 14rem;
}
.leaflet-popup-content {
    min-width: 15rem;
    text-align: left;
}
.leaflet-popup-tip
{
    display: none;
}

i.icon.delete:before{
    font-family: 'Font Awesome\ 5 Free';
    content: "\f057";
    font-style: normal;
    margin-left: .25rem;
}

.notification-reminder-link {
    color: inherit !important;
    text-decoration: none;
    margin-left: 3rem;
}

.notification-reminder-link i {
    color: var(--hl) !important;
    width: .7rem;
    height: .7rem;
}

.notification-reminder-link .svg-inline--fa,
a.notification-reminder-link .svg-inline--fa {
    width: .7rem !important;
    height: .7rem !important;
}

.notification-reminder-link.is-disabled i {
    color: var(--bhov) !important;
}

a.notification-reminder-link.is-disabled i,
a.notification-reminder-link.is-disabled svg {
    color: var(--bhov) !important;
}

/* Two-line cells: the fact on top, its detail quietly underneath. Cells that carry only one line
   still line up with it, which is what the top alignment on that table is for. Two of the three
   lists this was written for are gone - the driver file's documents tab and the archive; the day
   tile in the activity accordion still uses it, and the explorer's list carries its own copy
   scoped to its own table. */
.driver-attestation-day .a-main {display: block;}
.driver-attestation-day .a-sub {display: block;
    margin-top: .1rem;
    color: var(--text-mid);
    font-size: .8em;}
/* 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;}
/* 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;
}

/* FILE EXPLORER */
/* The explorer fills its tab instead of scrolling inside it: the pager belongs
   at the bottom edge of the window, not below a fold. The tab container is
   already exactly one viewport tall (calc(100vh - 1rem) plus its 1rem margin),
   so the chain below only has to pass that height down - measured, not guessed:
   an earlier calc(100vh - 12rem) left 176 px of the window unused. */
#file-explorer-tab {
    overflow: hidden;
}

/* The container takes calc(100vh - 1rem) from #content.wide and adds its own 1rem top margin,
   which put the status bar flush on the bottom edge of the window - the quota and the pager sat
   squeezed against it with nothing under them. A little more off the height leaves air below the
   bar. Both ids: "#content.wide .tab-container" is the rule being corrected and outweighs the
   tab's id on its own. */
#content.wide #file-explorer-tab {
    height: calc(100vh - 2.25rem);
}

#file-explorer-tab .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    /* Without this the content refuses to shrink below its natural height and
       pushes the status bar out of the container again. */
    min-height: 0;
}

.file-explorer {
    /* One height for every control in the toolbar and the status bar. The house
       button, the search field and an icon button each bring their own, and
       side by side those read as four different sizes. */
    --fe-control: 2rem;

    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;
    min-height: 0;
    /* The context menu is placed against this box, not against the document:
       the tab around it is overflow: hidden, so anything positioned past its
       edge is simply cut away. */
    position: relative;
}

/* --- toolbar: where am I, and what can I do here --- */
.file-explorer .fe-toolbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    /* Wraps rather than squeezing: below roughly 1100 px the actions drop to a
       line of their own instead of pushing the crumbs out of the view. */
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.file-explorer .fe-nav {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
}

/* Every square button in the explorer: back, forward, up, the places toggle and
   the three view switches. One rule, so they cannot drift apart. */
.file-explorer .fe-icon-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: var(--fe-control);
    height: var(--fe-control);
    padding: 0;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text-mid);
    cursor: pointer;
}

/* FontAwesome pads every icon by .813rem and forces it to 1.375rem, which blew
   each of these square buttons up to 94 x 38 px. flex on top of that: inside a
   flex button the icon shrank to a width of zero and the button came out empty,
   measured - a sized icon in a fixed-size button has no business shrinking. */
.file-explorer .fe-icon-button .svg-inline--fa,
.file-explorer .fe-search-box .svg-inline--fa,
.file-explorer .fe-menu .svg-inline--fa {
    flex: 0 0 auto;
    width: .8rem; height: .8rem;
    padding: 0;
    margin: 0;
    color: inherit;
}

.file-explorer .fe-icon-button:hover:not(:disabled) {
    background: var(--hov);
    color: var(--text);
}

.file-explorer .fe-icon-button:disabled {
    opacity: .35;
    cursor: default;
}

.file-explorer .fe-icon-button.active {
    background: var(--sel);
    color: var(--hl);
    border-color: var(--hl);
}

.file-explorer .fe-crumbs {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 12rem;
}

.file-explorer .fe-crumb-path {
    display: flex;
    align-items: center;
    /* nowrap, and the crumbs shrink instead. Wrapping inside a box of fixed
       height loses the last line - and the last crumb is the one saying where
       the user stands: measured from a 45-character driver name on, the
       current crumb sat below the visible area. */
    flex-wrap: nowrap;
    gap: .35rem;
    min-width: 0;
    /* The path bar of a file manager: a sunken strip rather than loose words,
       so it reads as one control and not as a sentence. */
    box-sizing: border-box;
    width: 100%;
    height: var(--fe-control);
    padding: 0 .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    overflow: hidden;
}

.file-explorer .fe-crumb {
    min-width: 0;
    /* The long middle crumb yields first: a higher shrink factor there means
       the short outer ones stay readable while it gives way. */
    flex-shrink: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-mid);
    font-size: .9rem;
    cursor: pointer;
}

.file-explorer .fe-crumb:hover {
    color: var(--hl);
}

/* The folder actually shown. Not a link: it is where we already are. */
/* The root and the system folder are the anchors of the path - two short
   words that say which half of the explorer this is. They give way last. */
.file-explorer .fe-crumb[data-depth="0"],
.file-explorer .fe-crumb[data-depth="1"] {
    flex-shrink: 0;
}

/* The one the user is standing in keeps its full width, so shortening eats
   the middle of the path rather than its end - but only up to a point: a
   120-character driver name left "Dateiexplorer" at 42 px and "Fahrer" at 20,
   which loses the orientation before the middle has given way at all. */
.file-explorer .fe-crumb.current {
    /* It does not give way at all: measured, it started shortening from a
       44-character object name on, while that name still held 356 px. The
       max-width below is what keeps it from crowding the rest out instead. */
    flex: 0 0 auto;
    max-width: 24rem;
    color: var(--text);
    cursor: default;
}

.file-explorer .fe-crumb.current:hover {
    color: var(--text);
}

.file-explorer .fe-crumb-sep {
    color: var(--text-mid);
    font-size: .7rem;
}

.file-explorer .fe-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* A label cannot be disabled, so the state travels as a class. pointer-events
   keeps the click from reaching the hidden input inside it, and the icon button
   next to it greys out through :disabled - both have to look the same. */
.file-explorer .fe-upload-label.disabled {
    opacity: .35;
    cursor: default;
    pointer-events: none;
}

.file-explorer .fe-search-box {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: 15rem;
    height: var(--fe-control);
    padding: 0 .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text-mid);
}

.file-explorer .fe-search {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text);
}

.file-explorer .fe-views {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

/* --- the tool shelf in the side menu --- */
/* The actions, the filter and the search field do not stay in the toolbar: they
   are moved into the page's side menu, below the tabs, where an area of their
   own has room for the tools still to come. The box carries the explorer's own
   class, so every ".file-explorer .fe-x" rule keeps shaping what is in it -
   what it must not inherit is the explorer's box, which is a full-height flex
   column built to fill a tab.

   Everything below is stated by id on purpose. The menu's own button rules
   reach into anything inside it and outweigh the explorer's: ".sub-menu
   button:not(.sub-menu button.child-tab)" counts three classes and two elements
   against the explorer's two classes, and it would run the 4 px tab marker down
   the left edge of every square button in here. An id is what outranks it. */
#fe-tools {
    /* Tighter than the explorer's .5rem: between a two-word label and the row it
       names, half a line reads as a gap rather than as a heading. */
    gap: .35rem;

    /* A shade smaller than the explorer's own 2 rem, and only in here: at 2 rem
       the fifth tool drops onto a line of its own in a menu that is 161 px wide
       on the white-label instances. The two sizes never stand side by side -
       the toolbar's buttons are a full column away. */
    --fe-control: 1.75rem;

    box-sizing: border-box;
    flex: 0 0 auto;
    height: auto;
    margin-top: .75rem;
    padding-top: .6rem;
    border-top: 1px solid var(--border-dark);
}

/* The column clips whatever leaves it, and the filter panel is 17 rem wide in
   an 11.25 rem column. Only on the page that has a shelf, so nothing else loses
   the clip. */
.sub-menu.fe-host {
    overflow: visible;
}

/* The one heading in the side menu: quiet, small and set in the same key as the
   headings between runs of rows in the list - it names the area, it is not an
   entry in it. Scoped by its class and not by the element, because the filter
   panel inside this shelf carries h5 headings of its own and an "#fe-tools h5"
   would outrank the rules that shape those. */
#fe-tools .fe-tools-title {
    margin: 0;
    color: var(--text-mid);
    font-size: .74rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* One square per tool, in as many columns as the menu is wide - five of them at
   both widths the menu comes in, and a row more for each tool that arrives
   after that. A grid rather than a wrapping row, because a row that overflows
   leaves its last button hanging half outside the menu while the grid simply
   starts a second line and keeps every later tool aligned under the ones before
   it. The two bin buttons take no cell while they are display: none, which is
   everywhere but in the bin. */
#fe-tools .fe-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--fe-control), 1fr));
    justify-items: center;
    gap: .25rem;
}

/* Square and bordered, not a menu entry - see the note above on why this has to
   be said a second time in here. */
#fe-tools .fe-icon-button {
    width: var(--fe-control);
    border: 1px solid var(--border-dark);
}

#fe-tools .fe-icon-button:hover:not(:disabled) {
    background: var(--hov);
    color: var(--text);
}

#fe-tools .fe-icon-button.active {
    background: var(--sel);
    border-color: var(--hl);
    color: var(--hl);
}

/* The field takes the whole column, the way the tab buttons above it do. It is
   a cell of the same grid - it sits inside the actions in the markup, where the
   toolbar needs it as one more item in the row - so it is told to span every
   column rather than to squeeze into a 2 rem one. */
#fe-tools .fe-search-box {
    grid-column: 1 / -1;
    justify-self: stretch;
    width: 100%;
    /* It is a row of its own, not a sixth tool - the gap that separates two
       buttons is too little to say that. */
    margin-top: .25rem;
}

/* The panel hangs off the shelf rather than off its button: which button the
   filter is depends on which tools the group may see at all, and anchored to
   itself it would open at a different height for every group. Out to the right,
   because left of this column there is only the edge of the page. */
#fe-tools .fe-filter-menu {
    position: static;
}

#fe-tools .fe-filter-panel {
    top: 0;
    left: 100%;
    right: auto;
    margin-left: .4rem;
}

/* As far as the cascade is concerned the entries inside the panel are the
   menu's buttons, and they would take the tab marker and the menu's hover
   colour with them - including on the ones that are switched off. */
#fe-tools .fe-filter-panel button:hover {
    background: none;
    border-left: 0;
}

#fe-tools .fe-filter-panel button {
    border-left: 0;
}

#fe-tools .fe-filter-panel button:hover:not(:disabled) {
    background: var(--hov);
}

/* --- the filter bar: what is narrowing the list right now --- */
/* wrap, because the chips grow with every filter added. Without it a row of
   thirteen chips breaks its own labels internally and comes out with four
   different heights side by side; from fifteen it overflows the bar. */
.file-explorer .fe-filter-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    flex: 0 0 auto;
}

.file-explorer .fe-chips {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
}

.file-explorer .fe-scopes {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex: 0 0 auto;
}

/* A chip is one active restriction. Fixed height and no internal wrapping, so a
   long search term does not make this chip taller than its neighbours. */
.file-explorer .fe-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 22rem;
    padding: .15rem .3rem .15rem .6rem;
    background: var(--dbox);
    border: 1px solid var(--hl);
    border-radius: 1rem;
    color: var(--text);
    font-size: .78rem;
    white-space: nowrap;
    flex: 0 0 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-explorer .fe-chip-drop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 50%;
    color: var(--text-mid);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.file-explorer .fe-chip-drop:hover {
    background: var(--hov);
    color: var(--text);
}

/* The reset. Its icon falls under the global FontAwesome rule like every other
   one in here, so it is sized with the icon buttons rather than left to it. */
.file-explorer .fe-filter-reset {
    flex: 0 0 auto;
    margin-left: auto;
}

.file-explorer .fe-filter-reset .svg-inline--fa {
    flex: 0 0 auto;
    width: .8rem; height: .8rem;
    padding: 0;
    margin: 0;
    color: inherit;
}

.file-explorer .fe-search-info {
    color: var(--text-mid);
    font-size: .82rem;
    margin-right: .3rem;
}

.file-explorer .fe-scope {
    padding: .15rem .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: 1rem;
    color: var(--text-mid);
    font-size: .78rem;
    cursor: pointer;
}

.file-explorer .fe-scope:hover {
    background: var(--hov);
}

.file-explorer .fe-scope.active {
    color: var(--hl);
    border-color: var(--hl);
}

/* --- the list fills the body; there is no second column any more --- */
.file-explorer .fe-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: .6rem;
}

/* --- the detail pane --- */

/* A fixed width, not a draggable one: between 20 and 26 rem the difference is
   not worth a splitter with its own stored state, its own bounds and its own
   behaviour on a narrow window. At 22 rem the list keeps 1309 px of 1673 and
   the name column 650 px - a DDD file name needs about 300. */
.file-explorer .fe-details {
    --fe-details-w: 22rem;

    /* Folded, and unfolded by the .open class below - the pane grows out of the
       right-hand edge rather than being there suddenly, the way the master data
       panel one level up grows out of its row. Everything that takes horizontal
       room folds with it: a pane that kept its padding and its side borders
       would pop a 24 px sliver into the row before the fold had started. Same
       200 ms as .fe-object-fold, and the script's FILE_EXPLORER_DETAILS_FOLD
       has to stay in step with it. */
    display: flex;
    flex-direction: column;
    /* Without this the pane grows past the window instead of scrolling inside
       itself - the same trap the tab container had. */
    min-height: 0;
    gap: .4rem;
    padding: .6rem .7rem;
    border: 1px solid var(--border-dark);
    border-radius: .3rem;
    background: var(--dbox);
    overflow: hidden;

    /* After the two shorthands above, never before them: a shorthand rewrites
       every longhand it covers, and border: 1px would put the side borders
       straight back. */
    flex: 0 0 0;
    padding-left: 0;
    padding-right: 0;
    border-left-width: 0;
    border-right-width: 0;
    transition: flex-basis 200ms ease, padding-left 200ms ease,
                padding-right 200ms ease, border-left-width 200ms ease,
                border-right-width 200ms ease;
}

.file-explorer .fe-details.open {
    flex-basis: var(--fe-details-w);
    padding-left: .7rem;
    padding-right: .7rem;
    border-left-width: 1px;
    border-right-width: 1px;
}

/* The content keeps the width it has when the pane is open while the box folds
   around it. Without it the fold rewraps every line on the way in and out - a
   41-character DDD name would break differently in each frame of it. */
.file-explorer .fe-details > * {
    min-width: var(--fe-details-w);
}

.file-explorer .fe-details-head {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--border-dark);
}

/* Breaking anywhere, because a DDD name is one word of 41 characters and would
   otherwise push the close button out of the pane. */
.file-explorer .fe-details-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.file-explorer .fe-details-close {
    flex: 0 0 auto;
}

.file-explorer .fe-details-preview {
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid var(--border-dark);
    border-radius: .3rem;
    background: var(--bg);
}

/* A stated height, not a percentage: the box is sized by its content, so a
   percentage would resolve to nothing and the frame would be invisible. */
.file-explorer .fe-preview-frame {
    display: block;
    width: 100%;
    height: 17rem;
    border: 0;
}

/* Fitted to the box, never blown up past its own resolution: the service caps
   the long edge at 600 px, and a 40 px icon stretched to the pane is mush. */
.file-explorer .fe-preview-image {
    display: block;
    max-width: 100%;
    max-height: 17rem;
    margin: 0 auto;
    object-fit: contain;
}

.file-explorer .fe-preview-text {
    max-height: 17rem;
    margin: 0;
    padding: .5rem;
    overflow: auto;
    font-family: monospace;
    font-size: .72rem;
    line-height: 1.45;
    /* Wrapping rather than a second scrollbar: a log line is 200 characters
       and the pane is 22 rem. */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* The table scrolls inside its own box in both directions - twenty columns do
   not fit a pane, and the page itself must never scroll sideways for it. */
.file-explorer .fe-preview-table-box {
    max-height: 17rem;
    overflow: auto;
}

.file-explorer .fe-preview-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: .72rem;
}

.file-explorer .fe-preview-table th,
.file-explorer .fe-preview-table td {
    max-width: 12rem;
    padding: .2rem .4rem;
    border-bottom: 1px solid var(--border-dark);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-explorer .fe-preview-table th {
    position: sticky;
    top: 0;
    background: var(--bg);
    color: var(--text-mid);
    font-weight: 600;
}

.file-explorer .fe-preview-note {
    padding: 1rem .6rem;
    color: var(--text-mid);
    font-size: .8rem;
    text-align: center;
}

.file-explorer .fe-details-preview .fe-preview-load {
    display: block;
    width: auto;
    margin: .8rem auto;
}

.file-explorer .fe-details-props {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* Label above value, not beside it: at this width a two-column grid breaks
   every second line anyway, and a checksum has nowhere to go at all. */
.file-explorer .fe-details-row {
    display: flex;
    flex-direction: column;
    padding: .3rem 0;
    border-bottom: 1px solid var(--border-dark);
}

.file-explorer .fe-details-label {
    color: var(--text-mid);
    font-size: .75rem;
}

.file-explorer .fe-details-value {
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* A line that is a remark rather than a property - it has no label to stand
   under, so it does not get the two-line shape. */
.file-explorer .fe-details-remark {
    padding: .4rem 0;
    color: var(--text-mid);
    font-size: .8rem;
}

/* --- the list itself --- */
.file-explorer .fe-content {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

/* The list is a plain table here, not the inline-block .table of the rest of
   the app: those cells carry fixed widths, which a resizable explorer cannot
   use. */
.file-explorer table.fe-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
    /* Fixed, so a long name cannot push the other columns out of the view. */
    table-layout: fixed;
}

/* The name column takes what is left and cuts off with an ellipsis; the title
   attribute on the row carries the full name. */
.file-explorer table.fe-list td.fe-col-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Asking for everything, so that the fixed layout hands the name column what
   the sized columns leave over. "auto" is only a claim on an equal share, and
   a column the browser invents for an over-long colspan holds a share too -
   which is how the name once ended up 200 px wide beside 800 px of empty
   table. The value is capped at the space that is left, so it cannot overflow. */
.file-explorer table.fe-list .fe-col-name {
    width: 100%;
}

.file-explorer table.fe-list .fe-col-select { width: 2.2rem; }
.file-explorer table.fe-list .fe-col-date   { width: 11rem; }
.file-explorer table.fe-list .fe-col-size   { width: 7rem; }
.file-explorer table.fe-list .fe-col-type   { width: 10rem; }
.file-explorer table.fe-list .fe-col-copies { width: 6rem; }

/* The count columns of an object list. Wide enough for the heading, which is
   longer than any number that can stand under it. */
.file-explorer table.fe-list .fe-col-ddd         { width: 8rem; }
.file-explorer table.fe-list .fe-col-report      { width: 7rem; }
.file-explorer table.fe-list .fe-col-attestation { width: 10rem; }
.file-explorer table.fe-list .fe-col-fresh       { width: 7rem; }

/* What a certificate is about. Sized to the VALUES, not to the headings: the
   headings are allowed to wrap onto a second line, which costs 17 px of a
   header that is drawn once, while a column sized for "Erstellungsdatum" would
   cost 3 rem in every one of the rows below it. Together they take 41 rem,
   against the 23 rem that size, type and copies give up on this level - so the
   name column pays 18 rem for six answers it used to give none of. */
.file-explorer table.fe-list .fe-col-occasion { width: 9rem; }
.file-explorer table.fe-list .fe-col-period   { width: 12.5rem; }
.file-explorer table.fe-list .fe-col-language { width: 5rem; }
.file-explorer table.fe-list .fe-col-creator  { width: 10rem; }

/* The one heading that decides its own column: "Erstellungsdatum" is a single
   word, so it cannot wrap and cannot be sized down to its value the way the
   others were. 8.5 rem is what it measures. */
.file-explorer table.fe-list .fe-col-issued   { width: 8.5rem; }

/* A kind this object has none of. Dimmed rather than left blank: an empty cell
   reads as "not counted", a dash as "counted, none there". */
.file-explorer .fe-none {
    color: var(--text-mid);
    opacity: .5;
}

.file-explorer table.fe-list thead th,
.file-explorer table.fe-list tbody td {
    display: table-cell;
    width: auto;
    text-align: left;
    padding: .35rem .5rem;
    font-size: .85rem;
    border-bottom: 1px solid var(--border-dark);
}

.file-explorer table.fe-list thead th {
    color: var(--text-mid);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 1;
}

.file-explorer .fe-sortable {
    cursor: pointer;
    user-select: none;
}

.file-explorer .fe-sortable:hover {
    color: var(--text);
}

.file-explorer table.fe-list tbody tr {
    cursor: default;
}

.file-explorer table.fe-list tbody tr:hover {
    background: var(--hov);
}

.file-explorer table.fe-list i,
.file-explorer table.fe-list .svg-inline--fa {
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin-right: .5rem;
    color: var(--text-mid);
}

/* Folders sit in the list as well as in the places column, so they have to be
   tellable from a file at a glance: brighter, bolder, and with the folder icon
   in the accent colour. */
.file-explorer table.fe-list tbody tr.fe-folder td.fe-col-name {
    color: var(--text);
    font-weight: 600;
}

.file-explorer table.fe-list tbody tr.fe-folder .svg-inline--fa,
.file-explorer .fe-tile.fe-folder .svg-inline--fa {
    color: var(--hl);
}

.file-explorer .fe-note {
    display: block;
    color: var(--yellow);
    font-size: .75rem;
}

/* Where a hit lies, while the search reaches past this folder. A link in all
   but name: it is the only way from a result back to the folder it is in. */
.file-explorer .fe-place-hint {
    margin-left: .6rem;
    padding: .05rem .4rem;
    border-radius: .8rem;
    background: var(--dbox);
    color: var(--text-mid);
    font-size: .72rem;
    cursor: pointer;
}

.file-explorer .fe-place-hint:hover {
    color: var(--hl);
}

/* --- the selection --- */
/* The mark shows up under the pointer and stays on what is selected - the way a
   file manager offers a mouse-only way to pick several entries. */
.file-explorer .fe-mark {
    box-sizing: border-box;
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border: 1px solid var(--border);
    border-radius: .15rem;
    opacity: 0;
    vertical-align: middle;
    cursor: pointer;
}

.file-explorer tbody tr:hover .fe-mark,
.file-explorer .fe-tile:hover .fe-mark,
.file-explorer .selected .fe-mark {
    opacity: 1;
}

.file-explorer .selected .fe-mark {
    background: var(--hl);
    border-color: var(--hl);
    position: relative;
}

.file-explorer .selected .fe-mark::after {
    content: "";
    position: absolute;
    left: .28rem;
    top: .08rem;
    width: .2rem;
    height: .45rem;
    border: solid var(--text-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* --sel and --hov are the same colour in this palette, so a selected row would
   be indistinguishable from the one under the pointer. Mixed with the accent
   instead - and the accent is a variable because the white-label stylesheets
   override exactly this one value. */
.file-explorer tbody tr.selected,
.file-explorer tbody tr.selected:hover,
.file-explorer .fe-tile.selected {
    background: var(--sel);
    background: color-mix(in srgb, var(--hl) 18%, var(--dbox));
    box-shadow: inset 2px 0 0 var(--hl);
}

/* Cut, not yet pasted. Faded the way a file manager fades it, so the entry is
   still readable but plainly on its way somewhere. */
.file-explorer .fe-cut {
    opacity: .45;
}

/* Where a drag would land. */
.file-explorer .fe-drop-target {
    outline: 2px dashed var(--hl);
    outline-offset: -2px;
    background: var(--hov);
}

/* --- which columns each view shows --- */
/* Addressed by class, never by position: a column inserted in front - as the
   selection column was - shifts every nth-child and leaves the header and the
   body pointing at different columns. */
/* Shown by default, hidden by an explicit class. The other way round - hidden
   by default, shown for one view - meant a column could only ever appear in the
   one view somebody had thought of. */
.file-explorer.fe-hide-type table.fe-list .fe-col-type,
.file-explorer.fe-hide-copies table.fe-list .fe-col-copies {
    display: none;
}

/* The four count columns belong to an object list and nowhere else: under a
   file they would be four empty cells in every row. Hidden by default and
   shown for that one level, the opposite way round from the optional columns
   above - those are a user's choice, these are a property of the level. */
/* The bin's four columns: off everywhere else, on only in the bin. A property
   of the level, like the count columns of an object list - which is why they
   default to hidden rather than shown. */
.file-explorer table.fe-list .fe-col-origin,
.file-explorer table.fe-list .fe-col-deleted,
.file-explorer table.fe-list .fe-col-deletedby,
.file-explorer table.fe-list .fe-col-expires {
    display: none;
}

.file-explorer table.fe-list .fe-col-origin    { width: 14rem; }
.file-explorer table.fe-list .fe-col-deleted   { width: 11rem; }
.file-explorer table.fe-list .fe-col-deletedby { width: 12rem; }
.file-explorer table.fe-list .fe-col-expires   { width: 8rem; }

.file-explorer.fe-at-bin table.fe-list .fe-col-origin,
.file-explorer.fe-at-bin table.fe-list .fe-col-deleted,
.file-explorer.fe-at-bin table.fe-list .fe-col-deletedby,
.file-explorer.fe-at-bin table.fe-list .fe-col-expires {
    display: table-cell;
}

/* What the bin has no answer for. Size stays - it is the number the quota
   question is about - but date, type and copies belong to a living file. */
.file-explorer.fe-at-bin table.fe-list .fe-col-date,
.file-explorer.fe-at-bin table.fe-list .fe-col-size,
.file-explorer.fe-at-bin table.fe-list .fe-col-type,
.file-explorer.fe-at-bin table.fe-list .fe-col-copies {
    display: none;
}

/* Only in the bin, and the other way round for the four that act on living
   files: an action that would be refused is not an offer.

   The hull each of these buttons sits in is named too: it is what the grid of
   the tool shelf lays out now, and a hull left standing over a hidden button
   holds its place and pushes the row over. */
.file-explorer .fe-restore,
.file-explorer .fe-purge,
.file-explorer .fe-tip-host[data-fe-tip="restore"],
.file-explorer .fe-tip-host[data-fe-tip="purge"] {
    display: none;
}

.file-explorer.fe-bin-actions .fe-restore,
.file-explorer.fe-bin-actions .fe-purge,
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="restore"],
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="purge"] {
    display: inline-flex;
}

.file-explorer.fe-bin-actions .fe-delete,
.file-explorer.fe-bin-actions .fe-download,
.file-explorer.fe-bin-actions .fe-new-folder,
.file-explorer.fe-bin-actions .fe-upload-label,
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="delete"],
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="download"],
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="new-folder"],
.file-explorer.fe-bin-actions .fe-tip-host[data-fe-tip="upload"] {
    display: none;
}

/* The remaining days, as the freshness badge does it. */
.file-explorer .fe-expiry {
    font-size: .72rem;
}

/* .button-primary is 6 rem wide and "Endgültig löschen" is not - it wrapped
   onto two lines, which on the one irreversible button in this explorer reads
   as an accident. Scoped to the button, not to the class: every other one in
   the estate is fine at its width. */
#fe-purge-confirm {
    width: auto;
    padding: 0 1rem;
}

.file-explorer .fe-purge-list {
    max-height: 14rem;
    margin: .6rem 0;
    padding-left: 1.2rem;
    overflow-y: auto;
}

.file-explorer table.fe-list .fe-col-ddd,
.file-explorer table.fe-list .fe-col-report,
.file-explorer table.fe-list .fe-col-attestation,
.file-explorer table.fe-list .fe-col-fresh,
.file-explorer table.fe-list .fe-col-occasion,
.file-explorer table.fe-list .fe-col-period,
.file-explorer table.fe-list .fe-col-issued,
.file-explorer table.fe-list .fe-col-language,
.file-explorer table.fe-list .fe-col-creator {
    display: none;
}

.file-explorer.fe-at-objects table.fe-list .fe-col-ddd,
.file-explorer.fe-at-objects table.fe-list .fe-col-report,
.file-explorer.fe-at-objects table.fe-list .fe-col-fresh {
    display: table-cell;
}

/* An attestation is about a driver's activities, so a vehicle has none - the
   column is absent there rather than a row of dashes. */
.file-explorer.fe-at-objects:not(.fe-no-attestations) table.fe-list .fe-col-attestation {
    display: table-cell;
}

/* Size, type and copies say nothing about a folder: an object list trades them
   for the counts. */
.file-explorer.fe-at-objects table.fe-list .fe-col-size,
.file-explorer.fe-at-objects table.fe-list .fe-col-type,
.file-explorer.fe-at-objects table.fe-list .fe-col-copies {
    display: none;
}

/* --- a driver's certificates --- */

/* The same trade the object list makes, for the same reason: a property of the
   level, not a choice of the user. Every one of these documents is 0 bytes, has
   no second copy and is of the same type, so the three columns that would say
   so hold 23 rem to repeat themselves. In their place stands what the archive
   used to show - and what the properties dialogue could only say about one row
   at a time. */
.file-explorer.fe-at-attestations table.fe-list .fe-col-occasion,
.file-explorer.fe-at-attestations table.fe-list .fe-col-period,
.file-explorer.fe-at-attestations table.fe-list .fe-col-issued,
.file-explorer.fe-at-attestations table.fe-list .fe-col-language,
.file-explorer.fe-at-attestations table.fe-list .fe-col-creator {
    display: table-cell;
}

.file-explorer.fe-at-attestations table.fe-list .fe-col-size,
.file-explorer.fe-at-attestations table.fe-list .fe-col-type,
.file-explorer.fe-at-attestations table.fe-list .fe-col-copies {
    display: none;
}

/* The date column means "when it was made" here, not "the date on the form",
   and it is stacked like the period beside it. Narrower than everywhere else
   because the time now sits under the date instead of behind it. */
.file-explorer.fe-at-attestations table.fe-list .fe-col-date {
    width: 7rem;
}

/* --- a list of nothing but DDD files --- */

/* Only the period of the five. What a certificate is about - the occasion, the
   issue date, the language, who signed it - a DDD file has none of; the period
   it has, and it is the one thing about such a file that neither its name nor
   its date already says.

   Nothing is traded away for it, unlike on the certificate level: size and
   copies differ from row to row here, so the width they hold is width spent on
   something. */
.file-explorer.fe-at-ddd table.fe-list .fe-col-period {
    display: table-cell;
}

/* One column more than a plain file list, so the name gets the same treatment
   the certificates already have: below this width the list scrolls sideways in
   its own container instead of squeezing the name to an icon. Lower than the
   certificates' 72 rem, because this level carries five columns rather than
   nine. */
.file-explorer.fe-at-ddd table.fe-list {
    min-width: 52rem;
}

/* Six sized columns leave the name whatever is over, and on a 1600 px screen
   with the detail pane open that came to 34 px - a column with an icon in it
   and nothing else. Below this width the list scrolls sideways instead, in the
   container that has been able to do so all along, and the name keeps about
   200 px. Above it nothing scrolls: 72 rem is under the 1309 px the pane
   leaves at 1920. */
.file-explorer.fe-at-attestations table.fe-list {
    min-width: 72rem;
}

/* Two lines in one cell: the date, and the time under it in small grey. The
   same pair of classes the driver file uses for its certificates, so the two
   lists read alike. */
.file-explorer table.fe-list .a-main,
.file-explorer table.fe-list .a-sub {
    display: block;
    line-height: 1.25;
}

/* --- the period cell: two ends, each time under its own date --- */

/* A grid rather than one line of text, and that is the whole point: the two
   ends are columns, so each time is centred under the date it belongs to. As
   one string under another they could not line up - the lower line is the
   shorter one, and both were left aligned, which left the closing time 86 px
   short of the closing date.

   inline-grid, so the cell is only as wide as the span and the column keeps
   its left edge with every other one.

   Aligned to the TOP, not the middle: what the dash joins is the two dates, and
   those are the upper line. Centred across both lines it came to rest between
   them and read as an underscore hanging under the first date. */
.file-explorer table.fe-list .fe-period {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: start;
    column-gap: .4rem;
}

/* One end. Centred, because a time is shorter than its date and hanging it on
   the left edge is what made the pair look askew in the first place. */
.file-explorer table.fe-list .fe-period-end {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* The dash sits on the line of the dates it joins - the same line-height as
   .a-main, or it would sit a pixel or two off the row it belongs to. Quiet: it
   is punctuation, not a value. */
.file-explorer table.fe-list .fe-period-sep {
    line-height: 1.25;
    color: var(--text-mid);
}

.file-explorer table.fe-list .a-sub {
    font-size: .75rem;
    color: var(--text-mid);
}

/* The headings of these six may wrap; their values may not. That is the whole
   trade above: a header two lines tall once, instead of three empty rem in
   every row. The cells inherit nowrap from the bare table element, so only the
   occasion - the one value that can be long - is let out of it, and it is
   clipped rather than allowed to push the row taller than its neighbours. */
.file-explorer table.fe-list thead th.fe-col-occasion,
.file-explorer table.fe-list thead th.fe-col-period,
.file-explorer table.fe-list thead th.fe-col-issued,
.file-explorer table.fe-list thead th.fe-col-language,
.file-explorer table.fe-list thead th.fe-col-creator,
.file-explorer.fe-at-attestations table.fe-list thead th.fe-col-date {
    white-space: normal;
}

.file-explorer table.fe-list td.fe-col-occasion,
.file-explorer table.fe-list td.fe-col-creator {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The flag ahead of the language code, at the size the archive gave it. */
.file-explorer table.fe-list .fe-col-language .fi {
    margin-right: .35rem;
}

/* --- the master data of one object, unfolded under its row --- */

/* On the object level the whole row opens something, so it says so. Everywhere
   else a row stays cursor: default, as a file manager's rows do. */
.file-explorer.fe-at-objects table.fe-list tbody tr.fe-folder {
    cursor: pointer;
}

/* The caret in front of a driver's or a vehicle's name. It shows the state; the
   click that changes it belongs to the row around it. */
.file-explorer .fe-object-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    margin-right: .15rem;
    background: none;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* The same width, empty: the rows of a level that has carets but does not have
   one here. Their names then start where the name of the row that opens starts.
   Same numbers as the rule above, so a caret that changes size takes its own
   gap with it. */
.file-explorer .fe-object-void {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    margin-right: .15rem;
    vertical-align: middle;
}

/* Written out this far because three inherited rules have to be beaten at
   once: FontAwesome pads every icon to 1.375rem, the list gives its icons a
   right margin, and a folder row paints them in the accent colour - which
   would leave every caret looking like an open one. */
.file-explorer table.fe-list tbody tr.fe-folder .fe-object-toggle .svg-inline--fa {
    width: .7rem;
    height: .7rem;
    margin: 0;
    padding: 0;
    color: var(--text-mid);
}

.file-explorer table.fe-list tbody tr.fe-folder .fe-object-toggle:hover .svg-inline--fa {
    color: var(--text);
}

/* Same weight as the rule above, so it wins by standing after it. */
.file-explorer table.fe-list tbody tr.fe-folder .fe-object-toggle.open .svg-inline--fa {
    color: var(--hl);
    transform: rotate(90deg);
}

/* The panel is a row of the table only so that it can sit under the one it
   belongs to. Nothing else about it behaves like a row: it is not selectable,
   it does not light up under the pointer, and it opens nothing on a double
   click. */
.file-explorer table.fe-list tbody tr.fe-object-row,
.file-explorer table.fe-list tbody tr.fe-object-row:hover {
    /* Darker than the cards that sit on it, so the groups read as raised
       surfaces rather than as one flat block the way they did when panel and
       card shared --dbox. */
    background: color-mix(in srgb, var(--dbox) 32%, var(--bg));
    cursor: default;
}

/* No padding here, and no border: a cell that keeps either of them cannot fold
   to nothing, and the row would hold a few pixels of itself open. Both live on
   .fe-object-body below, inside the part that folds. */
.file-explorer table.fe-list tbody tr.fe-object-row > td {
    padding: 0;
    border-bottom: 0;
}

/* The unfolding itself. Same two-track technique the timeline accordions use,
   and for the same reason: the baseline animates a grid row between 0fr and
   1fr, so the real content height drives it without a guessed max-height -
   but Chromium will not interpolate a flexible track growing out of 0fr, only
   one collapsing into it, and the panel would snap open while closing stayed
   smooth. Where interpolate-size exists (Chromium 129+) the @supports block
   swaps in an equivalent height 0<->auto animation that expands as smoothly as
   it collapses. */
.file-explorer .fe-object-fold {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 200ms ease;
}

.file-explorer .fe-object-fold > * {
    min-height: 0;
    overflow: hidden;
}

.file-explorer table.fe-list tbody tr.fe-object-row.open .fe-object-fold {
    grid-template-rows: 1fr;
}

/* Inside the fold, so it clips away with the panel instead of holding the
   collapsed row open by its own height. */
.file-explorer .fe-object-body {
    /* The list is a table with white-space: nowrap, and that inherits all the
       way down here: without this line every long value runs out of its field
       instead of wrapping. The old dl set it per cell; at the root of the panel
       it holds for everything inside. */
    white-space: normal;
    padding: .7rem .85rem .8rem;
    border-bottom: 1px solid var(--border-dark);
    /* The same edge the selected row above already carries
       (inset 2px 0 0 var(--hl)). Continuing it here is what turns two elements
       into one block: the panel visibly belongs to the row it opened from. */
    box-shadow: inset 2px 0 0 var(--hl);
}

@supports (interpolate-size: allow-keywords) {
    .file-explorer {
        interpolate-size: allow-keywords;
    }

    .file-explorer .fe-object-fold {
        display: block;
        height: 0;
        transition: height 200ms ease;
    }

    .file-explorer table.fe-list tbody tr.fe-object-row.open .fe-object-fold {
        height: auto;
    }
}

/* Four groups for a driver, three for a vehicle: a vehicle has no fourth group,
   and an empty quarter reads as something that failed to load.

   The groups share one grid so that the row of fields inside them lines up
   across the whole panel. Before this they were four independent lists, and the
   moment one value wrapped - a long company name, a heading like "Naechste
   Sicherheitspruefung" - everything below it slid out of step with the group
   beside it. */
.file-explorer .fe-object-cols {
    display: grid;
    /* The row gap is the distance between two rows of fields, and between the
       heading and the first of them - the groups inherit it as subgrids. */
    gap: .3rem .7rem;
    /* One track for the headings and three for rows of fields. The groups claim
       all of them and hand them on, which is what puts the n-th field of every
       group on the same line and ends every card on the same one.
       Three, although two carry today's four entries: an unused track is
       min-content and therefore nothing, while a fifth entry without a track to
       go to would drop into an implicit row outside the shared grid. */
    grid-template-rows: auto repeat(3, auto);
    /* The panel is inserted and then unfolded; the content follows a moment
       later, which reads as the panel opening rather than as it appearing. */
    opacity: 0;
    transform: translateY(-.3rem);
    transition: opacity 200ms ease 40ms, transform 200ms ease 40ms;
}

.file-explorer table.fe-list tbody tr.fe-object-row.open .fe-object-cols {
    opacity: 1;
    transform: none;
}

.file-explorer .fe-object-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.file-explorer .fe-object-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Five for the training units behind a qualification: 35 hours taught in units
   of seven. Written here beside its two siblings rather than in the FQN block
   further down, so that a change to how the panel divides its width is made in
   one place. */
.file-explorer .fe-object-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* --- one group --- */
.file-explorer .fe-object-col {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    /* One column, and it may be narrower than what is in it. Without this the
       card has an implicit auto column whose floor is the min-content width of
       its contents - and the heading is a nowrap line, so that floor is the
       full heading plus the copy button, while the track outside is a fixed
       quarter of the panel. The card then paints over the one beside it
       instead of cutting the heading: 62px over on a Bulgarian
       "Свидетелство за управление на МПС" once the column falls under 345px.
       min-width: 0 on the heading is not enough - it lifts the flex minimum,
       not the min-content size of a nowrap text. */
    grid-template-columns: minmax(0, 1fr);
    padding: .5rem .6rem .6rem;
    background: var(--dbox);
    border: 1px solid color-mix(in srgb, var(--border-dark) 60%, transparent);
    border-radius: .35rem;
}

/* A rule rather than a band: the heading's usual background is --dbox, which is
   what the card it sits in is already painted in.

   The picture group of the licence panel is a card of the same kind and takes
   the same heading, so it is named alongside rather than given a copy of these
   three rules. It carries no --fe-card-icon, which leaves its icon on the
   fallback accent colour. */
.file-explorer .fe-object-col h2,
.file-explorer .fe-lic-shots h2 {
    /* The frame the copy button's note is placed against. Without it the note
       would measure itself against whatever positioned ancestor happens to be
       further up, which is the tab container. */
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    /* No bottom margin: the grid's row gap already carries the distance to the
       fields, and the two would add up. */
    margin: 0;
    padding: 0 0 .4rem;
    width: 100%;
    background: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border-dark) 75%, transparent);
    color: var(--text);
    font-size: .72rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

/* The icon in front of the heading, in both shapes it can take.

   FontAwesome swaps every <i> for an <svg> as it finds it, and the rows of the
   list arrive that way - but the panel is fetched separately and its icons were
   measured on the clone still as raw <i>, drawn from the webfont instead. Both
   are addressed here rather than trusting the swap: it is the difference
   between a sized accent-coloured glyph and whatever the inherited rules make
   of it.

   Written out this far because three inherited rules have to be beaten at once:
   FontAwesome pads every icon to 1.375rem, the list gives its icons a right
   margin, and a folder row paints them in the accent colour - the last of which
   is wanted here. */
.file-explorer .fe-object-col h2 > .svg-inline--fa,
.file-explorer .fe-object-col h2 > i,
.file-explorer .fe-lic-shots h2 > .svg-inline--fa,
.file-explorer .fe-lic-shots h2 > i {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    margin: 0;
    padding: 0;
    /* Only the webfont shape reads these two; on the svg they do nothing. */
    font-size: .8rem;
    line-height: 1;
    /* Which group this is, said in colour before its name is read. The
       fallback keeps a group that carries no class looking as it always did.
       A child combinator, not a descendant one: the copy button sits in this
       same heading and would otherwise be painted in the group's colour, so
       every card would appear to offer a differently coloured control. */
    color: var(--fe-card-icon, var(--hl));
}

/* Does this group hold a date that has run out, or one that is about to? The
   heading says so before the fields under it are read. Taken from the fields
   themselves with :has() rather than from a class the template would have to
   work out a second time. */
.file-explorer .fe-object-col h2::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
    background: transparent;
}

.file-explorer .fe-object-col:has(.fe-object-field.advance-warning) h2::after {
    background: var(--yellow);
}

/* After the amber rule, so an expired date wins over one that is merely close. */
.file-explorer .fe-object-col:has(.fe-object-field.warning) h2::after {
    background: #e0705c;
}

/* --- which group this is ---
   The colour hangs on the section rather than on the icon, for three reasons.
   It has to be read by the heading rule above and overwritten by the print
   block below, and only the section is an ancestor of both. A class on the
   <i> would have to out-specify a rule already standing at (0,3,1) - seven
   times over, the way svg.color.driving-license (0,2,1) loses against it
   today. And FontAwesome swaps the <i> for an <svg> as it finds it, but never
   touches the section, so the hook holds whether the swap has run or not.

   Where the interface already gives a thing a colour, that colour is read from
   the variable rather than repeated: the driver card and the driving licence
   look the same here as they do on the driver's own overview, which is where
   anyone reading this panel has just come from. */
.file-explorer .fe-object-col.fe-card-driver,
.file-explorer .fe-object-col.fe-card-vehicle {
    --fe-card-icon: var(--card-object);
}

.file-explorer .fe-object-col.fe-card-driver-card {
    --fe-card-icon: var(--doc-driver-card);
}

.file-explorer .fe-object-col.fe-card-licence {
    --fe-card-icon: var(--doc-driving-license);
}

/* The one blue the palette holds, read through the variable so that whoever
   changes --blue sees this group change with it. */
.file-explorer .fe-object-col.fe-card-qualification {
    --fe-card-icon: var(--blue);
}

.file-explorer .fe-object-col.fe-card-tachograph {
    --fe-card-icon: var(--card-tachograph);
}

.file-explorer .fe-object-col.fe-card-telematics {
    --fe-card-icon: var(--card-telematics);
}

/* --- the heading's own text ---
   A bare text node in a flex container is an anonymous item and cannot be
   addressed: it takes no width of its own and cannot be cut off. Wrapped, it
   claims the free space of the line, which is what puts the copy button hard
   against the status dot instead of hard against the title - and a heading too
   long for a narrow instance is cut rather than wrapped, which through the
   subgrid would push the heading row of every group in the panel onto a second
   line. */
.file-explorer .fe-object-col h2 .fe-object-title,
.file-explorer .fe-lic-shots h2 .fe-object-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- copy the whole group ---
   A single click already copies one entry; this copies all of them at once,
   which is what someone filing a driver's papers actually needs - the four
   entries of a group belong together and are pasted together.

   Size first, because the heading row is shared: the groups sit in a subgrid,
   so whatever is tallest in one heading sets the height of all of them. The
   text line is .72rem x 1.2 = 13.8px; the button is 17.6px tall and pulls
   2.4px back above and below, so it contributes 12.8px and the row keeps the
   height it has today while the target stays big enough to hit.

   There is no bare button rule in this stylesheet, so the background, the
   outset border and the padding would come straight from the browser. */
.file-explorer .fe-object-col h2 .fe-card-copy {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Negative block margins rather than a smaller box: see the arithmetic
       above. Taking the height out instead would shrink the target. */
    margin: -.15rem 0 -.15rem .2rem;
    width: 1.3rem;
    height: 1.1rem;
    padding: 0;
    background: none;
    border: 0;
    line-height: 1;
    color: var(--text-mid);
    cursor: copy;
    transition: color 120ms ease;
}

/* FontAwesome pads every icon out to 1.375rem and takes only the left half of
   that back for fa-copy, which would leave 13px of air to the right of the
   glyph. The heading's own icon is sized by the rule further up, but that one
   is written with a child combinator and deliberately does not reach in here. */
.file-explorer .fe-object-col h2 .fe-card-copy .svg-inline--fa,
.file-explorer .fe-object-col h2 .fe-card-copy i {
    width: .8rem;
    height: .8rem;
    margin: 0;
    padding: 0;
    font-size: .8rem;
    line-height: 1;
    color: inherit;
}

.file-explorer .fe-object-col h2 .fe-card-copy:hover {
    color: var(--text);
}

/* A group with nothing in it has nothing to offer. Hidden rather than
   disabled: jQuery drops a click on a disabled element before the delegated
   handler is reached and tippy never shows a tooltip on one, so the button
   would sit there dead and look like a fault. */
.file-explorer .fe-object-col:not(:has(.fe-object-field.fe-copyable)) h2 .fe-card-copy {
    display: none;
}

/* --- the answer after the click ---
   On the button, not on h2::after: that pseudo element is the warning dot. It
   also has to be the button, because the tooltip stands down by itself for as
   long as the element it belongs to carries a note - a note and a tooltip over
   one control are two messages over one box. */
.file-explorer .fe-object-col h2 .fe-card-copy[data-note]::after {
    content: attr(data-note);
    position: absolute;
    top: -.05rem;
    right: 0;
    z-index: 1;
    padding: .05rem .4rem;
    border-radius: .7rem;
    font-size: .62rem;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

/* visibility, not display: the button keeps its place in the line, so the
   heading does not change width for a second and drag the panel with it. */
.file-explorer .fe-object-col h2 .fe-card-copy[data-note] .svg-inline--fa,
.file-explorer .fe-object-col h2 .fe-card-copy[data-note] i {
    visibility: hidden;
}

.file-explorer .fe-object-col h2 .fe-card-copy.fe-copied::after {
    background: var(--hl);
    color: var(--text-dark);
}

.file-explorer .fe-object-col h2 .fe-card-copy.fe-copy-failed::after {
    background: #e0705c;
    color: var(--text);
}

/* --- the fields of a group ---
   Two to a row: a group of four entries is two lines high instead of four, and
   the value gets the width the label column used to take from it. */
.file-explorer .fe-object-fields {
    display: grid;
    grid-row: 2 / -1;
    /* The rows come from the panel's grid, so a value that wraps in one group
       moves the row in every group with it instead of pushing this one out of
       step with its neighbours. */
    grid-template-rows: subgrid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: .3rem;
}

.file-explorer .fe-object-field {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding: .3rem .45rem .35rem;
    background: color-mix(in srgb, var(--bg) 45%, transparent);
    border-radius: .25rem;
}

.file-explorer .fe-object-key {
    color: var(--text-mid);
    font-size: .68rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.3;
}

.file-explorer .fe-object-value {
    color: var(--text);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

/* --- a date that has run out, or is about to ---
   The stock fills label and value alike with #8b3329 / #8f7001. Across a
   quarter of the width that is a rectangle over half the group, and the grey
   label on it is barely readable. Same two colours, but split by job: the tint
   and the edge say which entry it is about, the value carries the colour. */
.file-explorer .fe-object-field.warning {
    background: color-mix(in srgb, #8b3329 42%, transparent);
    box-shadow: inset 2px 0 0 #e0705c;
}

.file-explorer .fe-object-field.advance-warning {
    background: color-mix(in srgb, #8f7001 38%, transparent);
    box-shadow: inset 2px 0 0 var(--yellow);
}

.file-explorer .fe-object-field.warning .fe-object-key,
.file-explorer .fe-object-field.advance-warning .fe-object-key {
    color: color-mix(in srgb, var(--text) 80%, transparent);
}

.file-explorer .fe-object-field.warning .fe-object-value {
    color: #ffd4cc;
    font-weight: 600;
}

.file-explorer .fe-object-field.advance-warning .fe-object-value {
    color: #ffe9ae;
    font-weight: 600;
}

/* --- click to copy ---
   The whole field answers a click, so the pointer says so over the whole field
   - and only where there is something to put on the clipboard. A dash is not
   worth copying, and a field that offers it and then does nothing is worse than
   one that never offered. */
.file-explorer .fe-object-field.fe-copyable {
    cursor: copy;
    transition: background-color 120ms ease;
}

.file-explorer .fe-object-field.fe-copyable:hover {
    background: color-mix(in srgb, var(--hl) 10%, var(--bg));
}

/* A field in a warning state keeps its own tint under the pointer. Trading it
   for the neutral hover would make the one field that matters look like every
   other one for as long as the pointer rests on it. */
.file-explorer .fe-object-field.fe-copyable.warning:hover {
    background: color-mix(in srgb, #8b3329 58%, transparent);
}

.file-explorer .fe-object-field.fe-copyable.advance-warning:hover {
    background: color-mix(in srgb, #8f7001 54%, transparent);
}

/* The answer after the click, in the place of the label rather than over the
   value: the value is the thing that was just copied and stays readable while
   it is being confirmed. The text comes from the attribute the script sets, so
   nothing has to be built and taken apart again in the DOM. */
.file-explorer .fe-object-field[data-note] {
    position: relative;
}

/* visibility, not display: the label keeps its line, so the field does not
   change height for a second and drag the whole panel with it. */
.file-explorer .fe-object-field[data-note] .fe-object-key {
    visibility: hidden;
}

.file-explorer .fe-object-field[data-note]::after {
    content: attr(data-note);
    position: absolute;
    top: .28rem;
    left: .42rem;
    padding: .05rem .4rem;
    border-radius: .7rem;
    font-size: .62rem;
    line-height: 1.35;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.file-explorer .fe-object-field.fe-copied::after {
    background: var(--hl);
    color: var(--text-dark);
}

.file-explorer .fe-object-field.fe-copy-failed::after {
    background: #e0705c;
    color: var(--text);
}

/* While the panel is loading, and when it cannot be shown. In the panel rather
   than in a popup: the caret was a small question and deserves its answer in
   the place it opened. */
.file-explorer .fe-object-note {
    margin: 0;
    /* Clear of the accent edge the body now carries on its left. */
    padding: .5rem .2rem .5rem .4rem;
    color: var(--text-mid);
    font-size: .85rem;
}

/* --- the driving licence, one level below the object ---

   Four groups and, under them, the pictures of the document. Everything about
   a group - the card, its heading, the icon's colour, the fields, the two
   warning states, click-to-copy - is the object panel's and is only added to
   here. What differs is the shape of the grid they stand in. */
.file-explorer .fe-lic-cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* Not the shared row track of the object panel. Three of these groups hold
       four entries and the fourth holds one per class - one on most licences,
       twelve on a few. Rows shared across the panel would either cut those
       twelve off or stretch the three groups beside them to that height. */
    grid-template-rows: none;
    /* One bottom edge across the four, which is what the object panel's subgrid
       buys and this grid still wants - it is only the rows inside that must not
       be shared. A group with fewer entries carries the difference as space
       rather than pushing the panel's own outline out of true. */
    align-items: stretch;
}

.file-explorer .fe-lic-cols > .fe-object-col {
    /* Out of the subgrid: each card is as tall as what is in it. The gap has to
       be stated because it came from the shared grid the cards no longer take
       part in - without it the heading sits on its first field. */
    grid-row: auto;
    grid-template-rows: none;
    gap: .3rem;
    /* The card is as tall as the tallest of the four; its own rows are not.
       Without this the spare height is dealt out between them, and a group of
       four entries reads as one whose lines drifted apart. */
    align-content: start;
}

.file-explorer .fe-lic-cols .fe-object-fields {
    grid-row: auto;
    grid-template-rows: none;
    row-gap: .3rem;
    align-content: start;
}

/* The classes are the one group whose number of entries is not known in
   advance. auto-fit rather than the fixed pair of columns the other groups
   use: two fit while there is room for "C1E" beside a date, and one is better
   than two cut-off ones in a narrow instance. */
.file-explorer .fe-lic-cols .fe-card-licence-classes .fe-object-fields {
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}

/* Which group is which, in the same way the object panel says it: the colour
   hangs on the section, read by the heading rule and overwritten by the print
   block. The holder is the one warm card of the four, and it is warm for the
   reason the object panel's driver card is - it carries no date and can
   therefore never have to show a warning dot over that colour. */
.file-explorer .fe-object-col.fe-card-licence-holder {
    --fe-card-icon: var(--card-object);
}

.file-explorer .fe-object-col.fe-card-licence-classes {
    --fe-card-icon: var(--card-tachograph);
}

.file-explorer .fe-object-col.fe-card-licence-check {
    --fe-card-icon: var(--blue);
}

/* --- the pictures of the licence ---
   A card like the four above it, but the full width of the panel: two scans of
   a licence side by side need more than a quarter of it, and the group has one
   row of content rather than a column of entries. */
.file-explorer .fe-lic-shots {
    display: block;
    margin: .55rem 0 0;
    padding: .5rem .6rem .6rem;
    background: var(--dbox);
    border: 1px solid color-mix(in srgb, var(--border-dark) 60%, transparent);
    border-radius: .35rem;
}

.file-explorer .fe-lic-shot-row {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .4rem;
}

/* Wide enough that the two sides of a licence can be told apart and the larger
   print on them made out - below about this the thumbnail only says "there is
   a picture here". Clicking one still puts it on screen at full size. */
.file-explorer .fe-lic-shot {
    margin: 0;
    width: 14rem;
}

.file-explorer .fe-lic-shot-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    /* The shape of the document itself, 85.6 x 54 mm. Held whether the picture
       has arrived or not, so that the panel does not grow under the pointer as
       one frame after another fills. */
    aspect-ratio: 85.6 / 54;
    width: 100%;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border-dark) 60%, transparent);
    border-radius: .25rem;
    overflow: hidden;
}

.file-explorer .fe-lic-shot-frame.fe-lic-shot-loading {
    animation: fe-lic-shot-pulse 1.2s ease-in-out infinite;
}

/* Without a fill mode on purpose: a filled animation makes its element a
   stacking context, and one of those in this panel is how a dialogue ended up
   behind the overlay once before. */
@keyframes fe-lic-shot-pulse {
    50% { opacity: .45; }
}

.file-explorer .fe-lic-shot-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* What the service will not turn into a picture - a TIFF it cannot decode, a
   file no longer on the disk. Said with the frame's own symbol rather than
   left empty, which looks like one still loading. */
.file-explorer .fe-lic-shot-none {
    color: var(--text-mid);
    font-size: 1.4rem;
}

/* The symbol inside it, in both shapes it can take - FontAwesome swaps the <i>
   for an <svg> as it finds it.

   Two inherited rules have to be beaten, which is what the long selector and
   the !important are for: a bare `span svg` from the info bars pins every icon
   in a span to 1rem with !important, and the list's own icon rule (0,3,1) sets
   the height and a right margin - the margin is what left the glyph 4px off
   the centre of a frame that is centring it. */
.file-explorer table.fe-list .fe-lic-shot-none .svg-inline--fa,
.file-explorer table.fe-list .fe-lic-shot-none i {
    width: 1.4rem !important;
    height: 1.4rem;
    margin: 0;
    font-size: 1.4rem;
    line-height: 1;
}

.file-explorer .fe-lic-shot-name {
    margin-top: .25rem;
    color: var(--text-mid);
    font-size: .68rem;
    line-height: 1.3;
    /* The panel sets white-space: normal for its values; a file name is the one
       thing here that is better cut than wrapped over three lines. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.file-explorer .fe-lic-shot.fe-lic-shot-ready {
    cursor: zoom-in;
}

.file-explorer .fe-lic-shot.fe-lic-shot-ready:hover .fe-lic-shot-frame {
    border-color: var(--hl);
}

.file-explorer .fe-lic-shots-empty {
    margin: .4rem 0 .1rem;
    color: var(--text-mid);
    font-size: .8rem;
}

/* The second line says where the pictures would go. The upload is one level
   further down and easy to miss, so the empty state is the one place that can
   explain the folder at all - which is why it is not dimmed below the line it
   follows. Mixed down to 78% it stood at 3.97:1 on the card, under the 4.5:1
   the size calls for, and the one sentence that explains the folder would have
   been the hardest one in the panel to read. The smaller type is what makes it
   the second line. */
.file-explorer .fe-lic-shots-empty span {
    display: block;
    /* The stylesheet carries a bare `p span { float: right }` from the info
       bars. Without this line the hint lands against the far edge of the
       panel, a metre away from the sentence it belongs to. */
    float: none;
    margin-top: .15rem;
    color: var(--text-mid);
    font-size: .72rem;
}

/* --- one picture, full size ---
   The popup is filled from the thumbnail that was clicked, so no request is
   made and nothing here ever points at the stored file. */
#fe-shot-popup .fe-shot-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    background: var(--dbox);
    border-radius: .35rem;
}

#fe-shot-popup .fe-shot-image {
    max-width: 100%;
    /* The service caps the long edge at 600 px. Shown any bigger, the picture
       only gets blurrier. */
    max-height: min(70vh, 600px);
    object-fit: contain;
}

#fe-shot-popup .fe-shot-name {
    /* Every other h3 in these dialogues carries a translated heading, where the
       stylesheet's uppercase belongs. This one carries a file name the customer
       chose, and the same name would then read Scan_Vorderseite.png under the
       thumbnail and SCAN_VORDERSEITE.PNG in the view it opens. */
    text-transform: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The app's .hidden covers input, div, button, svg and p - but not a table, so
   the list stayed on screen behind the tiles until this was added. */
.file-explorer table.fe-list.hidden {
    display: none;
}

.file-explorer .fe-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: .7rem;
    padding: .2rem;
}

.file-explorer .fe-tile {
    position: relative;
    background: var(--dbox);
    border-radius: .3rem;
    padding: .9rem .5rem .6rem .5rem;
    text-align: center;
    cursor: default;
    overflow: hidden;
}

.file-explorer .fe-tile:hover {
    background: var(--hov);
}

.file-explorer .fe-tile .fe-mark {
    position: absolute;
    top: .4rem;
    left: .4rem;
}

.file-explorer .fe-tile i,
.file-explorer .fe-tile .svg-inline--fa {
    display: block;
    margin: 0 auto .4rem auto;
    width: 2.2rem;
    height: 2.2rem;
    padding: 0;
    font-size: 2.2rem;
    color: var(--text-mid);
}

.file-explorer .fe-tile-name {
    display: block;
    font-size: .78rem;
    /* Names repeat heavily - 6,788 documents share one name in a single
       company - so the tile shows as much as fits and the title holds the rest. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-explorer .fe-tile.fe-folder .fe-tile-name {
    font-weight: 600;
}

.file-explorer .fe-tile-meta {
    display: block;
    color: var(--text-mid);
    font-size: .72rem;
    margin-top: .2rem;
}

/* --- status bar --- */
.file-explorer .fe-status {
    display: flex;
    align-items: center;
    gap: .8rem;
    flex: 0 0 auto;
    /* A little under the row as well as over it: the bar is the last thing on the page and
       read as cramped when its text sat on the very edge of its own box. */
    padding: .55rem 0 .2rem;
    border-top: 1px solid var(--border-dark);
}

.file-explorer .fe-page-info,
.file-explorer .fe-selection-info {
    color: var(--text-mid);
    font-size: .82rem;
}

/* Left, right, and the paging between them. The status text says what is here,
   the quota how much room is left, and the pager only turns up when there is
   more than one page to turn. */
.file-explorer .fe-pager {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Gone rather than greyed out on a single page. Its own class because the
   app's .hidden does not cover a span. */
.file-explorer .fe-pager.fe-pager-off {
    display: none;
}

/* A little air between the arrows and the page size behind them. */
.file-explorer .fe-pager .fe-per-page {
    margin-left: .6rem;
}

.file-explorer .fe-quota {
    margin-left: auto;
    color: var(--text-mid);
    font-size: .82rem;
}

.file-explorer .fe-empty {
    color: var(--text-mid);
    padding: 1.2rem .4rem;
}

.file-explorer .fe-drop {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 .5rem 0;
    padding: 1.2rem;
    border: 2px dashed var(--hl);
    border-radius: .3rem;
    text-align: center;
    color: var(--hl);
    background: var(--dbox);
    pointer-events: none;
}

/* --- the context menu --- */
/* z-index 300: the overlay sits at 100 and the popups at 200, and the menu has
   to stay above both while a dialogue of its own is not open. */
.file-explorer .fe-menu {
    position: absolute;
    z-index: 300;
    min-width: 14rem;
    padding: .25rem 0;
    background: var(--dropbg);
    border: 1px solid var(--border-dark);
    border-radius: .25rem;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .45);
}

.file-explorer .fe-menu-list,
.file-explorer .fe-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.file-explorer .fe-menu-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    position: relative;
    margin: 0;
    padding: .32rem .7rem;
    color: var(--text);
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
}

.file-explorer .fe-menu-item:hover:not(.disabled) {
    background: var(--hov);
}

.file-explorer .fe-menu-item.disabled {
    opacity: .35;
    cursor: default;
}

.file-explorer .fe-menu-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    color: var(--text-mid);
}

/* The shortcut, right-aligned the way a menu prints it. Not a hint at
   something hidden: every one of them is bound. */
.file-explorer .fe-menu-item em {
    margin-left: auto;
    padding-left: 1.5rem;
    color: var(--text-mid);
    font-style: normal;
    font-size: .72rem;
}

.file-explorer .fe-menu-sep {
    height: 1px;
    margin: .25rem .5rem;
    padding: 0;
    background: var(--border-dark);
}

.file-explorer .fe-sub-arrow {
    margin-left: auto;
    padding-left: 1rem;
}

.file-explorer .fe-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -.25rem;
    min-width: 11rem;
    padding: .25rem 0;
    background: var(--dropbg);
    border: 1px solid var(--border-dark);
    border-radius: .25rem;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .45);
}

.file-explorer .fe-menu-item.fe-has-sub:hover > .fe-submenu {
    display: block;
}

/* Opens to the left when the right edge of the tab is too close - the tab is
   overflow: hidden and would cut it off without a sound. */
.file-explorer .fe-menu.fe-flip-sub .fe-submenu {
    left: auto;
    right: 100%;
}

/* --- the two dialogues --- */
/* Wider than the app's 35rem default: a DDD file name runs to 48 characters and
   the checksum to 64, and at 35rem both of them had to be broken across three
   lines to fit. left has to move with the width - the house rule centres a
   popup by hand, with half its width as a negative offset. */
#fe-properties-popup {
    width: 48rem;
    left: calc(-24rem + 50vw);
}

#fe-properties-popup .fe-properties {
    display: table;
    width: 100%;
    border-collapse: collapse;
    /* Fixed, or the checksum decides how wide the table is: 64 characters with
       nowhere to break pushed it 193 px past the dialogue's own edge, measured.
       word-break alone does not help while the layout is still auto. */
    table-layout: fixed;
}

#fe-properties-popup .fe-properties th,
#fe-properties-popup .fe-properties td {
    display: table-cell;
    width: auto;
    text-align: left;
    padding: .35rem .5rem;
    font-size: .85rem;
    border-bottom: 1px solid var(--border-dark);
}

#fe-properties-popup .fe-properties th {
    width: 12rem;
    color: var(--text-mid);
    font-weight: 400;
}

/* The app puts black on every td it does not know about, which on this
   background is invisible - measured as rgb(0,0,0) against #191C24. And it
   sets white-space: nowrap, against which word-break cannot do anything at
   all: the name overran its cell by 92 px and the checksum by 218, measured.
   overflow-wrap rather than word-break, so a value only breaks where it has
   to and not in the middle of a readable word. */
#fe-properties-popup .fe-properties td {
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
}

#fe-name-popup .fe-name-input {
    width: 100%;
}

/* The app gives every ul a 2em block end and every li a rem of its own, which
   turns twenty file names into twenty paragraphs. Bounded in height because a
   selection can hold a whole page, and a page caps at 200. */
#fe-delete-popup .fe-delete-list {
    margin: .6rem 0 1rem;
    padding-left: 1.2rem;
    max-height: 14rem;
    overflow-y: auto;
    list-style-type: disc;
}

#fe-delete-popup .fe-delete-list li {
    margin: 0;
    list-style: disc;
    font-size: .85rem;
    line-height: 1.5;
    /* File names run to 60 characters here and have nowhere to break: without
       this one of them decides how wide the dialogue is. */
    overflow-wrap: anywhere;
}

/* The explorer on a driver's and on a vehicle's own page. The same shell as on
   the tools page, so everything that shapes it already matches - what these two
   have to be told is the geometry the tools page gets from #content.wide: fill
   the tab, and let the list inside scroll rather than the tab around it.

   A cut-down table of its own stood here before, with a pager, a search box and
   an icon button restyled for it. All of that is the explorer's own now. */
#driver-file-explorer,
#vehicle-file-explorer {
    overflow: hidden;
}

/* The chain that carries the tab's height down to the explorer. Without the
   min-height the content refuses to shrink below its natural size and pushes
   the status bar out of the container - the same correction #file-explorer-tab
   needs one screen further up. */
#driver-file-explorer .tab-content,
#vehicle-file-explorer .tab-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* A visible focus ring inside the explorer. The application sets outline: none
   globally, which is why a keyboard user cannot see where the focus sits - and
   in the explorer that matters, because every shortcut behaves differently
   depending on it. Deliberately scoped: the global rule is left alone.
   :focus-visible, so a mouse click does not draw a ring the clicker never
   asked for. */
.file-explorer button:focus-visible,
.file-explorer input:focus-visible,
.file-explorer [tabindex]:focus-visible {
    outline: 2px solid var(--hl);
    outline-offset: 1px;
}

/* --- which column the list is sorted by --- */
/* The caret sits in the header cell's own padding, so it costs no column width -
   the name column is the only one a DDD file can be identified by, and it is
   already 8px short at 1600px with a long driver name in the crumbs. */
.file-explorer .fe-sortable.fe-sorted-asc::after,
.file-explorer .fe-sortable.fe-sorted-desc::after {
    display: inline-block;
    margin-left: .35rem;
    color: var(--hl);
    font-size: .7rem;
}

.file-explorer .fe-sortable.fe-sorted-asc::after  { content: "\25B2"; }
.file-explorer .fe-sortable.fe-sorted-desc::after { content: "\25BC"; }

/* --- the page size --- */
.file-explorer .fe-per-page {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    flex: 0 0 auto;
}

.file-explorer .fe-page-size {
    padding: .15rem .5rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: 1rem;
    color: var(--text-mid);
    font-size: .75rem;
    cursor: pointer;
}

.file-explorer .fe-page-size:hover {
    background: var(--hov);
}

.file-explorer .fe-page-size.active {
    color: var(--hl);
    border-color: var(--hl);
}

/* The app's .hidden covers input, div, button, svg and p - but not span, and
   both of these are spans. Without this the scope switch stayed on screen with
   an empty search field, where a click on it sets a scope nobody asked for. */
.file-explorer .fe-per-page.hidden,
.file-explorer .fe-scopes.hidden {
    display: none;
}

/* --- compact really compact --- */
/* Compact and details differed in two hidden columns and nothing else: same row
   height, same font, same padding - narrower, not shorter. This is the part
   that makes it a density: 33 rows instead of 23 on a 1600x900 screen. */
.file-explorer.fe-density-compact table.fe-list thead th,
.file-explorer.fe-density-compact table.fe-list tbody td {
    padding: .15rem .5rem;
    font-size: .8rem;
}

/* --- printing --- */
/* There is not one @media print block in the application, so Ctrl+P puts the
   menu, the topbar and the 23 rows that happen to be scrolled into view on
   paper. This prints the list and nothing else. */
@media print {
    /* #content is the block that carries the page on every view; everything
       beside it is chrome. Named directly rather than negated against a class
       that exists nowhere in the templates - that spelling hid #content too,
       and the printout came out empty. */
    body > *:not(#content),
    .main-menu,
    .topbar,
    #file-explorer .fe-toolbar,
    /* The toolbar's other half, over in the side menu. */
    #fe-tools,
    #file-explorer .fe-menu,
    #file-explorer .fe-pager,
    #file-explorer .fe-filter-reset,
    #file-explorer .fe-col-select,
    /* A control that can only do something on a screen. */
    #file-explorer .fe-card-copy,
    /* A tooltip that happened to be open when Ctrl+P was pressed. It hangs on
       the body and would already fall under the first rule above; named here
       as well because that rule is about the chrome of the page, and this is
       not part of it. */
    [data-tippy-root] {
        display: none !important;
    }

    /* The list is a scroll box on screen; on paper it has to be allowed to run
       over as many pages as it needs. */
    #file-explorer .fe-details {
        display: none !important;
    }

    #file-explorer .fe-content,
    #file-explorer .fe-body {
        overflow: visible !important;
        max-height: none !important;
        height: auto !important;
        display: block !important;
    }

    #file-explorer table.fe-list thead th {
        position: static;
    }

    #file-explorer,
    #file-explorer table.fe-list {
        color: #000;
        background: #fff;
    }

    /* A row must not be torn across a page break. */
    #file-explorer table.fe-list tbody tr {
        break-inside: avoid;
    }

    /* An unfolded master-data panel prints in the same colours as the list
       around it. Its cards and fields are dark surfaces on screen, and on white
       paper a stack of them is a stack of grey blocks. The two warning states
       keep an edge instead, which survives a printer that drops backgrounds. */
    #file-explorer table.fe-list tbody tr.fe-object-row,
    #file-explorer .fe-object-body,
    #file-explorer .fe-object-col,
    #file-explorer .fe-lic-shots,
    #file-explorer .fe-lic-shot-frame,
    #file-explorer .fe-object-field {
        /* On paper the card colours stand between 1.4:1 and 3:1 against white,
           so the icon gives its identity up along with the dark ground it was
           legible on. This also settles a standing fault: until now the
           heading icon printed cyan, because the rule below blackens the
           heading, the label and the value but not the icon's own colour. */
        --fe-card-icon: #000;
        color: #000;
        background: #fff;
        box-shadow: none;
    }

    #file-explorer .fe-object-key,
    #file-explorer .fe-object-value,
    #file-explorer .fe-object-col h2,
    #file-explorer .fe-lic-shots h2,
    #file-explorer .fe-lic-shot-name,
    #file-explorer .fe-lic-shots-empty,
    #file-explorer .fe-lic-shots-empty span,
    /* Named here as well, and by its own id: the list paints every icon in it
       with a rule of its own, which the frame's inherited black does not
       reach. Left out, the one mark that says "this picture could not be
       shown" printed at 2.4:1 while everything around it was black. */
    #file-explorer .fe-lic-shot-none {
        color: #000;
    }

    /* The pulse would print as one frame of itself, at whatever opacity it
       happened to be holding. */
    #file-explorer .fe-lic-shot-frame.fe-lic-shot-loading {
        animation: none;
    }

    #file-explorer .fe-object-field.warning {
        border-left: 2px solid #8b3329;
    }

    #file-explorer .fe-object-field.advance-warning {
        border-left: 2px solid #8f7001;
    }
}

/* --- the filter button and its panel --- */
.file-explorer .fe-filter-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.file-explorer .fe-filter-toggle.active {
    color: var(--hl);
    border-color: var(--hl);
}

/* Anchored to the button, above the list. It sits inside .fe-toolbar, which
   does not clip - unlike .fe-content, where a panel would be cut off at the
   first row it reached past. */
.file-explorer .fe-filter-panel {
    position: absolute;
    top: calc(100% + .3rem);
    right: 0;
    z-index: 30;
    width: 17rem;
    max-height: 26rem;
    overflow-y: auto;
    padding: .7rem .8rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .3rem;
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .35);
    text-align: left;
}

/* .hidden covers div, so the panel is switched off by it - but it is stated
   here as well, because a display on the element would win over it. */
.file-explorer .fe-filter-panel.hidden {
    display: none;
}

.file-explorer .fe-filter-panel h5 {
    margin: 0 0 .2rem;
    color: var(--text);
    font-size: .9rem;
}

.file-explorer .fe-filter-hint {
    margin: 0 0 .6rem;
    color: var(--text-mid);
    font-size: .72rem;
    line-height: 1.3;
}

.file-explorer .fe-filter-panel ul {
    margin: 0 0 .6rem;
    padding: 0;
    list-style: none;
}

.file-explorer .fe-filter-panel li {
    margin: 0;
}

.file-explorer .fe-filter-window,
.file-explorer .fe-filter-year {
    display: block;
    width: 100%;
    padding: .25rem .4rem;
    background: none;
    border: 0;
    border-radius: .2rem;
    color: var(--text);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.file-explorer .fe-filter-window:hover:not(:disabled),
.file-explorer .fe-filter-year:hover {
    background: var(--hov);
}

/* Greyed out rather than removed: a list whose entries move between two
   openings is a list nobody learns. */
.file-explorer .fe-filter-window:disabled {
    color: var(--text-mid);
    opacity: .5;
    cursor: default;
}

.file-explorer .fe-filter-range {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border-dark);
}

.file-explorer .fe-filter-range label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    color: var(--text-mid);
    font-size: .78rem;
}

/* A date input carries the browser's own chrome, which comes out white on this
   dark surface unless the colours are stated. */
.file-explorer .fe-filter-range input[type="date"] {
    box-sizing: border-box;
    width: 9.5rem;
    height: 1.7rem;
    padding: 0 .4rem;
    background: var(--bg);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text);
    font-size: .78rem;
    color-scheme: dark;
}

/* --- how recently an object delivered --- */
/* Inside the name cell, after the count: a column of its own would appear in
   every file list as well and would take the name column down to 40 % of its
   width - and the name is the only thing a DDD file can be told apart by. */
.file-explorer .fe-freshness {
    display: inline-block;
    margin-left: .4rem;
    padding: 0 .35rem;
    border-radius: .8rem;
    font-size: .7rem;
    line-height: 1.4;
    vertical-align: middle;
}

/* An object that is gone from the master data still has files, so it stays
   reachable - but it is not today's work, and it does not carry a badge. The
   tile says the same as the row: two views of one folder that disagree are
   worse than either. */
.file-explorer tr.fe-folder-inactive .fe-name,
.file-explorer .fe-tile.fe-folder-inactive .fe-name {
    color: var(--text-mid);
    font-style: italic;
}

.file-explorer tr.fe-folder-inactive .fe-freshness,
.file-explorer .fe-tile.fe-folder-inactive .fe-freshness {
    display: none;
}

.file-explorer .fe-filter-overdue.hidden {
    display: none;
}

.file-explorer .fe-filter-overdue-toggle {
    display: block;
    width: 100%;
    padding: .25rem .4rem;
    background: none;
    border: 0;
    border-radius: .2rem;
    color: var(--text);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.file-explorer .fe-filter-overdue-toggle:hover {
    background: var(--hov);
}

.file-explorer .fe-filter-overdue-toggle.active {
    color: var(--hl);
}

.file-explorer .fe-filter-overdue-toggle.active::before {
    content: "\2713\00a0";
}

/* One entry of a filter menu that can be set and unset: a branch, a group, the
   way out of either. The same shape as the switch above it - a full-width,
   left-aligned line with a tick in front of it while it is on - because they sit
   in the same panel and a second shape for the same kind of answer is a second
   shape to keep in step.

   A name that does not fit is cut rather than wrapped: a company name of forty
   characters would otherwise make one entry three lines tall and the menu a
   different height every time it is opened. Every entry carries its whole name
   in its title. */
.file-explorer .fe-filter-option {
    display: block;
    width: 100%;
    padding: .25rem .4rem;
    background: none;
    border: 0;
    border-radius: .2rem;
    color: var(--text);
    font-size: .8rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.file-explorer .fe-filter-option:hover {
    background: var(--hov);
}

/* An entry that carries a count. The count is the point of the entry - "PG
   Oldenburg 9" answers the question before the click - and under the ellipsis
   above it was the first thing to be cut off. So: the name takes the room that
   is left and is cut instead, and the number sits at the end in the muted,
   upright, smaller shape the source and branch entries of the same panel
   already use. Their rule is not simply extended to this class: those two are
   the FILE facets, and one selector over both would tie two controls together
   that are deliberately separate. */
.file-explorer .fe-filter-option.fe-filter-counted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}

.file-explorer .fe-filter-counted > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-explorer .fe-filter-counted em {
    flex: 0 0 auto;
    color: var(--text-mid);
    font-style: normal;
    font-size: .74rem;
}

/* The tick in front of a chosen entry belongs to the name, not to the row: in a
   flex row the pseudo-element is an item of its own and pushes the count out. */
.file-explorer .fe-filter-counted.active::before {
    content: none;
}

.file-explorer .fe-filter-counted.active > span::before {
    content: "\2713\00a0";
}

.file-explorer .fe-filter-option.active {
    color: var(--hl);
}

.file-explorer .fe-filter-option.active::before {
    content: "\2713\00a0";
}

/* --- headings between runs of rows --- */
.file-explorer table.fe-list tbody tr.fe-group td {
    padding: .5rem .5rem .2rem;
    color: var(--text-mid);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: none;
    border-bottom: 1px solid var(--border-dark);
}

/* Not a row: it cannot be selected, and the hover of a real row would be a lie. */
.file-explorer table.fe-list tbody tr.fe-group:hover {
    background: none;
}

/* --- the document kind and the branch, inside the filter panel --- */
.file-explorer .fe-filter-source,
.file-explorer .fe-filter-company {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .25rem .4rem;
    background: none;
    border: 0;
    border-radius: .2rem;
    color: var(--text);
    font-size: .8rem;
    text-align: left;
    cursor: pointer;
}

.file-explorer .fe-filter-source em,
.file-explorer .fe-filter-company em {
    color: var(--text-mid);
    font-style: normal;
    font-size: .74rem;
}

.file-explorer .fe-filter-source:hover:not(:disabled),
.file-explorer .fe-filter-company:hover {
    background: var(--hov);
}

.file-explorer .fe-filter-source:disabled {
    color: var(--text-mid);
    opacity: .5;
    cursor: default;
}

.file-explorer .fe-filter-source.active,
.file-explorer .fe-filter-company.active {
    color: var(--hl);
}

.file-explorer .fe-filter-source.active::before,
.file-explorer .fe-filter-company.active::before {
    content: "\2713\00a0";
}

.file-explorer .fe-filter-sources.hidden,
.file-explorer .fe-filter-companies.hidden {
    display: none;
}

/* --- the objects a search names, above the file hits --- */
.file-explorer .fe-object-matches {
    flex: 0 0 auto;
    margin-bottom: .4rem;
    padding: .4rem .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    max-height: 9rem;
    overflow-y: auto;
}

.file-explorer .fe-object-matches.hidden {
    display: none;
}

.file-explorer .fe-object-matches h5 {
    margin: 0 0 .2rem;
    color: var(--text-mid);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.file-explorer .fe-object-matches ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.file-explorer .fe-object-match {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    padding: .2rem .3rem;
    background: none;
    border: 0;
    border-radius: .2rem;
    color: var(--text);
    font-size: .82rem;
    text-align: left;
    cursor: pointer;
}

.file-explorer .fe-object-match:hover {
    background: var(--hov);
}

/* Same reason as everywhere else in here: the global FontAwesome rule forces
   1.375rem and 13px of padding onto every icon it can reach. */
.file-explorer .fe-object-match .svg-inline--fa {
    flex: 0 0 auto;
    width: .8rem; height: .8rem;
    padding: 0;
    margin: 0;
    color: var(--text-mid);
}

.file-explorer .fe-match-detail {
    color: var(--hl);
    font-style: normal;
    font-size: .76rem;
}

.file-explorer .fe-match-count {
    margin-left: auto;
    color: var(--text-mid);
    font-size: .76rem;
}


/* ===== The file explorer's tooltips =====================================
   The explorer left every hint to the browser's own title bubble until now:
   grey, a second late, one line, and in a font nothing else here uses. These
   are the house tooltip - tippy with the tg theme, like the rest of the
   frontend - given a shape of its own, because an explorer hint has more to
   say than a name: what the control does, which gesture or key does the same,
   and what the limit is.

   Every part is a <span>. The application gives each <ul> a bottom margin of
   2em and each <li> one of 1rem, so a list of four gestures would come out as
   four paragraphs. */

.tippy-box[data-theme~='tg'] .fe-tip {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .1rem 0;
    text-align: left;
    line-height: 1.35;
}

/* The name and its shortcut on one line, the way the context menu prints them:
   what it is on the left, how to reach it on the right. */
.tippy-box[data-theme~='tg'] .fe-tip-head {
    display: flex;
    align-items: baseline;
    gap: .5rem;
}

.tippy-box[data-theme~='tg'] .fe-tip-name {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text);
}

/* A key, drawn as one. --hl is the accent this frontend uses to say "this is
   the part that matters" - the search hit detail and the sorted column carry
   it too. */
.tippy-box[data-theme~='tg'] .fe-tip-key {
    flex: 0 0 auto;
    margin-left: auto;
    padding: .05rem .3rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--hl);
    font-family: inherit;
    font-size: .68rem;
    white-space: nowrap;
}

.tippy-box[data-theme~='tg'] .fe-tip-body {
    font-size: .76rem;
    color: var(--ttip);
}

/* What else reaches the same result. One line each, with a mark that is not a
   bullet: a bullet in a tooltip reads as a list of things to do, and these are
   things that can be done. */
.tippy-box[data-theme~='tg'] .fe-tip-gestures {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin-top: .1rem;
}

.tippy-box[data-theme~='tg'] .fe-tip-gesture {
    padding-left: .7rem;
    position: relative;
    font-size: .73rem;
    color: var(--text-mid);
}

.tippy-box[data-theme~='tg'] .fe-tip-gesture::before {
    content: '\203A';
    position: absolute;
    left: 0;
    color: var(--hl);
}

/* The limit worth knowing before the click, set off by a line because it is
   about what will not happen. */
.tippy-box[data-theme~='tg'] .fe-tip-note {
    margin-top: .1rem;
    padding-top: .3rem;
    border-top: 1px solid var(--border-dark);
    font-size: .71rem;
    color: var(--text-mid);
}

/* The shortcut list under the heading of the tool shelf: two columns, because
   eleven pairs of key and meaning are a table and not a sentence. */
.tippy-box[data-theme~='tg'] .fe-tip-keys {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .2rem .55rem;
    align-items: baseline;
    margin-top: .1rem;
}

.tippy-box[data-theme~='tg'] .fe-tip-shortcut {
    display: contents;
}

.tippy-box[data-theme~='tg'] .fe-tip-shortcut .fe-tip-key {
    margin-left: 0;
    justify-self: start;
}

.tippy-box[data-theme~='tg'] .fe-tip-shortcut em {
    font-style: normal;
    font-size: .73rem;
    color: var(--text-mid);
}

/* A touch more room than tippy's own 5px/9px: these hold up to four lines. */
.tippy-box[data-theme~='tg'] .tippy-content {
    padding: .4rem .55rem;
}

/* The participants of a training day inside the calendar's hover. tippy sets its
   content as innerHTML, so the list lands straight in .tippy-content - and this
   theme has never had a ul rule, because its content was four lines of text.
   Without one the list does not fall back on the browser either: the tooltip
   hangs in the same document, so the application's own reset reaches it and
   takes the indent away (`ul { padding-inline-start: 0 }`) along with every
   marker (`ul li { list-style: none }`), leaving a rem under each item and 2em
   under the list. The three declarations below put all of that back.

   Ten names and then a count. A hover cannot be scrolled: the popper is not
   interactive on purpose, and making it one would hang it back into the
   calendar's own scrolling box. Every further name is in the same payload and
   stands in the day popup, one click away.

   Grey and white only, no accent: in one of the brand sheets --hl and --green are both
   green over a green page, and a coloured name would read as a state it does not
   carry. */
.tippy-box[data-theme~='tg'] .fqn-cal-people {
    margin: .15rem 0 0;
    padding-left: .9rem;
    list-style-type: disc;
}

.tippy-box[data-theme~='tg'] .fqn-cal-people li {
    margin: 0;
    list-style: disc;
    font-size: .76rem;
    line-height: 1.35;
    color: var(--ttip);
}

.tippy-box[data-theme~='tg'] .fqn-cal-people li.fqn-cal-rest {
    display: none;
}

/* Inside the list for the same reason as in the popup: written beside it,
   `.tippy-box[data-theme~='tg'] .fqn-cal-more` matches with three class-column
   items and no element - the attribute counts there too - against the rule
   above, which has the same three and the `li`. The element column then settles
   it against this one, and the sentence comes out as a name: same marker, same
   colour. */
.tippy-box[data-theme~='tg'] .fqn-cal-people li.fqn-cal-more,
.tippy-box[data-theme~='tg'] .fqn-cal-people li.fqn-cal-hidden {
    list-style: none;
    color: var(--text-mid);
}

/* The hull that carries the tooltip of a button which can be greyed out. tippy
   refuses to show on an element with a disabled attribute - `show()` returns
   before it does anything if getCurrentTarget().hasAttribute('disabled') - and
   a hint is worth most exactly then. Its own comment recommends a wrapper.

   It changes no layout: the buttons have a fixed size of their own, and the
   three boxes that hold them are a flex row and a grid with gap, where a hull
   of the button's size takes the button's place.

   The upload control needs it for a second reason: it is a label, which takes
   no disabled attribute, so its state travels as a class that switches the
   pointer events off - which also kept the pointer from ever reaching it. The
   hull is not switched off and catches the pointer in its place. */
.file-explorer .fe-tip-host {
    display: inline-flex;
    flex: 0 0 auto;
    pointer-events: auto;
}

/* The heading of the tool shelf is the only tooltip in here that hangs on
   something which is not a control. Without a mark, nobody would point at it. */
#fe-tools .fe-tools-title[data-fe-tip] {
    cursor: help;
    text-decoration: underline dotted var(--border-dark);
    text-underline-offset: .2rem;
}

/* Two of the boxes that carry tooltips are not buttons and give no other sign
   that there is something to read on them. */
.file-explorer .fe-freshness,
.file-explorer th[data-fe-tip] {
    cursor: help;
}

/* === The FQN list of the tools page ===
   The same table the file explorer shows under "Fahrpersonal", without the
   explorer around it. The rules that shape that one all hang off .file-explorer
   and none of them reaches in here, so what this list needs is restated -
   widening those selectors instead would drag the shell's fill-the-tab geometry
   onto a tab that scrolls on its own. */
table.fqn-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
    /* Fixed, so a long name cannot push the three right columns off screen. */
    table-layout: fixed;
}

table.fqn-list thead th,
table.fqn-list tbody td {
    display: table-cell;
    width: auto;
    text-align: left;
    padding: .4rem .5rem;
    font-size: .85rem;
    border-bottom: 1px solid var(--border-dark);
    /* The bare `table` rule further up sets nowrap for the file lists and has no
       antidote outside .file-explorer. Names run long, and clipping one is
       better than a row that grows to three lines. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

table.fqn-list thead th {
    position: sticky;
    top: 0;
    background: var(--bg);
    color: var(--text-mid);
    z-index: 1;
}

/* The name takes what is left; the other three are fixed. */
table.fqn-list .fqn-col-number { width: 12rem; }
table.fqn-list .fqn-col-until  { width: 8rem; }
table.fqn-list .fqn-col-days   { width: 6rem; }

table.fqn-list tbody tr:hover {
    background: var(--hov);
}

/* FontAwesome pads every icon to 1.375rem, which in a .85rem row is a line and
   a half. The explorer restates it for the same reason. */
table.fqn-list .fa-solid,
table.fqn-list .svg-inline--fa {
    width: 1rem;
    height: 1rem;
    padding: 0;
    margin-right: .5rem;
    color: var(--text-mid);
}

/* Out of service. Still listed - the certificate of someone who left is still a
   fact about them - but said the way the explorer says it about a driver that is
   gone from the master data, so the two lists do not disagree. */
table.fqn-list tr.fqn-row-inactive .fqn-name {
    color: var(--text-mid);
    font-style: italic;
}

/* The plan above the list orders by the same two characters and the same rules.
   Written into these selectors rather than copied below them: the two tables sit
   one above the other on the same tab, and a caret that differed between them
   would read as two different controls doing the same thing. */
table.fqn-list .fqn-sortable,
table.fqn-plan-list .fqn-plan-sortable {
    cursor: pointer;
    user-select: none;
}

table.fqn-list .fqn-sortable:hover,
table.fqn-plan-list .fqn-plan-sortable:hover {
    color: var(--text);
}

/* The caret sits in the header cell's own padding, so it costs no column width.
   Same two characters and the same colour as the explorer's. */
table.fqn-list .fqn-sortable.fqn-sorted-asc::after,
table.fqn-list .fqn-sortable.fqn-sorted-desc::after,
table.fqn-plan-list .fqn-plan-sortable.fqn-sorted-asc::after,
table.fqn-plan-list .fqn-plan-sortable.fqn-sorted-desc::after {
    display: inline-block;
    margin-left: .35rem;
    color: var(--hl);
    font-size: .7rem;
}

table.fqn-list .fqn-sortable.fqn-sorted-asc::after,
table.fqn-plan-list .fqn-plan-sortable.fqn-sorted-asc::after  { content: "\25B2"; }
table.fqn-list .fqn-sortable.fqn-sorted-desc::after,
table.fqn-plan-list .fqn-plan-sortable.fqn-sorted-desc::after { content: "\25BC"; }

table.fqn-list th[data-tippy-content] {
    cursor: help;
}

/* Below the header, not above it: the message belongs where the missing rows
   would have been. Same place both explorer lists put it. */
#fqn-tab .fqn-empty {
    color: var(--text-mid);
    padding: 1.2rem .4rem;
}

/* === The FQN list's unfolding panel ===
   The panel itself is the explorer's: its host carries .file-explorer, so every
   rule shaping a card, a heading, a field and a warning state above reaches it
   word for word, and the two panels cannot drift apart the way two copies of
   seventy-six rules would.

   What has to be stated again is only the layer those rules cannot reach: the
   fold rules hang off `table.fe-list tbody tr.fe-object-row`, and this is
   another table with another row. Six rules instead of seventy-six. */

/* The host is a plain box. .file-explorer makes the shell a full-height flex
   column - correct for a tab that IS the explorer, wrong for a div sitting in a
   table cell, where it would stretch the cell and space its one child away. */
#fqn-tab .fqn-object-host {
    display: block;
    height: auto;
    gap: 0;
}

/* The panel is a row of the table only so that it can sit under the one it
   belongs to. Nothing else about it behaves like a row. Same surface as the
   explorer's, so the cards read as raised on it. */
#fqn-tab table.fqn-list tbody tr.fqn-object-row,
#fqn-tab table.fqn-list tbody tr.fqn-object-row:hover {
    background: color-mix(in srgb, var(--dbox) 32%, var(--bg));
    cursor: default;
}

/* No padding and no border on the cell: a cell that keeps either cannot fold to
   nothing, and the row would hold a few pixels of itself open. Both live on
   .fe-object-body, inside the part that folds. */
#fqn-tab table.fqn-list tbody tr.fqn-object-row > td {
    padding: 0;
    border-bottom: 0;
    /* The list's own cell rule clips and never wraps, which is right for a data
       cell and wrong for the one cell that holds a panel: the fold does its own
       clipping while it opens, and an ellipsis over a card is never wanted. */
    overflow: visible;
    white-space: normal;
}

/* The open state. The explorer hangs it on the row and reaches the fold through
   `table.fe-list`; here it hangs on the host, which is inside the scope of the
   shared rules and therefore keeps both of their folding techniques - the grid
   track everywhere, the height where interpolate-size exists. The panel folds
   exactly as the explorer's does, in the same 200 ms, off the same declarations. */
#fqn-tab .fqn-object-host.open .fe-object-fold {
    grid-template-rows: 1fr;
}

#fqn-tab .fqn-object-host.open .fe-object-cols {
    opacity: 1;
    transform: none;
}

@supports (interpolate-size: allow-keywords) {
    #fqn-tab .fqn-object-host.open .fe-object-fold {
        height: auto;
    }
}

/* --- the caret in front of a name ---
   The explorer's own caret rules are written through `table.fe-list tbody
   tr.fe-folder`, which no row here is. The box comes from .file-explorer .fe-object-toggle
   above only inside the panel, so the row's caret needs all of it. */
#fqn-tab table.fqn-list .fe-object-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0;
    margin-right: .15rem;
    background: none;
    border: 0;
    vertical-align: middle;
    cursor: pointer;
}

#fqn-tab table.fqn-list .fe-object-toggle .svg-inline--fa,
#fqn-tab table.fqn-list .fe-object-toggle i {
    width: .7rem;
    height: .7rem;
    margin: 0;
    padding: 0;
    color: var(--text-mid);
    transition: transform 200ms ease;
}

#fqn-tab table.fqn-list tbody tr:hover .fe-object-toggle .svg-inline--fa,
#fqn-tab table.fqn-list tbody tr:hover .fe-object-toggle i {
    color: var(--text);
}

/* Same weight as the rule above, so it wins by standing after it. */
#fqn-tab table.fqn-list .fe-object-toggle.open .svg-inline--fa,
#fqn-tab table.fqn-list .fe-object-toggle.open i {
    color: var(--hl);
    transform: rotate(90deg);
}

/* The whole row opens the panel, so the pointer says so over the whole row. */
#fqn-tab table.fqn-list tbody tr.fqn-row {
    cursor: pointer;
}

/* --- which unit this is ---
   A number in the place of the explorer's icon: five cards that all carried a
   graduation cap would be told apart by their title alone, and the title is the
   line that gets cut first when the panel narrows. It is painted in the card's
   own colour, the same variable the explorer's icons read. */
#fqn-tab .fqn-module-no,
#fqn-appointment-popup .fqn-module-no,
#fqn-attendance-popup .fqn-module-no,
#fqn-renew-popup .fqn-module-no,
#fqn-create-popup .fqn-module-no,
#fqn-merge-popup .fqn-module-no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .95rem;
    height: .95rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fe-card-icon, var(--hl)) 22%, transparent);
    color: var(--fe-card-icon, var(--hl));
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1;
}

/* Five colours rather than one repeated: the cards are read across, and a row of
   five identical headings gives the eye nothing to count along. Taken from the
   palette the rest of the interface already uses. */
#fqn-tab .fqn-card-module-1,
.popup .fqn-card-module-1 { --fe-card-icon: var(--green); }
#fqn-tab .fqn-card-module-2,
.popup .fqn-card-module-2 { --fe-card-icon: var(--blue); }
#fqn-tab .fqn-card-module-3,
.popup .fqn-card-module-3 { --fe-card-icon: var(--yellow); }
#fqn-tab .fqn-card-module-4,
.popup .fqn-card-module-4 { --fe-card-icon: var(--card-tachograph, var(--hl)); }
#fqn-tab .fqn-card-module-5,
.popup .fqn-card-module-5 { --fe-card-icon: var(--card-telematics, var(--hl)); }

/* A unit that has been sat, said by the card and not only by the date inside it.
   A panel of five is read at a glance - "what is still missing here" - and until
   now that question was answered by reading five date fields.

   Green because green already means exactly this everywhere else in the tab: the
   check in the unit columns of the list is painted --green, and so is the badge
   of a sat unit in the booking dialog. The frame is the card's own border
   recoloured rather than a second edge drawn inside it, so the card keeps its
   size and the five stay level.

   The glow is deliberately faint - it marks the card, it does not light the
   panel up. A blurred shadow and no spread: at spread the five done cards of a
   finished driver would bleed into each other across the .7rem grid gap. */
#fqn-tab .fqn-card-module.fqn-module-done {
    border-color: color-mix(in srgb, var(--green) 55%, transparent);
    box-shadow: 0 0 .5rem color-mix(in srgb, var(--green) 16%, transparent);
}

/* Six rows where the explorer reserves three - five of fields and, between
   them, the rule that divides what was sat from what is booked - stated on the
   FQN panel's own wrapper so that the explorer's cards keep the three they were
   measured for. What is booked takes three of them: the day beside its starting
   time, the provider on a line of its own, the remark. The tracks belong to the
   outer grid because the cards take theirs from it as subgrids: a card cannot
   grow a row on its own without stepping out of line with the four beside it. */
#fqn-tab .fqn-module-cols {
    grid-template-rows: auto repeat(6, auto);
}

/* Two to a row, the way the explorer's panel does it - the earlier single
   column was a guess that "Bescheinigungsnummer" would not survive a fifth of
   the panel, and measured at 1920 it does with room to spare. The entries that
   need a full line say so themselves in the template.

   The entries that are read together sit together, in two groups with a rule
   between them: what came of the unit - the day it was sat, the number on its
   certificate - and what is arranged for it - the day beside its starting time,
   who teaches it, the remark. The first two take a line each: "Bescheinigungs-
   nummer" is one word and does not fit half a card, and a unit has no expiry of
   its own to stand beside its date - the deadline is the certificate's, in the
   row above the cards. The provider and the remark take a line each as well: the
   half beside the day holds its time, and a provider's name needs the room. */
#fqn-tab .fqn-field-wide {
    grid-column: 1 / -1;
}

/* The rule between the two groups. A row of its own in the shared grid, so it
   stands at the same height in all five cards; drawn in the colour of the line
   under each card's heading, so that a card has one kind of divider. */
#fqn-tab .fqn-field-divider {
    grid-column: 1 / -1;
    align-self: center;
    height: 1px;
    margin: .15rem 0;
    background: color-mix(in srgb, var(--border-dark) 75%, transparent);
}

/* The unit's name is the whole point of the card, so it wraps rather than being
   cut. The headings sit in a shared subgrid row, so a second line grows that row
   for all five cards at once and they still end level - which is the reason the
   explorer's own titles are kept to one line, and the reason a second one is
   safe here. */
#fqn-tab .fqn-card-module h2 .fe-object-title {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
}

/* --- a field that is written into ---
   The box is the explorer's; only what sits where the value would has to be
   said. The input is stripped back to the value's own typography so that the
   reading panel and the writing one are the same panel: a boxed input inside an
   already boxed field would draw a second frame around every entry.

   What says the box is written into is its own bottom edge, not a line drawn
   inside it: the underline this carried before sat six pixels above the box it
   was in, so every entry showed two horizontal edges where the explorer's panel
   beside it shows one. An inset shadow rather than a border, because a border
   would take those pixels out of a field whose height is shared with the four
   cards next to it. */
#fqn-tab .fqn-field-input {
    cursor: text;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--border-dark) 70%, transparent);
}

#fqn-tab .fqn-field-input:focus-within {
    box-shadow: inset 0 -1px 0 var(--hl);
}

/* Worked out rather than written into, so it says so: no edge, and the arrow
   cursor the read-only panel has. */
#fqn-tab .fqn-field-derived {
    cursor: default;
}

#fqn-tab .fqn-field-input input,
#fqn-tab .fqn-field-input select,
#fqn-tab .fqn-field-input textarea {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.35;
}

#fqn-tab .fqn-field-input input:focus,
#fqn-tab .fqn-field-input textarea:focus {
    outline: none;
}

/* Two lines, fixed. The five cards share their grid rows, so a box the user
   drags taller in one of them moves the same row in the other four - which is
   the one thing a resize handle here could do that nobody would want. */
#fqn-tab .fqn-field-input textarea {
    display: block;
    height: 2.7rem;
    resize: none;
    overflow-y: auto;
}

/* The browser's own calendar button is white on this background and sits 20 px
   wide in a field of 200. Tinted to the text colour it belongs to. */
#fqn-tab .fqn-field-input input[type="date"]::-webkit-calendar-picker-indicator,
#fqn-tab .fqn-field-input input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.55);
    cursor: pointer;
}

#fqn-tab .fqn-field-input input[type="date"]:hover::-webkit-calendar-picker-indicator,
#fqn-tab .fqn-field-input input[type="time"]:hover::-webkit-calendar-picker-indicator {
    filter: invert(1) opacity(.9);
}

/* --- how far along, and the one control that writes --- */
#fqn-tab .fqn-module-foot {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding-top: .7rem;
}

#fqn-tab .fqn-module-count {
    color: var(--text-mid);
    font-size: .78rem;
}

/* Between the count and the button, and pushing the button to the far edge:
   the answer to a save belongs beside the control that was pressed. */
#fqn-tab .fqn-module-note {
    flex: 1 1 auto;
    text-align: right;
    color: var(--green);
    font-size: .78rem;
}

#fqn-tab .fqn-module-note-bad {
    color: var(--red);
}

/* Without the flex-grow above it, so the button keeps the right edge even while
   nothing is being reported.

   .button-primary is 6rem wide, which is the width of "Speichern" and not of
   "Aenderung speichern" - the popups that use it add a "wide" class for exactly
   that. Here the button stands alone at the end of a row with room to spare, so
   it takes the width of its own label instead of a second line. */
#fqn-tab .fqn-module-foot .fqn-module-save {
    flex: 0 0 auto;
    width: auto;
    margin: 0 0 0 auto;
    padding: 0 .9rem;
    white-space: nowrap;
}

#fqn-tab .fqn-module-note:not(:empty) + .fqn-module-save {
    margin-left: 0;
}

/* The panel's own message: loading, and what came back instead of a record. */
#fqn-tab .fe-object-note {
    margin: 0;
    color: var(--text-mid);
    font-size: .82rem;
}

/* === The FQN tab now carries a head above a list ===
   Word for word the chain of #file-explorer-tab: the tab clips, corrects its
   height by its own margin and hands what is left to .tab-content, which takes
   the rest and scrolls on its own. Until now nothing passed the height down -
   .tab-content is height: auto and flex-grow: 0, so it grew only as tall as the
   table and left the rest of a window-high container empty. */
#fqn-tab {
    overflow: hidden;
    gap: .5rem;
}

/* Both ids: "#content.wide .tab-container" is the rule being corrected and beats
   the tab's id on its own. The 2.25rem rather than 1rem are the same correction
   the explorer states for itself - without them the last row of the list sits
   flush on the bottom edge of the window. */
#content.wide #fqn-tab {
    height: calc(100vh - 2.25rem);
}

#fqn-tab .fqn-head {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

/* The scroller is .tab-content itself - no extra box. The sticky thead of the
   driver list needs no change for it: sticky refers to the nearest scrollport,
   so top: 0 now means the top edge of this box instead of the top of the tab.
   min-height: 0 is not cosmetic - without it the content refuses to shrink below
   its natural height and pushes the head back out of the container. */
#fqn-tab .tab-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Three blocks: the next day there is, what the certificates say, and what is
   arranged about them. The next day leads because it is the one answer somebody
   opens the tab for. The other two carry four numbers each, so they keep the
   wider share - four tiles in a share measured for two put every label on two
   lines and made the card a storey taller. */
#fqn-tab .fqn-stats-cols {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.15fr;
    gap: .75rem;
}

/* The card's heading in full-contrast text, as the dashboard sets the headings
   of the same summary cards. The house default is the muted grey of a label,
   which made the one heading of this tab the faintest line on it. */
#fqn-tab .fqn-stats .doko-summary-card-title {
    color: var(--text);
}

/* The next day and its starting time on one line. The value is bold at 1.5em in
   a tile a sixth of the card wide, so it is kept to its line and cut with an
   ellipsis rather than wrapping - a second line would make the card taller and
   push the plan down - and the whole reading stands in its title. */
#fqn-tab .fqn-stat-next .value {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A step lighter than the date, so the two read as day and hour rather than as
   one long number. */
#fqn-tab .fqn-stat-next .fqn-stat-time {
    font-weight: 400;
}

/* Every other stat label in this house is white-space: nowrap, and a provider's
   name under the next date ran straight out of the card. */
#fqn-tab .fqn-stat-next .label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Stated again although .doko-summary-stat .label already has it: this rule
       turns the label into a block, and a block that is allowed to wrap makes the
       card taller and pushes the whole plan down by a line. The names got longer
       the moment a day could teach several units. */
    white-space: nowrap;
}

#fqn-tab .doko-summary-stat[data-filter] {
    cursor: pointer;
}

/* A filtered number has to say so on itself. Somebody who walks away from a
   filtered tab and comes back to it would otherwise read a company that has lost
   four fifths of its drivers. */
#fqn-tab .doko-summary-stat.fqn-stat-active .value {
    color: var(--hl);
}

#fqn-tab .doko-summary-stat.fqn-stat-active .label::before {
    content: "\2713\00a0";
}

#fqn-tab .fqn-filter-note {
    display: flex;
    align-items: center;
    gap: .6rem;
    height: 1.4rem;
    color: var(--text-mid);
    font-size: .82rem;
}

#fqn-tab .fqn-filter-reset {
    padding: 0;
    background: none;
    border: 0;
    color: var(--hl);
    font-size: .8rem;
    cursor: pointer;
}

#fqn-tab .fqn-filter-reset .svg-inline--fa,
#fqn-tab .fqn-filter-reset i {
    width: .7rem;
    height: .7rem;
    margin-right: .3rem;
}

/* === The plan ===
   The surface of an explorer card, so the box reads like the module cards that
   unfold below it. --fe-control is smaller than in the shell because this
   toolbar stands over rows of 25 px, and 32 px beside them reads as a storey of
   its own. */
#fqn-tab .fqn-plan {
    --fe-control: 1.6rem;
    box-sizing: border-box;
    flex: 0 0 auto;
    height: 12.75rem;
    padding: .5rem .6rem .6rem;
    background: var(--dbox);
    border: 1px solid color-mix(in srgb, var(--border-dark) 60%, transparent);
    border-radius: .35rem;
}

#fqn-tab .fqn-plan .fe-toolbar {
    flex-wrap: nowrap;
}

/* The global h2 is a full-width bar with its own background and underline - it
   is the heading of a panel, not a word in a toolbar. Everything that makes it a
   bar is taken back off here; what stays is the uppercase label.

   Both toolbars of this tab, so that the word over the appointments and the word
   over the drivers cannot end up two different sizes. */
#fqn-tab .fqn-plan-title,
#fqn-tab .fqn-list-title {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: .85rem;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* The two range switches over the appointments, and the one over the drivers
   that says whether people who have left are in the list. One rule for all
   three: they are the same kind of control, the user meets them within an inch
   of each other, and a second rule for the third one is a second rule to keep in
   step. */
#fqn-tab .fqn-plan-range,
#fqn-tab .fqn-list-toggle {
    height: var(--fe-control);
    padding: 0 .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text-mid);
    font-size: .78rem;
    cursor: pointer;
}

#fqn-tab .fqn-plan-range.active,
#fqn-tab .fqn-list-toggle.active {
    background: var(--sel);
    color: var(--hl);
}

/* Pushed right, so the counter, the refresh and the create button end up at the
   edge rather than trailing the two range switches. */
#fqn-tab .fqn-plan .fqn-selection-info {
    margin-left: auto;
    color: var(--text-mid);
    font-size: .78rem;
    white-space: nowrap;
}

/* .button-primary is 6rem wide - that is "Save", not "New appointment". The same
   correction the panel's own save button already carries. */
#fqn-tab .fqn-plan-new {
    flex: 0 0 auto;
    width: auto;
    height: var(--fe-control);
    margin: 0;
    padding: 0 .9rem;
    line-height: var(--fe-control);
    white-space: nowrap;
}

#fqn-tab .fqn-plan-scroll {
    margin-top: 0;
}

/* --- folding the plan down to its toolbar ---
   Between two fixed lengths rather than to auto or out of 0fr: Chromium will not
   grow a flexible track out of 0fr, and Firefox does not animate to auto - a
   fixed length animates in both. Folded is the toolbar and nothing else: the
   control height plus the card's padding and border.

   The state hangs off #fqn-tab, which outlives every render of the head; the
   selector is one class stronger than the plan's own height, which it has to
   beat. */
#fqn-tab .fqn-plan {
    transition: height 200ms ease;
}

#fqn-tab.fqn-plan-collapsed .fqn-plan {
    height: calc(var(--fe-control) + 1.1rem + 2px);
}

/* For the ways that open the plan and scroll to a day in the same breath. */
#fqn-tab.fqn-plan-instant .fqn-plan {
    transition: none;
}

/* Hidden only once the fold has run, so the rows slide away instead of blinking
   out; shown again at once when it opens. Hidden rather than left to the height,
   because a scroller of no height still takes the keyboard's Tab. */
#fqn-tab .fqn-plan-scroll {
    transition: visibility 0s;
}

#fqn-tab.fqn-plan-collapsed .fqn-plan-scroll {
    visibility: hidden;
    transition: visibility 0s linear 200ms;
}

#fqn-tab .fqn-plan-fold .svg-inline--fa,
#fqn-tab .fqn-plan-fold i {
    transform: rotate(90deg);
    transition: transform 200ms ease;
}

#fqn-tab.fqn-plan-collapsed .fqn-plan-fold .svg-inline--fa,
#fqn-tab.fqn-plan-collapsed .fqn-plan-fold i {
    transform: none;
}

table.fqn-plan-list {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.fqn-plan-list thead th,
table.fqn-plan-list tbody td {
    display: table-cell;
    width: auto;
    text-align: left;
    padding: .25rem .4rem;
    font-size: .82rem;
    line-height: 1.25;
    border-bottom: 1px solid var(--border-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The head sticks to this box's own scroller - and on --dbox, not --bg: --bg is
   the colour of the tab, not of the card this head is stuck to, and the rows
   would show through it. */
table.fqn-plan-list thead th {
    position: sticky;
    top: 0;
    background: var(--dbox);
    color: var(--text-mid);
    z-index: 1;
}

/* The app's .hidden covers input, div, button, svg and p - but not a tbody, and
   the plan renders both directions at once and hides one of them. Without this
   the past sits under the upcoming from the first render, and only switching
   ranges by hand puts it right. The file list two thousand lines up needs the
   same line for the same reason. */
#fqn-tab tbody.fqn-plan-body.hidden {
    display: none;
}

/* Wider than it was, because the cell now says a day and an hour. The table is
   table-layout: fixed and every cell in it is nowrap with an ellipsis, so a date
   and a time in 7rem would have been cut off silently - and the two columns
   without a width of their own absorb what this one takes. */
table.fqn-plan-list .fqn-plan-col-date    { width: 8.5rem; }
table.fqn-plan-list .fqn-plan-col-module  { width: 6.6rem; }
table.fqn-plan-list .fqn-plan-col-place   { width: 14rem; }
table.fqn-plan-list .fqn-plan-col-drivers { width: 6rem; }
/* Wider than it was: the column used to count down and now also has to say
   that a day is finished, which is a sentence rather than a number. */
table.fqn-plan-list .fqn-plan-col-in      { width: 8.5rem; }
/* Six controls now, not three, and the width is counted rather than eyeballed:
   six buttons of 1.4rem, five gaps of .2rem between them and the cell's own
   .4rem of padding on each side. At the 5rem it stood at, three of them already
   ran into the edge - and the cell clips what does not fit, so every button
   past the third would simply not have been there. Two of the six only appear
   once the day has come, so most rows show four; the column is fixed and has to
   hold the widest of them. */
table.fqn-plan-list .fqn-plan-col-act     { width: 10.2rem; }

/* The buttons are laid out rather than left to the inline flow of the cell.
   Between two inline-flex hulls the browser puts a word space, and whether that
   space exists depends on how the row arrived: the first render of the page goes
   through the HTML minifier, which collapses the whitespace between the hulls,
   while a row that comes back inside a save's JSON does not. The gap is the same
   either way. */
table.fqn-plan-list .fqn-plan-actions {
    display: flex;
    gap: .2rem;
}

table.fqn-plan-list tbody tr.fqn-plan-row {
    cursor: pointer;
}

table.fqn-plan-list tbody tr.fqn-plan-row:hover {
    background: var(--hov);
}

/* The day that is open, marked the way the explorer marks the row it unfolded -
   the chosen surface and the accent edge, which the panel underneath continues.
   Read off the row's own neighbour with :has(): the script opens a panel by
   inserting it straight after its row and closes it by taking .open off the
   host, so a row is marked for exactly as long as its panel is open.

   The first day of the plan used to carry this same edge for good, as "the next
   one", which made the top row look chosen whichever row was actually open. The
   edge now means "this one" and nothing else; which day comes next is already
   said by the order of the list, by the due column and by the head's own tile. */
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-row:has(+ tr.fqn-plan-object-row .fqn-object-host.open),
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-row:has(+ tr.fqn-plan-object-row .fqn-object-host.open):hover {
    background: color-mix(in srgb, var(--hl) 18%, var(--dbox));
    box-shadow: inset 2px 0 0 var(--hl);
}

/* Over and done with, said the way the list below says a driver has left. */
table.fqn-plan-list tbody tr.fqn-plan-done .fqn-plan-col-date,
table.fqn-plan-list tbody tr.fqn-plan-done .fqn-plan-col-title,
table.fqn-plan-list tbody tr.fqn-plan-done .fqn-plan-col-place {
    color: var(--text-mid);
    font-style: italic;
}

/* The hour, beside the day it belongs to and quieter than it. A time is the
   second fact in that cell, not a second date, and printing the two at the same
   weight made the column read as two columns that had lost their divider. The
   colour is the one the past rows already dim to, so a day that has been keeps
   one colour across the whole cell. */
table.fqn-plan-list .fqn-plan-time {
    margin-left: .1rem;
    color: var(--text-mid);
    font-size: .75rem;
}

table.fqn-plan-list .fe-icon-button {
    width: 1.4rem;
    height: 1.4rem;
}

table.fqn-plan-list .fqn-plan-col-module .fqn-module-no {
    margin: 0 .15rem 0 0;
}

/* The participants of one day, unfolded under its row - the module panel's fold,
   in another table. */
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-object-row,
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-object-row:hover {
    background: color-mix(in srgb, var(--dbox) 32%, var(--bg));
    cursor: default;
}

#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-object-row > td {
    padding: 0;
    border-bottom: 0;
    overflow: visible;
    white-space: normal;
}

/* As tall as a row of the plan, not as the module panel. That panel's body is
   padded for a grid of cards; this one holds a line of names, and with the same
   padding a single participant stood in a band twice the height of the row it
   belongs to. The left padding is the cells' own, so the names begin on the line
   the dates above them begin on. */
#fqn-tab table.fqn-plan-list tr.fqn-plan-object-row .fe-object-body {
    padding: .3rem .4rem;
}

#fqn-tab .fqn-plan-people {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.75rem;
}

/* A name the way the driver list below writes one - the person in the accent,
   the name in the list's own type - and not a rounded tag: nothing else in the
   product is drawn as a pill, and here it made each name look like a control of
   its own. Still a button, because it is one: it leads to that driver's row. */
#fqn-tab .fqn-plan-person {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--text);
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

#fqn-tab .fqn-plan-person:hover {
    color: var(--hl);
}

#fqn-tab .fqn-plan-person .svg-inline--fa,
#fqn-tab .fqn-plan-person i {
    flex: 0 0 auto;
    width: .75rem;
    height: .75rem;
    margin: 0;
    padding: 0;
    color: var(--hl);
}

/* === The mark column of the driver list ===
   .fe-mark and .selected hang off .file-explorer in the estate, and this table
   has no such ancestor. Three rules rather than a copy of the whole block. */
table.fqn-list .fqn-col-select { width: 2.2rem; }
table.fqn-list .fqn-col-next   { width: 8rem; }

#fqn-tab table.fqn-list .fe-mark {
    box-sizing: border-box;
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border: 1px solid var(--border);
    border-radius: .15rem;
    opacity: 0;
    vertical-align: middle;
    cursor: pointer;
}

/* Only on hover or once it is set: a list nobody is picking from should not look
   like a form. */
#fqn-tab table.fqn-list tbody tr:hover .fe-mark,
#fqn-tab table.fqn-list tbody tr.selected .fe-mark {
    opacity: 1;
}

#fqn-tab table.fqn-list tbody tr.selected .fe-mark {
    position: relative;
    background: var(--hl);
    border-color: var(--hl);
}

#fqn-tab table.fqn-list tbody tr.selected .fe-mark::after {
    content: "";
    position: absolute;
    left: .28rem;
    top: .08rem;
    width: .2rem;
    height: .45rem;
    border: solid var(--text-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#fqn-tab table.fqn-list tbody tr.selected,
#fqn-tab table.fqn-list tbody tr.selected:hover {
    background: color-mix(in srgb, var(--hl) 18%, var(--dbox));
    box-shadow: inset 2px 0 0 var(--hl);
}

/* The row whose panel is open, marked exactly the way the explorer marks it: the
   chosen surface and the accent edge, which the panel underneath continues down
   its own left side (.fe-object-body, reached through the host's .file-explorer
   class). Without this the edge began at the panel and not at the row it belongs
   to, and the row stood on the plain ground of the list.

   Taken from the open caret with :has() and not from .selected. The explorer
   selects a row as it unfolds it, so there the two are one state - but in this
   list the mark means "book this driver", and unfolding a row must not tick it. */
#fqn-tab table.fqn-list tbody tr.fqn-row:has(.fe-object-toggle.open),
#fqn-tab table.fqn-list tbody tr.fqn-row:has(.fe-object-toggle.open):hover {
    background: color-mix(in srgb, var(--hl) 18%, var(--dbox));
    box-shadow: inset 2px 0 0 var(--hl);
}

/* The driver's icon in the accent, as the explorer's own driver list draws it:
   the same person in the same kind of row should not change colour between the
   two places it is listed. A child combinator, so the caret inside its button
   keeps its own grey-until-open rule. */
#fqn-tab table.fqn-list td.fqn-col-name > .svg-inline--fa,
#fqn-tab table.fqn-list td.fqn-col-name > i {
    color: var(--hl);
}

#fqn-tab table.fqn-list tbody tr.fqn-row-filtered {
    display: none;
}

/* === The place menu ===
   One field, one value, and a menu beside it. The border and the typography keep
   coming from .fqn-field-input; only what the menu needs stands here. */
#fqn-tab .fqn-place-control,
#fqn-appointment-popup .fqn-place-control {
    position: relative;
    display: flex;
    align-items: center;
    gap: .2rem;
    min-width: 0;
}

#fqn-tab .fqn-place-control input,
#fqn-appointment-popup .fqn-place-control input {
    flex: 1 1 auto;
    min-width: 0;
}

/* In the dialog the box is drawn by the control, not by the input: the house
   field rule gives every input `width: calc(100% - 1.35rem)` and a right margin,
   which left the chevron standing outside the border it belongs in - and the
   field a centimetre short of the one beside it. So the control takes the skin
   and the input inside it goes bare. The card does it the other way round, where
   .fqn-field-input already draws the box. */
/* The box is drawn by the control, not by the input inside it: an input draws
   its border at calc(100% - 1.35rem), which left the chevron standing outside
   the border it belongs in. The width comes from the grid rule above. */
#fqn-appointment-popup .fqn-place-control {
    margin: .25rem 0;
    padding: .2rem .3rem;
    height: 1.4rem;
    border: 1px solid var(--dropbg);
    background-color: var(--menubg);
}

/* The field's own input, and only that one: the menu opens inside the same
   control, and a descendant selector here took the border and the ground off its
   free-text field too - "Neuer Ort" stood in the menu as grey words with no
   field around them. */
#fqn-appointment-popup .fqn-place-control > input {
    margin: 0;
    padding: 0;
    width: auto;
    height: 100%;
    border: 0;
    background: none;
}

/* Not an .fe-icon-button: that one is 2rem tall and would burst the field row,
   whose height all five cards share through the subgrid. */
#fqn-tab .fqn-place-toggle,
#fqn-appointment-popup .fqn-place-toggle {
    flex: 0 0 auto;
    width: .9rem;
    height: .9rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-mid);
    cursor: pointer;
}

#fqn-tab .fqn-place-toggle .svg-inline--fa,
#fqn-tab .fqn-place-toggle i,
#fqn-appointment-popup .fqn-place-toggle .svg-inline--fa,
#fqn-appointment-popup .fqn-place-toggle i {
    width: .6rem;
    height: .6rem;
    margin: 0;
    padding: 0;
}

#fqn-tab .fqn-place-control:hover .fqn-place-toggle,
#fqn-appointment-popup .fqn-place-control:hover .fqn-place-toggle {
    color: var(--text);
}

/* As wide as the field it belongs to, and never narrower than 15rem. The card's
   field spans the card now - about 300 px at 1920 and 230 px at the 1600 px the
   body is floored to - so there the menu simply matches it; the floor is for the
   narrowest of those, where a provider's name would otherwise be cut short. The
   colours are the house dropdown's, so this reads as every other choice in the
   application. */
.fqn-place-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 11;
    margin: .15rem 0 0;
    padding: 0;
    min-width: 100%;
    width: 15rem;
    max-height: 11rem;
    overflow-y: auto;
    /* Never sideways. A long place is cut with an ellipsis, and nothing else in
       the menu has any business being wider than the menu. */
    overflow-x: hidden;
    list-style: none;
    background: var(--dropbg);
    border: 1px solid var(--border-dark);
    border-radius: .25rem;
    box-shadow: 0 .25rem .6rem rgba(0, 0, 0, .35);
}

/* Upwards, or to the left, when the menu would otherwise run out of the scroller
   or out of the tab: #fqn-tab clips now, and it clips without a sound. */
.fqn-place-menu.up   { top: auto; bottom: 100%; margin: 0 0 .15rem; }
.fqn-place-menu.left { left: auto; right: 0; }

/* The house gives every `ul li` a bottom margin of 1rem, which spread two places
   over the height of four with a gap under each. */
.fqn-place-menu li {
    margin: 0;
}

.fqn-place-menu .fqn-place-item {
    padding: .35rem .5rem;
    font-size: .82rem;
    color: var(--text);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fqn-place-menu .fqn-place-item:hover {
    background: var(--hov);
}

.fqn-place-menu .fqn-place-empty {
    padding: .35rem .5rem;
    font-size: .78rem;
    color: var(--text-mid);
}

/* The free-text line sticks to the foot of the menu, so that it stays reachable
   at fifty places without scrolling to the bottom for it. */
.fqn-place-menu .fqn-place-new {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .4rem;
    background: var(--dropbg);
    border-top: 1px solid var(--border-dark);
}

.fqn-place-menu .fqn-place-new-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.2rem;
    padding: 0 .3rem;
    background: var(--menubg);
    /* --border-dark, not --dropbg: the menu itself is painted --dropbg, and an
       edge in the colour of the ground it stands on is no edge. */
    border: 1px solid var(--border-dark);
    color: var(--text);
    font-size: .8rem;
}

.fqn-place-menu .fqn-place-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    background: var(--tool);
    border: 0;
    border-radius: .15rem;
    color: var(--text);
    cursor: pointer;
}

/* In a module card the menu opens inside .fqn-field-input, whose rule takes the
   border and the ground off every input in the field - a card draws its box on
   the field, not on the input. The free-text line in the menu is an input of its
   own and needs both back, or "Neuer Ort" stands in the menu as grey words with
   no field around them: the same fault the dialog had, from a different rule. */
#fqn-tab .fqn-place-menu input.fqn-place-new-input {
    margin: 0;
    padding: 0 .3rem;
    background: var(--menubg);
    border: 1px solid var(--border-dark);
}

/* The plus has to be sized. Left to the rules outside this block it came out 22px
   wide with 13px of padding on top, inside a button of 19 - it hung out past the
   button and past the edge of the menu, and that overhang is what gave the menu a
   horizontal scrollbar. Written with the ids so that no rule from outside the
   tab or the dialog outweighs it. */
#fqn-tab .fqn-place-menu .fqn-place-add .svg-inline--fa,
#fqn-tab .fqn-place-menu .fqn-place-add i,
#fqn-appointment-popup .fqn-place-menu .fqn-place-add .svg-inline--fa,
#fqn-appointment-popup .fqn-place-menu .fqn-place-add i {
    width: .6rem;
    height: .6rem;
    margin: 0;
    padding: 0;
}

/* === Choosing the units of a day ===
   Five checkboxes rather than a select: a day can teach more than one unit, and
   the house field skin names every input type it covers and leaves select out -
   a bare one comes out white on a dark dialog. */
/* Two columns, not three. In a 48rem dialog three columns left each name 187px,
   and three of the five German names are longer than that - the first needs
   225 - with English and Bulgarian further over still. No arrangement of three
   columns holds them at this size, so the names were cut in the one place the
   office reads them to choose. Two columns give every name 310px, which holds
   the longest in all four catalogues; the dialog grows by one row, and the
   driver list below keeps its fixed height. The attendance dialog's chooser for
   a block day is this same rule. */
.fqn-module-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
    margin: .25rem 0;
}

.fqn-module-choice label.checkbox.fqn-module-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: .2rem .3rem;
    width: 100%;
    height: auto;
    min-height: 1.4rem;
}

/* The box goes to the front, and it has to carry its own tick.
   .checkmark:after is position: absolute at left: .6rem, and the only positioned
   ancestor is the label - so with the box floated to the far end of a flex row
   the tick still draws at the label's left edge, straight over the number badge.
   The house has made this correction twice before, for the permission matrix and
   for the merged-reports row. */
.fqn-module-choice label.checkbox .checkmark {
    order: -1;
    float: none;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

.fqn-module-choice label.checkbox .checkmark:after {
    left: .25rem;
    top: -.05rem;
}

/* The badge is the same one the cards and the plan carry, so the five are told
   apart by colour before anybody reads a word of them. */
.fqn-module-choice .fqn-module-no {
    flex: 0 0 auto;
    margin: 0;
}

/* The name is what gets cut when the dialog is narrow - the number never is. */
.fqn-module-choice label.checkbox span.checkboxText {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem;
}

/* === Both FQN dialogs line up on one edge ===
   The house form leaves every control short of its field by its own margin and
   sizes it content-box, so a right edge is the sum of a width, a padding, a
   border and a margin - and five different controls ended on five different
   pixels. The search field went twelve past the rest, because a 100% width plus
   its padding is wider than what holds it.

   So inside these two dialogs the row becomes a grid with a gutter of its own,
   and every control fills its cell border-box. Left was already flush; now the
   right is too, at the edge the title and the section headings already sit on. */
#fqn-appointment-popup form .fields,
#fqn-attendance-popup form .fields,
#fqn-renew-popup form .fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    margin-bottom: 1rem;
}

/* The house widths become cell spans: half a row, or the whole one. */
#fqn-appointment-popup form .fields .field.three,
#fqn-attendance-popup form .fields .field.three,
#fqn-renew-popup form .fields .field.three {
    width: auto;
}

#fqn-appointment-popup form .fields .field.six,
#fqn-attendance-popup form .fields .field.six,
#fqn-renew-popup form .fields .field.six {
    grid-column: 1 / -1;
    width: auto;
}

/* Every control fills its cell exactly. The margin the house leaves on the right
   is what the gutter above now does, and border-box is what keeps the padding
   and the border inside the number rather than beyond it. */
#fqn-appointment-popup form .fields input,
#fqn-appointment-popup form .fields textarea,
#fqn-appointment-popup form .fields .fqn-place-control,
#fqn-appointment-popup form .fields .fqn-module-choice,
#fqn-attendance-popup form .fields input,
#fqn-attendance-popup form .fields textarea,
#fqn-attendance-popup form .fields .fqn-module-choice,
#fqn-renew-popup form .fields input {
    box-sizing: border-box;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* The height has to be restated with the box: the house sets height: .9rem as
   the content, and reading the same number as the outside makes every field
   eight pixels flatter - which took the two-row remark down to one line. 1.4rem
   is what .9rem plus the padding and the border came to before. */
#fqn-appointment-popup form .fields input,
#fqn-attendance-popup form .fields input,
#fqn-renew-popup form .fields input,
#fqn-appointment-popup .fqn-appointment-units .search-field,
#fqn-attendance-popup .fqn-appointment-units .search-field {
    height: 1.4rem;
}

/* The remark is the one field measured in lines rather than in rem: rows="2"
   decides, and a fixed height would contradict it. */
#fqn-appointment-popup form .fields textarea,
#fqn-attendance-popup form .fields textarea {
    height: auto;
    min-height: 2.8rem;
}

/* Same for the search field, which is the one that stuck out: .report-units
   gives it a fixed 13.125rem, and a plain width: 100% over that still added its
   own padding on top. */
#fqn-appointment-popup .fqn-appointment-units .search-field,
#fqn-attendance-popup .fqn-appointment-units .search-field {
    box-sizing: border-box;
    width: 100%;
    margin-right: 0;
}

/* The names in the roster carry the house margin too, which left the right-hand
   column short of the column beside it. */
#fqn-appointment-popup .fqn-appointment-list label.checkbox,
#fqn-attendance-popup .fqn-appointment-list label.checkbox {
    margin-right: 0;
}

/* And the buttons, which float right against a margin of their own. */
#fqn-appointment-popup .popup-content > .button.right,
#fqn-attendance-popup .popup-content > .button.right,
#fqn-renew-popup .popup-content > .button.right,
#fqn-create-popup .popup-content > .button.right,
#fqn-response-popup .popup-content > .button.right {
    margin-right: 0;
}

#fqn-appointment-popup .popup-content > .button.right + .button.right,
#fqn-attendance-popup .popup-content > .button.right + .button.right,
#fqn-renew-popup .popup-content > .button.right + .button.right,
#fqn-create-popup .popup-content > .button.right + .button.right,
#fqn-response-popup .popup-content > .button.right + .button.right {
    margin-right: .5rem;
}

/* === The appointment dialog === */
/* .report-units is a 15.625rem column with a 3rem indent, measured for the
   reports page where it stands beside a settings block. In a 48rem dialog that
   leaves two thirds of the width empty and puts every name in a narrow box. What
   is borrowed here is the checkbox list, not the column it usually sits in. */
#fqn-attendance-popup .fqn-appointment-units,
#fqn-appointment-popup .fqn-appointment-units {
    width: 100%;
    margin: 1rem 0 0;
}

#fqn-attendance-popup .fqn-appointment-units .search-section,
#fqn-appointment-popup .fqn-appointment-units .search-section {
    padding: 0 0 .5rem;
}

#fqn-attendance-popup .fqn-appointment-units .search-field,
#fqn-appointment-popup .fqn-appointment-units .search-field {
    width: 100%;
}

#fqn-attendance-popup .fqn-appointment-units .icon.input,
#fqn-appointment-popup .fqn-appointment-units .icon.input {
    width: 100%;
}

/* Two columns of names rather than one long one: at 48rem a single column shows
   nine drivers and asks for the scrollbar for the tenth, and the everyday case
   is a handful out of a few dozen. */
#fqn-attendance-popup .fqn-appointment-list,
#fqn-appointment-popup .fqn-appointment-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
    align-content: start;
}

#fqn-appointment-popup .fqn-appointment-list label.checkbox {
    width: 100%;
    margin: 0;
}

#fqn-appointment-popup .fqn-appointment-list label.checkbox.hidden {
    display: none;
}

#fqn-attendance-popup .fqn-attendance-all,
#fqn-appointment-popup .fqn-appointment-all {
    align-self: flex-start;
    width: auto;
    margin: 0 0 .5rem;
    padding: 0 .9rem;
}

/* Same correction as the plan's title: inside a dialog the heading is a label,
   not the bar that opens a panel. */
#fqn-attendance-popup .fqn-appointment-units h2,
#fqn-appointment-popup .fqn-appointment-units h2 {
    width: auto;
    padding: 0 0 .25rem 0;
    background: none;
    font-size: .85rem;
    color: var(--text-mid);
}

#fqn-attendance-popup .fqn-appointment-list,
#fqn-appointment-popup .fqn-appointment-list {
    margin-bottom: .6rem;
    max-height: 18rem;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: .4rem;
}

/* .checkbox span.checkboxText is capped globally at 9.75rem, which is measured
   for the 15.625rem column of the report units and cuts every second name in half
   in a 48rem dialog. */
#fqn-attendance-popup .checkbox span.checkboxText,
#fqn-appointment-popup .checkbox span.checkboxText,
#fqn-response-popup .checkbox span.checkboxText {
    max-width: calc(100% - 2rem);
}

/* The answer to a save, under the form. The attendance dialog has always carried
   this class and was never meant to be left out of it - its refusals stood there
   without their red and without any space above them. */
#fqn-appointment-popup .fqn-appointment-note,
#fqn-attendance-popup .fqn-appointment-note,
#fqn-renew-popup .fqn-appointment-note,
#fqn-create-popup .fqn-appointment-note,
#fqn-response-popup .fqn-appointment-note {
    display: inline-block;
    margin-top: .6rem;
    color: var(--green);
    font-size: .8rem;
}

#fqn-appointment-popup .fqn-appointment-note.bad,
#fqn-attendance-popup .fqn-appointment-note.bad,
#fqn-renew-popup .fqn-appointment-note.bad,
#fqn-create-popup .fqn-appointment-note.bad,
#fqn-response-popup .fqn-appointment-note.bad {
    color: var(--red);
}

/* === Recording attendance ===
   The dialog is a sheet now, not a list of ticks: the roster it used to borrow
   from the booking dialog is gone, and what is left here is the one line that
   says which day it is about. The rules for the sheet itself stand further
   down, with the table. */
#fqn-attendance-popup .fqn-attendance-what,
#fqn-response-popup .fqn-response-what {
    margin: 0;
    padding: .1rem 0;
    color: var(--text);
    font-size: .85rem;
}

/* === The hint on a shared day, in the module card ===
   It sits in the remark's row rather than in one of its own: the five cards
   share their field rows through the subgrid, and one row more would be clamped
   into the last on this card alone. */
#fqn-tab .fqn-field-shared {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .3rem;
}

#fqn-tab .fqn-shared-note {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

#fqn-tab .fqn-shared-hint {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
}

#fqn-tab .fqn-shared-hint .fe-object-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-mid);
    font-size: .75rem;
}

#fqn-tab .fqn-module-open-appointment {
    flex: 0 0 auto;
    padding: 0 .5rem;
    background: var(--tool);
    border: 0;
    border-radius: .15rem;
    color: var(--text);
    font-size: .75rem;
    line-height: 1.4rem;
    cursor: pointer;
}

#fqn-tab .fqn-module-open-appointment:hover {
    color: var(--hl);
}

/* === What the head says when the list is mostly empty ===
   Under the four numbers, because it is about them: a company most of whose
   drivers carry no certificate at all is not a fleet in good order, and the
   green number cannot say so on its own. The vocabulary is the panel's own note
   - muted, small, no box - so it reads as a remark and not as an alarm. */
#fqn-tab .fqn-hint {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    color: var(--text-mid);
    font-size: .82rem;
}

#fqn-tab .fqn-hint .svg-inline--fa,
#fqn-tab .fqn-hint i {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    padding: 0;
    margin: 0;
    color: var(--hl);
}

/* === The driver list's own toolbar ===
   The box carries .file-explorer, the way the appointment card and the module
   panel do, so that the search field, the control height and the switches are
   the ones the rest of this tab already uses rather than three new copies of
   them. What must not come with that class is its geometry: it makes a
   full-height flex column built to fill a tab, and this is one row above a
   table. Those three declarations are the ones taken back here. */
#fqn-tab .fqn-list-bar {
    /* The appointment card's height, not the shell's 2rem: this bar stands over
       rows of 25 px, and 32 px beside them reads as a storey of its own. Stated
       for the same reason and with the same number as .fqn-plan above. */
    --fe-control: 1.6rem;

    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5rem;
    height: auto;
    flex: 0 0 auto;
    /* Half a rem in, so the heading starts on the same pixel as the column
       headings of the table underneath it - the cells carry .4rem .5rem. */
    padding: 0 .5rem;
}

/* === The two menus over the list: which branch, which group ===
   A button with a panel under it, anchored to the button rather than to the
   right edge of the bar the explorer's own filter hangs off: there are two of
   them here, and both against the same edge would stand on top of each other.

   The button keeps the height and the colours of the switch beside it - it is
   the same kind of control in the same bar - and takes a chevron to say it
   opens something. */
#fqn-tab .fqn-scope-menu {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

#fqn-tab .fqn-scope-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    /* Wide enough for "Alle Niederlassungen" and for most company names, and
       capped so that one very long name cannot push the search field and the
       switch off the bar. What does not fit is cut, and the whole name is in
       the menu underneath. */
    max-width: 13rem;
}

#fqn-tab .fqn-scope-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The house gives every svg on the page 13 px of padding and 16 px of margin on
   each side (".svg-inline--fa" plus "span svg"), which is right for an icon
   button and wrong for a chevron inside a label: this one arrived 74 px wide for
   a glyph of 10, and the two menus took 320 px of the bar between them to say
   two words. Stated for the glyph in both shapes it can take - FontAwesome
   replaces the <i> with an <svg> only once its script has run. */
#fqn-tab .fqn-scope-toggle .fa-chevron-down {
    width: .55rem;
    height: .55rem;
    margin: 0;
    padding: 0;
    font-size: .55rem;
}

#fqn-tab .fqn-scope-panel {
    left: 0;
    right: auto;
    width: 15rem;
    /* The height the script measures for it is the room left inside the tab,
       and the tab clips. Without this the panel's own padding is added ON TOP
       of that measurement - 22 px of a menu with many branches stood past the
       edge, cut off and unreachable even though the list itself scrolled. */
    box-sizing: border-box;
}

/* The same colour bar the company menus of this page carry in front of a
   branch, drawn as a border on an empty span so that it is a line and not a
   block of colour. */
#fqn-tab .fqn-scope-colour {
    display: inline-block;
    width: 0;
    height: .7rem;
    margin-right: .35rem;
    border-left: .25rem solid transparent;
    vertical-align: middle;
}

/* The explorer's box is 15rem wide, measured for a toolbar that also carries a
   path, four navigation buttons and two view switches. Here it may take a little
   more, and it keeps it: when the bar runs short, the module legend beside it is
   what gives way. */
#fqn-tab .fqn-list-bar .fe-search-box {
    width: auto;
    flex: 0 0 20rem;
}

/* At the far edge, behind the module legend: the legend takes all the width the
   controls leave and so pushes the note to the end; the note only keeps its
   distance from it. */
#fqn-tab .fqn-list-bar .fqn-filter-note {
    margin-left: 1rem;
    height: auto;
    white-space: nowrap;
}

/* Only the legend gives way when the bar runs short. Every other control keeps
   its size: squeezed along with it, "Inaktive (20)" broke onto two lines, the
   search field lost a sixth of its width and the filter count wrapped. */
#fqn-tab .fqn-list-bar > :not(.fqn-unit-legend) {
    flex-shrink: 0;
}

/* === What the five numbers stand for ===
   Said once, in the bar straight above the list, rather than in a row or a card
   of its own: the bar is there anyway and was empty to the right of its
   controls, so the legend costs no height at all.

   It takes whatever width the controls leave and sets its entries against the
   right end. Width 0 plus growing into the rest, not an auto width pushed right
   by a margin: the names do not wrap, and an auto-width legend reported its full
   single-line width as the least the bar could be. At the 1600px floor that made
   the whole tab 143px wider than the window - a horizontal scrollbar under a
   legend that could simply have been cut shorter. A basis of zero asks for no
   width of its own, so the tab is exactly as wide as it was without it.

   A name that does not fit is cut with an ellipsis, and every entry carries its
   whole name in its title. The entries shrink in proportion to their length, so
   all five lose about the same share instead of one losing all of it. */
#fqn-tab .fqn-list-bar .fqn-unit-legend {
    display: flex;
    flex: 1 1 auto;
    justify-content: flex-end;
    align-items: center;
    gap: .85rem;
    width: 0;
    min-width: 0;
    height: auto;
}

#fqn-tab .fqn-unit-legend-item {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: .35rem;
    min-width: 0;
    color: var(--text-mid);
    font-size: .75rem;
    letter-spacing: normal;
}

#fqn-tab .fqn-unit-legend-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* === A certificate that has run out ===
   Three steps, off the company's own two thresholds: amber inside the outer
   window it calls "due soon", red inside the inner one, and this once the date
   has passed. The first two are the house's plain .yellow and .red - colour and
   nothing else - and this is the treatment the explorer's panel gives a date
   that is gone: the same tint, the same text colour, on one cell instead of one
   field. It has to be more than a third colour, because red on amber on red is
   a gradient nobody reads under pressure; a filled chip is a different kind of
   thing on the page.

   No inset edge, unlike the field it is modelled on: this cell sits between two
   others, and a bar down its left would read as a column rule. */
#fqn-tab table.fqn-list .fqn-col-days.fqn-days-expired,
#fqn-tab .fqn-certificate-days.fqn-days-expired {
    background: color-mix(in srgb, #8b3329 42%, transparent);
    color: #ffd4cc;
    font-weight: 600;
}

/* === Typed, not yet saved ===
   In the line that answers a save, so that "unsaved" and "saved" occupy one
   line rather than two - and in amber, because it is neither the green of a
   save that worked nor the red of one that failed. */
#fqn-tab .fqn-module-note-open {
    color: var(--yellow);
}

/* The button says it too, and keeps saying it after the line above has been
   overwritten by an error. The house marks a control that is waiting for a
   press by giving it the accent, the way the active tab and the marked row
   carry it. */
#fqn-tab .fqn-module-save.fqn-module-save-dirty {
    border-color: var(--hl);
    box-shadow: inset 0 0 0 1px var(--hl);
}

/* === The five units, a column each, in every row of the list ===
   Five badges in one cell said a state by fill, outline and grey, in five
   colours, at a size of fifteen pixels - it had to be deciphered rather than
   read. Now each unit has its own narrow column, headed by its numbered badge,
   and the cell says the state in a sign of its own: a green tick once the unit
   is recorded, a calendar while a day is booked for it, and for nothing at all
   the dash every other empty cell of this list already writes. The colour of
   the unit stays in the heading; green in the cells means the same thing in all
   five columns. */
table.fqn-list .fqn-col-unit { width: 2.8rem; }

#fqn-tab table.fqn-list .fqn-col-unit {
    padding-left: 0;
    padding-right: 0;
    text-align: center;
}

/* A hairline before the first and after the last, so that the five read as one
   block standing between the name and the certificate rather than as five more
   columns of the same kind as those. Inset shadows rather than borders: the
   heading is sticky, and in a collapsed table a cell's border belongs to the
   table's grid rather than to the cell, so it stays behind while the heading
   scrolls with the list. A shadow is painted by the cell and goes where it goes. */
#fqn-tab table.fqn-list .fqn-col-unit-1 { box-shadow: inset 1px 0 0 var(--border-dark); }
#fqn-tab table.fqn-list .fqn-col-unit-5 { box-shadow: inset -1px 0 0 var(--border-dark); }

/* The heading's badge a size up from the plan's and a little stronger: here it
   is the only thing in the heading, and it is read from the far end of a row.
   The legend in the bar above carries the same badge, so the two are matched by
   eye at the same size. */
#fqn-tab table.fqn-list thead .fqn-col-unit .fqn-module-no,
#fqn-tab .fqn-unit-legend .fqn-module-no {
    width: 1.1rem;
    height: 1.1rem;
    font-size: .68rem;
    vertical-align: middle;
    background: color-mix(in srgb, var(--fe-card-icon, var(--hl)) 30%, transparent);
}

/* The sort caret of every other heading sits after its text. In a column this
   narrow that pushed the centred badge a caret's width to the left, so here it
   is taken out of the flow and set into the heading's right edge. The sticky
   heading cell is positioned, which is what it is placed against. */
#fqn-tab table.fqn-list thead .fqn-col-unit.fqn-sorted-asc::after,
#fqn-tab table.fqn-list thead .fqn-col-unit.fqn-sorted-desc::after {
    position: absolute;
    top: 50%;
    right: .2rem;
    margin: 0;
    font-size: .55rem;
    transform: translateY(-50%);
}

/* The two marks are masks painted in the cell's text colour, not FontAwesome
   icons: the list is rendered whole and unpaged, FontAwesome replaces every <i>
   with an inline SVG, and a save patches the row's marks by swapping a class.
   The two paths are copied from the bundled FontAwesome Pro set - the solid
   check and the regular calendar-day - so they are drawn in the same hand as
   the icons around them. */
#fqn-tab table.fqn-list .fqn-unit-mark {
    display: inline-block;
    width: .85rem;
    height: .85rem;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--fqn-mark) center / contain no-repeat;
    mask: var(--fqn-mark) center / contain no-repeat;
}

#fqn-tab table.fqn-list .fqn-mark-done {
    --fqn-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    color: var(--green);
}

/* The accent rather than a warning colour: a booked day is somebody having
   already dealt with it. */
#fqn-tab table.fqn-list .fqn-mark-booked {
    --fqn-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M128 0c13.3 0 24 10.7 24 24V64H296V24c0-13.3 10.7-24 24-24s24 10.7 24 24V64h40c35.3 0 64 28.7 64 64v16 48V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 144 128C0 92.7 28.7 64 64 64h40V24c0-13.3 10.7-24 24-24zM400 192H48V448c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V192zM112 256h96c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V272c0-8.8 7.2-16 16-16z'/%3E%3C/svg%3E");
    color: var(--hl);
}

#fqn-tab table.fqn-list .fqn-mark-booked .fqn-unit-mark {
    width: .8rem;
    height: .8rem;
}

/* === The five units as badges, in the booking dialog ===
   The dialog still names a unit by its badge beside each driver, and says its
   state the badge's way: filled means it happened, an outline means it is
   arranged, and grey means nothing has. Stated for the dialog's id and not only
   under .popup: the badge's own colour rule is "#fqn-appointment-popup
   .fqn-module-no", an id, and a class-only state rule lost the background and
   the colour to it - every unit beside every driver came out filled in its
   colour, and a driver who had sat nothing looked like one who had sat all
   five. At equal specificity the states win by standing further down. */
.popup .fqn-unit {
    margin-right: .12rem;
    cursor: help;
}

/* Sat - a completion date is recorded: the unit's own colour, filled. */
#fqn-appointment-popup .fqn-unit-done,
.popup .fqn-unit-done {
    background: color-mix(in srgb, var(--fe-card-icon, var(--hl)) 22%, transparent);
    color: var(--fe-card-icon, var(--hl));
}

/* Arranged, not yet happened: the unit's colour as an outline. The one shape
   beside a driver that means "somebody has already dealt with this". */
#fqn-appointment-popup .fqn-unit-booked,
.popup .fqn-unit-booked {
    background: none;
    box-shadow: inset 0 0 0 1px var(--fe-card-icon, var(--hl));
    color: var(--fe-card-icon, var(--hl));
}

/* Nothing at all. Grey and hollow, so that five of them beside a driver read
   as nothing rather than as five of something. */
#fqn-appointment-popup .fqn-unit-open,
.popup .fqn-unit-open {
    background: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent);
    color: var(--text-mid);
}

/* A day that has been and gone with nothing written down about it, standing in
   the column that otherwise says when the next one is. Amber, because it is
   work outstanding rather than a deadline missed. */
#fqn-tab .fqn-next-pending {
    color: var(--yellow);
    cursor: help;
}

#fqn-tab .fqn-next-pending .svg-inline--fa,
#fqn-tab .fqn-next-pending i {
    width: .7rem;
    height: .7rem;
    margin-right: .3rem;
    color: var(--yellow);
}

/* === Marking every row at once ===
   The rows' own box, in the header cell. Three states rather than two: with the
   marked rows scrolled out of sight, a box that could only say "all" or "none"
   would say "none" over a list that has seven of them marked. */
#fqn-tab table.fqn-list thead .fqn-select-all {
    box-sizing: border-box;
    display: inline-block;
    width: .95rem;
    height: .95rem;
    border: 1px solid var(--border);
    border-radius: .15rem;
    opacity: .55;
    vertical-align: middle;
    cursor: pointer;
}

#fqn-tab table.fqn-list thead .fqn-select-all:hover {
    opacity: 1;
}

#fqn-tab table.fqn-list thead .fqn-select-all.selected,
#fqn-tab table.fqn-list thead .fqn-select-all.partial {
    position: relative;
    opacity: 1;
    background: var(--hl);
    border-color: var(--hl);
}

/* The tick of a row that is marked, and the dash of a list that is half marked -
   one glyph apart, so the two cannot be confused for each other. */
#fqn-tab table.fqn-list thead .fqn-select-all.selected::after {
    content: "";
    position: absolute;
    left: .28rem;
    top: .08rem;
    width: .2rem;
    height: .45rem;
    border: solid var(--text-dark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#fqn-tab table.fqn-list thead .fqn-select-all.partial::after {
    content: "";
    position: absolute;
    left: .18rem;
    top: .38rem;
    width: .45rem;
    height: 0;
    border-top: 2px solid var(--text-dark);
}

/* The way out of a selection, beside the count that reports it. A mark set three
   filters ago is otherwise only findable by undoing every one of them. */
#fqn-tab .fqn-selection-clear {
    padding: 0;
    background: none;
    border: 0;
    color: var(--hl);
    font-size: .78rem;
    cursor: pointer;
}

/* === The certificate, over the five units it is made of ===
   A row of its own rather than a sixth card: it is not one of the five, it is
   what they produce, and a card in the same grid would have said otherwise. The
   fields are the panel's own - same skin, same underline, same focus. */
#fqn-tab .fqn-certificate {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    margin-bottom: .7rem;
    padding-bottom: .6rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-dark) 70%, transparent);
}

#fqn-tab .fqn-certificate-title {
    flex: 0 0 auto;
    padding-bottom: .15rem;
    color: var(--text-mid);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

#fqn-tab .fqn-certificate-field {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    flex: 0 1 11rem;
    padding: .15rem .3rem;
    border-radius: .2rem;
}

/* The days are worked out, not written into - narrower, and without the edge
   that says a box takes typing. */
#fqn-tab .fqn-certificate-field.fqn-field-derived {
    flex: 0 0 4.5rem;
}

#fqn-tab .fqn-certificate .fe-object-key {
    color: var(--text-mid);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#fqn-tab .fqn-certificate .fe-object-value {
    font-size: .85rem;
    font-weight: 500;
}

#fqn-tab .fqn-certificate-note {
    flex: 1 1 auto;
    text-align: right;
    color: var(--green);
    font-size: .78rem;
}

/* The two states this line also carries. Its own rules rather than the module
   note's, which are written for a different element - without them a refused
   save was reported in the green of a save that worked. Stated after the green
   above, so they win at equal weight. */
#fqn-tab .fqn-certificate-note.fqn-module-note-open {
    color: var(--yellow);
}

#fqn-tab .fqn-certificate-note.fqn-module-note-bad {
    color: var(--red);
}

/* The two things this strip does to a certificate, and they weigh the same: one
   mends the number that is there, the other replaces it. Both wear the house
   button, so the strip reads as a pair of actions rather than as one action and
   one link somebody tucked in beside it.

   .button-primary is 6 rem wide, which is "Save" and not "Correct certificate" -
   and it carries a left margin for the dialogs it was written for, where it
   stands alone under a form. Here the flex gap sets the distance, so the margin
   goes and the width is the label's own. */
#fqn-tab .fqn-certificate-save,
#fqn-tab .fqn-certificate-renew {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0 .9rem;
    white-space: nowrap;
}

#fqn-tab .fqn-certificate-note:empty + .fqn-certificate-save {
    margin-left: auto;
}

/* The icon in front of the renewal's label. Middle-aligned, because the house
   button sets line-height: 2em and a baseline-aligned glyph sits low in a line
   twice its own height.

   The colour has to be said, and inherited rather than named: every FontAwesome
   icon inside this list is painted --text-mid by `table.fqn-list
   .svg-inline--fa`, which used to agree with this button because the button was
   --text-mid too. On the house button the label is white, and the icon stayed
   grey beside it. Inherit, so it goes on following whatever the button is. */
#fqn-tab .fqn-certificate-renew .svg-inline--fa,
#fqn-tab .fqn-certificate-renew i {
    width: .75rem;
    height: .75rem;
    margin-right: .4rem;
    color: inherit;
    vertical-align: middle;
}

/* All five units recorded: the renewal is the next thing to do, so it says so.
   An inset ring in the accent and not another fill - the button is already
   filled, and it is the same mark the module save wears while it holds unsaved
   input, so an accented edge means one thing in this panel. Colour only: the
   size stays, and the strip does not shift when the fifth date goes in. */
#fqn-tab .fqn-certificate-renew.fqn-renew-ready {
    box-shadow: inset 0 0 0 1px var(--hl);
}

/* No certificate recorded yet - the strip carries .fqn-certificate-none, decided
   on the expiry the way the head decides "unknown". The save then creates one
   and is named for it, and the renewal is not offered: there is nothing it could
   replace. Hidden rather than left out of the markup, because a save that creates
   the certificate turns the strip into its other shape without a redraw.

   display and not visibility: a renewal that kept its width while hidden would
   leave a hole in the strip where it stood. */
#fqn-tab .fqn-certificate-none .fqn-certificate-renew,
#fqn-tab .fqn-certificate-none .fqn-certificate-save-correct,
#fqn-tab .fqn-certificate:not(.fqn-certificate-none) .fqn-certificate-save-create {
    display: none;
}

/* The way out to the rest of a driver's record. A quiet control: it changes
   nothing, it only leaves this tab. */
#fqn-tab .fqn-open-driver {
    flex: 0 0 auto;
    height: 1.4rem;
    padding: 0 .6rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text-mid);
    font-size: .75rem;
    white-space: nowrap;
    cursor: pointer;
}

#fqn-tab .fqn-open-driver:hover {
    color: var(--hl);
    border-color: var(--hl);
}

#fqn-tab .fqn-open-driver .svg-inline--fa,
#fqn-tab .fqn-open-driver i {
    width: .75rem;
    height: .75rem;
    margin-right: .35rem;
}

/* === Earlier certificates, under the cards === */
#fqn-tab .fqn-history {
    margin-top: .6rem;
    padding-top: .5rem;
    border-top: 1px solid color-mix(in srgb, var(--border-dark) 70%, transparent);
}

#fqn-tab .fqn-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text-mid);
    font-size: .78rem;
    cursor: pointer;
}

#fqn-tab .fqn-history-toggle:hover {
    color: var(--hl);
}

#fqn-tab .fqn-history-toggle .svg-inline--fa,
#fqn-tab .fqn-history-toggle i {
    width: .6rem;
    height: .6rem;
    transition: transform 200ms ease;
}

#fqn-tab .fqn-history.open .fqn-history-toggle .svg-inline--fa,
#fqn-tab .fqn-history.open .fqn-history-toggle i {
    transform: rotate(90deg);
}

/* The explorer's fold, stated again under a name of its own: .fe-object-fold
   opens off the panel host, and a history built from it would stand open the
   moment the panel does. Same two tracks, for the reason given at the explorer's
   fold - Chromium will not grow a track out of 0fr, so where interpolate-size
   exists (inherited from the .file-explorer host) the height animates instead. */
#fqn-tab .fqn-history-fold {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 200ms ease;
}

#fqn-tab .fqn-history-fold > * {
    min-height: 0;
    overflow: hidden;
}

#fqn-tab .fqn-history.open .fqn-history-fold {
    grid-template-rows: 1fr;
}

@supports (interpolate-size: allow-keywords) {
    #fqn-tab .fqn-history-fold {
        display: block;
        height: 0;
        transition: height 200ms ease;
    }

    #fqn-tab .fqn-history.open .fqn-history-fold {
        height: auto;
    }
}

/* No vertical padding on the fold's own child. Without interpolate-size the closed
   0fr track still makes room for the item's padding - its automatic minimum - and
   Firefox left an 8px strip standing under a history that was folded. The space
   goes on the first and the last cycle, inside what is clipped. */
#fqn-tab .fqn-history-body {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 0 0 0 1rem;
}

#fqn-tab .fqn-history-cycle:first-child {
    padding-top: .4rem;
}

#fqn-tab .fqn-history-cycle:last-child {
    padding-bottom: .1rem;
}

#fqn-tab .fqn-history-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .1rem .9rem;
    padding-bottom: .2rem;
    color: var(--text-mid);
    font-size: .78rem;
}

#fqn-tab .fqn-history-old {
    color: var(--text);
    font-weight: 500;
}

#fqn-tab .fqn-history-empty {
    margin: 0;
    color: var(--text-mid);
    font-size: .78rem;
}

/* One unit on one line, in the history and in the renewal dialog: the badge, the
   title, the day and the number, in columns that keep the dates under each other
   from one line to the next. */
#fqn-tab .fqn-unit-line,
#fqn-renew-popup .fqn-unit-line,
#fqn-create-popup .fqn-unit-line {
    display: grid;
    grid-template-columns: .95rem minmax(0, 17rem) 5.5rem minmax(0, 1fr);
    align-items: center;
    column-gap: .5rem;
    min-height: 1.4rem;
    font-size: .78rem;
}

#fqn-tab .fqn-unit-line-title,
#fqn-renew-popup .fqn-unit-line-title,
#fqn-create-popup .fqn-unit-line-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#fqn-tab .fqn-unit-line-date,
#fqn-tab .fqn-unit-line-number,
#fqn-renew-popup .fqn-unit-line-date,
#fqn-renew-popup .fqn-unit-line-number,
#fqn-create-popup .fqn-unit-line-date,
#fqn-create-popup .fqn-unit-line-number {
    color: var(--text-mid);
    font-variant-numeric: tabular-nums;
}

/* === Renewing a certificate ===
   What stands under the two fields is prose: why the date is proposed, what
   moves, and what the dialog cannot know. A paragraph each, at the dialog's text
   size, the warning in the colour the plan uses for "still to record". */
#fqn-renew-popup .fqn-renew-summary,
#fqn-create-popup .fqn-renew-summary {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    font-size: var(--fqn-dlg-text);
}

#fqn-renew-popup .fqn-renew-summary p,
#fqn-create-popup .fqn-renew-summary p {
    margin: 0;
    font-size: inherit;
    line-height: 1.4;
}

/* Three classes deep, not two: the paragraph rule above weighs (1,1,1) and took the
   heading's size, which made it as large as the text it heads. */
#fqn-renew-popup .fqn-renew-summary .fqn-renew-heading,
#fqn-create-popup .fqn-renew-summary .fqn-renew-heading {
    padding-top: .3rem;
    color: var(--text-mid);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .03em;
}

#fqn-renew-popup .fqn-renew-units,
#fqn-create-popup .fqn-renew-units {
    display: flex;
    flex-direction: column;
}

#fqn-renew-popup .fqn-renew-summary .fqn-renew-old,
#fqn-renew-popup .fqn-renew-summary .fqn-renew-empty {
    color: var(--text-mid);
}

#fqn-renew-popup .fqn-renew-summary .fqn-renew-warning,
#fqn-create-popup .fqn-renew-summary .fqn-renew-warning {
    color: var(--yellow);
}

/* === Creating a first certificate over units already recorded ===
   The question in the dialog's own colour, and each answer under the name its
   button carries: the name as it stands on the button, what it does beside it in
   the quieter colour, so the eye finds the two names first. Three classes deep
   for the reason the heading above is - the paragraph rule weighs (1,1,1). */
#fqn-create-popup .fqn-renew-summary .fqn-create-choice {
    color: var(--text-mid);
}

/* float: none because the stylesheet floats every span inside a paragraph to the
   right (`p span`, written for the info bars) - the name of each answer stood at
   the far edge of the dialog, after the sentence it heads. */
#fqn-create-popup .fqn-renew-summary .fqn-create-option {
    float: none;
    color: var(--text);
    font-weight: 500;
}

/* The answer to a press on a line of its own. The renewal's footer holds its note
   and two buttons in one row; with three, a message as long as the German or the
   Bulgarian one pushed the first answer down under the other two. Stated after
   the shared note rule, which sets inline-block at the same weight. */
#fqn-create-popup .fqn-create-note {
    display: block;
}

/* === Who needs this day, in the booking dialog ===
   The same five badges again, in front of every name, so the office can see
   before it books rather than being told afterwards that three of them had
   already sat the unit. */
/* Built exactly like a unit choice above it: the box first, then the badges,
   then the name, in one flex row of the same height, the same gaps and the same
   text size - so the list reads as more of the same control rather than as a
   second, smaller form under the first. The house checkbox floats its box and
   positions the tick against the label; in a flex row the box is pulled to the
   front and carries its own tick, the correction the unit choice already makes.
   A flex row also centres everything on the row itself, which is what the
   badges needed: inline, they had hung seven pixels below the middle. */
#fqn-appointment-popup .fqn-appointment-list label.checkbox.fqn-driver-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    height: var(--fqn-dlg-row);
    margin: 0;
    padding: .2rem .3rem;
}

#fqn-appointment-popup .fqn-appointment-list label.fqn-driver-option .checkmark {
    order: -1;
    float: none;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

#fqn-appointment-popup .fqn-appointment-list label.fqn-driver-option .checkmark:after {
    left: .25rem;
    top: -.05rem;
}

#fqn-appointment-popup .fqn-appointment-list label.fqn-driver-option span.checkboxText {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fqn-dlg-text);
}

/* The badges at the size the unit choice carries - the dialog's own .fqn-module-no
   rule - with the smallest gap that still keeps five rings from touching. */
#fqn-appointment-popup .fqn-driver-units {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .15rem;
}

#fqn-appointment-popup .fqn-driver-units .fqn-unit {
    margin: 0;
}

/* Locked, because their day counted towards a certificate that has since been
   renewed, or because their attendance is written down: the tick stays whatever
   is clicked, and the server keeps them on the day. One class for both, because
   the two look the same to the eye - which of them it is, the tip on the label
   says. The house checkbox hides the real box behind a span of its own, so the
   browser's own greying of a disabled box never shows - said here instead, on the
   label that also carries the tip. */
#fqn-appointment-popup .fqn-appointment-list label.checkbox.fqn-driver-locked {
    cursor: default;
    opacity: .6;
}

/* Said again, and with one class more than the row above: display: flex there
   outweighs the plain .hidden and .fqn-out-of-scope rules at equal weight, and
   every driver the search or the "open only" switch had taken out of the list
   would have come straight back into it. */
#fqn-appointment-popup .fqn-appointment-list label.checkbox.fqn-driver-option.hidden,
#fqn-appointment-popup .fqn-appointment-list label.checkbox.fqn-driver-option.fqn-out-of-scope {
    display: none;
}

/* The gap the unit choices keep between their boxes, and eight and a half rows
   of height: the half row is what says that the list goes on. Two px short of
   the 18rem it had, so the taller controls above cost the dialog nothing. */
#fqn-appointment-popup .fqn-appointment-list {
    gap: .4rem;
    max-height: calc(8.5 * var(--fqn-dlg-row) + 8 * .4rem);
}

/* === One measure for the whole booking dialog ===
   The unit choices set it, because they were the one control in the dialog that
   already read well: rows of 26px, text of 12px. Everything else had drifted
   from them - the fields 22px high with 12.6px text, the three buttons 25px, the
   driver rows 23px with 12.6px names beside 13px badges - and the dialog read as
   three forms stacked on each other. One height and one text size, stated once
   here and read by every control. */
#fqn-appointment-popup,
#fqn-renew-popup,
#fqn-create-popup,
#fqn-response-popup {
    --fqn-dlg-row: 1.625rem;
    --fqn-dlg-text: .75rem;
}

/* The dialogs sit in hiddenelements, outside the tab that hands the house colour
   down, and neither body nor .popup sets one. A span without a colour of its own
   therefore came out in the browser's black on the dark ground - the unit titles
   of the renewal did. Stated once on the dialog, so the next span inherits it. */
#fqn-renew-popup,
#fqn-create-popup,
#fqn-response-popup {
    color: var(--text);
}

#fqn-appointment-popup form .fields .field > input,
#fqn-appointment-popup form .fields .fqn-place-control,
#fqn-renew-popup form .fields .field > input {
    height: var(--fqn-dlg-row);
}

#fqn-appointment-popup form .fields .field > input,
#fqn-appointment-popup form .fields .field > textarea,
#fqn-appointment-popup form .fields .fqn-place-control > input,
#fqn-renew-popup form .fields .field > input {
    font-size: var(--fqn-dlg-text);
}

/* Two rows of the same measure, so the remark reads as a field of the same form
   and not as a box of a height of its own. */
#fqn-appointment-popup form .fields .field > textarea {
    min-height: calc(2 * var(--fqn-dlg-row));
}

/* The search box as the driver list above the tab carries it - the glass inside
   the field and in front of the words - in this dialog's field skin, so that it
   reads as one more field of the form. */
#fqn-appointment-popup .fqn-search-box,
#fqn-response-popup .fqn-search-box {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .3rem;
    width: 100%;
    height: var(--fqn-dlg-row);
    padding: 0 .3rem;
    background-color: var(--menubg);
    border: 1px solid var(--dropbg);
    color: var(--text-mid);
}

#fqn-appointment-popup .fqn-search-box .svg-inline--fa,
#fqn-appointment-popup .fqn-search-box i,
#fqn-response-popup .fqn-search-box .svg-inline--fa,
#fqn-response-popup .fqn-search-box i {
    flex: 0 0 auto;
    width: .7rem;
    height: .7rem;
    margin: 0;
    padding: 0;
}

#fqn-appointment-popup .fqn-search-box input,
#fqn-response-popup .fqn-search-box input {
    box-sizing: border-box;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: var(--text);
    font-size: var(--fqn-dlg-text);
}

/* The place menu's foot at the same measure: its field and its button as tall as
   the fields around them and as each other, the places in the dialog's text. */
#fqn-appointment-popup form .fields .fqn-place-menu .fqn-place-new-input,
#fqn-appointment-popup form .fields .fqn-place-menu .fqn-place-add {
    height: var(--fqn-dlg-row);
    /* The house field margin reaches this input through the form, and it made
       the menu's foot eight pixels taller than the field and button in it. */
    margin: 0;
}

#fqn-appointment-popup form .fields .fqn-place-menu .fqn-place-add {
    width: var(--fqn-dlg-row);
}

#fqn-appointment-popup form .fields .fqn-place-menu .fqn-place-new-input,
#fqn-appointment-popup .fqn-place-menu .fqn-place-item {
    font-size: var(--fqn-dlg-text);
}

/* Out of scope for the day being booked - every chosen unit already settled, or
   every one of the five while none is chosen yet.
   Its own class rather than .hidden, which the search field is already using on
   the same labels: two switches sharing one class would each undo the other. */
#fqn-appointment-popup .fqn-out-of-scope {
    display: none;
}

/* The column around these is a flex column, so any child of it stretches to the
   full width whatever its own `width` says - which is how two switches came out
   as two full-width bars. A row of their own is the fix; inside it they are
   flex items again and take the width of their labels. */
#fqn-appointment-popup .fqn-appointment-tools {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding-bottom: .3rem;
}

#fqn-appointment-popup .fqn-appointment-tools .button {
    flex: 0 0 auto;
    width: auto;
    height: var(--fqn-dlg-row);
    margin: 0;
    padding: 0 .7rem;
    line-height: var(--fqn-dlg-row);
    font-size: var(--fqn-dlg-text);
    white-space: nowrap;
}

#fqn-appointment-popup .fqn-appointment-open-only.active,
#fqn-response-popup .fqn-response-asked-only.active {
    background: var(--sel);
    color: var(--hl);
}

/* === The attendance sheet ===
   A table rather than a list of ticks: the tick answered one question and left
   the two that follow it to be typed afterwards, once per driver, in a panel
   that had to be unfolded once per driver. */
#fqn-attendance-popup .fqn-attendance-sheet,
#fqn-response-popup .fqn-attendance-sheet {
    margin-top: 1rem;
}

/* The sheet is the point of this dialog. The three fields above it keep the
   width they were measured at when it was 48 rem wide, rather than stretching
   across all 72 of them with a date field two hand-spans long. */
#fqn-attendance-popup form .fields {
    max-width: 48rem;
}

#fqn-attendance-popup .fqn-attendance-tools,
#fqn-response-popup .fqn-attendance-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-bottom: .4rem;
}

#fqn-attendance-popup .fqn-attendance-tools h2,
#fqn-response-popup .fqn-attendance-tools h2 {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: .85rem;
    color: var(--text-mid);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

#fqn-attendance-popup .fqn-attendance-tools .button,
#fqn-response-popup .fqn-attendance-tools .button {
    width: auto;
    margin: 0;
    padding: 0 .7rem;
    font-size: .78rem;
    white-space: nowrap;
}

#fqn-attendance-popup .fqn-attendance-count,
#fqn-response-popup .fqn-attendance-count {
    margin-left: auto;
    color: var(--text-mid);
    font-size: .78rem;
    white-space: nowrap;
}

#fqn-attendance-popup .fqn-attendance-scroll,
#fqn-response-popup .fqn-attendance-scroll {
    max-height: 22rem;
    overflow-y: auto;
}

table.fqn-attendance-table {
    display: table;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

table.fqn-attendance-table thead th,
table.fqn-attendance-table tbody td {
    display: table-cell;
    width: auto;
    text-align: left;
    padding: .25rem .4rem;
    font-size: .82rem;
    border-bottom: 1px solid var(--border-dark);
    vertical-align: middle;
    /* table-layout is fixed, so a heading longer than its column has to end
       somewhere. An ellipsis says it was cut; a hard edge says the word ends
       there - and "Bescheinigungsnummer" is longer than its column in three of
       the four languages. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Except the one cell that holds three controls side by side: it is as wide as
   its column and its contents must not be clipped at all. */
table.fqn-attendance-table .fqn-att-col-result {
    overflow: visible;
    white-space: nowrap;
}

table.fqn-attendance-table thead th {
    position: sticky;
    top: 0;
    background: var(--dropbg);
    color: var(--text-mid);
    z-index: 1;
}

/* Measured against the 72 rem the dialog now takes: the three answers need a
   line of their own and will not be abbreviated - "did not turn up" is the one
   of the three that must not be guessed at - and the remark takes what is left.
   The answers' column is sized for the longest of the four languages, measured
   rather than guessed: the three need 311px in English, 334 in Bulgarian, 379 in
   German and 404 in Italian. At 22.5rem, 360px, the third answer ran into the
   certificate field beside it in German and Italian - and table-layout is fixed,
   so the column could not grow to hold it. */
table.fqn-attendance-table .fqn-att-col-name   { width: 13rem; }
table.fqn-attendance-table .fqn-att-col-result { width: 25.5rem; }
table.fqn-attendance-table .fqn-att-col-number { width: 11rem; }

/* The dialog sets no colour of its own and a table does not take the shell's, so
   every name on the roster came out in the browser's black on the dialog's
   near-black - the one column of the sheet that says whose row it is. The rule
   for settled rows below is more specific and still wins. */
table.fqn-attendance-table tbody td {
    color: var(--text);
}

/* Already written down, and shown that way rather than hidden: the sheet is the
   day's roster, and a list that dropped the settled rows would look short. */
table.fqn-attendance-table tr.fqn-attendance-done .fqn-att-col-name {
    color: var(--text-mid);
    font-style: italic;
}

/* The three answers on one line. The house checkbox in a flex row needs its tick
   pulled back to the box - .checkmark:after is positioned against the LABEL, and
   in a row the box slides to the end while the tick stays behind. The same
   correction .permissions and the unit picker already carry. */
#fqn-attendance-popup .fqn-att-result,
#fqn-response-popup .fqn-att-result,
#fqn-appointment-popup .fqn-branch-choice .fqn-att-result {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    width: auto;
    margin: 0 .55rem 0 0;
    padding: 0;
    font-size: .78rem;
}

#fqn-attendance-popup .fqn-att-result .checkmark,
#fqn-response-popup .fqn-att-result .checkmark,
#fqn-appointment-popup .fqn-branch-choice .fqn-att-result .checkmark {
    position: relative;
    order: -1;
    top: 0;
    left: 0;
    width: .8rem;
    height: .8rem;
}

#fqn-attendance-popup .fqn-att-result .checkmark:after,
#fqn-response-popup .fqn-att-result .checkmark:after,
#fqn-appointment-popup .fqn-branch-choice .fqn-att-result .checkmark:after {
    left: .26rem;
    top: .06rem;
    width: .18rem;
    height: .4rem;
}

/* label and span named in the selector, and that is load-bearing: the rule that
   caps every dialog name, #fqn-attendance-popup .checkbox span.checkboxText,
   weighs one element more than a selector of classes alone, so the max-width:
   none below lost to it wherever it was written - each answer kept a box ten
   pixels narrower than its word, and the word ran on to the box's edge. */
#fqn-attendance-popup label.fqn-att-result span.checkboxText,
#fqn-response-popup label.fqn-att-result span.checkboxText,
#fqn-appointment-popup .fqn-branch-choice label.fqn-att-result span.checkboxText {
    order: 1;
    padding: 0;
    white-space: nowrap;
    /* The house reserves calc(100% - 32px) for the text because its box is
       positioned absolutely at the left edge with 2 rem of room. In a flex row
       the box is a sibling taking its own 13 px, so those 32 stay reserved
       against nothing - and every one of the three answers came out clipped to
       "Teilgenom...". "Did not turn up" is the one of the three that must not be
       guessed at from its first eight letters. */
    max-width: none;
    overflow: visible;
    /* And its natural width, so the label grows to fit rather than the text
       spilling out of a box that was still being squeezed. Italian and
       Bulgarian say all three of these in more letters than German. */
    flex: 0 0 auto;
}

/* .button-primary is 6 rem - the width of "Save", not of "Save attendance", and
   certainly not of the Bulgarian for it, which wrapped onto two lines and made
   the dialog's foot a storey taller. The same correction the panel's own save
   and the plan's "new appointment" already carry. */
#fqn-attendance-popup #fqn-attendance-save,
#fqn-attendance-popup #fqn-attendance-cancel,
#fqn-renew-popup #fqn-renew-save,
#fqn-renew-popup #fqn-renew-cancel,
#fqn-create-popup #fqn-create-take,
#fqn-create-popup #fqn-create-keep,
#fqn-create-popup #fqn-create-cancel,
#fqn-response-popup #fqn-response-save,
#fqn-response-popup #fqn-response-confirm,
#fqn-response-popup #fqn-response-cancel {
    width: auto;
    padding: 0 .9rem;
    white-space: nowrap;
}

#fqn-attendance-popup .fqn-att-number,
#fqn-attendance-popup .fqn-att-note {
    box-sizing: border-box;
    width: 100%;
    height: 1.4rem;
    margin: 0;
}

/* === Days that are one day: the hint in the plan, and the merge dialog ===
   The hint is a row of the plan's own table, above the first of the days it is
   about, so it scrolls with them and costs the fixed plan area no height. It is
   not a day: no pointer, no hover, and the explorer's row rules that colour a
   chosen day are taken back. */
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-merge-hint,
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-merge-hint:hover {
    background: color-mix(in srgb, var(--hl) 8%, var(--dbox));
    cursor: default;
}

#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-merge-hint > td {
    padding: .2rem .4rem;
    white-space: normal;
}

#fqn-tab .fqn-plan-merge-line {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    color: var(--text);
    font-size: .78rem;
}

/* At the size of the text beside it: the solid icon at the row's own size read
   as a button of its own rather than as the mark of a line. */
#fqn-tab .fqn-plan-merge-line .svg-inline--fa,
#fqn-tab .fqn-plan-merge-line > i {
    flex: 0 0 auto;
    width: .8rem;
    height: .8rem;
    /* The house .svg-inline--fa carries .813rem of padding on either side; the
       icon would stand a column's width in from the dates under it. */
    margin: 0;
    padding: 0;
    color: var(--hl);
}

#fqn-tab .fqn-plan-merge-text {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The small tool button the module card uses for its way up to a day - the same
   kind of control, one step, inside a line. */
#fqn-tab .fqn-plan-merge {
    flex: 0 0 auto;
    padding: 0 .5rem;
    background: var(--tool);
    border: 0;
    border-radius: .15rem;
    color: var(--text);
    font-size: .75rem;
    line-height: 1.4rem;
    cursor: pointer;
}

#fqn-tab .fqn-plan-merge:hover {
    color: var(--hl);
}

/* The days a hint points out carry the accent as a thin edge, so the eye can
   find the rows the line above is talking about. Thinner than the edge of an
   open day, which means "this one". */
#fqn-tab table.fqn-plan-list tbody tr.fqn-plan-row.fqn-plan-twin > td:first-child {
    box-shadow: inset 1px 0 0 var(--hl);
}

/* --- the dialog ---
   The dialogs sit in hiddenelements, outside the tab that hands the text colour
   down, so it is stated here - a span without one came out black before. The two
   sizes are the booking dialog's own. */
#fqn-merge-popup {
    --fqn-dlg-row: 1.625rem;
    --fqn-dlg-text: .75rem;
    color: var(--text);
}

#fqn-merge-popup .fqn-merge-body {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
    overflow-x: hidden;
}

#fqn-merge-popup .fqn-merge-loading,
#fqn-merge-popup .fqn-merge-empty {
    margin: .6rem 0;
    color: var(--text-mid);
    font-size: var(--fqn-dlg-text);
}

#fqn-merge-popup .fqn-merge-what {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .3rem 0 .6rem;
    font-size: .85rem;
}

#fqn-merge-popup .fqn-merge-section {
    margin: .6rem 0 .3rem;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border-dark);
    color: var(--text-mid);
    font-size: .72rem;
    text-transform: uppercase;
}

/* One line per day, built like the booking dialog's driver rows: a flex row with
   the box pulled to the front and its own tick. The house rule gives every
   label.checkbox a height of .9rem and a margin; a day says two lines, so both
   are taken back with a selector that names the element. */
#fqn-merge-popup label.checkbox.fqn-merge-day,
#fqn-merge-popup label.checkbox.fqn-merge-confirm {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    height: auto;
    margin: 0 0 .25rem;
    padding: .3rem .4rem;
}

#fqn-merge-popup label.checkbox .checkmark {
    order: -1;
    float: none;
    position: relative;
    flex: 0 0 auto;
    margin: 0;
}

#fqn-merge-popup label.checkbox .checkmark:after {
    left: .25rem;
    top: -.05rem;
}

#fqn-merge-popup label.checkbox.fqn-merge-day span.checkboxText {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
    max-width: none;
    white-space: normal;
    font-size: var(--fqn-dlg-text);
}

#fqn-merge-popup .fqn-merge-day-names {
    font-weight: 500;
}

#fqn-merge-popup .fqn-merge-day-facts {
    color: var(--text-mid);
}

#fqn-merge-popup label.checkbox.fqn-merge-day-blocked {
    cursor: default;
    opacity: .55;
}

#fqn-merge-popup .fqn-merge-tag {
    align-self: flex-start;
    color: var(--hl);
    font-size: .7rem;
}

#fqn-merge-popup .fqn-merge-tag-blocked {
    color: var(--yellow);
}

#fqn-merge-popup .fqn-merge-blocked {
    margin: .5rem 0;
    color: var(--red);
    font-size: .8rem;
}

/* The result, one field a line: what it is called, what it will say, and - where
   the office has to look - the tick. */
#fqn-merge-popup .fqn-merge-field {
    display: grid;
    grid-template-columns: 9rem 1fr auto;
    align-items: start;
    gap: .6rem;
    padding: .35rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-dark) 60%, transparent);
    font-size: .8rem;
}

#fqn-merge-popup .fqn-merge-key {
    color: var(--text-mid);
    font-size: .72rem;
    text-transform: uppercase;
    line-height: 1.4rem;
}

#fqn-merge-popup .fqn-merge-value {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    line-height: 1.4rem;
    overflow-wrap: anywhere;
}

#fqn-merge-popup .fqn-merge-multiline {
    white-space: pre-line;
}

#fqn-merge-popup .fqn-merge-why {
    color: var(--text-mid);
    font-size: .72rem;
    line-height: 1.2;
}

#fqn-merge-popup .fqn-merge-resolved .fqn-merge-key {
    color: var(--yellow);
}

#fqn-merge-popup label.checkbox.fqn-merge-confirm {
    width: auto;
    margin: 0;
    padding: .1rem .3rem;
    white-space: nowrap;
}

#fqn-merge-popup label.checkbox.fqn-merge-confirm span.checkboxText {
    max-width: none;
    font-size: var(--fqn-dlg-text);
}

#fqn-merge-popup .fqn-merge-radio {
    display: flex;
    align-items: center;
    gap: .4rem;
    cursor: pointer;
}

#fqn-merge-popup .fqn-merge-radio input {
    margin: 0;
    accent-color: var(--hl);
}

/* The house rule sets every textarea to .9rem high; a joined note needs lines. */
#fqn-merge-popup textarea.fqn-merge-note-field {
    box-sizing: border-box;
    width: 100%;
    height: 4.2rem;
    margin: 0;
    resize: vertical;
    font-size: var(--fqn-dlg-text);
    line-height: 1.35;
}

#fqn-merge-popup .fqn-merge-consequences {
    margin: .6rem 0 0;
    padding-left: 1rem;
    color: var(--text-mid);
    font-size: .72rem;
}

/* The house rule ul li { margin: 0 0 1rem } is measured for text pages. */
#fqn-merge-popup .fqn-merge-consequences li {
    margin: 0 0 .2rem;
}

#fqn-merge-popup .fqn-appointment-note {
    display: inline-block;
    margin-top: .6rem;
    color: var(--green);
    font-size: .8rem;
}

#fqn-merge-popup .fqn-appointment-note.bad {
    color: var(--red);
}

#fqn-merge-popup .popup-content > .button.right {
    margin-right: 0;
}

#fqn-merge-popup .popup-content > .button.right + .button.right {
    margin-right: .5rem;
}

#fqn-merge-popup .button.wide {
    width: auto;
    padding: 0 .8rem;
}

#fqn-merge-popup .button[disabled] {
    opacity: .45;
    cursor: default;
}

/* === A proposed training day ===
   Drivers are asked on a printed notice first and booked only once the office
   confirms the day with those who said yes. The plan says which days are only
   proposed, the booking dialog creates them, and the answer dialog borrows the
   attendance sheet's table and answers - named in those rules further up. */

/* The word in front of a proposal's answers: the head card's label voice - small,
   uppercase, spaced - in the accent, because it is a state of the day. Never a
   pill: nothing in the product is drawn as one. */
table.fqn-plan-list .fqn-plan-tentative-tag {
    margin-right: .3rem;
    color: var(--hl);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* The fold under a proposal names each driver asked with what they answered -
   the icon says it, in the colours the unit columns already use for done and
   for missing. */
#fqn-tab .fqn-plan-person.fqn-answer-yes .svg-inline--fa,
#fqn-tab .fqn-plan-person.fqn-answer-yes i {
    color: var(--green);
}

#fqn-tab .fqn-plan-person.fqn-answer-no .svg-inline--fa,
#fqn-tab .fqn-plan-person.fqn-answer-no i {
    color: var(--red);
}

#fqn-tab .fqn-plan-person.fqn-answer-open .svg-inline--fa,
#fqn-tab .fqn-plan-person.fqn-answer-open i {
    color: var(--text-mid);
}

/* Booked now or proposed: the plan's own Kommend/Vergangen pair at the dialog's
   measure, each half as wide as the other so the choice reads as one of two. */
#fqn-appointment-popup .fqn-mode-switch {
    display: flex;
    gap: .4rem;
}

#fqn-appointment-popup .fqn-mode-option {
    flex: 1 1 0;
    min-width: 0;
    height: var(--fqn-dlg-row);
    margin: 0;
    padding: 0 .7rem;
    background: var(--dbox);
    border: 1px solid var(--border-dark);
    border-radius: .2rem;
    color: var(--text-mid);
    font-size: var(--fqn-dlg-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

#fqn-appointment-popup .fqn-mode-option.active {
    background: var(--sel);
    color: var(--hl);
}

/* What the chosen kind means, and what an empty driver list means for a
   proposal - one quiet line each, in the text size of the dialog. */
#fqn-appointment-popup .fqn-mode-hint,
#fqn-appointment-popup .fqn-appointment-ask-hint {
    margin: .35rem 0 0;
    color: var(--text-mid);
    font-size: var(--fqn-dlg-text);
    line-height: 1.35;
}

#fqn-appointment-popup .fqn-appointment-ask-hint {
    margin: 0 0 .4rem;
}

/* A proposal asks for two more fields than a booking, and the dialog has to stay
   on a 1080-pixel screen with its buttons in view. The deadline for answers
   joins the date and the hour in one row of three - all three say "when" - and
   the driver list, which a proposal may leave empty, gives up a third of its
   height. */
#fqn-appointment-popup[data-mode="tentative"] form .fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

#fqn-appointment-popup[data-mode="tentative"] .fqn-appointment-list {
    max-height: 12rem;
}

/* The branches a proposal can belong to, as the attendance sheet's answers: one
   choice of several, side by side, and scrolling rather than growing when a
   company keeps many. */
#fqn-appointment-popup .fqn-branch-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem 0;
    max-height: calc(3 * var(--fqn-dlg-row));
    overflow-y: auto;
}

#fqn-appointment-popup .fqn-branch-choice .fqn-att-result {
    height: var(--fqn-dlg-row);
    font-size: var(--fqn-dlg-text);
}

/* The answer dialog's search sits in the row of its tools, so it takes a width of
   its own instead of the booking dialog's full row. */
#fqn-response-popup .fqn-response-tools .fqn-search-box {
    flex: 0 1 14rem;
    width: auto;
}

/* Rows the switch or the search leave out. The house .hidden covers no table
   row, so the class is the dialog's own. */
#fqn-response-popup tr.fqn-resp-row.fqn-resp-hidden {
    display: none;
}

/* The way to the notice, in the message that says a proposal was saved: the
   message popup sets no colour for a link, and it read as more of the sentence. */
#message-popup .fqn-notice-link {
    color: var(--hl);
    text-decoration: underline;
    white-space: nowrap;
}

/* The buttons under the answer sheet. The note beside them is empty until
   something is said, and an empty inline block gives the floats no line to stand
   below - they sat on the table's last rule. */
#fqn-response-popup .popup-content > .button.right {
    margin-top: .6rem;
}

/* The question a confirmation asks before it books: in the dialog's text colour,
   because the note's green means "done" and nothing is done yet. */
#fqn-response-popup .fqn-appointment-note.ask {
    color: var(--text);
}

/* The confirmation once it has been asked about: the second click books, and the
   button says so in the colour of the dialog's own warnings. */
#fqn-response-popup #fqn-response-confirm.armed {
    background: var(--attestation);
    color: var(--bg);
}