/* Kopie van assets/superp-tokens.css uit de gedeelde SAP_Trainer-webroot
   (https://saptrainer.nl/assets/superp-tokens.css, opgehaald 09-11-2026).
   Eigenaar blijft SAP_Trainer; deze kopie bestaat alleen omdat de container geen
   gedeelde webroot heeft. Wijzigt het origineel, haal hem dan opnieuw op. */

/* ═══════════════════════════════════════════════════════════════════
   SUPERP design tokens — single source of truth
   Toegepast op: testmgmt, login (index.php), landing.php, overzicht.php
   Brand: donker teal/petrol primair · cyaan accent · CRÈME page bg
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  /* Brand kleuren — PRIMAIR */
  --superp-primary:        #003845;
  --superp-primary-hover:  #002630;
  --superp-primary-soft:   #1a4d59;

  /* Brand kleuren — ACCENT */
  --superp-accent:         #2bbdd4;
  --superp-accent-hover:   #1ea8be;
  --superp-accent-soft:    rgba(43, 189, 212, 0.15);

  /* Achtergronden — CRÈME (NIET wit) */
  --superp-bg-page:        #f5efe3;
  --superp-bg-surface:     #fbf7ef;
  --superp-bg-soft:        #ede5d4;

  /* Tekst */
  --superp-text-default:   #003845;
  --superp-text-muted:     #4a6973;
  --superp-text-inverse:   #ffffff;

  /* Borders */
  --superp-border:         #c9bea6;
  --superp-border-strong:  #003845;

  /* Status (functioneel — NIET aanpassen) */
  --status-passed:    #28a745;
  --status-failed:    #d9534f;
  --status-blocked:   #6c757d;
  --status-retest:    #f0ad4e;
  --status-untested:  #b0b8c1;

  /* ─── Legacy aliassen voor bestaande TestRail-stijl CSS ─── */
  --tr-primary:       var(--superp-primary);
  --tr-primary-hover: var(--superp-primary-hover);
  --tr-text-default:  var(--superp-text-default);
  --tr-text:          var(--superp-text-default);
  --tr-text-muted:    var(--superp-text-muted);
  --tr-border:        var(--superp-border);
  --tr-border-light:  var(--superp-border);
  --tr-bg-soft:       var(--superp-bg-soft);
  --tr-tree-hover-bg: var(--superp-accent-soft);
  --tr-tree-selected-bg: var(--superp-accent-soft);
  --tr-link:          var(--superp-accent-hover);
  --tr-link-hover:    var(--superp-primary);
}

/* Body: crème achtergrond + Manrope-font */
body {
  background: var(--superp-bg-page);
  color: var(--superp-text-default);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
               Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .heading {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: var(--superp-primary);
}

/* Focus-ring overal (accessibility) */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 2px solid var(--superp-accent);
  outline-offset: 2px;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--superp-bg-page); }
::-webkit-scrollbar-thumb {
  background: var(--superp-border);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--superp-text-muted); }