/* ==========================================================================
   SCHERM CENTRAAL — canoniek stylesheet
   Onderdeel van TweQxt

   Werkwijze: alles staat vast in de variabelen hieronder (":root").
   Wil je een andere accentkleur, andere afronding of ander lettertype?
   Pas ALLEEN de variabelen aan — de rest van het CSS-bestand en alle
   pagina's die dit bestand gebruiken, updaten automatisch mee.
   ========================================================================== */

:root {

  /* --- Accentkleur (huisstijl SchermCentraal, vastgesteld 16-07-2026) --- */
  --sc-accent:        #21A365;   /* primair groen (knoppen, actieve staat) */
  --sc-accent-hover:  #178050;   /* iets donkerder, voor hover-states */
  --sc-accent-light:  #EAF3DE;   /* lichte achtergrondtint (badges, actieve menu-item) */
  --sc-accent-text:   #173404;   /* donkere tekstkleur bovenop --sc-accent-light */

  /* --- Merkkleuren (los van accent, voor logo/sidebar) ------------------- */
  --sc-donker:        #242B33;   /* primair donker — sidebar, logo-badge */
  --sc-teal:          #009688;   /* accent teal */
  --sc-lichtgroen:    #88C34A;   /* accent lichtgroen */

  /* --- Statuskleuren (vast, los van het thema) -------------------------- */
  --sc-succes:        #085041;
  --sc-succes-bg:      #E1F5EE;
  --sc-fout:          #791F1F;
  --sc-fout-bg:       #FCEBEB;
  --sc-waarschuwing:  #854F0B;
  --sc-waarschuwing-bg:#FAEEDA;

  /* --- Neutrale kleuren (achtergrond / tekst / randen) ------------------ */
  --sc-bg:            #E6E9EE;   /* paginakleur (achter alles) — neutraal licht uit huisstijl */
  --sc-surface:       #FFFFFF;   /* kaarten, panelen */
  --sc-surface-alt:   #F1F2F4;   /* subtiele vlakken binnen een kaart */
  --sc-border:        #DBDEE3;
  --sc-text:          #1F1F23;
  --sc-text-secundair:#6B6B76;
  --sc-text-muted:    #9C9CA6;

  /* --- Vorm & typografie -------------------------------------------------- */
  --sc-radius:        10px;      /* standaard afronding (knoppen, velden, badges) */
  --sc-radius-groot:  14px;      /* kaarten, panelen */
  --sc-font:          "Inter", "Segoe UI", Roboto, Arial, sans-serif;

  /* --- Layoutmaten --------------------------------------------------------- */
  --sc-sidebar-breedte: 220px;
  --sc-content-max:      1200px;
}


/* ==========================================================================
   RESET & BASIS
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--sc-font);
  background: var(--sc-bg);
  color: var(--sc-text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
}


/* ==========================================================================
   LAYOUT — app-shell (sidebar + hoofdinhoud)
   ========================================================================== */

.sc-app {
  display: grid;
  grid-template-columns: var(--sc-sidebar-breedte) 1fr;
  min-height: 100vh;
}

.sc-sidebar {
  background: var(--sc-donker);
  border-right: 1px solid var(--sc-donker);
  padding: 20px 14px;
}

.sc-sidebar__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 24px;
}

.sc-sidebar__logo-mark {
  width: 28px;
  height: 28px;
  background-image: url("../logo/icoon-blokjes.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.sc-sidebar__logo-tekst {
  font-weight: 600;
  font-size: 15px;
  color: #FFFFFF;
}

.sc-sidebar__klant {
  font-size: 11px;
  color: #9AA3AD;
  padding: 0 8px 14px;
  margin-top: -14px;
}

.sc-main {
  padding: 28px 32px;
  max-width: var(--sc-content-max);
}

.sc-main__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.sc-main__titel {
  font-weight: 600;
  font-size: 20px;
}


/* ==========================================================================
   NAVIGATIE
   ========================================================================== */

.sc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sc-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--sc-radius);
  color: #B7BEC7;
  font-size: 13px;
  font-weight: 500;
}

.sc-nav__item:hover {
  background: rgba(255,255,255,0.06);
  color: #FFFFFF;
}

.sc-nav__item.is-actief {
  background: var(--sc-accent);
  color: #FFFFFF;
}


/* ==========================================================================
   KAARTEN & STATBLOKKEN
   ========================================================================== */

.sc-card {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-groot);
  padding: 20px;
}

.sc-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.sc-stat {
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 16px;
}

.sc-stat__label {
  font-size: 12px;
  color: var(--sc-text-secundair);
  margin-bottom: 4px;
}

.sc-stat__waarde {
  font-size: 24px;
  font-weight: 600;
}

.sc-stat__waarde.is-succes { color: var(--sc-succes); }
.sc-stat__waarde.is-fout   { color: var(--sc-fout); }
.sc-stat__waarde.is-accent { color: var(--sc-accent); }


/* ==========================================================================
   LIJSTITEMS (bv. schermenoverzicht)
   ========================================================================== */

.sc-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sc-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--sc-surface);
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius);
  padding: 10px 14px;
}

.sc-list-item__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sc-list-item__icon.is-accent  { background: var(--sc-accent-light); color: var(--sc-accent-text); }
.sc-list-item__icon.is-fout    { background: var(--sc-fout-bg); color: var(--sc-fout); }

.sc-list-item__titel {
  font-size: 14px;
}

.sc-list-item__sub {
  font-size: 12px;
  color: var(--sc-text-muted);
}


/* ==========================================================================
   BADGES
   ========================================================================== */

.sc-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--sc-radius);
}

.sc-badge.is-succes       { background: var(--sc-succes-bg); color: var(--sc-succes); }
.sc-badge.is-fout         { background: var(--sc-fout-bg); color: var(--sc-fout); }
.sc-badge.is-waarschuwing { background: var(--sc-waarschuwing-bg); color: var(--sc-waarschuwing); }
.sc-badge.is-accent       { background: var(--sc-accent-light); color: var(--sc-accent-text); }


/* ==========================================================================
   KNOPPEN
   ========================================================================== */

.sc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  border-radius: var(--sc-radius);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
}

.sc-btn--primary {
  background: var(--sc-accent);
  color: #FFFFFF;
}

.sc-btn--primary:hover {
  background: var(--sc-accent-hover);
}

.sc-btn--secundair {
  background: var(--sc-surface);
  color: var(--sc-text);
  border: 1px solid var(--sc-border);
}

.sc-btn--secundair:hover {
  background: var(--sc-surface-alt);
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 780px) {
  .sc-app {
    grid-template-columns: 1fr;
  }
  .sc-sidebar {
    display: none; /* later: hamburger-menu, zelfde patroon als Stagiq mobiel */
  }
  .sc-main {
    padding: 20px;
  }
}