/* ── RESET & BASE ── */
    * { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --navy:      #1a2e48;
      --pink:      #b1376e;
      --purple:    #4a396d;
      --blue:      #3c6291;
      --green:     #4a9460;
      --gold:      #eaa351;
      --navy-light:#243a57;
      --bg:        #f2f4f7;
      --white:     #ffffff;
      --text:      #1a2e48;
      --text-muted:#5a6a7e;
      --border:    #dce2ea;
      --radius:    12px;
      --radius-sm: 8px;
    }

    body {
      font-family: 'Barlow', 'DIN', 'Segoe UI', Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      font-size: 14px;
    }

    /* ── AUTH LOADING OVERLAY ── */
    #auth-loading {
      position: fixed;
      inset: 0;
      background: var(--navy);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      gap: 22px;
    }
    #auth-loading .loader-logo {
      opacity: 0.9;
    }
    .spinner {
      width: 36px; height: 36px;
      border: 3px solid rgba(255,255,255,0.15);
      border-top-color: var(--gold);
      border-radius: 50%;
      animation: spin 0.75s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    @media (prefers-reduced-motion: reduce) {
      .spinner { animation: none; border-top-color: var(--gold); }
      .app-tile { transition: none; }
      .lt-card  { transition: none; }
      .ql       { transition: none; }
      .sb-btn   { transition: none; }
      #tour-spotlight { transition: opacity 0.15s; }
    }
    #auth-loading p {
      color: rgba(255,255,255,0.55);
      font-size: 13px;
      font-family: 'Barlow', sans-serif;
    }
    #auth-loading .loader-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 20px;
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-top: -6px;
    }

    /* ── MAIN APP (hidden until auth) ── */
    #app { display: none; }

    /* ── REPORT VIEWER OVERLAY ── */
    #report-viewer {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      flex-direction: column;
      background: var(--bg);
    }
    #report-viewer.active { display: flex; }
    body:has(#report-viewer.active) { overflow: hidden; }

    .rv-topbar {
      height: 52px;
      background: var(--navy);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 0 20px;
      flex-shrink: 0;
    }
    .rv-back {
      display: flex;
      align-items: center;
      gap: 8px;
      color: rgba(255,255,255,0.85);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      background: rgba(255,255,255,0.1);
      border: none;
      border-radius: 6px;
      padding: 6px 14px;
      transition: background 0.15s;
      font-family: 'Barlow', sans-serif;
      letter-spacing: 0.01em;
    }
    .rv-back:hover { background: rgba(255,255,255,0.2); }
    .rv-back svg { width: 15px; height: 15px; }
    .rv-title {
      color: white;
      font-size: 14px;
      font-weight: 600;
      font-family: 'Barlow Condensed', sans-serif;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .rv-subtitle {
      color: rgba(255,255,255,0.45);
      font-size: 12px;
      margin-left: auto;
    }

    .rv-loading {
      position: absolute;
      inset: 0;
      z-index: 10;
      background: var(--bg);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .rv-loading .spinner {
      border-color: rgba(0,0,0,0.1);
      border-top-color: var(--navy);
    }
    #report-embed-container {
      flex: 1;
      position: relative;
      overflow: hidden;
    }
    #report-embed-container iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: none;
    }

    /* ── SHAREPOINT CHROME ── */
    /* ── STAGINGBANNER ── */
    #staging-banner {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #b45309;
      color: #fff;
      font-size: 12px;
      font-weight: 600;
      padding: 6px 16px;
      letter-spacing: 0.02em;
      position: sticky;
      top: 0;
      z-index: 101;
    }
    #staging-banner svg { width: 14px; height: 14px; flex-shrink: 0; }

    .sp-chrome {
      background: var(--navy);
      height: 48px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      gap: 0;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    .sp-logo-img {
      height: 22px;
      width: auto;
      flex-shrink: 0;
      margin-right: 20px;
      display: block;
    }
    .sp-nav {
      display: flex;
      gap: 0;
      margin-left: 32px;
    }
    .sp-nav a {
      color: rgba(255,255,255,0.75);
      font-size: 13px;
      font-weight: 500;
      padding: 0 14px;
      height: 48px;
      display: flex;
      align-items: center;
      text-decoration: none;
      border-bottom: 2px solid transparent;
      transition: color 0.15s;
    }
    .sp-nav a.active {
      color: white;
      border-bottom-color: var(--gold);
    }
    .sp-nav a:hover { color: white; }
    .sp-spacer { flex: 1; }
    .sp-user-wrap {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .sp-user-name {
      color: rgba(255,255,255,0.65);
      font-size: 12px;
      font-weight: 500;
    }
    .sp-user {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--pink);
      color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 700;
      flex-shrink: 0;
      cursor: default;
    }
    .sp-signout {
      color: rgba(255,255,255,0.45);
      font-size: 11px;
      font-weight: 500;
      text-decoration: none;
      padding: 4px 9px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.18);
      transition: all 0.15s;
      margin-left: 4px;
    }
    .sp-signout:hover {
      color: white;
      border-color: rgba(255,255,255,0.45);
      background: rgba(255,255,255,0.08);
    }

    /* ── BANNER ── */
    .banner {
      background: linear-gradient(135deg, var(--navy) 0%, #243a57 55%, #2d5278 100%);
      padding: 32px 48px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      position: relative;
    }
    .banner-bg {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 55%;
      opacity: 0.06;
      background:
        radial-gradient(circle at 80% 50%, var(--pink) 0%, transparent 50%),
        radial-gradient(circle at 95% 20%, var(--blue) 0%, transparent 40%);
    }
    .banner-content { position: relative; z-index: 1; }
    .banner-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .banner-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: white;
      letter-spacing: 0.02em;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .banner-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      font-weight: 400;
    }
    .banner-logo {
      position: relative; z-index: 1;
      opacity: 0.55;
      width: 88px;
      height: auto;
      flex-shrink: 0;
    }

    /* ── LAYOUT ── */
    .page {
      display: grid;
      grid-template-columns: 1fr 272px;
      gap: 24px;
      padding: 28px 48px;
      max-width: 1400px;
      margin: 0 auto;
    }
    .main { min-width: 0; }
    .sidebar { display: flex; flex-direction: column; gap: 16px; }

    /* ── SECTION LABEL ── */
    .sec-label {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 12px;
      display: flex; align-items: center; gap: 10px;
    }
    .sec-label::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--border);
    }
    .sec-block { margin-bottom: 28px; }

    /* ── APP TILES ── */
    .app-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
      gap: 12px;
    }
    .app-tile {
      background: var(--white);
      border-radius: var(--radius);
      padding: 20px 16px 16px;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      gap: 8px;
      border: 1.5px solid var(--border);
      transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
      position: relative;
      overflow: hidden;
    }
    .app-tile::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--tile-color, var(--navy));
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .app-tile:hover {
      box-shadow: 0 6px 20px rgba(26,46,72,0.12);
      transform: translateY(-2px);
      border-color: var(--tile-color, var(--navy));
    }
    .tile-icon-wrap {
      width: 38px; height: 38px;
      border-radius: var(--radius-sm);
      display: flex; align-items: center; justify-content: center;
      background: var(--tile-bg, #f0f4f8);
      margin-bottom: 2px;
    }
    .tile-icon-wrap svg { width: 20px; height: 20px; }
    .tile-name {
      font-weight: 700;
      font-size: 14px;
      color: var(--navy);
      line-height: 1.2;
    }
    .tile-desc {
      font-size: 12px;
      color: var(--text-muted);
      line-height: 1.4;
      flex: 1;
    }
    .tile-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 4px;
    }
    .tile-count {
      font-size: 11px;
      font-weight: 600;
      padding: 2px 8px;
      border-radius: 20px;
      background: var(--tile-bg, #f0f4f8);
      color: var(--tile-color, var(--navy));
    }
    .tile-arrow {
      color: var(--tile-color, var(--navy));
      opacity: 0.4;
      font-size: 14px;
    }

    /* Tile color variants */
    .t-finance  { --tile-color: var(--blue);   --tile-bg: #e8eef6; }
    .t-ops      { --tile-color: var(--purple);  --tile-bg: #edeaf5; }
    .t-sales    { --tile-color: var(--pink);    --tile-bg: #f7e8f0; }
    .t-marketing{ --tile-color: var(--gold);    --tile-bg: #fdf2e3; }
    .t-solutions{ --tile-color: var(--green);   --tile-bg: #e8f2eb; }
    .t-leadership{
      --tile-color: var(--pink);
      --tile-bg: #f7e8f0;
      border-style: dashed;
      background: #fdf6f9;
    }
    .t-hrm { --tile-color: #7c5cbf; --tile-bg: #ede8f7; }
    .t-overview-ydp { --tile-color: var(--navy); --tile-bg: #e8edf3; }
    .t-overview-yg  { --tile-color: var(--blue); --tile-bg: #dde7f2; }

    /* ── APP GROUP CARDS (per tenant) ── */
    .app-group {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .app-group + .app-group { margin-top: 12px; }
    .app-group-hdr {
      padding: 10px 16px;
      background: var(--navy);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .app-group-hdr--yg { background: var(--blue); }
    .app-group-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgba(255,255,255,0.45);
      flex-shrink: 0;
    }
    .app-group .app-grid { padding: 14px; }

    /* ── TOPBAR TOUR BUTTON ── */
    .sp-tour-btn {
      display: flex;
      align-items: center;
      gap: 7px;
      color: rgba(255,255,255,0.75);
      font-size: 12px;
      font-weight: 600;
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 6px;
      padding: 5px 12px;
      cursor: pointer;
      font-family: 'Barlow', sans-serif;
      transition: background 0.15s, color 0.15s;
    }
    .sp-tour-btn:hover { background: rgba(255,255,255,0.2); color: white; }
    .sp-tour-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

    /* ── OVERVIEW TILE (horizontaal, full-width) ── */
    .app-tile.tile-overview {
      grid-column: 1 / -1;
      flex-direction: row;
      align-items: center;
      background: var(--bg);
      padding: 13px 18px;
      gap: 16px;
    }
    .app-tile.tile-overview::before {
      top: 0; bottom: 0; right: auto;
      width: 3px; height: auto;
      border-radius: var(--radius) 0 0 var(--radius);
    }
    .app-tile.tile-overview .tile-ov-body { flex: 1; min-width: 0; }
    .app-tile.tile-overview .tile-name    { font-size: 14px; }
    .app-tile.tile-overview .tile-desc    { margin-top: 1px; }
    .app-tile.tile-overview .tile-meta    { margin-top: 0; flex-shrink: 0; }

    /* ── QUICK LINKS ── */
    .quick-links {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .ql {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 8px 14px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      color: var(--navy);
      text-decoration: none;
      transition: background 0.12s, border-color 0.12s, color 0.12s;
    }
    .ql:hover {
      background: var(--navy);
      border-color: var(--navy);
      color: white;
    }
    .ql svg { width: 14px; height: 14px; flex-shrink: 0; }

    /* ── REPORT DICTIONARY TABLE ── */
    .dict-wrap {
      background: var(--white);
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      overflow: hidden;
    }
    .dict-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .dict-table th {
      background: var(--navy);
      color: white;
      padding: 10px 14px;
      text-align: left;
      font-weight: 600;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }
    .dict-table td {
      padding: 10px 14px;
      border-bottom: 1px solid var(--bg);
      vertical-align: middle;
    }
    .dict-table tr:last-child td { border-bottom: none; }
    .dict-table tbody tr:hover td { background: #f7f9fc; }
    .app-pill {
      display: inline-block;
      padding: 2px 9px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }
    .p-finance   { background: #e8eef6; color: var(--blue);   }
    .p-ops       { background: #edeaf5; color: var(--purple); }
    .p-sales     { background: #f7e8f0; color: var(--pink);   }
    .p-marketing { background: #fdf2e3; color: #c17a1a;       }
    .p-solutions { background: #e8f2eb; color: #3d7a4f;       }
    .dict-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 14px;
      background: var(--bg);
      font-size: 12px;
      color: var(--text-muted);
      border-top: 1px solid var(--border);
    }
    .dict-footer a {
      color: var(--pink);
      font-weight: 700;
      text-decoration: none;
      font-size: 12px;
    }
    .dict-footer a:hover { text-decoration: underline; }
    .doc-link {
      color: var(--blue);
      font-weight: 600;
      text-decoration: none;
      font-size: 12px;
    }
    .doc-link:hover { text-decoration: underline; }

    /* ── HELP SECTIE ── */
    .help-wrap {
      background: var(--white);
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    .help-video {
      background: linear-gradient(135deg, var(--navy) 0%, var(--purple) 100%);
      aspect-ratio: 16/8;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 10px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .help-video::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 50% 50%, rgba(177,55,110,0.3) 0%, transparent 70%);
    }
    .play-btn {
      width: 52px; height: 52px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.4);
      background: rgba(255,255,255,0.12);
      display: flex; align-items: center; justify-content: center;
      position: relative; z-index: 1;
      backdrop-filter: blur(4px);
    }
    .play-btn svg { width: 20px; height: 20px; color: white; margin-left: 3px; }
    .help-video p {
      color: rgba(255,255,255,0.65);
      font-size: 12px;
      z-index: 1;
      position: relative;
    }
    .help-steps {
      padding: 22px 20px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .help-steps h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 16px;
      font-weight: 700;
      color: var(--navy);
      letter-spacing: 0.02em;
      margin-bottom: 2px;
    }
    .step { display: flex; gap: 12px; align-items: flex-start; }
    .step-num {
      width: 22px; height: 22px; min-width: 22px;
      border-radius: 50%;
      background: var(--navy);
      color: white;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700;
      margin-top: 1px;
    }
    .step p { font-size: 13px; color: var(--text-muted); line-height: 1.45; }
    .step strong { color: var(--navy); }

    /* ── SIDEBAR CARDS ── */
    .card {
      background: var(--white);
      border-radius: var(--radius);
      border: 1.5px solid var(--border);
      overflow: hidden;
    }
    .card-hdr {
      padding: 10px 14px;
      background: var(--navy);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }
    .card-body { padding: 6px; }

    .sb-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      color: var(--navy);
      text-decoration: none;
      transition: background 0.12s;
      width: 100%;
    }
    .sb-btn:hover { background: var(--bg); }
    .sb-btn svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--text-muted); }
    .sb-btn-accent { color: var(--pink); }
    .sb-btn-accent svg { color: var(--pink); }
    .nav-section-label {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.09em;
      color: var(--text-muted);
      padding: 10px 10px 3px;
    }
    .nav-section-label:first-child { padding-top: 4px; }

    /* ── LEADERSHIP TEAM PAGE ── */
    .lt-page {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      background: var(--bg);
    }
    .lt-header {
      background: linear-gradient(135deg, var(--navy) 0%, #243a57 55%, #2d5278 100%);
      padding: 32px 48px 28px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      overflow: hidden;
      position: relative;
    }
    .lt-header-bg {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 55%;
      opacity: 0.06;
      background:
        radial-gradient(circle at 80% 50%, var(--pink) 0%, transparent 50%),
        radial-gradient(circle at 95% 20%, var(--blue) 0%, transparent 40%);
    }
    .lt-header-content { position: relative; z-index: 1; }
    .lt-eyebrow {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--gold);
      margin-bottom: 6px;
    }
    .lt-header h1 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 28px;
      font-weight: 700;
      color: white;
      letter-spacing: 0.02em;
      line-height: 1.1;
      margin-bottom: 6px;
    }
    .lt-sub {
      font-size: 13px;
      color: rgba(255,255,255,0.55);
      font-weight: 400;
    }
    .lt-header-logo { position: relative; z-index: 1; flex-shrink: 0; }
    .lt-header-logo img { opacity: 0.55; width: 88px; height: auto; display: block; }
    .lt-body {
      padding: 28px 60px 56px;
      max-width: 1100px;
      margin: 0 auto;
    }
    .lt-section { border-bottom: 1px solid var(--border); }
    .lt-section:last-child { border-bottom: none; }
    .lt-section-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 0;
      background: none;
      border: none;
      cursor: pointer;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--navy);
      text-align: left;
      transition: color 0.15s;
    }
    .lt-section-toggle:hover { color: var(--lt-sec-color, var(--blue)); }
    .lt-section-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--lt-sec-color, var(--navy));
      flex-shrink: 0;
    }
    .lt-chevron {
      font-size: 10px;
      color: var(--text-muted);
      transition: transform 0.2s;
      display: inline-block;
      margin-left: auto;
    }
    .lt-section-toggle.lt-open .lt-chevron { transform: rotate(180deg); }
    .lt-section-body { display: none; padding-bottom: 20px; }
    .lt-section-body.lt-open { display: block; }
    .lt-subsection { margin-bottom: 16px; }
    .lt-subsection:last-child { margin-bottom: 0; }
    .lt-subsection h3 {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.12em;
      color: var(--text-muted);
      padding-bottom: 5px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 8px;
    }
    .lt-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
    }
    .lt-card {
      background: var(--white);
      border-radius: var(--radius);
      padding: 18px 16px 14px;
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: 1.5px solid var(--border);
      transition: box-shadow 0.15s, transform 0.12s, border-color 0.15s;
      position: relative;
      overflow: hidden;
    }
    .lt-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: var(--lt-card-color, var(--navy));
      border-radius: var(--radius) var(--radius) 0 0;
    }
    .lt-card:hover {
      box-shadow: 0 4px 16px rgba(26,46,72,0.10);
      transform: translateY(-2px);
      border-color: var(--lt-card-color, var(--navy));
    }
    .lt-card-title { font-weight: 600; font-size: 13px; color: var(--navy); line-height: 1.3; }
    .lt-card-sub { font-size: 11px; color: var(--text-muted); line-height: 1.4; }

    /* ── LEADERSHIP KPI TILES ── */
    .lt-kpi-section { padding: 20px 0 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
    .lt-kpi-section-title {
      font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 12px;
    }
    .lt-kpi-grid {
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px;
    }
    .lt-kpi-tile {
      background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      padding: 12px 14px; display: flex; flex-direction: column; gap: 2px;
    }
    .lt-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
    .lt-kpi-value {
      font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700;
      color: var(--navy); line-height: 1.1; margin: 2px 0;
    }
    .lt-kpi-trend { font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 3px; }
    .lt-kpi-trend.up   { color: var(--green); }
    .lt-kpi-trend.down { color: var(--pink); }
    .lt-kpi-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; }
    .lt-kpi-loading { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12px; padding: 8px 0; }
    .lt-data-ts { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 6px; }
    .lt-pbi-btn { display: inline-flex; align-items: center; padding: 6px 12px; background: var(--navy); color: white; border-radius: 6px; font-size: 11px; font-weight: 600; text-decoration: none; transition: background .15s; }
    .lt-pbi-btn:hover { background: #1a2d43; }

    /* ── LEADERSHIP CHARTS ── */
    .lt-charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 4px; }
    .lt-chart-block {
      background: var(--white); border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      padding: 14px 16px;
    }
    .lt-chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; gap: 8px; }
    .lt-chart-title {
      font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.06em; color: var(--navy);
    }
    .lt-chart-toggle { display: flex; gap: 2px; background: var(--bg); border-radius: 6px; padding: 2px; }
    .lt-toggle-btn {
      font-size: 11px; font-weight: 600; padding: 3px 10px; border: none; border-radius: 5px;
      background: transparent; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all 0.15s;
    }
    .lt-toggle-btn.active { background: var(--white); color: var(--navy); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

    /* ── LEADERSHIP REGION TOGGLE ── */
    .lt-region-toggle { display: flex; gap: 4px; }
    .lt-reg-btn {
      padding: 5px 13px; border: 1px solid var(--border); border-radius: 20px;
      background: white; color: var(--text-muted);
      font-size: 11px; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: all .15s;
    }
    .lt-reg-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
    .lt-reg-btn:hover:not(.active) { border-color: var(--navy); color: var(--navy); }
    .lt-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
    .lt-pbi-link { font-size: 10px; font-weight: 600; color: var(--navy); text-decoration: none; opacity: 0.45; transition: opacity 0.15s; }
    .lt-pbi-link:hover { opacity: 1; }
    .lt-kpi-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }
    .lt-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 -60px 14px; padding: 10px 60px; background: var(--card-bg); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; box-shadow: 0 3px 10px rgba(26,46,72,0.13); }
    .lt-filter-group { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
    .lt-filter-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; line-height: 26px; }
    .lt-card-icon { width: 20px; height: 20px; margin-bottom: 6px; flex-shrink: 0; }

    /* ── HOMEPAGE GLOBAL SEARCH ── */
    .home-search-wrap { margin-bottom: 0; position: relative; }
    .home-search {
      display: flex; align-items: center; gap: 10px; background: var(--white);
      border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .home-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(26,46,72,0.08); }
    .home-search svg { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
    .home-search input {
      border: none; background: transparent; font-family: 'Barlow', sans-serif;
      font-size: 14px; color: var(--text); width: 100%; outline: none;
    }
    .home-search input::placeholder { color: var(--text-muted); }
    .home-search-results {
      position: absolute; left: 0; right: 0; top: calc(100% + 4px); background: var(--white);
      border: 1.5px solid var(--border); border-radius: var(--radius-sm);
      box-shadow: 0 8px 24px rgba(26,46,72,0.12); z-index: 200; overflow: hidden;
      max-height: 400px; overflow-y: auto; display: none;
    }
    .search-res-group { padding: 8px 0 0; }
    .search-res-group-label {
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
      color: var(--text-muted); padding: 0 14px 4px;
    }
    .search-res-item {
      display: flex; align-items: flex-start; gap: 10px; padding: 8px 14px;
      cursor: pointer; transition: background 0.1s; text-decoration: none; color: inherit;
    }
    .search-res-item:hover, .search-res-item.kbd-active { background: var(--bg); }
    .search-res-icon {
      width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0; margin-top: 1px;
      display: flex; align-items: center; justify-content: center; font-size: 14px;
    }
    .search-res-name { font-size: 13px; font-weight: 500; color: var(--navy); }
    .search-res-meta { font-size: 11px; color: var(--text-muted); }
    .search-res-desc { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 2px; line-height: 1.4; }
    .search-res-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--text-muted); }
    .search-res-divider { height: 1px; background: var(--border); margin: 4px 0; }
    /* ── Rapport detail modal ── */
    .srch-modal-backdrop {
      position: fixed; inset: 0; background: rgba(26,46,72,0.45); z-index: 400;
      display: flex; align-items: center; justify-content: center; animation: smFadeIn 0.15s ease;
    }
    .srch-modal {
      background: var(--white); border-radius: var(--radius); width: 460px; max-width: 92vw;
      box-shadow: 0 20px 60px rgba(26,46,72,0.28); overflow: hidden; animation: smSlideUp 0.15s ease;
    }
    .srch-modal-header {
      background: linear-gradient(135deg, var(--navy) 0%, #243a57 100%);
      padding: 20px 48px 16px 24px; position: relative;
    }
    .srch-modal-title {
      color: white; font-family: 'Barlow Condensed', sans-serif;
      font-size: 18px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
    }
    .srch-modal-subtitle { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 3px; }
    .srch-modal-close {
      position: absolute; top: 14px; right: 14px; background: rgba(255,255,255,0.12);
      border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer;
      color: white; font-size: 15px; display: flex; align-items: center; justify-content: center;
      transition: background 0.15s; line-height: 1;
    }
    .srch-modal-close:hover { background: rgba(255,255,255,0.25); }
    .srch-modal-body { padding: 18px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
    .srch-modal-field { display: flex; flex-direction: column; gap: 2px; }
    .srch-modal-field-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
    .srch-modal-field-value { font-size: 13px; color: var(--text); }
    .srch-modal-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
    .srch-modal-btn {
      display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px;
      border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; font-family: inherit;
      text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: all 0.15s;
    }
    .srch-modal-btn.primary { background: var(--navy); color: white; border-color: var(--navy); }
    .srch-modal-btn.primary:hover { background: #243a57; }
    .srch-modal-btn.secondary { background: var(--bg); color: var(--navy); border-color: var(--border); }
    .srch-modal-btn.secondary:hover { border-color: var(--navy); }
    @keyframes smFadeIn  { from { opacity: 0 } to { opacity: 1 } }
    @keyframes smSlideUp { from { transform: translateY(10px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }

    /* ── FOUT-UI ── */
    .page-error {
      display: flex; flex-direction: column; align-items: center;
      gap: 14px; padding: 48px 24px; text-align: center; color: var(--text-muted);
    }
    .page-error svg { width: 40px; height: 40px; color: #d0d7e3; }
    .page-error p   { font-size: 13px; max-width: 340px; line-height: 1.6; }
    .page-error-retry {
      background: var(--navy); color: #fff; border: none; border-radius: 6px;
      padding: 8px 20px; font-size: 13px; font-weight: 600; cursor: pointer;
      font-family: inherit; transition: background 0.15s;
    }
    .page-error-retry:hover { background: var(--navy-light); }
    .page-error-detail { font-size: 11px; color: var(--text-muted); max-width: 340px; line-height: 1.5; margin-top: -6px; }
    /* Sessie-indicator op gebruikersavatar */
    .sp-user.session-warn { outline: 2px solid #FF985E; outline-offset: 2px; animation: pulse-warn 2s infinite; }
    @keyframes pulse-warn { 0%,100%{outline-color:#FF985E} 50%{outline-color:#FD625E} }

    /* ── SKELETON LOADING ── */
    @keyframes shimmer {
      0%   { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .skeleton {
      background: linear-gradient(90deg, #e8ecf1 25%, #f2f4f7 50%, #e8ecf1 75%);
      background-size: 800px 100%; animation: shimmer 1.4s infinite linear;
      border-radius: 6px; display: inline-block;
    }
    .skeleton-line  { height: 13px; margin-bottom: 8px; width: 100%; }
    .skeleton-line.w60 { width: 60%; }
    .skeleton-line.w40 { width: 40%; }
    .skeleton-box   { height: 80px; width: 100%; border-radius: 10px; }
    .skeleton-gauge { height: 100px; width: 100%; border-radius: 10px; }

    /* ── NOTIFICATIE BEL ── */
    .notif-btn {
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; cursor: pointer;
      color: rgba(255,255,255,0.6); padding: 4px 6px;
      border-radius: 4px; transition: background 0.15s, color 0.15s;
      position: relative; flex-shrink: 0;
    }
    .notif-btn:hover  { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.9); }
    .notif-btn.has-error { color: var(--pink); }
    .notif-btn svg    { width: 18px; height: 18px; display: block; }
    .notif-badge {
      position: absolute; top: 0; right: 0;
      background: var(--pink); color: white;
      font-size: 9px; font-weight: 700;
      min-width: 15px; height: 15px; border-radius: 8px;
      display: none; align-items: center; justify-content: center; padding: 0 3px;
    }

    /* ── RAPPORT OMSCHRIJVING TOOLTIP ── */
    .desc-tip {
      position: relative; display: inline-flex; align-items: center;
      vertical-align: middle; margin-left: 5px; flex-shrink: 0;
    }
    .desc-tip-icon {
      color: var(--text-muted); cursor: default; line-height: 1;
      display: inline-flex; align-items: center;
    }
    .desc-tip-icon:hover { color: var(--blue); }
    .desc-tip-box {
      display: none; position: absolute; left: 50%; top: calc(100% + 6px);
      transform: translateX(-50%);
      background: var(--navy); color: #fff;
      font-size: 11.5px; line-height: 1.55; font-weight: 400;
      padding: 9px 13px; border-radius: 7px;
      width: 280px; max-height: 180px; overflow-y: auto;
      box-shadow: 0 6px 20px rgba(0,0,0,0.22);
      white-space: pre-wrap; word-break: break-word;
      z-index: 300; pointer-events: auto;
    }
    .desc-tip:hover .desc-tip-box { display: block; }

    /* ── OVERLAY OMSCHRIJVING ── */
    .srch-modal-desc {
      line-height: 1.6; white-space: pre-wrap; word-break: break-word;
      color: var(--text); max-height: 220px; overflow-y: auto;
    }

    /* ── FAVORIETEN STER ── */
    .fav-btn {
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); padding: 0 0 0 5px; line-height: 1;
      display: inline-flex; align-items: center; vertical-align: middle;
      transition: color 0.15s; flex-shrink: 0;
    }
    .fav-btn:hover  { color: var(--gold); }
    .fav-btn.active { color: var(--gold); }
    .fav-btn svg    { width: 13px; height: 13px; }

    /* ── SIDEBAR SNELKOPPELINGEN (recent / favorieten) ── */
    .qa-item {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 10px; border-radius: var(--radius-sm);
      font-size: 12px; color: var(--navy); text-decoration: none;
      transition: background 0.12s; overflow: hidden;
    }
    .qa-item:hover { background: var(--bg); }
    .qa-item-icon     { color: var(--text-muted); flex-shrink: 0; }
    .qa-item-icon svg { width: 13px; height: 13px; display: block; }
    .qa-item-text     { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .qa-item-meta     { font-size: 10px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }

    /* ── MIJN VERZOEKEN ── */
    .req-item {
      padding: 7px 10px; font-size: 12px;
      border-bottom: 1px solid var(--border);
    }
    .req-item:last-child { border-bottom: none; }
    .req-item-type { font-weight: 600; color: var(--navy); margin-bottom: 2px; }
    .req-item-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
    .req-status {
      display: inline-block; padding: 1px 6px; border-radius: 10px;
      font-size: 10px; font-weight: 600;
    }
    .req-status-submitted { background: #e6f4ea; color: #2e7d42; }

    /* ── HAMBURGER + MOBILE DRAWER ── */
    #mobile-menu-btn {
      display: none;
      align-items: center;
      justify-content: center;
      background: none;
      border: none;
      cursor: pointer;
      color: rgba(255,255,255,0.85);
      padding: 4px 6px;
      border-radius: 4px;
      transition: background 0.15s;
      flex-shrink: 0;
    }
    #mobile-menu-btn:hover { background: rgba(255,255,255,0.12); }
    #mobile-menu-btn svg   { width: 22px; height: 22px; display: block; }
    #mobile-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.42);
      z-index: 199;
    }
    #mobile-overlay.active { display: block; }

    /* ── MOBIELE BREAKPOINTS ── */
    @media (max-width: 768px) {
      /* ── Hoofd-layout ── */
      .page {
        grid-template-columns: 1fr !important;
        padding: 16px 16px 32px !important;
        gap: 16px;
      }
      /* Sidebar als slide-in drawer van links */
      .sidebar {
        display: block !important;         /* block ipv flex: overflow-y scroll werkt betrouwbaar op iOS Safari */
        position: fixed;
        top: 48px;
        left: -290px;
        width: 270px;
        height: calc(100vh - 48px);        /* fallback */
        height: calc(100dvh - 48px);       /* modern: sluit browser-chrome uit */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch; /* iOS Safari */
        overscroll-behavior: contain;
        background: var(--bg);
        z-index: 200;
        transition: left 0.26s ease;
        padding: 12px 12px 48px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
      }
      /* Gap tussen kaarten simuleren (vervangt flex gap:12px) */
      .sidebar > * + * { margin-top: 12px; }
      .sidebar.open { left: 0; }
      /* Hamburger-knop tonen (links, vóór logo) */
      #mobile-menu-btn { display: flex; margin-right: 8px; }
      /* Rondleiding-knop verbergen op mobiel */
      .sp-tour-btn { display: none !important; }

      /* ── Banner ── */
      .banner { padding: 20px 16px 18px !important; }
      .banner-logo { display: none; }
      .banner-title { font-size: 22px; }

      /* ── Navigatiebalk ── */
      .sp-chrome { padding: 0 12px; }

      /* ── Homepage: app-tiles ── */
      .app-grid { grid-template-columns: repeat(2, 1fr) !important; }

      /* ── Homepage: CSAT-strip ── */
      #csat-home-block { flex-direction: column; }

      /* ── Report viewer ── */
      .rv-subtitle { display: none; }
      .rv-topbar { padding: 0 12px; gap: 10px; }
      .rv-title   { font-size: 12px; }

      /* ── Reports Catalog ── */
      .rc-body { padding: 14px 16px 32px !important; }
      .rc-table th:nth-child(3), .rc-table td:nth-child(3),
      .rc-table th:nth-child(4), .rc-table td:nth-child(4) { display: none; }

      /* ── Leadership ── */
      .lt-kpi-grid, .lt-kpi-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
      .lt-charts-grid { grid-template-columns: 1fr !important; }
      .lt-filter-bar  { margin: 0 -16px 14px !important; padding: 10px 16px !important; }

      /* ── CSAT ── */
      .csat-kpi-grid  { grid-template-columns: 1fr !important; }
      .csat-gauges    { grid-template-columns: 1fr !important; }

      /* ── Gegevensstatus ── */
      .status-grid { grid-template-columns: 1fr !important; }
    }

    @media (max-width: 480px) {
      /* ── Zeer kleine schermen ── */
      .app-grid { grid-template-columns: 1fr !important; }
      .sp-nav { display: none; }
      .banner-title { font-size: 19px; }
      .lt-kpi-grid, .lt-kpi-grid-4 { grid-template-columns: 1fr !important; }
      .page { padding: 12px 12px 24px !important; }
    }

    /* ── GUIDED TOUR ── */
    #tour-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 850;
      pointer-events: all;
    }
    #tour-overlay.active { display: block; }
    #tour-spotlight {
      position: absolute;
      border-radius: 10px;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
      transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease, opacity 0.2s;
      pointer-events: none;
      opacity: 0;
    }
    #tour-spotlight.vis { opacity: 1; }
    #tour-card {
      position: absolute;
      background: white;
      border-radius: var(--radius);
      padding: 20px 22px 16px;
      width: 300px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.22);
      transition: left 0.35s ease, top 0.35s ease;
      z-index: 1;
    }
    .tour-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
    }
    .tour-title {
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 17px; font-weight: 700; color: var(--navy);
      letter-spacing: 0.01em; margin-bottom: 6px;
    }
    .tour-desc {
      font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 16px;
    }
    .tour-actions { display: flex; align-items: center; gap: 8px; }
    .tour-btn-primary {
      background: var(--navy); color: white; border: none;
      border-radius: 6px; padding: 7px 14px; font-size: 13px; font-weight: 600;
      cursor: pointer; font-family: inherit; transition: background 0.15s; flex-shrink: 0;
    }
    .tour-btn-primary:hover { background: var(--blue); }
    .tour-btn-skip {
      background: none; border: none; color: var(--text-muted);
      font-size: 12px; cursor: pointer; font-family: inherit;
      padding: 4px 0; margin-left: auto; flex-shrink: 0;
    }
    .tour-btn-skip:hover { color: var(--text); text-decoration: underline; }
    .tour-progress {
      font-size: 11px;
      color: var(--text-muted);
      font-weight: 600;
      letter-spacing: 0.02em;
    }

    /* ── REPORTS CATALOG OVERLAY ── */
    .rc-page {
      position: absolute; inset: 0; overflow-y: auto; background: var(--bg);
    }
    .rc-header {
      background: linear-gradient(135deg, var(--navy) 0%, #243a57 55%, #2d5278 100%);
      padding: 28px 48px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; overflow: hidden; position: relative;
    }
    .rc-header-bg {
      position: absolute; right: 0; top: 0; bottom: 0; width: 55%; opacity: 0.06;
      background: radial-gradient(circle at 80% 50%, var(--blue) 0%, transparent 50%),
                  radial-gradient(circle at 95% 20%, var(--gold) 0%, transparent 40%);
    }
    .rc-header-content { position: relative; z-index: 1; }
    .rc-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 6px;
    }
    .rc-header h1 {
      color: white; font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px;
    }
    .rc-header p { color: rgba(255,255,255,0.55); font-size: 13px; }
    .rc-header-logo { position: relative; z-index: 1; flex-shrink: 0; }
    .rc-header-logo img { opacity: 0.55; width: 88px; height: auto; display: block; }
    .rc-controls {
      padding: 14px 48px; background: var(--white);
      border-bottom: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 10px;
    }
    .rc-search {
      display: flex; align-items: center; gap: 10px;
      background: var(--bg); border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); padding: 7px 14px; max-width: 540px;
    }
    .rc-search svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
    .rc-search input {
      border: none; background: transparent; font-family: 'Barlow', sans-serif;
      font-size: 13px; color: var(--text); width: 100%; outline: none;
    }
    .rc-search input::placeholder { color: var(--text-muted); }
    .rc-filters { display: flex; gap: 6px; flex-wrap: wrap; }
    .rc-pill {
      padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700;
      cursor: pointer; border: 1.5px solid var(--border); background: var(--white);
      color: var(--text-muted); transition: all 0.15s; font-family: inherit;
    }
    .rc-pill:hover { border-color: var(--navy); color: var(--navy); }
    .rc-pill.active { background: var(--navy); border-color: var(--navy); color: white; }
    .rc-body { padding: 20px 48px 48px; }
    .rc-table-wrap {
      background: var(--white); border-radius: var(--radius);
      border: 1.5px solid var(--border); overflow: hidden;
    }
    .rc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .rc-table th {
      background: var(--navy); color: white; padding: 10px 14px;
      text-align: left; font-weight: 600; font-size: 11px;
      letter-spacing: 0.06em; text-transform: uppercase;
    }
    .rc-table td { padding: 10px 14px; border-bottom: 1px solid var(--bg); vertical-align: middle; }
    .rc-table tbody tr:last-child td { border-bottom: none; }
    .rc-table tbody tr:hover td { background: #f7f9fc; }
    .rc-empty { padding: 36px; text-align: center; color: var(--text-muted); font-size: 13px; }
    .rc-no-link { font-size: 11px; color: #aab2be; font-style: italic; }
    .rc-table th.sortable { cursor: pointer; user-select: none; }
    .rc-table th.sortable:hover { background: #243a57; }
    .rc-table th.sort-asc::after  { content: ' ↑'; opacity: 0.7; }
    .rc-table th.sort-desc::after { content: ' ↓'; opacity: 0.7; }
    .badge-new { display:inline-block; background:#4a9460; color:white; font-size:9px; font-weight:800; padding:1px 5px; border-radius:3px; letter-spacing:.05em; text-transform:uppercase; vertical-align:middle; margin-left:5px; }
    .rc-footer {
      display: flex; justify-content: space-between; align-items: center;
      padding: 9px 14px; background: var(--bg); font-size: 12px;
      color: var(--text-muted); border-top: 1px solid var(--border);
    }
    .rc-footer a { color: var(--pink); font-weight: 700; text-decoration: none; font-size: 12px; }
    .rc-footer a:hover { text-decoration: underline; }

    /* ── DOCUMENT LIBRARY OVERLAY ── */
    .dl-page {
      position: absolute; inset: 0; overflow-y: auto; background: var(--bg);
    }
    .dl-header {
      background: linear-gradient(135deg, var(--navy) 0%, #243a57 55%, #2d5278 100%);
      padding: 28px 48px 24px;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; overflow: hidden; position: relative;
    }
    .dl-header-bg {
      position: absolute; right: 0; top: 0; bottom: 0; width: 55%; opacity: 0.06;
      background: radial-gradient(circle at 80% 50%, var(--blue) 0%, transparent 50%),
                  radial-gradient(circle at 95% 20%, var(--green) 0%, transparent 40%);
    }
    .dl-header-content { position: relative; z-index: 1; }
    .dl-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 6px;
    }
    .dl-header h1 {
      color: white; font-family: 'Barlow Condensed', sans-serif;
      font-size: 22px; font-weight: 700; letter-spacing: 0.02em; margin-bottom: 4px;
    }
    .dl-header p { color: rgba(255,255,255,0.55); font-size: 13px; }
    .dl-header-logo { position: relative; z-index: 1; flex-shrink: 0; }
    .dl-header-logo img { opacity: 0.55; width: 88px; height: auto; display: block; }
    .dl-body { padding: 24px 48px 48px; max-width: 900px; margin: 0 auto; }

    /* ── Governance / Beleidsdocument pagina ── */
    .gv-page { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); }
    .gv-layout {
      display: grid; grid-template-columns: 220px 1fr; gap: 32px;
      max-width: 1100px; margin: 0 auto; padding: 32px 48px 64px;
    }
    .gv-toc-wrap { position: sticky; top: 24px; height: fit-content; align-self: start; }
    .gv-toc { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 16px; }
    .gv-toc-title {
      font-size: 10px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 10px;
    }
    .gv-toc-link {
      display: block; padding: 4px 0 4px 10px; font-size: 12px; color: var(--text-muted);
      text-decoration: none; border-left: 2px solid transparent;
      transition: color .15s, border-color .15s; line-height: 1.4;
    }
    .gv-toc-link:hover { color: var(--navy); border-left-color: var(--border); }
    .gv-toc-link.active { color: var(--navy); border-left-color: var(--navy); font-weight: 600; }
    .gv-toc-link.h2 { padding-left: 20px; font-size: 11px; }
    .gv-toc-link.h3 { padding-left: 30px; font-size: 11px; color: #8a9ab0; }
    /* Mammoth HTML content styling */
    .gv-content h1 {
      font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700;
      color: var(--navy); margin: 36px 0 10px; padding-bottom: 8px;
      border-bottom: 2px solid var(--border); letter-spacing: 0.02em;
    }
    .gv-content h1:first-child { margin-top: 0; }
    .gv-content h2 {
      font-size: 15px; font-weight: 700; color: var(--navy); margin: 24px 0 8px;
    }
    .gv-content h3 {
      font-size: 13px; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px;
    }
    .gv-content p { font-size: 13px; line-height: 1.75; color: var(--text); margin-bottom: 10px; }
    .gv-content ul, .gv-content ol { padding-left: 22px; margin-bottom: 10px; }
    .gv-content li { font-size: 13px; line-height: 1.7; margin-bottom: 3px; color: var(--text); }
    .gv-content strong { color: var(--navy); }
    .gv-table-wrap { overflow-x: auto; margin: 20px 0; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
    .gv-content table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 420px; }
    .gv-content thead th {
      background: var(--navy); color: #fff !important; padding: 10px 14px;
      text-align: left; font-weight: 700; font-size: 12px; letter-spacing: .3px;
      border-right: 1px solid rgba(255,255,255,.15);
    }
    .gv-content thead th:last-child { border-right: none; }
    /* Zorg dat bold/span kinderen in header ook wit zijn */
    .gv-content thead th * { color: #fff !important; }
    /* Tekst in gekleurde cellen erft de celkleur (wit bij donkere achtergronden via JS) */
    .gv-content td p, .gv-content td strong, .gv-content td em,
    .gv-content td li, .gv-content td span { color: inherit; }
    /* Ownership tabel: onderste 2 rijen gecentreerd */
    .gv-table-wrap[data-section*="ownership"] tbody tr:nth-last-child(-n+2) td { text-align: center; }
    .gv-content tbody td {
      padding: 9px 14px; vertical-align: top; line-height: 1.6;
      border-bottom: 1px solid var(--border);
      border-right: 1px solid var(--border);
      color: var(--text);
    }
    .gv-content tbody td:last-child { border-right: none; }
    .gv-content tbody tr:last-child td { border-bottom: none; }
    .gv-content tbody tr:nth-child(even) td { background: #f4f6f9; }
    .gv-content tbody tr:hover td { background: #edf1f7; }
    .gv-content tbody td:first-child { font-weight: 600; color: var(--navy); }
    .gv-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; }
    @media (max-width: 768px) {
      .gv-layout { grid-template-columns: 1fr; padding: 20px 20px 48px; }
      .gv-toc-wrap { position: static; }
    }
    .dl-group { margin-bottom: 24px; }
    .dl-group-hdr {
      font-family: 'Barlow Condensed', sans-serif; font-size: 11px; font-weight: 700;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
      padding-bottom: 5px; border-bottom: 1px solid var(--border); margin-bottom: 8px;
    }
    .dl-items { display: flex; flex-direction: column; gap: 4px; }
    .dl-item {
      display: flex; align-items: center; gap: 12px; padding: 10px 16px;
      background: var(--white); border: 1.5px solid var(--border);
      border-radius: var(--radius-sm); text-decoration: none; color: var(--text);
      transition: border-color 0.15s, box-shadow 0.15s; font-size: 13px;
    }
    .dl-item:hover { border-color: var(--blue); box-shadow: 0 2px 8px rgba(60,98,145,0.1); }
    .dl-item-icon { color: var(--blue); flex-shrink: 0; }
    .dl-item-icon svg { width: 16px; height: 16px; display: block; }
    .dl-item-name { flex: 1; font-weight: 500; min-width: 0; }
    .dl-item-owner { font-size: 12px; color: var(--text-muted); flex-shrink: 0; }
    .dl-item-date { font-size: 11px; color: var(--text-muted); flex-shrink: 0; margin-left: 12px; }
    .dl-empty { padding: 40px; text-align: center; color: var(--text-muted); font-size: 13px; }

    /* ── GEGEVENSSTATUS ── */
    .status-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .status-panel {
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .status-panel-hdr {
      padding: 10px 14px;
      background: var(--navy);
      color: white;
      font-family: 'Barlow Condensed', sans-serif;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .status-panel-hdr svg { width: 12px; height: 12px; opacity: 0.75; flex-shrink: 0; }
    .status-panel-hdr--db { background: #3a6b50; }
    .status-list { padding: 2px 0; min-height: 48px; }
    .status-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 7px 14px;
      border-bottom: 1px solid var(--bg);
    }
    .status-row:last-child { border-bottom: none; }
    .status-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .sd-ok    { background: #4a9460; }
    .sd-warn  { background: #eaa351; }
    .sd-error { background: #b1376e; }
    .sd-idle  { background: var(--border); }
    .sd-spin  { background: var(--border); animation: sdpulse 1.2s ease-in-out infinite; }
    @keyframes sdpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
    .status-name {
      flex: 1; font-weight: 500; color: var(--navy); font-size: 13px;
      min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .status-time { font-size: 11px; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
    .status-panel-footer {
      padding: 7px 14px;
      background: var(--bg);
      font-size: 11px;
      color: var(--text-muted);
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 30px;
    }
    .status-reload-btn {
      background: none; border: none; color: var(--blue); font-size: 11px;
      font-weight: 600; cursor: pointer; padding: 0; font-family: inherit;
    }
    .status-reload-btn:hover { text-decoration: underline; }

    /* ── GEGEVENSSTATUS: WERKRUIMTES GRID ── */
    #ds-workspaces-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    @media (max-width: 700px) { #ds-workspaces-container { grid-template-columns: 1fr; } }

    /* ── HOMEPAGE: VERVERSINGEN-STATUS ── */
    .refresh-all-ok {
      display: flex; align-items: center; gap: 10px;
      background: #f0f9f4; border: 1.5px solid #4a9460;
      border-radius: var(--radius-sm); padding: 10px 14px;
      font-size: 13px; color: #2a6040; font-weight: 500;
    }
    .refresh-all-ok svg { color: #4a9460; flex-shrink: 0; }
    .refresh-ok-time { font-size: 11px; color: var(--text-muted); margin-left: auto; font-weight: 400; }

    /* ── REFRESH-WAARSCHUWINGSBALK (homepage) ── */
    .warn-bar {
      display: flex; align-items: center; gap: 10px;
      background: #fffbf0; border: 1.5px solid #f0c060;
      border-radius: var(--radius-sm); padding: 10px 14px;
      font-size: 13px; color: #7a4a0a;
    }
    .warn-bar svg { flex-shrink: 0; }
    .warn-bar-text { flex: 1; line-height: 1.4; }
    .warn-bar-btn {
      background: none; border: 1.5px solid #7a4a0a; color: #7a4a0a;
      font-size: 12px; font-weight: 700; cursor: pointer;
      padding: 4px 10px; border-radius: 4px; font-family: inherit;
      white-space: nowrap; flex-shrink: 0; transition: background 0.15s, color 0.15s;
    }
    .warn-bar-btn:hover { background: #7a4a0a; color: white; }

    /* ── GEGEVENSSTATUS OVERLAY PAGE ── */
    .ds-page { position: absolute; inset: 0; overflow-y: auto; background: var(--bg); }
    .ds-header {
      background: linear-gradient(135deg, var(--navy) 0%, #1a3e5c 55%, #2a5c7a 100%);
      padding: 28px 48px 24px;
      display: flex; align-items: center; justify-content: space-between; gap: 24px;
      overflow: hidden; position: relative;
    }
    .ds-header-bg {
      position: absolute; right: 0; top: 0; bottom: 0; width: 55%; opacity: 0.06;
      background: radial-gradient(circle at 80% 50%, var(--green) 0%, transparent 50%),
                  radial-gradient(circle at 95% 20%, var(--blue) 0%, transparent 40%);
    }
    .ds-header-content { position: relative; z-index: 1; }
    .ds-eyebrow {
      font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--gold); margin-bottom: 6px;
    }
    .ds-header h1 {
      font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 700;
      color: white; letter-spacing: 0.02em; margin-bottom: 4px;
    }
    .ds-sub { font-size: 13px; color: rgba(255,255,255,0.55); }
    .ds-header-logo { position: relative; z-index: 1; flex-shrink: 0; }
    .ds-header-logo img { opacity: 0.55; width: 88px; height: auto; display: block; }
    .ds-body { padding: 24px 48px 48px; }

    /* ── CSAT KLANTTEVREDENHEID ── */
    .csat-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
    .csat-kpi-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; text-align: center; cursor: pointer; transition: box-shadow .15s, border-color .15s; }
    .csat-kpi-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.12); border-color: var(--navy); }
    .csat-kpi-card.csat-combined { border-left: 3px solid var(--navy); }
    .csat-kpi-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 8px; }
    .csat-kpi-score { font-size: 34px; font-weight: 800; color: var(--navy); line-height: 1; min-height: 38px; display: flex; align-items: center; justify-content: center; }
    .csat-kpi-score .csat-denom { font-size: 14px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
    .csat-kpi-meta { font-size: 11px; color: var(--text-muted); margin-top: 5px; min-height: 14px; }
    .csat-home-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
    .csat-home-footer a { font-size: 12px; color: var(--navy); text-decoration: none; font-weight: 600; }
    .csat-home-footer a:hover { text-decoration: underline; }

    /* CSAT detail page */
    .csat-page { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; background: var(--bg); padding: 0 0 40px; }
    .csat-header { background: linear-gradient(135deg, var(--navy) 0%, #243a57 55%, #2d5278 100%); padding: 28px 48px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; position: relative; margin-bottom: 0; }
    .csat-header-bg { position: absolute; right: 0; top: 0; bottom: 0; width: 55%; opacity: 0.06; background: radial-gradient(circle at 80% 50%, var(--blue) 0%, transparent 50%), radial-gradient(circle at 95% 20%, var(--green) 0%, transparent 40%); }
    .csat-header-content { position: relative; z-index: 1; }
    .csat-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
    .csat-header h1 { font-family: 'Barlow Condensed', sans-serif; font-size: 28px; font-weight: 700; color: white; margin: 0 0 4px; letter-spacing: 0.02em; }
    .csat-header-sub { font-size: 13px; color: rgba(255,255,255,0.65); }
    .csat-header-datasets { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 4px; letter-spacing: 0.02em; }
    .csat-header-logo { position: relative; z-index: 1; flex-shrink: 0; }
    .csat-header-logo img { opacity: 0.55; width: 72px; height: auto; display: block; }
    .csat-body { padding: 20px 32px; }
    .csat-gauges { display: flex; gap: 16px; justify-content: center; margin: 4px 0 20px; flex-wrap: wrap; }
    .csat-gauge-card { text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; min-width: 140px; }
    .csat-gauge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 6px; }
    .csat-gauge-sub { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
    .csat-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin: 18px 0 8px; border-top: 1px solid var(--border); padding-top: 14px; }
    .csat-trend-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 16px; margin-bottom: 4px; overflow-x: auto; }
    .csat-trend-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 11px; color: var(--text-muted); }
    .csat-trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .csat-survey-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 8px; }
    .csat-survey-table th { background: #28384e; color: white; padding: 7px 10px; text-align: left; font-size: 11px; font-weight: 600; }
    .csat-survey-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
    .csat-survey-table tr:hover td { background: #f5f7fa; }
    .csat-score-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-weight: 700; font-size: 12px; }
    .csat-score-good { background: #e8f5e9; color: #2e7d32; }
    .csat-score-ok   { background: #fff8e1; color: #f57f17; }
    .csat-score-bad  { background: #fce4ec; color: #b71c1c; }
    .csat-pbi-btns { display: flex; gap: 10px; flex-wrap: wrap; }
    .csat-pbi-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; background: var(--navy); color: white; border: none; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .15s; }
    .csat-pbi-btn:hover { background: #1a2d43; }
    .csat-pbi-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
    .csat-gauge-pbi { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; color: var(--text-muted); text-decoration: none; margin-top: auto; padding-top: 10px; white-space: nowrap; transition: color .15s; }
    .csat-gauge-pbi:not([aria-hidden]) { padding: 4px 10px; border: 1px solid var(--border); border-radius: 10px; transition: all .15s; }
    .csat-gauge-pbi:not([aria-hidden]):hover { color: var(--blue); border-color: var(--blue); background: #f0f5ff; }
    .csat-gauge-pbi svg { width: 10px; height: 10px; flex-shrink: 0; }
    /* CSAT detail page – gauges als volledig brede grid */
    .csat-gauges { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 22px; }
    .csat-gauge-card { text-align: center; background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; }
    .csat-gauge-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 4px; }
    .csat-gauge-sub { font-size: 11px; color: var(--text-muted); margin-top: 5px; }
    /* CSAT period filter bar */
    .csat-filter-bar { display: flex; align-items: center; gap: 8px; margin: 0 -32px 14px; padding: 10px 32px; background: var(--card-bg); border-bottom: 1px solid var(--border); border-radius: 0; position: sticky; top: 0; z-index: 20; box-shadow: 0 3px 10px rgba(26,46,72,0.13); flex-wrap: wrap; }
    .csat-filter-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; }
    .csat-period-label { font-size: 11px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
    .csat-period-btn { padding: 5px 13px; border: 1px solid var(--border); border-radius: 20px; background: white; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; }
    .csat-period-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
    .csat-period-btn:hover:not(.active) { border-color: var(--navy); color: var(--navy); }
    .csat-date-input { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--text); background: white; font-family: inherit; width: 118px; }
    .csat-date-input:focus { outline: none; border-color: var(--navy); }
    .csat-od-select { padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 11px; color: var(--text); background: white; font-family: inherit; max-width: 180px; cursor: pointer; }
    .csat-od-select:focus { outline: none; border-color: var(--navy); }
    .csat-confirm-btn { padding: 5px 14px; border: none; border-radius: 20px; background: var(--navy); color: white; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s; white-space: nowrap; }
    .csat-confirm-btn:hover { background: var(--blue); }
    /* CSAT matrix heatmap */
    .csat-matrix-wrap { overflow-x: auto; margin-bottom: 4px; }
    .csat-matrix { border-collapse: collapse; font-size: 12px; white-space: nowrap; width: auto; }
    .csat-matrix th { background: var(--navy); color: white; padding: 8px 14px; font-size: 11px; font-weight: 600; text-align: center; border: 1px solid #3d5070; }
    .csat-matrix th.row-hdr { text-align: left; min-width: 130px; }
    .csat-matrix td { padding: 6px 12px; border: 1px solid #d4dae4; text-align: center; font-size: 11px; font-weight: 700; vertical-align: middle; }
    .csat-matrix td.row-hdr { text-align: left; font-weight: 500; background: var(--card-bg); color: var(--text); border-color: #d4dae4; font-size: 12px; }
    .csat-mx-good  { background: #00B82B; color: white; }
    .csat-mx-ok    { background: #FF985E; color: white; }
    .csat-mx-bad   { background: #FD625E; color: white; }
    .csat-mx-empty { background: #f5f7fa; }
    .csat-mx-score { font-size: 13px; font-weight: 800; line-height: 1.2; }
    .csat-mx-n     { font-size: 10px; font-weight: 500; opacity: 0.88; margin-top: 2px; }
    .csat-mx-rr    { font-size: 10px; font-weight: 500; opacity: 0.80; }
    .csat-mx-legend { font-size: 11px; color: var(--text-muted); margin-top: 8px; line-height: 1.5; border-top: 1px solid var(--border); padding-top: 8px; }
    .csat-mx-legend b { color: var(--text); }
    /* Gauge trend badge */
    .csat-gauge-trend { font-size: 12px; font-weight: 700; margin-top: 4px; letter-spacing: .01em; }
    /* region toggle */
    .csat-region-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 10px; }
    .csat-region-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 20px; background: white; color: var(--text-muted); font-size: 11px; font-weight: 600; cursor: pointer; transition: all .15s; }
    .csat-region-btn.active { background: var(--navy); color: white; border-color: var(--navy); }
    .csat-region-btn:hover:not(.active) { border-color: var(--navy); color: var(--navy); }
    /* Trend chart */
    .csat-trend-wrap { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px 10px; margin-bottom: 4px; }
    .csat-chart-outer { overflow-x: auto; }
    .csat-chart-tip { display: none; position: fixed; pointer-events: none; background: var(--navy); color: #fff; font-size: 11px; padding: 7px 11px; border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,0.22); line-height: 1.6; z-index: 500; }

    /* KPI gauges horizontaal (60%) + matrix (40%), volle breedte */
    .csat-top-row { display: flex; gap: 0; align-items: stretch; margin-bottom: 16px; }
    .csat-gauges-group { flex: 0 0 60%; display: flex; gap: 8px; padding-right: 16px; }
    .csat-gauges-group .csat-gauge-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 8px 12px; width: auto; }
    .csat-gauges-group .csat-gauge-card > svg { max-width: none !important; width: 100%; }
    .csat-matrix-col { flex: 0 0 40%; min-width: 0; }
    @media (max-width: 760px) { .csat-top-row { flex-direction: column; } .csat-gauges-group { flex: none; width: 100%; padding-right: 0; } .csat-matrix-col { flex: none; width: 100%; } }

    /* Trend data tabel (maanden als kolommen) */
    .csat-tt-wrap { overflow-x: auto; margin-top: 6px; }
    .csat-tt { border-collapse: collapse; font-size: 12px; white-space: nowrap; min-width: 100%; }
    .csat-tt th { background: var(--navy); color: white; padding: 7px 12px; font-size: 11px; font-weight: 600;
      border: 1px solid #3d5070; text-align: center; }
    .csat-tt th.csat-tt-lbl { text-align: left; min-width: 90px; font-weight: 600; }
    .csat-tt th.csat-tt-month { min-width: 68px; font-weight: 400; }
    .csat-tt td { padding: 6px 12px; border: 1px solid #d4dae4; text-align: center; font-weight: 700; font-size: 12px; }
    .csat-tt td.csat-tt-lbl { text-align: right; font-weight: 400; font-size: 11px; background: var(--card-bg);
      color: var(--text-muted); min-width: 90px; padding-right: 12px; }
    .csat-tt td.csat-tt-lbl--sub { color: #bbb; font-style: italic; }
    .csat-tt td.csat-tt-n { font-weight: 400; font-size: 11px; color: var(--text-muted); }
    .csat-tt td.csat-tt-empty { background: #f8f9fa; color: #ddd; }
    .csat-tt tr.csat-tt-region td { background: #eef2f7; font-size: 10px; font-weight: 700;
      text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); text-align: left; }

    /* CSAT compact homepage strip (donkere balk bovenaan) */
    .csat-home-strip { display: flex; align-items: stretch; background: linear-gradient(135deg, var(--navy) 0%, #1a3e5c 100%);
      border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
    .csat-strip-title-wrap { display: flex; flex-direction: column; justify-content: center;
      padding: 12px 16px 12px 20px; border-right: 1px solid rgba(255,255,255,.12); flex-shrink: 0; }
    .csat-strip-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
      color: var(--gold); margin-bottom: 2px; }
    .csat-strip-heading { font-size: 13px; font-weight: 700; color: white; white-space: nowrap; }
    .csat-strip-items { display: flex; flex: 1; }
    .csat-strip-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 12px 10px; cursor: pointer; transition: background .15s; }
    .csat-strip-item:hover { background: rgba(255,255,255,.07); }
    .csat-strip-item + .csat-strip-item { border-left: 1px solid rgba(255,255,255,.12); }
    .csat-strip-item--main { background: rgba(255,255,255,.04); }
    .csat-strip-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
      color: rgba(255,255,255,.5); margin-bottom: 3px; white-space: nowrap; }
    .csat-strip-score { font-size: 24px; font-weight: 800; line-height: 1; color: white; min-height: 26px;
      display: flex; align-items: center; }
    .csat-strip-score .csat-denom { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.45); margin-left: 2px; }
    .csat-strip-meta { font-size: 9px; color: rgba(255,255,255,.4); margin-top: 3px; text-align: center; }
    .csat-strip-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
      padding: 12px 18px; border-left: 1px solid rgba(255,255,255,.12); color: var(--gold);
      font-size: 11px; font-weight: 700; text-decoration: none; white-space: nowrap; flex-shrink: 0;
      transition: background .15s; }
    .csat-strip-link:hover { background: rgba(255,255,255,.07); text-decoration: none; color: var(--gold); }
    .csat-strip-refresh { font-size: 8px; color: rgba(255,255,255,.28); margin-top: 6px; white-space: nowrap; }