/*
 * Fresh look (theme.css)
 *
 * Opt-in: everything is scoped under `body.theme-fresh`, so pages that do not set that class keep the old look.
 * To roll it out to another section: load this file after templates.css and sidemenu.css and add the class
 * `theme-fresh` to <body>. Colors and sizes are CSS variables below, so a section can change them by overriding
 * the variables on its own body class.
 */

/* Outfit (SIL Open Font License), only used for the word "mijnwoning" in the logo. Served from our own server. */
@font-face {
  font-family:  'Outfit';
  font-style:   normal;
  font-weight:  400;
  font-display: swap;
  src:          url('/fonts/outfit-400.woff2') format('woff2');
}

body.theme-fresh {
  --t-primary:        #1c6bb0;   /* the blue of the Homekeur logo, a bit deeper so that white text on it reads well */
  --t-primary-hover:  #14558d;
  --t-primary-soft:   #e4eef9;
  --t-primary-text:   #ffffff;
  --t-accent:         #f59e0b;
  --t-accent-soft:    #fef3d7;
  --t-bg:             #f3f6fa;
  --t-surface:        #ffffff;
  --t-border:         #dde5ee;
  --t-text:           #1e293b;
  --t-text-muted:     #586679;
  --t-danger:         #dc2626;
  --t-hero:           linear-gradient(135deg, #175c99 0%, #2f86d0 100%);
  --t-radius:         12px;
  --t-radius-small:   8px;
  --t-shadow:         0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.06);
  --t-topbar-height:  52px;
  --t-font-heading:   'Outfit', 'Roboto', sans-serif;

  /* Tints and surfaces, one place per color so dark mode only has to redefine these */
  --t-surface-2:        #edf2f8;
  --t-line:             #ebf0f6;
  --t-skeleton:         #e4eaf1;
  --t-plate:            #ffffff;      /* always light: logos are made for a light background */
  --t-primary-border:   #bcd5ee;
  --t-info-soft:        #eaf3fb;
  --t-warn-soft:        #fffbeb;
  --t-notice-text:      #7a4b00;
  --t-danger-soft:      #fef2f2;
  --t-danger-soft-2:    #fde8e8;
  --t-danger-soft-text: #9b1c1c;
  --t-danger-fill:      #dc2626;      /* red as a background (button, toast icon) under white text */
  --t-danger-fill-hover:#b91c1c;
  --t-row-yellow:       #fffbe6;
  --t-row-orange:       #fff1dc;
  --t-row-green:        #eaf7ee;
  --t-row-greendark:    #e1f3e6;
  --t-pill-yellow-bg:   #fff3c4;  --t-pill-yellow-fg:    #7a5b00;
  --t-pill-orange-bg:   #ffe2bd;  --t-pill-orange-fg:    #8a4a00;
  --t-pill-green-bg:    #d6f0de;  --t-pill-green-fg:     #17673a;
  --t-pill-greendark-bg:#a6dbb7;  --t-pill-greendark-fg: #0a4527;
  --t-pill-new-bg:      #e6edf0;  --t-pill-new-fg:        #475569;   /* Nieuw: nothing happened yet */
  --t-pill-plan-bg:     #dbeafe;  --t-pill-plan-fg:       #1d4ea1;   /* Afspraak gemaakt */

  background-color: var(--t-bg);
  color:            var(--t-text);
  line-height:      1.45;
}

/* ---------- Top bar ---------- */

body.theme-fresh .topBar {
  height:           var(--t-topbar-height);
  padding:          0 14px;
  background-color: var(--t-surface);
  border-bottom:    1px solid var(--t-border);
  box-shadow:       0 1px 0 rgba(15, 23, 42, 0.02);
}

body.theme-fresh .topBar .boxButton {
  border-radius: var(--t-radius-small);
}

body.theme-fresh .topBar .boxButton:not(.no_hover):hover {
  background-color: var(--t-primary-soft);
}

body.theme-fresh .titelTekst {
  margin-left: 10px;
  font-size:   18px;
  font-weight: 700;
  color:       var(--t-text);
}

body.theme-fresh #sideMenuMain {
  height: calc(100% - var(--t-topbar-height));
}

/* Logo and name of the aanbrengbedrijf at the left of the top bar; links to the overview */
body.theme-fresh .topBar {
  position: relative;
}

body.theme-fresh .topBarBrand {
  position:        absolute;
  top:             50%;
  left:            50%;
  display:         flex;
  align-items:     center;
  gap:             10px;
  box-sizing:      border-box;
  min-width:       0;
  max-width:       calc(100% - 120px);   /* keeps clear of the menu button */
  padding:         4px 10px 4px 6px;
  transform:       translate(-50%, -50%);
  border-radius:   var(--t-radius-small);
  color:           var(--t-text);
  text-decoration: none;
}

body.theme-fresh .topBarBrand:hover {
  background-color: var(--t-primary-soft);
}

/* Without a logo: a circle with the first letter */
body.theme-fresh .topBarAvatar {
  display:          flex;
  flex:             0 0 auto;
  align-items:      center;
  justify-content:  center;
  width:            32px;
  height:           32px;
  box-sizing:       border-box;
  border:           1.5px solid var(--t-primary);
  border-radius:    50%;
  background-color: var(--t-surface);
  color:            var(--t-primary);
  font-size:        15px;
  font-weight:      700;
  line-height:      1;
  text-box:         trim-both cap alphabetic;   /* centers the capital itself, not the line box */
  padding-top:      1px;                        /* optical: the capital still sat a fraction too high */
}

/* With a logo: the logo itself, no circle */
body.theme-fresh .topBarAvatar.hasLogo {
  width:            auto;
  height:           auto;
  padding:          0;
  border:           none;
  border-radius:    0;
  background-color: transparent;
}

body.theme-fresh .topBarAvatar img {
  display:    block;
  width:      auto;
  max-width:  120px;
  height:     32px;
  object-fit: contain;
}

/* The name of the keuringsbedrijf with the name of the aanbrengbedrijf under it */
body.theme-fresh .topBarTitels {
  display:        flex;
  flex-direction: column;
  min-width:      0;
}

body.theme-fresh .topBarAanbrenger {
  overflow:      hidden;
  font-size:     12px;
  line-height:   1.25;
  color:         var(--t-text-muted);
  text-overflow: ellipsis;
  white-space:   nowrap;
}

body.theme-fresh .topBarCompanyName {
  min-width:     0;
  overflow:      hidden;
  font-family:   var(--t-font-heading);
  font-size:     18px;
  font-weight:   600;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* ---------- Side menu ---------- */

body.theme-fresh #menu {
  background-color: var(--t-surface);
  border-right:     1px solid var(--t-border);
}

/* Collapse button: a quiet chevron instead of a big cross */
body.theme-fresh .sideMenuCloseButton {
  right:            4px;
  top:              50%;
  width:            24px;
  height:           24px;
  padding:          0;
  margin-top:       -12px;
  background:       none;
  background-color: var(--t-text-muted);
  -webkit-mask:     var(--chevron-icon) center / 20px no-repeat;
  mask:             var(--chevron-icon) center / 20px no-repeat;
  opacity:          1;
}

body.theme-fresh .sideMenuCloseButton:hover {
  background-color: var(--t-primary);
}

body.theme-fresh .sideMenuSection {
  padding:       10px 10px 4px 10px;
  border-bottom: none;
}

body.theme-fresh .sideMenuSectionHeader {
  position:         relative;   /* the collapse chevron sits at the right of the first one */
  padding:          6px 10px;
  background-color: transparent;
  border-bottom:    none;
  font-size:        11px;
  font-weight:      700;
  letter-spacing:   0.08em;
  text-transform:   uppercase;
  color:            var(--t-text-muted);
}

body.theme-fresh .sideMenuSection div:not(.sideMenuSectionHeader),
body.theme-fresh .sideMenuSection a {
  align-items:   center;
  padding:       9px 12px;
  margin:        2px 0;
  border-radius: var(--t-radius-small);
  font-size:     15px;
  color:         var(--t-text);
  transition:    background-color 0.15s;
  white-space:   normal;      /* a long name wraps inside the button instead of running out of it */
  min-width:     0;
  box-sizing:    border-box;
  line-height:   1.3;
}

body.theme-fresh .sideMenuSection div:hover:not(.sideMenuSectionHeader),
body.theme-fresh .sideMenuSection a:hover {
  color:            var(--t-primary);
  background-color: var(--t-primary-soft) !important;
}

body.theme-fresh .sideMenuSection a.sideMenuSectionSelected,
body.theme-fresh .sideMenuSectionSelected {
  color:            var(--t-primary);
  background-color: var(--t-primary-soft);
  font-weight:      700;
  box-shadow:       inset 3px 0 0 var(--t-primary);
}

body.theme-fresh #menuLogoutBedrijf {
  margin-top: 8px;
  color:      var(--t-danger);
}

/* ---------- Page layout ---------- */

body.theme-fresh #mainTitle {
  margin:      18px 0 14px 0;
  padding:     0 20px;
  text-align:  left;
  font-size:   26px;
  font-weight: 700;
}

/* Inside #mainInner the title is already indented by the container */
body.theme-fresh #mainInner #mainTitle {
  padding: 0;
}

body.theme-fresh #mainInner {
  box-sizing: border-box;
  width:      100%;
  max-width:  960px;
  padding:    0 20px 40px 20px;
}

body.theme-fresh h2 {
  margin:      28px 0 8px 0;
  font-size:   19px;
  font-weight: 700;
}

body.theme-fresh h3 {
  margin:      22px 0 8px 0;
  font-size:   16px;
  font-weight: 700;
}

body.theme-fresh a {
  color: var(--t-primary);
}

/* ---------- Buttons ---------- */

body.theme-fresh .buttonBlue,
body.theme-fresh .cardButtonImportant {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  min-height:       36px;
  padding:          6px 16px;
  border:           1px solid var(--t-primary);
  border-radius:    var(--t-radius-small);
  background-color: var(--t-primary);
  color:            var(--t-primary-text);
  font-size:        14px;
  font-weight:      700;
  transition:       background-color 0.15s, box-shadow 0.15s;
}

body.theme-fresh .buttonBlue:hover,
body.theme-fresh .cardButtonImportant:hover {
  background-color: var(--t-primary-hover);
  border-color:     var(--t-primary-hover);
  box-shadow:       0 2px 8px rgba(28, 107, 176, 0.3);
}

body.theme-fresh .cardButton {
  height:           36px;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius-small);
  background-color: var(--t-surface);
  color:            var(--t-text);
}

body.theme-fresh .cardButton:hover {
  background-color: var(--t-primary-soft);
  color:            var(--t-primary);
}

body.theme-fresh .buttonTiny22 {
  padding:          3px 12px;
  border-color:     var(--t-primary);
  background-color: var(--t-primary);
  border-radius:    999px;
}

body.theme-fresh .buttonTiny22:hover {
  background-color: var(--t-primary-hover);
}

body.theme-fresh .buttonBlue.buttonSecondary {
  background-color: var(--t-surface);
  color:            var(--t-primary);
}

body.theme-fresh .buttonBlue.buttonSecondary:hover {
  background-color: var(--t-primary-soft);
  box-shadow:       none;
}

/* ---------- Forms ---------- */

body.theme-fresh .inputValueTable,
body.theme-fresh .cardInput {
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius-small);
  background-color: var(--t-surface);
  padding:          6px 10px;
  min-height:       36px;
  color:            var(--t-text);
}

body.theme-fresh textarea.inputValueTable {
  line-height: 1.4;
}

body.theme-fresh .inputValueTable:focus,
body.theme-fresh .cardInput:focus {
  outline:      none;
  border-color: var(--t-primary);
  box-shadow:   0 0 0 3px var(--t-primary-soft);
}

body.theme-fresh .dataEdit {
  margin: 10px 0;
}

body.theme-fresh .smallFont {
  font-size: 12px;
  color:     var(--t-text-muted);
}

/* ---------- Tables ---------- */

body.theme-fresh .data_table {
  overflow:         hidden;
  border-collapse:  separate;
  border-spacing:   0;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  font-size:        14px;
}

body.theme-fresh .data_table th {
  padding:          10px 14px;
  border:           none;
  border-bottom:    1px solid var(--t-border);
  background-color: var(--t-surface-2);
  color:            var(--t-text-muted);
  font-size:        12px;
  font-weight:      700;
  letter-spacing:   0.04em;
  text-align:       left;
  text-transform:   uppercase;
}

body.theme-fresh .data_table td {
  padding:       10px 14px;
  border:        none;
  border-bottom: 1px solid var(--t-line);
  vertical-align: middle;
}

body.theme-fresh .data_table tr:last-child td {
  border-bottom: none;
}

body.theme-fresh .data_table tbody tr:hover {
  background-color: var(--t-primary-soft);
}

/* The keuringen table colors whole rows by status: keep the signal, but soft */
body.theme-fresh .data_table tr.colorYellow     { background-color: var(--t-row-yellow); }
body.theme-fresh .data_table tr.colorOrange     { background-color: var(--t-row-orange); }
body.theme-fresh .data_table tr.colorGreen      { background-color: var(--t-row-green); }
body.theme-fresh .data_table tr.colorGreenDark  { background-color: var(--t-row-greendark); }
body.theme-fresh .data_table tr.colorYellow:hover,
body.theme-fresh .data_table tr.colorOrange:hover,
body.theme-fresh .data_table tr.colorGreen:hover,
body.theme-fresh .data_table tr.colorGreenDark:hover {
  background-color: var(--t-primary-soft);
}

body.theme-fresh .panelTableOverflow {
  padding: 0 20px;
}

/* ---------- Panels, notices ---------- */

body.theme-fresh .panelBottom {
  flex-shrink:      0;               /* with overflow hidden the panel could be squeezed away by a long table */
  margin:           12px 20px 20px 20px;
  overflow:         hidden;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  box-shadow:       var(--t-shadow);
}

body.theme-fresh .panelHeader {
  display:          flex;
  flex-wrap:        wrap;
  gap:              8px;
  align-items:      center;
  padding:          12px;
  background-color: var(--t-surface);
}

body.theme-fresh .panelHeader .buttonBlue {
  margin-left: 0;
}

body.theme-fresh .boxHeader {
  padding:          8px 12px;
  background-color: var(--t-surface-2);
  border-bottom:    1px solid var(--t-border);
  color:            var(--t-text-muted);
  font-size:        12px;
  font-weight:      700;
  letter-spacing:   0.04em;
  text-transform:   uppercase;
}

body.theme-fresh .noticeBlock {
  margin:           20px 0;
  padding:          14px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-accent-soft);
  color:            var(--t-notice-text);
}

body.theme-fresh code {
  padding:          1px 5px;
  border-radius:    4px;
  background-color: var(--t-surface-2);
}

/* ---------- Popups ---------- */

body.theme-fresh .popupInner {
  border-radius: var(--t-radius);
  box-shadow:    0 10px 40px rgba(15, 23, 42, 0.25);
}

/* ---------- Dashboard (overzicht) ---------- */

body.theme-fresh .dashHero {
  display:         flex;
  flex-wrap:       wrap;
  gap:             16px;
  align-items:     center;
  justify-content: space-between;
  margin:          8px 0 24px 0;
  padding:         24px 28px;
  border-radius:   var(--t-radius);
  background:      var(--t-hero);
  color:           var(--t-primary-text);
  box-shadow:      var(--t-shadow);
}

body.theme-fresh .dashHeroTitle {
  font-size:   22px;
  font-weight: 700;
}

body.theme-fresh .dashHeroText {
  margin-top: 4px;
  opacity:    0.9;
}

body.theme-fresh .dashHeroActions {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

body.theme-fresh .dashHero .buttonBlue {
  margin-left:      0;
  min-height:       42px;
  padding:          8px 20px;
  border-color:     transparent;
  background-color: var(--t-accent);
  color:            #3b2600;
}

body.theme-fresh .dashHero .buttonBlue:hover {
  background-color: #fbb53a;
  border-color:     transparent;
  box-shadow:       0 4px 14px rgba(0, 0, 0, 0.25);
}

body.theme-fresh .dashHero .buttonBlue.buttonSecondary {
  border-color:     rgba(255, 255, 255, 0.6);
  background-color: transparent;
  color:            var(--t-primary-text);
}

body.theme-fresh .dashHero .buttonBlue.buttonSecondary:hover {
  background-color: rgba(255, 255, 255, 0.15);
}

body.theme-fresh .dashSectionTitle {
  margin:         28px 0 12px 0;
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--t-text-muted);
}

body.theme-fresh .statGrid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap:                   16px;
}

body.theme-fresh .statCard {
  padding:          20px 22px;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  box-shadow:       var(--t-shadow);
}

body.theme-fresh .statCardPeriod {
  font-size:      12px;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--t-text-muted);
}

body.theme-fresh .statCardValue {
  margin-top:  8px;
  font-size:   34px;
  font-weight: 700;
  line-height: 1.1;
  color:       var(--t-primary);
}

body.theme-fresh .statCardLabel {
  margin-top: 2px;
  color:      var(--t-text-muted);
}

body.theme-fresh .statCardSub {
  display:         flex;
  flex-direction:  column;     /* label above the amount, so large amounts never touch the label */
  gap:             2px;
  align-items:     flex-start;
  margin-top:      14px;
  padding-top:     12px;
  border-top:      1px solid var(--t-line);
}

body.theme-fresh .statCardSubValue {
  font-size:   18px;
  font-weight: 700;
  color:       var(--t-text);
}

body.theme-fresh .statCard.statCardTotal {
  background:   var(--t-primary-soft);
  border-color: var(--t-primary-border);
}

/* ---------- Small screens ---------- */

/* Below 700px the menu is a slide-out menu and the page gets the compact phone layout. Between 700 and 1000px the layout
   stays the same as on desktop, so nothing jumps when a window is resized around 1000px. */
@media (max-width: 700px) {
  body.theme-fresh #mainInner {
    padding: 0 14px 30px 14px;
  }

  body.theme-fresh #mainTitle {
    font-size: 30px;
  }

  body.theme-fresh .dashHero {
    padding: 20px;
  }

  body.theme-fresh .dashHeroTitle {
    font-size: 26px;
  }

  body.theme-fresh .statCardValue {
    font-size: 40px;
  }

  body.theme-fresh .panelBottom {
    margin: 12px 10px 20px 10px;
  }

  body.theme-fresh .panelTableOverflow {
    padding: 0 10px;
  }
}

/* ---------- Keuringen table ---------- */

body.theme-fresh .panelTableOverflow {
  min-height:     160px;             /* on a low screen the page scrolls instead of the table disappearing */
  padding-top:    0;                 /* no space above the sticky header: Firefox lets rows scroll through it */
  padding-bottom: 4px;
}

body.theme-fresh #table_data tbody tr {
  cursor: pointer;
}

body.theme-fresh #table_data td.tdMuted {
  color: var(--t-text-muted);
}

body.theme-fresh #table_data td.tdStrong {
  font-weight: 700;
}

body.theme-fresh .data_table .tdNum {
  text-align: right;
}

/* Selected row: soft tint and an accent bar instead of a bold blue row */
body.theme-fresh .data_table tr.trSelected td {
  background-color: var(--t-primary-soft);
  font-weight:      normal;
}

body.theme-fresh .data_table tr.trSelected td.tdStrong {
  font-weight: 700;
}

body.theme-fresh .data_table tr.trSelected td:first-child {
  box-shadow: inset 3px 0 0 var(--t-primary);
}

/* Status as a pill; rows are no longer colored as a whole */
body.theme-fresh .statusPill {
  display:       inline-block;
  box-sizing:    border-box;
  width:         142px;     /* same width for every status, fits "Voltooid & verstuurd" */
  padding:       2px 10px;
  border-radius: 999px;
  font-size:     12px;
  font-weight:   700;
  text-align:    center;
  white-space:   nowrap;
  background-color: var(--t-surface-2);
  color:            var(--t-text-muted);
}

body.theme-fresh .statusPill.colorYellow    { background-color: var(--t-pill-yellow-bg); color: var(--t-pill-yellow-fg); }
body.theme-fresh .statusPill.colorOrange    { background-color: var(--t-pill-orange-bg); color: var(--t-pill-orange-fg); }
body.theme-fresh .statusPill.colorGreen     { background-color: var(--t-pill-green-bg); color: var(--t-pill-green-fg); }
body.theme-fresh .statusPill.colorGreenDark { background-color: var(--t-pill-greendark-bg); color: var(--t-pill-greendark-fg); }

/* The aanbrengbedrijf sees the progress: Nieuw is grey, Bevestigd yellow, Afspraak gemaakt blue (the others share their color) */
body.theme-fresh .statusPill.status0 { background-color: var(--t-pill-new-bg);  color: var(--t-pill-new-fg); }
body.theme-fresh .statusPill.status2 { background-color: var(--t-pill-plan-bg); color: var(--t-pill-plan-fg); }

/* Tables inside a panel sit flush under their header: no own border or rounded corners */
body.theme-fresh .panelBottom .data_table {
  border:        none;
  border-radius: 0;
}

body.theme-fresh .panelBottom .boxHeader {
  padding:          12px 14px 6px 14px;
  background-color: var(--t-surface);
  border-top:       1px solid var(--t-border);
  border-bottom:    none;
}

/* Title of the selected keuring above the buttons, so it is clear which keuring the panel is about */
body.theme-fresh .panelKeuringTitle {
  padding:       14px 14px 0 14px;
  overflow:      hidden;
  font-size:     16px;
  font-weight:   700;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

body.theme-fresh .panelKeuringType {
  font-weight: 400;
  color:       var(--t-text-muted);
}

/* Long names and emails get an ellipsis instead of wrapping (the full text is in the tooltip) */
body.theme-fresh td.tdClip {
  max-width:     200px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

/* Close button and handle of the bottom sheet: only on small screens */
body.theme-fresh .panelClose,
body.theme-fresh .panelSheetHandle {
  display: none;
}

/* Small screens: the panel below the keuringen table is a sheet that slides up from the bottom of the screen, so the
   list keeps the whole page. On larger screens the panel stays below the table as before. */
@media (max-width: 700px) {
  body.theme-fresh .panelBottom {
    position:      fixed;
    left:          0;
    right:         0;
    bottom:        0;
    z-index:       4;                /* below the side menu (6) and its background (5) */
    max-height:    78vh;
    margin:        0;
    overflow-y:    auto;
    border-width:  1px 0 0 0;
    border-radius: var(--t-radius) var(--t-radius) 0 0;
    box-shadow:    0 -6px 24px rgba(15, 23, 42, 0.16);
    transform:     translateY(110%);
    visibility:    hidden;
    transition:    transform 0.25s ease, visibility 0s linear 0.25s;
  }

  body.theme-fresh .panelBottom.panelOpen {
    transform:  translateY(0);
    visibility: visible;
    transition: transform 0.25s ease;
  }

  /* The visible bar is small, the tap area around it is large (tapping it closes the sheet) */
  body.theme-fresh .panelSheetHandle {
    display:    block;
    position:   relative;
    height:     26px;
    cursor:     pointer;
  }

  body.theme-fresh .panelSheetHandle::before {
    content:          "";
    position:         absolute;
    top:              10px;
    left:             50%;
    width:            40px;
    height:           4px;
    margin-left:      -20px;
    border-radius:    2px;
    background-color: var(--t-border);
  }

  body.theme-fresh .panelClose {
    position:         absolute;
    top:              14px;
    right:            10px;
    z-index:          1;
    display:          block;
    width:            32px;
    height:           32px;
    padding:          0;
    border:           none;
    border-radius:    50%;
    background-color: var(--t-bg);
    cursor:           pointer;
  }

  body.theme-fresh .panelClose::before {
    content:          "";
    position:         absolute;
    inset:            8px;
    background-color: var(--t-text-muted);
    -webkit-mask:     var(--close-icon) center / contain no-repeat;
    mask:             var(--close-icon) center / contain no-repeat;
  }

  body.theme-fresh .panelKeuringTitle {
    padding-top:   0;
    padding-right: 54px;
  }
}

/* ---------- Form pages (Opties) ---------- */

body.theme-fresh .formCard {
  margin:           0 0 16px 0;
  padding:          20px 22px 22px 22px;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  box-shadow:       var(--t-shadow);
}

body.theme-fresh .formCard h2 {
  margin:    0 0 16px 0;
  font-size: 17px;
}

body.theme-fresh .formGrid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   16px;
}

body.theme-fresh .formFieldWide {
  grid-column: 1 / -1;
}

body.theme-fresh .formField label {
  display:       block;
  margin-bottom: 5px;
  font-size:     13px;
  font-weight:   700;
  color:         var(--t-text);
}

body.theme-fresh .formField .inputValueTable {
  margin: 0;
}

/* Fields on the documentation pages (API V2, webhook) sit one under the other inside a card */
body.theme-fresh .formCard > .formField + .formField {
  margin-top: 14px;
}

body.theme-fresh .formAddress {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

body.theme-fresh .formAddress .inputValueTable {
  width:     auto;
  min-width: 120px;
  flex:      1 1 120px;
}

body.theme-fresh .formHint {
  margin:    6px 0 8px 0;
  font-size: 13px;
  color:     var(--t-text-muted);
}

body.theme-fresh .formHint:empty {
  display: none;
}

body.theme-fresh .formCheck {
  display:     flex;
  gap:         10px;
  align-items: center;
  padding:     8px 0;
  cursor:      pointer;
}

body.theme-fresh .formCheck input {
  width:        18px;
  height:       18px;
  accent-color: var(--t-primary);
}

body.theme-fresh .tagTable {
  margin:    4px 0 0 0;
  font-size: 13px;
  color:     var(--t-text-muted);
}

body.theme-fresh .tagTable td {
  padding: 3px 14px 3px 0;
}

/* Save bar stays in view while scrolling a long form */
body.theme-fresh .formSaveBar {
  position:         sticky;
  bottom:           0;
  z-index:          2;
  display:          flex;
  justify-content:  flex-end;
  margin:           0 -20px;
  padding:          12px 20px;
  border-top:       1px solid var(--t-border);
  background-color: color-mix(in srgb, var(--t-bg) 92%, transparent);
  backdrop-filter:  blur(4px);
}

@media (max-width: 700px) {
  body.theme-fresh .formGrid {
    grid-template-columns: 1fr;
  }

  body.theme-fresh .formCard {
    padding: 16px;
  }

  /* #mainInner has 14px side padding here: keep the bar exactly as wide as the page */
  body.theme-fresh .formSaveBar {
    margin:  0 -14px;
    padding: 12px 14px;
  }
}

/* Pages that render their own title inside #mainInner leave the outer #mainTitle empty: do not reserve space for it,
   otherwise the scrollbar of #mainWrapper starts below a blank strip */
body.theme-fresh #mainTitle:empty {
  display: none;
}

body.theme-fresh #sideMenuMain > div:last-child {
  padding-top: 0 !important;
}

/* ---------- Loading indicator ---------- */

/* Every standard spinner on a themed page becomes the house of the logo drawing itself */
body.theme-fresh img[src$="/images/spinner.svg"] {
  content: url("/images/spinner_huis.svg");
}

body.theme-fresh #spinnerLoad img,
body.theme-fresh .spinnerTable img {
  height: 30px;
}

/* The page spinner is a centered overlay on the content area instead of a bar above it */
body.theme-fresh #sideMenuMain > div:last-child {
  position: relative;
}

body.theme-fresh #mainSpinner {
  position:         absolute;
  inset:            0;
  z-index:          5;
  align-items:      center;
  justify-content:  center;
  background-color: color-mix(in srgb, var(--t-bg) 90%, transparent);
}

body.theme-fresh #mainSpinner img {
  height: 64px !important;
}

/* ---------- Menu icons ---------- */

/* Line icons in the style of the logo. Drawn as masks, so they take the color of the text */
body.theme-fresh .sideMenuSection a::before,
body.theme-fresh #menuLogoutBedrijf::before {
  content:          "";
  flex:             0 0 auto;
  width:            18px;
  height:           18px;
  margin-right:     12px;
  background-color: var(--t-text-muted);
  -webkit-mask:     var(--menu-icon) center / contain no-repeat;
  mask:             var(--menu-icon) center / contain no-repeat;
  transition:       background-color 0.15s;
}

body.theme-fresh .sideMenuSection a:hover::before,
body.theme-fresh .sideMenuSection a.sideMenuSectionSelected::before {
  background-color: var(--t-primary);
}

body.theme-fresh #menuLogoutBedrijf::before {
  background-color: var(--t-danger);
}

body.theme-fresh #menuItem-overzicht { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10l8-7 8 7v10 M10 20v-6h4v6'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-keuringen { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6a1 1 0 0 1 1 1v1H8V5a1 1 0 0 1 1-1z M8 6H6a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1h-2 M9 12h6 M9 16h4'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-aanvraag_keuring { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z M12 8v8 M8 12h8'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-iframe_keuring { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 8l-4 4 4 4 M16 8l4 4-4 4 M13.5 6l-3 12'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-apiv2 { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4c-2 0-3 1-3 3v2c0 1.5-1 3-2 3 1 0 2 1.5 2 3v2c0 2 1 3 3 3 M15 4c2 0 3 1 3 3v2c0 1.5 1 3 2 3-1 0-2 1.5-2 3v2c0 2-1 3-3 3'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-notificatie { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2 7 2 8H4c0-1 2-2 2-8z M10 21h4'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-tracking { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-opties { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h10 M18 7h2 M4 17h2 M10 17h10 M16 5v4 M8 15v4'/%3E%3C/svg%3E"); }
body.theme-fresh #menuItem-vergoedingen { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 7a7 7 0 1 0 0 10 M4 10h9 M4 14h9'/%3E%3C/svg%3E"); }
body.theme-fresh #menuTheme                    { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 4v16' stroke-width='1.8'/%3E%3Cpath d='M12 4a8 8 0 0 1 0 16z' fill='black'/%3E%3C/svg%3E"); }
body.theme-fresh #menuTheme[data-mode="light"] { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v2 M12 19v2 M3 12h2 M19 12h2 M5.6 5.6l1.4 1.4 M17 17l1.4 1.4 M5.6 18.4L7 17 M17 7l1.4-1.4'/%3E%3C/svg%3E"); }
body.theme-fresh #menuTheme[data-mode="dark"]  { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5z'/%3E%3C/svg%3E"); }
body.theme-fresh #menuLogout { --menu-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H6a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h4 M15 8l4 4-4 4 M19 12H9'/%3E%3C/svg%3E"); }

/* Icons used by the menu header (masks, so they take their color from the element) */
body.theme-fresh {
  --logo-icon:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 19 21.38' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.5 18.38V7.46l8-6.96 8 6.96v10.92 M11.5 18.38v-7h-6v7'/%3E%3C/svg%3E");
  --close-icon:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12 M18 6L6 18'/%3E%3C/svg%3E");
  --chevron-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l-6 6 6 6 M20 6l-6 6 6 6'/%3E%3C/svg%3E");
}

/* ---------- Login pages ---------- */

/* Logo on a blue band, with a white card that overlaps the band (see getLoginPageShell in templates.php) */
body.theme-fresh .loginPage {
  min-height:       100vh;
  box-sizing:       border-box;
  padding:          0 16px 40px 16px;
  background:       var(--t-hero) top / 100% 260px no-repeat, var(--t-bg);
}

body.theme-fresh .loginBrand {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             10px;
  height:          110px;
  color:           #ffffff;
  font-family:     'Outfit', 'Roboto', sans-serif;
  font-size:       32px;
  font-weight:     400;
  letter-spacing:  0.005em;
}

/* The keuringsbedrijf: its logo on a white plate (a logo is made for a light background) and its name, on the band */
body.theme-fresh .loginBrandBedrijf {
  font-size: 26px;
}

body.theme-fresh .loginBrandLogo {
  display:          flex;
  align-items:      center;
  padding:          6px 12px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-plate);
}

body.theme-fresh .loginBrandLogo img {
  display:    block;
  height:     40px;
  width:      auto;
  max-width:  180px;
  object-fit: contain;
}

/* Under the card: who makes it possible, the same line as at the bottom of the side menu */
body.theme-fresh .poweredBy.loginPoweredBy {
  justify-content: center;
  width:           fit-content;
  margin:          22px auto 0 auto;
  padding:         0;
  border-top:      none;
}

body.theme-fresh .loginBrandMark {
  width:            30px;
  height:           33px;
  background-color: #ffffff;
  -webkit-mask:     var(--logo-icon) center / contain no-repeat;
  mask:             var(--logo-icon) center / contain no-repeat;
}

body.theme-fresh .loginCard {
  position:         relative;
  box-sizing:       border-box;
  max-width:        420px;
  margin:           0 auto;
  padding:          32px 32px 28px 32px;
  border:           1px solid var(--t-border);
  border-radius:    16px;
  background-color: var(--t-surface);
  box-shadow:       0 4px 6px rgba(15, 23, 42, 0.04), 0 12px 32px rgba(15, 23, 42, 0.1);
}

body.theme-fresh .loginCard h1 {
  margin:      0;
  font-size:   26px;
  font-weight: 700;
  color:       var(--t-text);
}

body.theme-fresh .loginSub {
  margin:    4px 0 24px 0;
  font-size: 14px;
  color:     var(--t-text-muted);
}

body.theme-fresh .loginCard label {
  display:     block;
  margin:      16px 0 6px 0;
  font-size:   13px;
  font-weight: 700;
  color:       var(--t-text);
}

body.theme-fresh .loginCard .inputValueTable {
  box-sizing: border-box;
  width:      100%;
  min-height: 42px;
  font-size:  15px;
}

body.theme-fresh .loginCard .foutmelding {
  margin:        14px 0 0 0;
  padding:       10px 12px;
  border-radius: var(--t-radius-small);
  background-color: var(--t-danger-soft-2);
  color:         var(--t-danger-soft-text);
  font-size:     14px;
}

body.theme-fresh .loginCard .loginButton {
  width:      100%;
  min-height: 44px;
  margin:     24px 0 0 0;
  font-size:  16px;
  cursor:     pointer;
}

body.theme-fresh .loginCard .loginLink {
  display:          block;
  width:            100%;
  margin:           14px 0 0 0;
  padding:          8px;
  border:           none;
  background:       none;
  color:            var(--t-primary);
  font-size:        14px;
  font-weight:      600;
  text-align:       center;
  cursor:           pointer;
}

body.theme-fresh .loginCard .loginLink:hover {
  text-decoration: underline;
}

body.theme-fresh .loginCard .spinner {
  border-radius:    16px;
  background-color: color-mix(in srgb, var(--t-surface) 90%, transparent);
  background-image: url("/images/spinner_huis.svg");
  background-size:  64px;
}

@media (max-width: 480px) {
  body.theme-fresh .loginCard {
    padding: 24px 20px 20px 20px;
  }

  body.theme-fresh .loginBrand {
    height: 90px;
  }

  body.theme-fresh .loginBrandBedrijf {
    font-size: 22px;
  }
}

/* ---------- Pages in the fresh shell (getFreshPage in templates.php) ---------- */

/* One big house of the logo on the band, a bit tilted and cut off by the band, so that only its wide lines show. Only on
   the mijnwoning pages, not on the login of a keuringsbedrijf (getLoginPageShell with its own brand). */
body.theme-fresh .freshPage {
  position: relative;
}

body.theme-fresh .freshPage::before {
  content:             '';
  position:            absolute;
  top:                 0;
  left:                0;
  right:               0;
  height:              260px;
  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='white' stroke-opacity='0.11' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath transform='rotate(-20 50 50) translate(16 11) scale(4)' d='M0.5 18.38V7.46l8-6.96 8 6.96v10.92 M11.5 18.38v-7h-6v7'/%3E%3C/svg%3E");
  background-size:     940px 940px;
  background-repeat:   no-repeat;
  background-position: calc(50% + 300px) -380px;
  pointer-events:      none;
}

@media (max-width: 760px) {
  body.theme-fresh .freshPage::before {
    background-size:     560px 560px;
    background-position: calc(100% + 190px) -210px;
  }
}

body.theme-fresh .freshPage > * {
  position: relative;
}

/* The logo on the band is a link to the front page */
body.theme-fresh a.loginBrand {
  width:           fit-content;
  margin:          0 auto;
  text-decoration: none;
}

/* Logged in, but not allowed here (getLoginPage with a warning) */
body.theme-fresh .loginWaarschuwing {
  margin:           0 0 8px 0;
  padding:          10px 12px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-warn-soft);
  color:            var(--t-notice-text);
  font-size:        14px;
}

body.theme-fresh .loginWaarschuwing a {
  color:       inherit;
  font-weight: 600;
}

/* A wider card for content: the profile, the terms */
body.theme-fresh .loginCard.pageCard {
  max-width: 720px;
}

body.theme-fresh .pageCard h2 {
  margin:      28px 0 10px 0;
  font-family: var(--t-font-heading);
  font-size:   20px;
  font-weight: 600;
}

/* Profile: the links to the dashboards (profiel.js) */
body.theme-fresh #profileLinks {
  font-size: 14px;
  color:     var(--t-text-muted);
}

body.theme-fresh .profileLink {
  display:          inline-block;
  margin:           0 6px 6px 0;
  padding:          4px 12px;
  border:           1px solid var(--t-primary-border);
  border-radius:    999px;
  background-color: var(--t-primary-soft);
  color:            var(--t-primary);
  font-size:        13px;
  font-weight:      600;
  text-decoration:  none;
}

body.theme-fresh .profileLink:hover {
  border-color: var(--t-primary);
}

/* Long texts (voorwaarden, privacy) */
body.theme-fresh .textCard {
  font-size:   15px;
  line-height: 1.6;
}

body.theme-fresh .textCard h3 {
  margin:      26px 0 6px 0;
  font-size:   16px;
  font-weight: 700;
}

body.theme-fresh .textCard p,
body.theme-fresh .textCard li {
  color: var(--t-text);
}

body.theme-fresh .textCard a {
  color: var(--t-primary);
}

/* ---------- Front page (index.php) ---------- */

/* The login page layout (band + card), with a slightly wider card and three short blocks under it */
body.theme-fresh .homeCard {
  max-width: 460px;
}

body.theme-fresh .loginCard .loginCheck {
  display:     flex;
  align-items: center;
  gap:         8px;
  margin:      16px 0 0 0;
  font-weight: 400;
  font-size:   14px;
  cursor:      pointer;
}

body.theme-fresh .homePartnerForm label {
  display:     block;
  margin:      14px 0 6px 0;
  font-size:   13px;
  font-weight: 700;
  color:       var(--t-text);
}

body.theme-fresh .homePartnerForm .inputValueTable {
  box-sizing: border-box;
  width:      100%;
  min-height: 40px;
  font-size:  15px;
}

body.theme-fresh .homePartnerForm .buttonBlue {
  width:      100%;
  min-height: 40px;
  margin:     12px 0 0 0;
  cursor:     pointer;
}

body.theme-fresh .homePartnerMelding:not(:empty) {
  margin:    10px 0 0 0;
  font-size: 13px;
  color:     var(--t-text);
}

body.theme-fresh .homePartnerMelding.fout {
  color: var(--t-danger);
}

/* Logged in: one row per dashboard */
body.theme-fresh .homeTegels {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

body.theme-fresh .homeTegel {
  display:          flex;
  align-items:      center;
  gap:              12px;
  padding:          10px 12px;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius-small);
  background-color: var(--t-surface);
  color:            var(--t-text);
  text-decoration:  none;
  transition:       border-color 0.15s, background-color 0.15s;
}

body.theme-fresh .homeTegel:hover {
  border-color:     var(--t-primary-border);
  background-color: var(--t-primary-soft);
}

body.theme-fresh .homeTegel:focus-visible {
  outline:        2px solid var(--t-primary);
  outline-offset: 2px;
}

body.theme-fresh .homeTegelLogo,
body.theme-fresh .homeTegelLetter,
body.theme-fresh .homeTegelMark {
  display:         flex;
  flex:            0 0 auto;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  width:           40px;
  height:          40px;
  border-radius:   var(--t-radius-small);
}

/* A logo is made for a light background */
body.theme-fresh .homeTegelLogo {
  padding:          3px;
  border:           1px solid var(--t-line);
  background-color: var(--t-plate);
}

body.theme-fresh .homeTegelLogo img {
  display:    block;
  max-width:  100%;
  max-height: 100%;
  object-fit: contain;
}

body.theme-fresh .homeTegelLetter {
  background-color: var(--t-primary-soft);
  color:            var(--t-primary);
  font-size:        17px;
  font-weight:      700;
}

body.theme-fresh .homeTegelMark {
  background-color: var(--t-primary-soft);
}

body.theme-fresh .homeTegelMark::before {
  content:          '';
  width:            20px;
  height:           22px;
  background-color: var(--t-primary);
  -webkit-mask:     var(--logo-icon) center / contain no-repeat;
  mask:             var(--logo-icon) center / contain no-repeat;
}

body.theme-fresh .homeTegelTekst {
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  min-width:      0;
}

body.theme-fresh .homeTegelTitel {
  overflow:      hidden;
  font-weight:   600;
  font-size:     15px;
  white-space:   nowrap;
  text-overflow: ellipsis;
}

body.theme-fresh .homeTegelSub {
  font-size: 13px;
  color:     var(--t-text-muted);
}

body.theme-fresh .homeTegelPijl {
  flex:             0 0 auto;
  width:            16px;
  height:           16px;
  background-color: var(--t-text-muted);
  -webkit-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:             url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.theme-fresh .homeTegel:hover .homeTegelPijl {
  background-color: var(--t-primary);
}

body.theme-fresh .homeLeeg {
  padding:          12px 14px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-info-soft);
  font-size:        14px;
}

body.theme-fresh .homeAccount {
  display:         flex;
  justify-content: center;
  gap:             24px;
  margin:          20px 0 0 0;
  padding:         14px 0 0 0;
  border-top:      1px solid var(--t-line);
  font-size:       14px;
}

body.theme-fresh .homeAccount a,
body.theme-fresh .homeInfoBlok a,
body.theme-fresh .homeLeeg a {
  color:           var(--t-primary);
  font-weight:     600;
  text-decoration: none;
}

body.theme-fresh .homeAccount a:hover,
body.theme-fresh .homeInfoBlok a:hover,
body.theme-fresh .homeLeeg a:hover {
  text-decoration: underline;
}

/* Not logged in: four short blocks under the card, two by two */
body.theme-fresh .homeInfo {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   16px;
  max-width:             860px;
  margin:                36px auto 0 auto;
}

body.theme-fresh .homeInfoBlok {
  padding:          18px 20px;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
}

body.theme-fresh .homeInfoBlok h2 {
  margin:      0 0 6px 0;
  font-family: var(--t-font-heading);
  font-size:   17px;
  font-weight: 600;
  color:       var(--t-text);
}

body.theme-fresh .homeInfoBlok p {
  margin:    0;
  font-size: 14px;
  color:     var(--t-text-muted);
}

body.theme-fresh .freshFooter {
  margin:     36px auto 0 auto;
  font-size:  12px;
  color:      var(--t-text-muted);
  text-align: center;
}

body.theme-fresh .freshFooter a {
  color:           inherit;
  text-decoration: none;
}

body.theme-fresh .freshFooter a:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  body.theme-fresh .homeInfo {
    grid-template-columns: minmax(0, 1fr);
    max-width:             460px;
    gap:                   12px;
    margin-top:            24px;
  }
}

/* ---------- Headings in Outfit ---------- */

/* Page titles and card headings use the logo font. Outfit has a smaller x-height than Roboto, so the sizes are a bit larger. */
body.theme-fresh #mainTitle,
body.theme-fresh .dashHeroTitle,
body.theme-fresh .loginCard h1,
body.theme-fresh .formCard h2,
body.theme-fresh .statCardValue {
  font-family: var(--t-font-heading);
  font-weight: 400;
}

body.theme-fresh #mainTitle          { font-size: 32px; letter-spacing: -0.005em; }
body.theme-fresh .dashHeroTitle      { font-size: 27px; }
body.theme-fresh .loginCard h1       { font-size: 30px; }
body.theme-fresh .formCard h2        { font-size: 20px; }

/* ---------- Keuringen: search, status filter and progress ---------- */

body.theme-fresh {
  --search-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --check-icon:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

body.theme-fresh .keuringToolbar {
  display:     flex;
  flex-wrap:   wrap;
  gap:         10px 16px;
  align-items: center;
  margin:      0 20px;
  padding:     4px 0 14px 0;
}

body.theme-fresh .keuringSearch {
  position:  relative;
  flex:      0 1 340px;
  min-width: 220px;
}

body.theme-fresh .keuringSearch::before {
  content:          "";
  position:         absolute;
  top:              50%;
  left:             12px;
  width:            16px;
  height:           16px;
  margin-top:       -8px;
  background-color: var(--t-text-muted);
  -webkit-mask:     var(--search-icon) center / contain no-repeat;
  mask:             var(--search-icon) center / contain no-repeat;
  pointer-events:   none;
}

body.theme-fresh .keuringSearch input {
  box-sizing:       border-box;
  width:            100%;
  height:           38px;
  padding:          0 12px 0 36px;
  border:           1px solid var(--t-border);
  border-radius:    999px;
  background-color: var(--t-surface);
  color:            var(--t-text);
  font:             inherit;
  font-size:        14px;
}

/* Own clear button instead of the browser's */
body.theme-fresh .keuringSearch input::-webkit-search-cancel-button {
  display: none;
}

body.theme-fresh .keuringSearch input {
  padding-right: 38px;
}

body.theme-fresh .keuringSearchClear {
  position:         absolute;
  top:              50%;
  right:            8px;
  width:            24px;
  height:           24px;
  margin-top:       -12px;
  padding:          0;
  border:           none;
  border-radius:    50%;
  background-color: transparent;
  cursor:           pointer;
}

body.theme-fresh .keuringSearchClear[hidden] {
  display: none;
}

body.theme-fresh .keuringSearchClear::before {
  content:          "";
  position:         absolute;
  inset:            6px;
  background-color: var(--t-text-muted);
  -webkit-mask:     var(--close-icon) center / contain no-repeat;
  mask:             var(--close-icon) center / contain no-repeat;
}

body.theme-fresh .keuringSearchClear:hover {
  background-color: var(--t-bg);
}

body.theme-fresh .keuringSearch input:focus {
  outline:      none;
  border-color: var(--t-primary);
  box-shadow:   0 0 0 3px var(--t-primary-soft);
}

body.theme-fresh .keuringFilter {
  box-sizing:         border-box;
  height:             38px;
  padding:            0 38px 0 16px;
  border:             1px solid var(--t-border);
  border-radius:      999px;
  background-color:   var(--t-surface);
  background-image:   var(--select-arrow);
  background-repeat:  no-repeat;
  background-position: right 14px center;
  background-size:    14px;
  color:              var(--t-text);
  font:               inherit;
  font-size:          14px;
  cursor:             pointer;
  -webkit-appearance: none;
  appearance:         none;
}

body.theme-fresh .keuringFilter:focus {
  outline:      none;
  border-color: var(--t-primary);
  box-shadow:   0 0 0 3px var(--t-primary-soft);
}

/* Progress bar of the selected keuring in the bottom panel */
body.theme-fresh .panelSteps {
  display:    flex;
  margin:     0;
  padding:    16px 14px 4px 14px;
  list-style: none;
}

body.theme-fresh .panelStep {
  position:   relative;
  flex:       1 1 0;
  min-width:  0;
  text-align: center;
}

body.theme-fresh .stepDot {
  position:         relative;
  z-index:          1;
  display:          block;
  box-sizing:       border-box;
  width:            22px;
  height:           22px;
  margin:           0 auto 6px auto;
  border:           2px solid var(--t-border);
  border-radius:    50%;
  background-color: var(--t-surface);
}

/* Line to the next step */
body.theme-fresh .panelStep:not(:last-child)::after {
  content:          "";
  position:         absolute;
  top:              10px;
  left:             calc(50% + 15px);
  right:            calc(-50% + 15px);
  height:           2px;
  background-color: var(--t-border);
}

body.theme-fresh .panelStep.stepDone:not(:last-child)::after {
  background-color: var(--t-primary);
}

body.theme-fresh .stepDone .stepDot {
  border-color:     var(--t-primary);
  background-color: var(--t-primary);
}

body.theme-fresh .stepDone .stepDot::before {
  content:          "";
  position:         absolute;
  inset:            2px;
  background-color: var(--t-primary-text);
  -webkit-mask:     var(--check-icon) center / contain no-repeat;
  mask:             var(--check-icon) center / contain no-repeat;
}

body.theme-fresh .stepCurrent .stepDot {
  border-color: var(--t-primary);
  box-shadow:   0 0 0 3px var(--t-primary-soft);
}

body.theme-fresh .stepCurrent .stepDot::before {
  content:          "";
  position:         absolute;
  inset:            4px;
  border-radius:    50%;
  background-color: var(--t-primary);
}

body.theme-fresh .stepLabel,
body.theme-fresh .stepDate {
  display:       block;
  overflow:      hidden;
  font-size:     12px;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

body.theme-fresh .stepLabel {
  color:       var(--t-text-muted);
  font-weight: 500;
}

body.theme-fresh .stepDone .stepLabel,
body.theme-fresh .stepCurrent .stepLabel {
  color:       var(--t-text);
  font-weight: 700;
}

body.theme-fresh .stepDate {
  min-height: 15px;
  color:      var(--t-text-muted);
  font-size:  11px;
}

@media (max-width: 700px) {
  body.theme-fresh .keuringToolbar {
    margin: 0 10px;
  }

  body.theme-fresh .keuringSearch {
    flex: 1 1 100%;
  }

  body.theme-fresh .keuringFilter {
    flex: 1 1 100%;
  }
}

/* ---------- Overview: last requested keuringen ---------- */

body.theme-fresh .dashSectionLink {
  float:           right;
  color:           var(--t-primary);
  font-weight:     700;
  letter-spacing:  0.02em;
  text-decoration: none;
  text-transform:  none;
}

body.theme-fresh .dashSectionLink:hover {
  text-decoration: underline;
}

body.theme-fresh .recentList {
  overflow:         hidden;
  border:           1px solid var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  box-shadow:       var(--t-shadow);
}

body.theme-fresh .recentItem {
  display:         flex;
  align-items:     center;
  gap:             16px;
  padding:         12px 18px;
  color:           var(--t-text);
  text-decoration: none;
  transition:      background-color 0.15s;
}

body.theme-fresh .recentItem + .recentItem {
  border-top: 1px solid var(--t-line);
}

body.theme-fresh .recentItem:hover {
  background-color: var(--t-primary-soft);
}

body.theme-fresh .recentMain {
  display:        flex;
  flex:           1 1 auto;
  flex-direction: column;
  min-width:      0;
}

body.theme-fresh .recentAdres {
  overflow:      hidden;
  font-weight:   700;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

body.theme-fresh .recentType {
  overflow:      hidden;
  color:         var(--t-text-muted);
  font-size:     13px;
  text-overflow: ellipsis;
  white-space:   nowrap;
}

body.theme-fresh .recentDate {
  flex:        0 0 auto;
  min-width:   92px;
  color:       var(--t-text-muted);
  font-size:   13px;
  text-align:  right;
}

/* On a phone the address and type get the whole first line; the status and date sit under it */
@media (max-width: 600px) {
  body.theme-fresh .recentItem {
    flex-wrap: wrap;
    gap:       6px 12px;
    padding:   12px 16px;
  }

  body.theme-fresh .recentMain {
    flex:  1 0 100%;
  }

  body.theme-fresh .recentDate {
    margin-left: auto;
  }
}

/* ---------- Empty states ---------- */

body.theme-fresh .emptyState {
  flex-direction:   column;
  align-items:      center;
  margin:           24px 0;
  padding:          40px 20px;
  border:           1px dashed var(--t-border);
  border-radius:    var(--t-radius);
  background-color: var(--t-surface);
  text-align:       center;
}

body.theme-fresh .emptyStateIcon {
  position:         relative;
  width:            64px;
  height:           64px;
  margin-bottom:    16px;
  border-radius:    50%;
  background-color: var(--t-primary-soft);
}

body.theme-fresh .emptyStateIcon::before {
  content:          "";
  position:         absolute;
  inset:            16px;
  background-color: var(--t-primary);
  -webkit-mask:     var(--logo-icon) center / contain no-repeat;
  mask:             var(--logo-icon) center / contain no-repeat;
}

body.theme-fresh .emptyStateTitle {
  margin-bottom: 6px;
  font-family:   var(--t-font-heading);
  font-size:     22px;
}

body.theme-fresh .emptyStateText {
  max-width:     420px;
  margin-bottom: 18px;
  color:         var(--t-text-muted);
}

/* The state in the keuringen table is shown by script (display flex), hidden by default through inline style */

/* ---------- Placeholder rows while loading ---------- */

body.theme-fresh .skeletonRow {
  pointer-events: none;
}

body.theme-fresh .skeletonBar {
  display:          block;
  max-width:        100%;
  height:           14px;
  border-radius:    7px;
  background-color: var(--t-skeleton);
  animation:        skeletonPulse 1.2s ease-in-out infinite;
}

body.theme-fresh .skeletonRow:nth-child(even) .skeletonBar {
  animation-delay: 0.15s;
}

@keyframes skeletonPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-fresh .skeletonBar {
    animation: none;
  }
}

/* Four cards: two per row on a phone, with the vergoeding under its label so it fits */
@media (max-width: 700px) {
  body.theme-fresh .statGrid {
    grid-template-columns: repeat(2, 1fr);
    gap:                   12px;
  }

  body.theme-fresh .statCard {
    padding: 16px 16px;
  }

  body.theme-fresh .statCardSub {
    flex-direction: column;
    align-items:    flex-start;
    gap:            2px;
  }
}

/* Keuringen table: long addresses and names get an ellipsis (the full text is in the tooltip) */
body.theme-fresh #table_data td.tdClipAdres { max-width: 260px; }
body.theme-fresh #table_data td.tdClipType  { max-width: 220px; }
body.theme-fresh #table_data td.tdClipKlant { max-width: 220px; }

/* ---------- Messages as toasts, confirm popup, focus ---------- */

/* Messages (showMessage, showError, showWarning): a toast at the top center, colored by kind */
body.theme-fresh #floatingMessage {
  top:              calc(var(--t-topbar-height) + 12px);   /* centered, just under the top bar */
  right:            0;
  bottom:           auto;
  left:             0;
  margin:           0 auto;
  transform:        none;
  flex-direction:   row;
  justify-content:  flex-start;   /* the base style centers; icon and text start at the left */
  align-items:      center;
  gap:              14px;
  width:            420px;
  max-width:        calc(100vw - 32px);
  min-width:        0;
  min-height:       0;
  padding:          16px 40px 18px 16px;
  border:           1px solid var(--toast-color);
  border-radius:    var(--t-radius);
  background-color: var(--toast-bg);
  box-shadow:       0 0 0 4px var(--toast-ring), 0 14px 40px rgba(15, 23, 42, 0.28);   /* stands out from the page */
  color:            var(--t-text);
  font-size:        15px;
  font-weight:      500;
  line-height:      1.45;
  text-align:       left;
  overflow:         hidden;
  animation:        toastIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);

  --toast-color: var(--t-primary);
  --toast-bg:    var(--t-info-soft);
  --toast-ring:  rgba(28, 107, 176, 0.14);
  --toast-glyph: var(--check-icon);
  --toast-glyph-color: var(--t-primary-text);
}

body.theme-fresh #floatingMessage[data-kind="error"] {
  --toast-color: var(--t-danger-fill);
  --toast-bg:    var(--t-danger-soft);
  --toast-ring:  rgba(220, 38, 38, 0.14);
  --toast-glyph: var(--close-icon);
  --toast-glyph-color: #ffffff;
}

body.theme-fresh #floatingMessage[data-kind="warning"] {
  --toast-color: #d97706;
  --toast-bg:    var(--t-warn-soft);
  --toast-ring:  rgba(245, 158, 11, 0.2);
  --toast-glyph: var(--alert-icon);
  --toast-glyph-color: #ffffff;
}

body.theme-fresh {
  --alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 5v9 M12 19v.01'/%3E%3C/svg%3E");
}

body.theme-fresh .toastIcon {
  position:         relative;
  flex:             0 0 auto;
  width:            30px;
  height:           30px;
  border-radius:    50%;
  background-color: var(--toast-color);
}

body.theme-fresh .toastIcon::before {
  content:          "";
  position:         absolute;
  inset:            6px;
  background-color: var(--toast-glyph-color, #ffffff);
  -webkit-mask:     var(--toast-glyph) center / contain no-repeat;
  mask:             var(--toast-glyph) center / contain no-repeat;
}

body.theme-fresh .toastText {
  min-width: 0;
}

/* Bar at the bottom that runs out while the message is visible */
body.theme-fresh #floatingMessage::after {
  content:          "";
  position:         absolute;
  right:            0;
  bottom:           0;
  left:             0;
  height:           2px;
  background-color: var(--toast-color);
  transform-origin: left;
  animation:        toastTimer var(--toast-seconds, 3s) linear forwards;
}

body.theme-fresh #floatingMessage[data-timer="0"]::after {
  display: none;
}

@keyframes toastTimer {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-20px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Close cross of toasts and popups */
body.theme-fresh #floatingMessage::before,
body.theme-fresh .popupCloseCross {
  top:              16px;
  right:            12px;
  width:            18px;
  height:           18px;
  background:       var(--t-text-muted);
  -webkit-mask:     var(--close-icon) center / contain no-repeat;
  mask:             var(--close-icon) center / contain no-repeat;
}

/* The cross of the toast sits closer to the corner */
body.theme-fresh #floatingMessage::before {
  top:    10px;
  right:  10px;
  width:  16px;
  height: 16px;
}

@media (max-width: 700px) {
  body.theme-fresh #floatingMessage {
    right:  12px;
    left:   12px;
    width:  auto;
    margin: 0;
  }
}

/* With reduced motion the toast does not slide in; the timer bar still runs, it shows how long the message stays */
@media (prefers-reduced-motion: reduce) {
  body.theme-fresh #floatingMessage {
    animation: none;
  }
}

/* Confirm popup: a clean card, the warning variant gets an amber edge and a red OK button */
body.theme-fresh .popupOuter {
  background-color: rgba(15, 23, 42, 0.5);
}

body.theme-fresh #formConfirm .popupInner {
  top:           18vh;
  max-width:     480px;
  padding:       28px 28px 24px 28px;
  border:        none;
  border-radius: 16px;
  box-shadow:    0 20px 60px rgba(15, 23, 42, 0.3);
}

body.theme-fresh #formConfirm .popupHeader {
  margin:      0 0 10px 0;
  padding:     0 24px 0 0;
  color:       var(--t-text);
  font-family: var(--t-font-heading);
  font-size:   22px;
  text-align:  left;
}

body.theme-fresh #confirmText {
  color:       var(--t-text);
  font-size:   15px;
  line-height: 1.5;
}

body.theme-fresh #formConfirm .popupFooter {
  gap:        8px;
  margin-top: 22px;
}

body.theme-fresh #formConfirm .cardButton {
  height:    40px;
  min-width: 96px;
  margin:    0;
  padding:   0 20px;
  font-size: 15px;
}

/* Icon left of title and text */
body.theme-fresh #confirmMessage {
  display:               grid;
  grid-template-columns: 48px 1fr;
  column-gap:            16px;
  align-items:           start;
}

body.theme-fresh #confirmMessage .confirmIcon   { grid-column: 1; grid-row: 1 / span 2; }
body.theme-fresh #confirmMessage .popupHeader   { grid-column: 2; grid-row: 1; align-self: center; min-height: 28px; margin-bottom: 6px; }
body.theme-fresh #confirmMessage #confirmText   { grid-column: 2; grid-row: 2; min-width: 0; }
body.theme-fresh #confirmMessage .popupFooter   { grid-column: 1 / -1; grid-row: 3; }

/* The icon: a blue question mark, or a red exclamation mark for a warning (like the error toast) */
body.theme-fresh {
  --help-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 9a3.5 3.5 0 1 1 5.2 3c-1 .6-1.7 1.3-1.7 2.5 M12 19v.01'/%3E%3C/svg%3E");
}

body.theme-fresh #confirmMessage .confirmIcon {
  position:         relative;
  display:          block;
  width:            48px;
  height:           48px;
  border-radius:    50%;
  background-color: var(--t-info-soft);
}

body.theme-fresh #confirmMessage .confirmIcon::before {
  content:          "";
  position:         absolute;
  inset:            12px;
  background-color: var(--t-primary);
  -webkit-mask:     var(--help-icon) center / contain no-repeat;
  mask:             var(--help-icon) center / contain no-repeat;
}

body.theme-fresh #confirmMessage.confirmIsWarning .confirmIcon {
  background-color: var(--t-danger-soft);
}

body.theme-fresh #confirmMessage.confirmIsWarning .confirmIcon::before {
  background-color: var(--t-danger);
  -webkit-mask:     var(--alert-icon) center / contain no-repeat;
  mask:             var(--alert-icon) center / contain no-repeat;
}

/* Cancel on the left, the (red) action on the right, both at the right edge */
body.theme-fresh #formConfirm .popupFooter {
  flex-direction:  row-reverse;
  justify-content: flex-start;
}

/* The action of a normal confirmation: filled in the main color */
body.theme-fresh #confirmMessage:not(.confirmIsWarning) #buttonConfirmOK {
  border-color:     var(--t-primary);
  background-color: var(--t-primary);
  color:            var(--t-primary-text);
  font-weight:      700;
}

body.theme-fresh #confirmMessage:not(.confirmIsWarning) #buttonConfirmOK:hover {
  background-color: var(--t-primary-hover);
  border-color:     var(--t-primary-hover);
}

/* !important because the shared .buttonRedColor uses it too */
body.theme-fresh #confirmMessage.confirmIsWarning #buttonConfirmOK {
  border-color:     var(--t-danger-fill) !important;
  background-color: var(--t-danger-fill) !important;
  color:            #ffffff !important;
  font-weight:      700;
}

body.theme-fresh #confirmMessage.confirmIsWarning #buttonConfirmOK:hover {
  background-color: var(--t-danger-fill-hover) !important;
}

/* Visible keyboard focus everywhere */
body.theme-fresh :focus-visible {
  outline:        2px solid var(--t-primary);
  outline-offset: 2px;
}

body.theme-fresh .sideMenuSection a:focus-visible {
  outline-offset: -2px;
}

/* ---------- Bottom of the side menu: log out and who makes it possible ---------- */

body.theme-fresh #menu .overflowYauto {
  flex:       1 1 auto;
  min-height: 0;
}

/* Log out: below the other items, a bit apart and in red */
body.theme-fresh .sideMenuLogout {
  margin-top: 14px;
}

body.theme-fresh #menuLogout,
body.theme-fresh #menuLogout::before {
  color: var(--t-danger);
}

body.theme-fresh #menuLogout::before {
  background-color: var(--t-danger);
}

body.theme-fresh #menuLogout:hover {
  background-color: var(--t-danger-soft);
}

/* Not part of the menu: after a thin line, small and quiet, not a menu item */
body.theme-fresh .poweredBy {
  display:         flex;
  align-items:     center;
  gap:             7px;
  margin:          18px 20px 0 20px;
  padding:         14px 0 16px 0;
  border-top:      1px solid var(--t-border);
  color:           var(--t-text-muted);
  font-size:       11.5px;
  text-decoration: none;
  white-space:     nowrap;
  opacity:         0.85;
}

body.theme-fresh .poweredBy:hover {
  color: var(--t-primary);
}

body.theme-fresh .poweredByMark {
  flex:             0 0 auto;
  width:            14px;
  height:           16px;
  background-color: currentColor;
  -webkit-mask:     var(--logo-icon) center / contain no-repeat;
  mask:             var(--logo-icon) center / contain no-repeat;
}

/* The 2FA popup (js/tweefactor.js) in the same look as the confirm popup */
body.theme-fresh #tweeFactorVenster .popupInner {
  top:           12vh;
  max-height:    calc(100% - 14vh);
  padding:       28px 28px 24px 28px;
  border:        none;
  border-radius: 16px;
  box-shadow:    0 20px 60px rgba(15, 23, 42, 0.3);
  font-size:     15px;
  line-height:   1.5;
}

body.theme-fresh #tweeFactorVenster .popupHeader {
  margin:      0 0 6px 0;
  padding:     0;
  color:       var(--t-text);
  font-family: var(--t-font-heading);
  font-size:   22px;
  text-align:  left;
}

body.theme-fresh #tweeFactorVenster #tfInhoud {
  padding: 0 !important;
}

body.theme-fresh #tweeFactorVenster label {
  display:     block;
  margin:      14px 0 6px 0;
  font-size:   13px;
  font-weight: 700;
}

body.theme-fresh #tweeFactorVenster .inputValueTable {
  box-sizing: border-box;
  width:      100%;
  min-height: 44px;
  margin:     4px 0 0 0;
}

body.theme-fresh #tweeFactorVenster a {
  color:           var(--t-primary);
  font-weight:     600;
  text-decoration: none;
}

body.theme-fresh #tweeFactorVenster a:hover {
  text-decoration: underline;
}

body.theme-fresh #tweeFactorVenster .buttonBlue {
  min-height: 40px;
  min-width:  96px;
  padding:    0 20px;
  font-size:  15px;
}

/* The gray buttons (Annuleren, Later, Kopiëren) become the quiet secondary button; templates.css gives them !important colors */
body.theme-fresh #tweeFactorVenster .buttonGrayColor {
  border-color:     var(--t-border) !important;
  background-color: var(--t-surface) !important;
  color:            var(--t-text) !important;
}

body.theme-fresh #tweeFactorVenster .buttonGrayColor:hover {
  background-color: var(--t-primary-soft) !important;
  color:            var(--t-primary) !important;
  box-shadow:       none;
}

body.theme-fresh #tweeFactorVenster .foutmelding {
  padding:          10px 12px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-danger-soft-2);
  color:            var(--t-danger-soft-text);
  font-size:        14px;
}

/* Popups follow the theme colors */
body.theme-fresh .popupInner {
  background-color: var(--t-surface);
  color:            var(--t-text);
}

/* ---------- Dark mode ---------- */

/* Set on <html> by the little script in the head (getThemeBootScript): the saved choice, else the setting of the system */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="dark"] body.theme-fresh {
  --t-primary:        #5aa3e0;
  --t-primary-hover:  #86bdee;
  --t-primary-soft:   #15304d;
  --t-primary-text:   #06182a;    /* text on a filled primary button */
  --t-hero:           linear-gradient(135deg, #4a98dd 0%, #6cb2ee 100%);
  --t-accent-soft:    #3a2c0d;
  --t-bg:             #0c1520;
  --t-surface:        #131e2c;
  --t-border:         #24364a;
  --t-text:           #e6edf5;
  --t-text-muted:     #9fb2c8;
  --t-danger:         #f87171;
  --t-shadow:         0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);

  --t-surface-2:        #192738;
  --t-line:             #1f3045;
  --t-skeleton:         #223349;
  --t-primary-border:   #1f4a75;
  --t-info-soft:        #12293f;
  --t-warn-soft:        #33280c;
  --t-notice-text:      #fbd38d;
  --t-danger-soft:      #3a1818;
  --t-danger-soft-2:    #3b1a1a;
  --t-danger-soft-text: #fca5a5;
  --t-row-yellow:       #2d290f;
  --t-row-orange:       #33240f;
  --t-row-green:        #12301f;
  --t-row-greendark:    #0f3822;
  --t-pill-yellow-bg:   rgba(245, 158, 11, 0.16);  --t-pill-yellow-fg:    #fbbf24;   /* tints of the signal color, not muddy brown-olive */
  --t-pill-orange-bg:   rgba(249, 115, 22, 0.17);  --t-pill-orange-fg:    #fb923c;
  --t-pill-green-bg:    rgba(34, 197, 94, 0.15);   --t-pill-green-fg:     #4ade80;
  --t-pill-greendark-bg:rgba(34, 197, 94, 0.36);   --t-pill-greendark-fg: #dcfce7;
  --t-pill-new-bg:      rgba(148, 163, 184, 0.17); --t-pill-new-fg:        #b9c6d2;
  --t-pill-plan-bg:     rgba(96, 165, 250, 0.17);  --t-pill-plan-fg:       #93c5fd;
}

/* A logo is made for a light background: in dark mode it sits on a light plate */
html[data-theme="dark"] body.theme-fresh .topBarAvatar.hasLogo img {
  padding:          3px 8px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-plate);
}

html[data-theme="dark"] body.theme-fresh ::placeholder {
  color: var(--t-text-muted);
}

/* The menu icon of the top bar is a dark drawing */
html[data-theme="dark"] body.theme-fresh .topBar .buttonMenu {
  filter: invert(1);
}

/* A dark popup on a dark page needs an edge */
html[data-theme="dark"] body.theme-fresh .popupInner,
html[data-theme="dark"] body.theme-fresh #formConfirm .popupInner,
html[data-theme="dark"] body.theme-fresh #tweeFactorVenster .popupInner {
  border: 1px solid var(--t-border);
}

/* ---------- Keuring aanvragen ---------- */

body.theme-fresh .avTypeList {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-top:     12px;
}

/* A keuringtype is a card you tick; the price is on the right, the extra text of the bedrijf below once it is ticked */
body.theme-fresh .avTypeCard {
  display:       grid;
  grid-template-columns: 22px 1fr;
  gap:           12px;
  align-items:   start;
  padding:       14px 16px;
  border:        1px solid var(--t-border);
  border-radius: var(--t-radius);
  background-color: var(--t-surface);
  cursor:        pointer;
  transition:    border-color 0.15s, background-color 0.15s;
}

body.theme-fresh .avTypeCard:hover {
  border-color: var(--t-primary);
}

body.theme-fresh .avTypeCard.avTypeGekozen {
  border-color:     var(--t-primary);
  background-color: var(--t-primary-soft);
}

body.theme-fresh .avTypeCard input {
  width:        18px;
  height:       18px;
  margin:       2px 0 0 0;
  accent-color: var(--t-primary);
}

body.theme-fresh .avTypeBody {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   2px 16px;
  min-width:             0;
}

body.theme-fresh .avTypeNaam {
  font-weight: 700;
}

body.theme-fresh .avTypePrijs {
  font-weight: 700;
  color:       var(--t-primary);
  white-space: nowrap;
}

body.theme-fresh .avTypeTekst {
  grid-column: 1 / -1;
  margin-top:  6px;
  font-size:   13px;
  line-height: 1.5;
  color:       var(--t-text-muted);
}

body.theme-fresh .avPrijsInfo {
  margin-bottom: 16px;
  padding:       12px 14px;
  border-radius: var(--t-radius-small);
  background-color: var(--t-surface-2);
  font-size:     14px;
  line-height:   1.5;
}

body.theme-fresh .avGroep {
  margin-top: 16px;
}

body.theme-fresh .avGroepTitel {
  display:       block;
  margin-bottom: 4px;
  font-size:     13px;
  font-weight:   700;
}

body.theme-fresh .avVerzondenActies {
  display:         flex;
  flex-wrap:       wrap;
  gap:             10px;
  justify-content: center;
  margin-top:      18px;
}

body.theme-fresh .avVerzondenActies .buttonBlue {
  margin-left: 0;
}

/* The public form for the klant itself, above the form */
body.theme-fresh .avDeel {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             10px 16px;
  margin-bottom:   16px;
  padding:         12px 16px;
  border:          1px solid var(--t-border);
  border-radius:   var(--t-radius);
  background-color: var(--t-surface-2);
  font-size:       14px;
  line-height:     1.5;
}

body.theme-fresh .avDeelKnoppen {
  display: flex;
  flex-wrap: wrap;
  gap:     8px;
}

body.theme-fresh .avDeelKnoppen .buttonBlue {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  box-sizing:      border-box;
  min-height:      38px;
  margin:          0;
  text-align:      center;
  text-decoration: none;
}

/* On a phone the three buttons are equally wide and tall, one under the other */
@media (max-width: 600px) {
  body.theme-fresh .avDeelKnoppen {
    flex-direction: column;
    width:          100%;
  }

  body.theme-fresh .avDeelKnoppen .buttonBlue {
    width: 100%;
  }
}

/* ---------- Public keuringsaanvraagformulier (keuringaanvragen/) ---------- */

/* A calm header with the logo and the name of the aanbrengbedrijf on the surface color, the form below it */
body.theme-fresh.pubPage {
  min-height: 100vh;
  margin:     0;
  padding:    0;
  background: var(--t-bg);
}

body.theme-fresh .pubHeader {
  position:         relative;
  padding:          28px 16px 22px 16px;
  border-bottom:    1px solid var(--t-border);
  background-color: var(--t-surface);
  text-align:       center;
}

body.theme-fresh .pubBrand {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             12px;
  min-height:      44px;
}

body.theme-fresh .pubLogo {
  display:    block;
  height:     44px;
  width:      auto;
  max-width:  180px;
  object-fit: contain;
}

/* A logo is made for a light background: in dark mode it sits on a light plate */
html[data-theme="dark"] body.theme-fresh .pubLogo {
  box-sizing:       border-box;
  padding:          5px 10px;
  border-radius:    var(--t-radius-small);
  background-color: var(--t-plate);
}

body.theme-fresh .pubNaam {
  font-family: var(--t-font-heading);
  font-size:   28px;
  font-weight: 400;
  line-height: 1.2;
  color:       var(--t-text);
}

/* The name of the keuringsbedrijf links to its website, but is not shown as a text link */
body.theme-fresh .pubNaam a {
  color:           inherit;
  text-decoration: none;
}

body.theme-fresh .pubNaam a:hover {
  text-decoration: underline;
}

body.theme-fresh .pubIntro {
  max-width:   720px;
  margin:      10px auto 0 auto;
  font-size:   15px;
  line-height: 1.5;
  color:       var(--t-text-muted);
}

body.theme-fresh .pubIntro a {
  color: var(--t-primary);
}

body.theme-fresh .pubMain {
  box-sizing: border-box;
  max-width:  720px;
  margin:     28px auto 0 auto;
  padding:    0 16px 40px 16px;
}

body.theme-fresh .pubMain .formSaveBar {
  margin:  0;
  padding: 12px 0;
}

body.theme-fresh .pubAkkoord {
  margin-top:  4px;
  font-size:   14px;
  line-height: 1.5;
}

/* Language switch: a clear pill with both languages, top right in the header */
body.theme-fresh .pubTaal {
  position:         absolute;
  top:              14px;
  right:            max(16px, calc(50% - 344px));
  display:          flex;
  padding:          3px;
  border:           1px solid var(--t-border);
  border-radius:    999px;
  background-color: var(--t-surface-2);
  font-size:        13px;
  font-weight:      500;
}

body.theme-fresh .pubTaal a {
  padding:         5px 12px;
  border-radius:   999px;
  color:           var(--t-text-muted);
  text-decoration: none;
}

body.theme-fresh .pubTaal a:hover {
  color: var(--t-text);
}

body.theme-fresh .pubTaal a.actief {
  background-color: var(--t-primary);
  color:            var(--t-primary-text);
  font-weight:      700;
}

@media (max-width: 640px) {
  /* On a phone the switch has its own line above the name */
  body.theme-fresh .pubTaal {
    position: static;
    width:    fit-content;
    margin:   0 auto 14px auto;
  }

  body.theme-fresh .pubNaam {
    font-size: 24px;
  }
}

/* ---------- Vergoedingen: totals above the list ---------- */

/* Same side margin as the table below it (.panelTableOverflow), and lighter cards than the overview: flat, smaller */
body.theme-fresh .vergoedingenTotalen {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap:                   12px;
  margin:                4px 20px 16px 20px;
}

body.theme-fresh .vergoedingenTotalen .statCard {
  padding:    14px 16px;
  box-shadow: none;
}

body.theme-fresh .vergoedingenTotalen .statCardValue {
  margin-top:  4px;
  font-size:   22px;
  font-weight: 600;
  color:       var(--t-text);
}

body.theme-fresh .vergoedingenTotalen .statCardLabel {
  margin-top: 0;
  font-size:  13px;
}

body.theme-fresh .vergoedingenTotalen .statCardSub {
  flex-direction: row;
  flex-wrap:      wrap;
  gap:            0 6px;
  align-items:    baseline;
  margin-top:     8px;
  padding-top:    0;
  border-top:     none;
  font-size:      13px;
}

body.theme-fresh .vergoedingenTotalen .statCardSubValue {
  font-size:   13px;
  font-weight: 500;
  color:       var(--t-text-muted);
}

/* The total: only a hint of color */
body.theme-fresh .vergoedingenTotalen .statCard.statCardTotal {
  background-color: var(--t-surface);
  border-color:     var(--t-primary-border);
}

body.theme-fresh .vergoedingenTotalen .statCardTotal .statCardValue {
  color: var(--t-primary);
}

@media (max-width: 700px) {
  body.theme-fresh .vergoedingenTotalen {
    margin: 4px 10px 14px 10px;
  }
}

/* ---------- iFrame formulier page ---------- */

body.theme-fresh .ifStappen {
  margin:       14px 0 0 0;
  padding:      0;
  list-style:   none;
  counter-reset: stap;
}

body.theme-fresh .ifStappen li {
  display:     flex;
  gap:         12px;
  align-items: flex-start;
  margin:      0 0 10px 0;
  counter-increment: stap;
}

body.theme-fresh .ifStappen li::before {
  content:          counter(stap);
  flex:             0 0 auto;
  display:          flex;
  align-items:      center;
  justify-content:  center;
  width:            24px;
  height:           24px;
  border-radius:    50%;
  background-color: var(--t-primary-soft);
  color:            var(--t-primary);
  font-size:        13px;
  font-weight:      700;
}

body.theme-fresh .ifStappen li > span {
  padding-top: 2px;
}

body.theme-fresh .ifCodeKop {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   6px;
}

body.theme-fresh .ifCodeKop label {
  font-size:   13px;
  font-weight: 700;
}

body.theme-fresh .buttonBlue.ifKlein {
  min-height: 32px;
  padding:    4px 14px;
  font-size:  13px;
  margin-left: 0;
}

body.theme-fresh textarea.ifCode {
  width:            100%;
  box-sizing:       border-box;
  background-color: var(--t-surface-2);
  font-family:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:        12.5px;
  line-height:      1.5;
  resize:           vertical;
}

body.theme-fresh .noticeBlock.ifLet {
  margin:    14px 0 0 0;
  font-size: 13px;
  line-height: 1.5;
}

body.theme-fresh .ifActies {
  display:    flex;
  flex-wrap:  wrap;
  gap:        8px;
  margin-top: 12px;
}

body.theme-fresh .buttonBlue.buttonSecondary.buttonDanger {
  border-color: var(--t-border);
  color:        var(--t-danger);
}

body.theme-fresh .buttonBlue.buttonSecondary.buttonDanger:hover {
  background-color: var(--t-danger-soft);
  border-color:     var(--t-danger);
  box-shadow:       none;
}

body.theme-fresh .ifVoorbeeld {
  margin-top:    14px;
  overflow:      hidden;
  border:        1px solid var(--t-border);
  padding:       12px 16px;
  border-radius: var(--t-radius-small);
  background-color: #ffffff;   /* the form is made for a white page */
}

body.theme-fresh .ifVoorbeeld iframe {
  display: block;
  width:   100%;
}

/* ---------- Keuringen list as cards on a phone ---------- */

@media (max-width: 600px) {
  body.theme-fresh #table_data,
  body.theme-fresh #table_data tbody {
    display: block;
    width:   100%;
  }

  body.theme-fresh #table_data thead {
    display: none;
  }

  /* One card per keuring: address and date on top, type and customer under it, then the status and the premium */
  body.theme-fresh #table_data tbody tr {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap:                   2px 12px;
    align-items:           center;
    margin-bottom:         10px;
    padding:               12px 14px;
    border:                1px solid var(--t-border);
    border-radius:         var(--t-radius-small);
    background-color:      var(--t-surface);
  }

  body.theme-fresh #table_data tbody tr td {
    display:    block;
    max-width:  none;
    padding:    0;
    border:     0;
    background: none;
    overflow:   hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  body.theme-fresh #table_data tbody tr td:nth-child(2)  { grid-column: 1; grid-row: 1; font-size: 15px; }
  body.theme-fresh #table_data tbody tr td:nth-child(5)  { grid-column: 2; grid-row: 1; color: var(--t-text-muted); font-size: 12px; }
  body.theme-fresh #table_data tbody tr td:nth-child(3)  { grid-column: 1 / -1; grid-row: 2; color: var(--t-text-muted); font-size: 13px; }
  body.theme-fresh #table_data tbody tr td:nth-child(4)  { grid-column: 1 / -1; grid-row: 3; color: var(--t-text-muted); font-size: 13px; }
  body.theme-fresh #table_data tbody tr td:nth-child(1)  { grid-column: 1; grid-row: 4; margin-top: 8px; }
  body.theme-fresh #table_data tbody tr td:nth-child(8)  { grid-column: 2; grid-row: 4; margin-top: 8px; font-size: 13px; }
  body.theme-fresh #table_data tbody tr td:nth-child(6),
  body.theme-fresh #table_data tbody tr td:nth-child(7),
  body.theme-fresh #table_data tbody tr td:nth-child(9),
  body.theme-fresh #table_data tbody tr td:nth-child(10),
  body.theme-fresh #table_data tbody tr td:nth-child(11) { display: none; }

  body.theme-fresh #table_data tbody tr.trSelected {
    border-color: var(--t-primary);
    background-color: var(--t-primary-soft);
    box-shadow: inset 3px 0 0 var(--t-primary);
  }

  body.theme-fresh .data_table tr.trSelected td:first-child { box-shadow: none; }

  /* The placeholder rows while loading: just two bars */
  body.theme-fresh #table_data tbody tr.skeletonRow td:nth-child(n+3) { display: none; }
  body.theme-fresh #table_data tbody tr.skeletonRow td:nth-child(1) { grid-column: 1; grid-row: 2; }
  body.theme-fresh #table_data tbody tr.skeletonRow td:nth-child(2) { grid-column: 1; grid-row: 1; }
}

/* On a phone the two buttons of the welcome banner are equally wide and tall, one under the other */
@media (max-width: 600px) {
  body.theme-fresh .dashHeroActions {
    flex-direction: column;
    width:          100%;
  }

  body.theme-fresh .dashHeroActions .buttonBlue {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    box-sizing:      border-box;
    width:           100%;
    min-height:      44px;
    margin:          0;
    text-align:      center;
    text-decoration: none;
  }
}

/* A short explanation under a checkbox of the preferences */
body.theme-fresh .formCheck:has(.formCheckHint) {
  align-items: flex-start;
}

body.theme-fresh .formCheckHint {
  display:    block;
  margin-top: 2px;
}

/* A table in a card is as wide as the text and the code boxes in that card (no side padding of the page tables) */
body.theme-fresh .formCard .panelTableOverflow {
  padding-left:  0;
  padding-right: 0;
}

/* Contacts in the bottom panel of Keuringen: on a phone every contact is a small block, so the panel does not scroll sideways */
@media (max-width: 600px) {
  body.theme-fresh .contactTable,
  body.theme-fresh .contactTable tbody,
  body.theme-fresh .contactTable tr,
  body.theme-fresh .contactTable td {
    display: block;
    width:   auto;
  }

  body.theme-fresh .contactTable thead {
    display: none;
  }

  body.theme-fresh .contactTable tr {
    padding:       10px 14px;
    border-bottom: 1px solid var(--t-border);
  }

  body.theme-fresh .contactTable td {
    padding:       1px 0;
    border:        0;
    max-width:     none;
    white-space:   normal;
    overflow-wrap: anywhere;
  }

  /* First line: "KLANT  Naam" */
  body.theme-fresh .contactTable td:nth-child(1),
  body.theme-fresh .contactTable td:nth-child(2) {
    display: inline;
  }

  body.theme-fresh .contactTable td:nth-child(1) {
    margin-right:   8px;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:          var(--t-text-muted);
  }

  body.theme-fresh .contactTable td:nth-child(2) {
    font-weight: 600;
  }

  /* Last line: Bevestiging: Ja   Afspraak: Ja ... */
  body.theme-fresh .contactTable td:nth-child(n+5) {
    display:      inline-block;
    margin:       4px 14px 0 0;
    font-size:    13px;
  }

  body.theme-fresh .contactTable td:nth-child(n+5)::before {
    color: var(--t-text-muted);
  }

  body.theme-fresh .contactTable td:nth-child(5)::before { content: 'Bevestiging: '; }
  body.theme-fresh .contactTable td:nth-child(6)::before { content: 'Afspraak: '; }
  body.theme-fresh .contactTable td:nth-child(7)::before { content: 'Rapportage: '; }
  body.theme-fresh .contactTable td:nth-child(8)::before { content: 'Factuur: '; }
}

/* ---------- Small chart of the last 12 months in a stat card (Overzicht and Vergoedingen) ---------- */

/* Number and label on the left, the chart on the right, centred on the height of that number and label */
body.theme-fresh .statCardRij {
  display:         flex;
  flex-wrap:       wrap;   /* a narrow card (a phone) puts the chart under the number instead of over the card edge */
  align-items:     center;
  justify-content: space-between;
  gap:             8px 12px;
}

/* The text takes the free room, so the chart sits at the right edge next to it. When the chart wraps to its own line
   (a narrow card) nothing is left to take and the auto margins centre it. */
body.theme-fresh .statCardRij > :first-child {
  flex: 1 1 auto;
}

body.theme-fresh .maandSpark {
  display:     flex;
  align-items: stretch;
  flex-shrink: 0;
  width:       72px;
  height:      34px;
  margin:      0 auto;
}

/* The whole cell is the hover area of a bar, the bar itself is a bit narrower than the cell */
body.theme-fresh .sparkVak {
  display:         flex;
  flex:            1 1 0;
  align-items:     flex-end;
  justify-content: center;
  min-width:       0;
}

body.theme-fresh .sparkStaaf {
  display:       block;
  width:         68%;
  border-radius: 1px;
  background:    var(--t-primary);
  opacity:       .75;
}

/* The running month is not complete yet: lighter */
body.theme-fresh .sparkHuidig .sparkStaaf {
  opacity: .35;
}

body.theme-fresh .sparkVak:hover .sparkStaaf {
  opacity: 1;
}

/* ---------- Vergoedingen: link to the factuur ---------- */

/* A quiet action instead of an underlined text: document icon, "Factuur" and an arrow out (it opens in a new tab) */
body.theme-fresh .factuurLink {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  margin:          -4px -10px;
  padding:         4px 10px;
  border-radius:   var(--t-radius-small);
  color:           var(--t-primary);
  font-weight:     500;
  text-decoration: none;
}

body.theme-fresh .factuurLink::before,
body.theme-fresh .factuurLink::after {
  content:          "";
  flex-shrink:      0;
  width:            16px;
  height:           16px;
  background-color: currentColor;
  -webkit-mask:     var(--factuur-icon) center / contain no-repeat;
  mask:             var(--factuur-icon) center / contain no-repeat;
}

body.theme-fresh .factuurLink::before {
  --factuur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
}

body.theme-fresh .factuurLink::after {
  --factuur-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E");
  width:   13px;
  height:  13px;
  opacity: .7;
}

body.theme-fresh .factuurLink:hover {
  background-color: var(--t-primary-soft);
}

/* On a phone every factuur is a card: date and company on top, the three amounts under each other, then the link */
@media (max-width: 600px) {
  body.theme-fresh #table_vergoedingen,
  body.theme-fresh #table_vergoedingen tbody {
    display: block;
    width:   100%;
  }

  body.theme-fresh #table_vergoedingen thead {
    display: none;
  }

  body.theme-fresh #table_vergoedingen tbody tr {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap:                   4px 12px;
    align-items:           center;
    margin-bottom:         10px;
    padding:               12px 14px;
    border:                1px solid var(--t-border);
    border-radius:         var(--t-radius-small);
    background-color:      var(--t-surface);
  }

  body.theme-fresh #table_vergoedingen tbody tr td {
    display:       block;
    padding:       0;
    border:        0;
    background:    none;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
  }

  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(2) { grid-column: 1; grid-row: 1; font-size: 15px; font-weight: 600; }
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(1) { grid-column: 2; grid-row: 1; color: var(--t-text-muted); font-size: 12px; }

  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(3),
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(4),
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(5) {
    display:         flex;
    grid-column:     1 / -1;
    justify-content: space-between;
    color:           var(--t-text-muted);
    font-size:       13px;
    text-align:      right;
  }

  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(3) { grid-row: 2; margin-top: 6px; }
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(4) { grid-row: 3; }
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(5) { grid-row: 4; color: var(--t-text); font-size: 15px; font-weight: 600; }

  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(3)::before { content: 'Bedrag excl. BTW'; }
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(4)::before { content: 'BTW'; }
  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(5)::before { content: 'Bedrag incl. BTW'; font-weight: 400; color: var(--t-text-muted); font-size: 13px; }

  body.theme-fresh #table_vergoedingen tbody tr td:nth-child(6) { grid-column: 1 / -1; grid-row: 5; margin-top: 6px; }

  /* The placeholder rows while loading: two bars */
  body.theme-fresh #table_vergoedingen tbody tr.skeletonRow td:nth-child(n+3) { display: none; }
  body.theme-fresh #table_vergoedingen tbody tr.skeletonRow td:nth-child(1) { grid-column: 1; grid-row: 2; }
  body.theme-fresh #table_vergoedingen tbody tr.skeletonRow td:nth-child(2) { grid-column: 1; grid-row: 1; }
}