/* =============================================================================
   IMPACT RAPPORTER — app.css
   Structure:
     1.  :root — Design tokens
         1a. Brand & palette
         1b. Table colours        (_company_table, _quarter_table, _full_year_table)
         1c. Surfaces & neutrals  (base.html / global)
         1d. State colours        (global)
         1e. Sizing & spacing     (global)
         1f. Typography           (global)
         1g. Settings modal dims  (_settings_modal)
     2.  Global reset & base
     3.  Layout — header / footer / main (base.html)
     4.  Layout — page sections & cards  (global)
     5.  Forms & inputs               (login.html, _settings_modal)
     6.  Buttons & links              (global)
     7.  Tables                       (_company_table, _quarter_table, _full_year_table)
     8.  Company selector & search    (index.html)
     9.  View switcher                (index.html)
    10.  Settings modal & accordion   (_settings_modal, _multiplier_inputs)
    11.  Quick-edit (qe-*)            (_settings_modal)
    12.  Tooltips                     (_quarter_table, _company_type_table)
    13.  PDF buttons                  (_company_table, _quarter_table, _full_year_table)
    14.  Utility                      (global)
    15.  Motion preference            (global)
   ============================================================================= */


/* =============================================================================
   1. :root — Design tokens
   ============================================================================= */
:root {

  /* --- 1a. Brand & palette --- */
  --main-colour:    #39B5FF;   /* primary brand blue */
  --corporate-green:    #8CD853;   /* green accent */
  --support-colour:    #336599;   /* muted support blue */

  /* --- 1b. Table colours (_company_table, _quarter_table, _full_year_table) --- */
  --table-left:    rgba(0, 157, 224, 0.2);  /* left-column background tint */
  --left_column-text: var(--text);            /* left-column text colour */

  /* --- 1c. Surfaces & neutrals (global / base.html) --- */
  --surface:       #fafaf8;   /* page background */
  --surface-2:     #ffffff;   /* card / input background */
  --border:        #d7dee7;
  --border-strong: #c4ccd8;
  --text:          #1f2937;
  --text-muted:    #556274;
  --datac:         #0f2940;   /* dark navy — table header bg fallback */

  --chain: #000;
  /* --chainglow: #5fa832; */
  --chainglow: var(--main-colour);

  --check:  var(--support-colour);

  /* --- 1d. State colours (global) --- */
  --danger:  #d93025;
  --focus:   rgba(57, 181, 255, .35);

  /* --- 1e. Sizing & spacing (global) --- */
  --radius:    10px;
  --radius-sm: 8px;

  --shadow-xs: 0 1px 2px  rgba(17, 24, 39, .05);
  --shadow-sm: 0 2px 4px  rgba(17, 24, 39, .08);
  --shadow:    0 8px 18px rgba(17, 24, 39, .12);
  --shadow-md: 0 12px 28px rgba(17, 24, 39, .15);
  --shadow-lg: 0 18px 48px rgba(17, 24, 39, .18);

  --qt-row1-h: 56px;

  --h:     44px;   /* standard input / button height */
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 20px;
  --gap-5: 24px;

  /* --- 1f. Typography (global) --- */
  --font-heading: 'League Spartan', sans-serif;
  --font-body:    'Montserrat', sans-serif;

  --text-xs: clamp(10px, 0.9vw, 14px);
  --text-sm: clamp(0.75rem, 0.8vw,  0.9rem);
  --text-md: clamp(0.90rem, 1.0vw,  1.1rem);
  --text-lg: clamp(1.00rem, 1.2vw,  1.4rem);

  /* --- 1g. Settings modal dimensions (_settings_modal) --- */
  --settings-box-wdth:      clamp(80px,  10vw, 160px);
  --settings-box-lngth:     clamp(20px,  4vh,   30px);
  --settings-modal-wdth:    auto;
  --settings-modal-lngth:   auto;


}


/* =============================================================================
   2. Global reset & base
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .header-title {
  font-family: var(--font-heading) clamp(30px, 4vh, 50px);
  letter-spacing: .6px;
}

h2, h3 { text-transform: none; }


/* =============================================================================
   3. Layout — header / footer / main  (base.html)
   ============================================================================= */
header, footer {
  background: var(--surface);
  color: var(--text);
  border: 0;
  box-shadow: 0 1px 0 rgba(17, 24, 39, .06);
  padding: 12px var(--gap-4);
  flex-shrink: 0;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)),
                    linear-gradient(45deg, var(--support-colour) 0%, var(--corporate-green) 90%);
}

/* Remove margin-left: auto from logo, give it a fixed left push from the title */
.header-logo {
    height: 38px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    margin-left: var(--gap-4);   /* ← was: margin-left: auto */
}

/* This now absorbs all leftover space, pushing actions to the far right */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--gap-3);
    margin-left: auto;           /* ← add this */
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  top: 0;
  z-index: 50;

  border-top: 4px solid var(--corporate-green);
  box-shadow: var(--shadow-sm);
}

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-3);
  border-top: 1px solid var(--border);
  margin-top: auto;

  color: var(--surface);
}

.header-title {
  font-size: 18px;
  letter-spacing: .2px;
  text-transform: none;
  color: #ffffff;
}

.footer-logo {
  height: 50px;
  width: auto;
  max-width: 100%;
}

/* Main content area */
.content {
  padding: var(--gap-5) var(--gap-4);
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

@media (max-width: 900px) {
  .content { padding: var(--gap-4) var(--gap-3); }
}


/* =============================================================================
   4. Layout — page sections & cards  (global, login.html)
   ============================================================================= */
section, .login-frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

section {
  padding: var(--gap-5);
  margin-bottom: var(--gap-4);
}

section, .data-table { background: var(--surface-2); }

/* Data table card (_company_table, _quarter_table, _full_year_table) */
.data-table {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--gap-5);
  margin-bottom: 0 !important;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius);
}

/* Login frame (login.html) */
.login-frame {
  overflow: hidden;
  width: 30%;
}

/* Table container (index.html) */
#tableContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--radius);
  background: transparent;
  box-shadow: none;
}

/* Two-column flex wrapper used around table container */
.dtable {
  display: flex;
  gap: var(--gap-4);
  align-items: stretch;
}


/* =============================================================================
   5. Forms & inputs  (login.html, _settings_modal)
   ============================================================================= */
form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-3);
  align-items: flex-end;
}

.form-group {
  margin-bottom: 0;
  flex: 1 1 260px;
  min-width: 220px;
}

label {
  display: inline-block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 6px;
}

.help {
  margin-top: 6px;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

input[type="search"],
input[type="email"],
input[type="password"],
input[type="text"],
select,
.form-control {
  box-shadow: var(--shadow-xs);
  width: 100%;
  height: var(--h);
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input::placeholder { color: #a88a8a; }

input:hover,
select:hover  { border-color: #9aa8bb; }

input:focus,
select:focus  {
  outline: none !important;
  border-color: var(--main-colour);
  box-shadow: 0 0 0 4px var(--focus);
}

input:disabled,
select:disabled {
  background: #f1f3f6;
  color: #8a97a8;
  cursor: not-allowed;
}

.is-invalid {
  border-color: rgba(217, 48, 37, .7) !important;
  box-shadow: 0 0 0 4px rgba(217, 48, 37, .18) !important;
}

.error-text {
  margin-top: 6px;
  font-size: 12px;
  color: var(--danger);
}


/* =============================================================================
   6. Buttons & links  (global)
   ============================================================================= */
button, .btn, a {
  height: var(--h);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  letter-spacing: .02em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  text-transform: none;
  transition: transform .05s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

button:active { transform: translateY(1px); }

/* Primary */
.btn-primary,
button[type="submit"],
.filters-submit {
  background: var(--main-colour);
  color: #062033;
  box-shadow: 0 4px 12px rgba(57, 181, 255, .25);
}

.btn-primary:hover,
button[type="submit"]:hover,
.filters-submit:hover { filter: brightness(.95); }

.btn-primary:focus,
button[type="submit"]:focus,
.filters-submit:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px var(--focus);
}

/* Secondary */
.btn-secondary {
  background: #ffffff;
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
}

.btn-secondary:hover {
  background: #f6f7f9;
  border-color: #9aa8bb;
}

/* Danger / logout */
.logout-btn,
.btn-danger {
  background: var(--support-colour);
  color: var(--surface-2);
  border: 1px solid var(--datac);
  height: var(--h);
  padding: 0 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logout-btn:hover,
.btn-danger:hover {
  background: rgba(0, 0, 0, 0.67);
}

/* Back-to-company link (inside table views) */
.back-to-company {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  border: none;
  background: none;
  padding: 0;
  transition: color 0.2s;
}

.back-to-company:hover { color: var(--support-colour); }


/* =============================================================================
   7. Tables  (_company_table, _quarter_table, _full_year_table)
   ============================================================================= */

/* Scroll wrapper */
.table-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  width: fit-content;
  min-width: 400px;
  max-width: 100%;
  max-height: 75vh;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  scroll-behavior: smooth;
}

table {
  width: auto;
  min-width: 100%;
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #f8f9fa;
}

/* Cell sizing */
th, td, .total-cell {
  font-size: clamp(16px, 1.2vw, 18px);
  padding: clamp(12px, 1vw, 18px) clamp(12px, 1.5vw, 20px);
  border-bottom: 1px solid #eef2f7;
  text-align: left !important;
  max-width: 40%;
}

/* First column */
th:first-child,
td:first-child {
  width: clamp(140px, 15vw, 200px);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Data columns */
th:not(:first-child),
td:not(:first-child) { min-width: 100px; }

/* data-table: limit first th width */
.data-table th:first-child {
  min-width: 180px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Header */
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--support-colour);
  color: #ffffff;
  text-transform: none;
  font-family: var(--font-heading);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* Body left column */
tbody th {
  background-color: var(--table-left);
  color: var(--left_column-text);
  position: relative;
  z-index: 0;
}

/* Zebra rows */
tbody tr:nth-child(even) { background: rgba(57, 181, 255, 0.04); }
tbody tr:hover           { background: rgba(57, 181, 255, 0.08); }

/* Footer totals */
tfoot {
  position: sticky;
  bottom: 0;
  z-index: 2;
}

.total-row th,
.total-row td {
  background: var(--support-colour);
  color: var(--surface);
  font-weight: 700;
  font-family: var(--font-heading);
  border-bottom: none;
}

/* Category link (clickable row label) */
.category-link {
  cursor: pointer;
  color: var(--surface);
  font-weight: 700;
}

.category-link:hover {
  color: var(--corporate-green-t1);
  text-decoration: underline;
}

/* Table header row (title + buttons above table) */
.table-header-row {
  display: flex;
  gap: var(--gap-3);
  align-items: center;
  margin-bottom: var(--gap-3);
}

/* Quarter table (_quarter_table) */
.quarter-table th:not(:first-child),
.quarter-table td:not(:first-child) {
  width: 1%;
  white-space: nowrap;
}

/* Hide the checkbox */
.qt-header-link-toggle {
  display: none;
}

/* Default (unlinked): only row 2 is sticky */
.quarter-table .thead-row1 th {
  position: static;
}

.quarter-table .thead-row2 th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--support-colour);
}

/* Linked: both rows sticky, row 1 on top */
.qt-header-link-toggle:checked ~ table .thead-row1 th {
  position: static;
  top: 0;
  z-index: 4;
  background: var(--support-colour);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 0px 0 0 var(--support-colour);
}

.qt-header-link-toggle:checked ~ table .thead-row2 th {
  top: var(--qt-row1-h, 56px);
  z-index: 3;
  border-top: none;
  box-shadow: none;
  position: static;
}

/* Border cleanup between rows */
.quarter-table .thead-row1 th {
  position: static;
  border-bottom: none;
  padding-top: clamp(6px, 0.5vw, 10px);
  padding-bottom: clamp(6px, 0.5vw, 10px);
}

.quarter-table .thead-row2 th {
  border-top: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Dot toggle button */
.qt-link-dot {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: 2px solid rgba(255, 255, 255, 0.5);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 6px;
  vertical-align: middle;
  transition: background 0.15s ease, border-color 0.15s ease;
  overflow: visible; /* allow pseudo chain lines to escape */
}

.qt-link-dot:hover {
  background: rgba(255, 255, 255, 0.5);
}

/* Linked dot state */
.qt-header-link-toggle:checked ~ table .qt-link-dot {
  background: var(--chain);
  border-color: var(--chainglow);
}

/* Chain line DOWN from row 1 dot */
.qt-header-link-toggle:checked ~ table .thead-row1 .qt-link-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 2px;
  /* tall enough to bridge the gap to row 2 — 
     row 1 padding-bottom + row 2 padding-top ≈ 36px at desktop */
  height: 40px;
  background: var(--chain);
  z-index: 10;
}

/* Chain line UP from row 2 dot */
.qt-header-link-toggle:checked ~ table .thead-row2 .qt-link-dot::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: 40px;
  background: var(--chain);
  z-index: 10;
}

/* Row 2 apparaat cell: ALWAYS visible — row 2 is always the sticky row */
.quarter-table .thead-row2 th.apparaat-cell {
  color: #ffffff;
  font-size: inherit;
  user-select: auto;
}



/* Show it again when linked */
.qt-header-link-toggle:checked ~ table .thead-row2 th.apparaat-cell {
  color: #ffffff;
  font-size: inherit;
  user-select: auto;
}

.qt-header-link-toggle:checked ~ table thead {
  position: sticky;
  top: 0;
  z-index: 4;
}


/* Placeholder when no table is loaded (index.html) */
.table-placeholder {
  color: var(--text-muted);
  font-size: clamp(30px, 3vh, 40px);
  font-style: italic;
  padding: var(--gap-4);
  text-align: center;
  user-select: none;
}

/* Alert (multiplier warning in tables) */
.alert-warning {
  background: rgba(255, 131, 57, 0.1);
  border: 1px solid rgba(255, 131, 57, 0.4);
  border-left: 4px solid var(--support-colour);
  border-radius: var(--radius-sm);
  padding: var(--gap-3) var(--gap-4);
  color: var(--text);
  font-size: 14px;
  margin-bottom: var(--gap-3);
}


/* =============================================================================
   8. Company selector & search  (index.html)
   ============================================================================= */
.company-selector-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 4px solid var(--support-colour);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--gap-4);
  margin-bottom: var(--gap-4);
  flex-shrink: 0;
  position: relative;
}

.selector-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-5);
  flex-wrap: wrap;
}

/* Company search input wrapper */
.search-wrapper {
  position: relative;
  width: 30%;
  max-width: 450px;
  min-width: 350px;
}

.search-wrapper input { width: 100%; }

/* Company dropdown */
.company-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 30vh;
  min-height: 100px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  box-shadow: 0 4px 12px rgba(17, 24, 39, .15);
  z-index: 300;
  padding: var(--gap-1);
}

.company-dropdown[hidden] { display: none; }

.company-dropdown .company-item { margin-bottom: 4px; }

.company-dropdown .company-item.is-active {
  background: #005b9c;
  border-color: var(--main-colour);
}

/* Company item button */
.company-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: 12px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--datac);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: var(--datac);
  overflow: hidden;
}

.company-item[hidden]  { display: none !important; }

.company-item:hover {
  background: #005b9c;
  border-color: var(--main-colour);
  color: #ffffff;
}

.company-item.active {
  background: var(--support-colour);
  border-left: 4px solid var(--main-colour);
  color: #ffffff;
}

/* Year buttons (full-year overview) */
.year-dropdown {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-height: none;
  border-top: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.report-year-item {
  min-width: 90px;
  background: #fff;
  border: 1px solid var(--datac);
  color: var(--datac);
}

.report-year-item:hover,
.report-year-item.active {
  background: #005b9c;
  border-color: var(--main-colour);
  color: #fff;
}

/* Year select wrappers (kwartalen / jaaroverzicht) */
.year-select-wrapper label { font-size: var(--text-sm); }


/* =============================================================================
   9. View switcher  (index.html)
   ============================================================================= */
.view-switcher-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.view-switcher-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}

.view-switcher {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.view-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  height: auto;
  padding: 0;
  border: none;
  background: none;
  margin-bottom: 0;
  line-height: 1;
}

.view-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 2px solid var(--border-strong);
  border-radius: 3px;
  background: var(--surface-2);
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background .15s ease;
}

.view-option input[type="radio"]:checked {
  background: #ffffff;
  border-color: var(--check);
}

.view-option input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: 2px solid var(--check);
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.view-option input[type="radio"]:focus-visible {
  outline: 2px solid var(--main-colour);
  outline-offset: 2px;
}

.view-option:focus-within { outline: none; }

.view-switcher-wrapper[hidden] { display: none !important; }
/* =============================================================================
   9b. Ranking toggle switch  (index.html)
   ============================================================================= */

.ranking-toggle-wrapper {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ranking-toggle-wrapper > label:first-child {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0;
}

/* Track */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

/* Hide the native checkbox visually but keep it accessible */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* Pill track */
.slider {
  position: absolute;
  inset: 0;
  background: var(--border-strong);
  border-radius: 24px;
  transition: background 0.2s ease;
  cursor: pointer;
}

/* Knob */
.slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 50%;
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease;
}

/* Checked state — track turns brand blue, knob slides right */
.switch input:checked + .slider {
  background: var(--support-colour);
}

.switch input:checked + .slider::before {
  transform: translateY(-50%) translateX(20px);
}

/* Focus ring on the hidden input, shown via the sibling slider */
.switch input:focus-visible + .slider {
  outline: 2px solid var(--main-colour);
  outline-offset: 2px;
}

.switch[hidden] { display: none !important; }
.ranking-toggle-wrapper[hidden] { display: none !important; }
/* .ranking-toggle-wrapper[hidden] { display: none !important; } */

/* =============================================================================
   10. Settings modal & accordion  (_settings_modal, _multiplier_inputs)
   ============================================================================= */

/* Settings button in header (index.html) */
.settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.8);
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.settings-btn:hover  { background: rgba(255, 255, 255, 0.1); }

.settings-btn:focus  {
  outline: 2px solid var(--main-colour);
  outline-offset: 2px;
}

.settings-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.settings-btn-wrapper label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0;
  font-weight: 600;
  cursor: pointer;
}

/* Modal backdrop */
#settingsModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#settingsModal[hidden] { display: none; }

/* Modal panel */
.settings-modal-content {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  max-width: 90vw;
  width: var(--settings-modal-wdth);
  max-height: 90vh;
  height: var(--settings-modal-lngth);
  overflow-y: auto;
  padding: 2vw;
}

.settings-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--gap-4);
}

.settings-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--text);
}

.settings-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--text-muted);
  padding: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .15s ease;
}

.settings-modal-close:hover {
  color: var(--text);
  background: var(--surface-2);
}

.settings-modal-close:focus {
  outline: 2px solid var(--main-colour);
  outline-offset: 2px;
}

.settings-modal-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0 0 var(--gap-4) 0;
  line-height: 1.5;
  border-left: 3px solid var(--main-colour);
  padding-left: var(--gap-2);
}

.settings-modal-body {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

/* Accordion items (_multiplier_inputs) */
.settings-device-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
  /* padding: var(--gap-3);  
  margin-bottom: var(--gap-3); */
}

/* Restore padding for content inside the accordion that isn't .settings-fields */
.settings-device-group > .settings-group {
    padding: 0 var(--gap-4);
}

.settings-device-group > hr {
    margin: 0 var(--gap-3);
    border: none;
    border-top: 1px solid var(--border);
}

.settings-device-group > .settings-actions {
    padding: var(--gap-3) var(--gap-4) var(--gap-4);
}

.settings-device-group[open] {
  box-shadow: var(--shadow-sm);
  border-color: var(--support-colour);
}

.settings-device-group[hidden] { display: none !important; }

.settings-device-summary {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  padding: var(--gap-3) var(--gap-4);
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--text);
  background: var(--surface);
  cursor: pointer;
  list-style: none;
  user-select: none;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, color 0.15s ease;
}

.settings-device-summary::-webkit-details-marker { display: none; }

.settings-device-summary::after {
  content: '\F285';
  font-family: 'Bootstrap Icons';
  margin-left: auto;
  font-size: 1rem;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.settings-device-group[open] > .settings-device-summary::after { transform: rotate(180deg); }

.settings-device-summary:hover {
  background: rgba(57, 181, 255, 0.06);
  color: var(--support-colour);
}

.settings-device-summary:focus-visible {
  outline: 2px solid var(--main-colour);
  outline-offset: -2px;
}

/* Accordion body */
.settings-fields {
  padding: var(--gap-3) var(--gap-4) var(--gap-4);
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

.settings-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--gap-4);
}

.settings-group label {
  display: block;
  font-weight: 600;
  font-size: var(--text-md);
  margin-bottom: var(--gap-2);
  color: var(--text);
}

.settings-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

.settings-label-row label {
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  margin-bottom: 0;
}

.current-badge {
  font-size: clamp(11px, 1vw, 13px);
  color: var(--text-muted);
  background: rgba(57, 181, 255, 0.08);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  font-weight: 600;
}

output.current-value {
  font-weight: 700;
  color: var(--support-colour);
}

/* Multiplier input sizing */
.multiplier-input {
  width: var(--settings-box-wdth);
  height: var(--settings-box-lngth);
  font-size: var(--text-sm);
}

.multiplier-input.is-dirty {
  border-color: var(--support-colour);
  background: rgba(255, 131, 57, 0.04);
}

/* Actions bar */
.settings-actions {
  display: flex;
  gap: var(--gap-2);
  justify-content: flex-end;
  margin-top: var(--gap-5);
  padding-top: var(--gap-4);
  border-top: 1px solid var(--border);
}

/* Search bar */
.settings-search-wrapper {
  position: relative;
  margin-bottom: var(--gap-3);
}

.settings-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 14px;
  pointer-events: none;
}

.settings-search-input {
  width: 100%;
  height: var(--h);
  padding: 0 12px 0 36px !important;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.settings-search-input:focus {
  outline: none;
  border-color: var(--main-colour);
  box-shadow: 0 0 0 4px var(--focus);
}

.settings-search-no-results {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--text-sm);
  padding: var(--gap-4);
  font-style: italic;
}

/* details / summary base styles */
details > summary,
details summary { cursor: pointer; }

details > summary:hover { color: var(--main-colour); }

details summary { font-size: var(--text-lg); }


/* All direct children of the accordion get horizontal padding back */
.settings-device-group > .settings-group,
.settings-device-group > .settings-actions,
.settings-device-group > hr {
    margin-left: var(--gap-3);
    margin-right: var(--gap-3);
}

/* hr: kill browser default margin-block, use explicit gap matching .settings-group spacing */
.settings-device-group > hr {
    border: none;
    border-top: 1px solid var(--border);
    margin-top: 0;        /* .settings-group above already has margin-bottom: var(--gap-4) */
    margin-bottom: var(--gap-4);  /* match the gap before the next .settings-group */
}

/* Bottom padding for the actions row */
.settings-device-group > .settings-actions {
    padding-bottom: var(--gap-3);
}


/* =============================================================================
   11. Quick-edit (qe-*)  (_settings_modal)
   ============================================================================= */
.qe-selector-wrapper { margin-bottom: 1rem; }

.qe-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 1rem;
}

.qe-tag {
  border: 1.5px solid var(--support-colour);
  border-radius: 5px;
  padding: 4px 12px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--support-colour);
  white-space: nowrap;
  height: auto;
  font-weight: 600;
  transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.qe-tag:hover {
  background: rgba(51, 101, 153, 0.08);
  border-color: var(--support-colour);
}

.qe-tag[aria-selected="true"] {
  background: rgba(57, 181, 255, 0.1);
  border-color: var(--main-colour);
  color: var(--main-colour);
  font-weight: 700;
}

.qe-form {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.qe-form[hidden] { display: none !important; }

.qe-fields {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-bottom: var(--gap-3);
}

.qe-fields-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-3);
}

.qe-field-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--gap-2) var(--gap-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  transition: opacity 0.15s ease, background 0.15s ease;
}

.qe-field-row:has(.qe-field-toggle:not(:checked)) {
  opacity: 0.45;
  background: var(--surface);
}

.qe-field-row:has(.qe-field-toggle:not(:checked)) input[type="number"] {
  pointer-events: none;
}

/* Lift the entire row above its siblings when its dropdown is open */
.qe-field-row:has(.qe-values-dropdown.is-open) {
    z-index: 20;
}

/* Dropdown itself stays high within that context */
.qe-values-dropdown {
    z-index: 100;
}

.qe-checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  height: auto;
  padding: 0;
  border: none;
  background: none;
  margin-bottom: 0;
}

.qe-checkbox-label input[type="checkbox"] {
  width: 15px;
  height: 15px;
  min-width: 15px;
  accent-color: var(--main-colour);
  cursor: pointer;
  margin: 0;
  border: none;
  padding: 0;
  box-shadow: none;
}

.qe-selection-summary {
  font-size: var(--text-sm);
  color: var(--support-colour);
  font-weight: 600;
  margin: 0 0 var(--gap-3) 0;
  min-height: 1.4em;
}

.qe-actions {
  margin-top: 0.75rem;
  padding-top: var(--gap-3);
  border-top: 1px solid var(--border);
}

.qe-divider {
  margin: 1rem 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* Current-values button & dropdown */
.qe-values-wrapper {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 10;
}

.qe-values-btn {
  position: static;
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1px 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  height: auto;
  line-height: 1.6;
  display: block;
  width: 100%;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.qe-values-btn:hover {
  background: var(--surface);
  border-color: var(--support-colour);
  color: var(--support-colour);
}

.qe-values-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 180px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 8px 10px;
  z-index: 100;
  font-size: var(--text-xs);
}

/* Arrow up toward button */
.qe-values-dropdown::after {
  content: '';
  position: absolute;
  bottom: calc(100% - 1px);
  right: 11px;
  border: 4px solid transparent;
  border-bottom-color: var(--surface-2);
  z-index: 1;
}

.qe-values-dropdown::before {
  content: '';
  position: absolute;
  bottom: 100%;
  right: 10px;
  border: 5px solid transparent;
  border-bottom-color: var(--border);
}

.qe-values-dropdown.is-open { display: block; }

.qe-values-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qe-values-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-3);
  font-size: var(--text-xs);
}


.qe-values-list li span  { color: var(--text-muted); }
.qe-values-list li strong { color: var(--support-colour); font-weight: 700; }

.qe-values-list li:nth-child(even) {
    background: rgba(57, 181, 255, 0.06);  /* matches your existing table zebra tint */
    border-radius: 3px;

}

.qe-values-list li:nth-child(even) span {
  color: var(--main-colour)
}

.qe-values-list li:nth-child(even) strong {
  color: var(--main-colour)
}

.qe-values-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--text-xs);
}


/* =============================================================================
   12. Tooltips  (_quarter_table, _company_type_table)
   ============================================================================= */

/* Legacy inline tooltip (kept for backwards compat) */
.info-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  margin-left: 6px;
  color: #ffffff;
}

.info-btn:focus {
  outline: 2px solid #005a9c;
  outline-offset: 2px;
}

.tooltip {
  display: none;
  position: absolute;
  background: #ffffff;
  color: #000000;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  max-width: 220px;
  z-index: 1000;
  border: 2px solid #003366;
}

.info-btn:hover + .tooltip,
.info-btn:focus + .tooltip { display: inline-block; }

/* Floating tooltip (JS-positioned, _quarter_table) */
.th-info-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
}

.th-info-btn {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 15px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: color 0.15s ease;
}

.th-info-btn:focus-visible {
  outline: 2px solid var(--main-colour);
  outline-offset: 2px;
}

.th-tooltip-floating {
  position: fixed;
  background: var(--datac);
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--font-body);
  line-height: 1.5;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.th-tooltip-floating.is-visible { opacity: 1; }

/* Arrow (tooltip above icon) */
.th-tooltip-floating::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--datac);
}

.th-tooltip-floating br {
  display: block;
  margin-top: 4px;
}


/* =============================================================================
   13. PDF buttons  (_company_table, _quarter_table, _full_year_table)
   ============================================================================= */
#pdf-all-assets-all-years-btn,
.pdf-asset-all-years-detail-btn {
  background: var(--main-colour);
  color: #062033;
  box-shadow: none;
  font-size: 14px;
  height: var(--h);
  padding: 0 var(--gap-4);
  margin: 0;
  cursor: pointer;
}

#pdf-all-assets-all-years-btn:hover,
.pdf-asset-all-years-detail-btn:hover { filter: brightness(0.95); }


/* =============================================================================
   14. Utility  (global)
   ============================================================================= */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}


/* =============================================================================
   15. Motion preference  (global)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}



/* =============================================================================
   16. Rangenlijst button  (header, index.html)
   ============================================================================= */

.rangenlijst-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    height: var(--h);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-sm);
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rangenlijst-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

.rangenlijst-btn:focus-visible {
    outline: 2px solid var(--main-colour);
    outline-offset: 2px;
}

/* Toggled/active state */
.rangenlijst-btn.is-active {
    background: var(--support-colour);
    border-color: var(--main-colour);
    color: #ffffff;
}

.rangenlijst-btn.is-active:hover {
    background: rgba(0, 0, 0, 0.67);
}

.back-from-ranking {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    border: none;
    background: none;
    padding: 0;
    transition: color 0.2s;
}

.back-from-ranking:hover { color: var(--support-colour); }