/**
 * NOutopia™ Implementatie Toolkit - Kleuren en Variabelen
 * Centraal beheer van alle kleuren voor statuselementen en UI componenten
 * 
 * Gebruik: Pas hexcodes aan naar wens, de CSS-variabelen worden automatisch
 * toegepast in de gehele applicatie.
 */

:root {
  /* ========================================
     STATUS KLEUREN - Primaire set
     ======================================== */
  
  /* Info status (blauw) */
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;
  --color-info-border: #bee5eb;
  
  /* Succes status (groen) */
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-success-border: #c3e6cb;
  
  /* Waarschuwing status (geel/oranje) */
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-warning-border: #ffeaa7;
  
  /* Fout status (rood) */
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;
  --color-error-border: #f5c6cb;
  
  /* Ingevoerd status (grijs) */
  --color-ingevoerd-bg: #e2e3e5;
  --color-ingevoerd-text: #383d41;
  --color-ingevoerd-border: #d6d8db;


  /* ========================================
     STATUS KLEUREN - Uitgebreide set
     ======================================== */
  
  /* In behandeling (lichtblauw) */
  --color-behandeling-bg: #cce7ff;
  --color-behandeling-text: #004085;
  --color-behandeling-border: #b3d9ff;
  
  /* Afgewezen (donkerrood) */
  --color-afgewezen-bg: #f1c2c2;
  --color-afgewezen-text: #5a1a1a;
  --color-afgewezen-border: #e8a8a8;
  
  /* Goedgekeurd (donkergroen) */
  --color-goedgekeurd-bg: #c8e6c9;
  --color-goedgekeurd-text: #2e7d32;
  --color-goedgekeurd-border: #a5d6a7;
  
  /* Wachtend (paars) */
  --color-wachtend-bg: #e1bee7;
  --color-wachtend-text: #4a148c;
  --color-wachtend-border: #ce93d8;
  
  /* Actief (donkerblauw) */
  --color-actief-bg: #bbdefb;
  --color-actief-text: #0d47a1;
  --color-actief-border: #90caf9;
  
  /* Inactief (lichtgrijs) */
  --color-inactief-bg: #f5f5f5;
  --color-inactief-text: #616161;
  --color-inactief-border: #e0e0e0;
  
  /* Concept (lichtgeel) */
  --color-concept-bg: #fffde7;
  --color-concept-text: #f57f17;
  --color-concept-border: #fff9c4;
  
  /* Voltooid (donkergroen) */
  --color-voltooid-bg: #c8e6c9;
  --color-voltooid-text: #1b5e20;
  --color-voltooid-border: #a5d6a7;
  
  /* Geannuleerd (donkergrijs) */
  --color-geannuleerd-bg: #e0e0e0;
  --color-geannuleerd-text: #424242;
  --color-geannuleerd-border: #bdbdbd;


  /* ========================================
     PRIORITEIT KLEUREN
     ======================================== */
  
  /* Hoge prioriteit */
  --color-prioriteit-hoog-bg: #ffebee;
  --color-prioriteit-hoog-text: #c62828;
  --color-prioriteit-hoog-border: #ffcdd2;
  
  /* Gemiddelde prioriteit */
  --color-prioriteit-gemiddeld-bg: #fff8e1;
  --color-prioriteit-gemiddeld-text: #ef6c00;
  --color-prioriteit-gemiddeld-border: #ffcc02;
  
  /* Lage prioriteit */
  --color-prioriteit-laag-bg: #e8f5e8;
  --color-prioriteit-laag-text: #2e7d32;
  --color-prioriteit-laag-border: #c8e6c9;


  /* ========================================
     ALGEMENE UI KLEUREN
     ======================================== */
  
  /* Primaire kleur (NOutopia branding) */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-primary-light: #cce7ff;
  
  /* Secundaire kleur */
  --color-secondary: #6c757d;
  --color-secondary-hover: #545b62;
  --color-secondary-light: #e2e3e5;
  
  /* Neutrale kleuren */
  --color-light: #f8f9fa;
  --color-dark: #343a40;
  --color-muted: #6c757d;
  
  /* Border en schaduwen */
  --color-border: #dee2e6;
  --color-shadow: rgba(0, 0, 0, 0.1);
}


/* ========================================
   UTILITY CLASSES - Status badges/labels
   ======================================== */

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
  text-align: center;
}

/* Info */
.status-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

/* Succes */
.status-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

/* Waarschuwing */
.status-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

/* Fout */
.status-error {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}

/* Ingevoerd */
.status-ingevoerd {
  background-color: var(--color-ingevoerd-bg);
  color: var(--color-ingevoerd-text);
  border-color: var(--color-ingevoerd-border);
}

/* In behandeling */
.status-behandeling {
  background-color: var(--color-behandeling-bg);
  color: var(--color-behandeling-text);
  border-color: var(--color-behandeling-border);
}

/* Afgewezen */
.status-afgewezen {
  background-color: var(--color-afgewezen-bg);
  color: var(--color-afgewezen-text);
  border-color: var(--color-afgewezen-border);
}

/* Goedgekeurd */
.status-goedgekeurd {
  background-color: var(--color-goedgekeurd-bg);
  color: var(--color-goedgekeurd-text);
  border-color: var(--color-goedgekeurd-border);
}

/* Wachtend */
.status-wachtend {
  background-color: var(--color-wachtend-bg);
  color: var(--color-wachtend-text);
  border-color: var(--color-wachtend-border);
}

/* Actief */
.status-actief {
  background-color: var(--color-actief-bg);
  color: var(--color-actief-text);
  border-color: var(--color-actief-border);
}

/* Inactief */
.status-inactief {
  background-color: var(--color-inactief-bg);
  color: var(--color-inactief-text);
  border-color: var(--color-inactief-border);
}

/* Concept */
.status-concept {
  background-color: var(--color-concept-bg);
  color: var(--color-concept-text);
  border-color: var(--color-concept-border);
}

/* Voltooid */
.status-voltooid {
  background-color: var(--color-voltooid-bg);
  color: var(--color-voltooid-text);
  border-color: var(--color-voltooid-border);
}

/* Geannuleerd */
.status-geannuleerd {
  background-color: var(--color-geannuleerd-bg);
  color: var(--color-geannuleerd-text);
  border-color: var(--color-geannuleerd-border);
}

/* Prioriteit classes */
.prioriteit-hoog {
  background-color: var(--color-prioriteit-hoog-bg);
  color: var(--color-prioriteit-hoog-text);
  border-color: var(--color-prioriteit-hoog-border);
}

.prioriteit-gemiddeld {
  background-color: var(--color-prioriteit-gemiddeld-bg);
  color: var(--color-prioriteit-gemiddeld-text);
  border-color: var(--color-prioriteit-gemiddeld-border);
}

.prioriteit-laag {
  background-color: var(--color-prioriteit-laag-bg);
  color: var(--color-prioriteit-laag-text);
  border-color: var(--color-prioriteit-laag-border);
}


/* ========================================
   ALERT/NOTIFICATION BOXES
   ======================================== */

.alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 0.375rem;
  border: 1px solid;
}

.alert-info {
  background-color: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-info-border);
}

.alert-success {
  background-color: var(--color-success-bg);
  color: var(--color-success-text);
  border-color: var(--color-success-border);
}

.alert-warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning-text);
  border-color: var(--color-warning-border);
}

.alert-error {
  background-color: var(--color-error-bg);
  color: var(--color-error-text);
  border-color: var(--color-error-border);
}


/* ========================================
   HOVER EFFECTEN
   ======================================== */

.status-badge:hover {
  opacity: 0.8;
  transform: translateY(-1px);
  transition: all 0.2s ease-in-out;
}

.alert:hover {
  box-shadow: 0 2px 4px var(--color-shadow);
  transition: box-shadow 0.2s ease-in-out;
}


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

@media (max-width: 768px) {
  .status-badge {
    font-size: 0.75rem;
    padding: 0.125rem 0.375rem;
  }
  
  .alert {
    padding: 0.75rem;
    font-size: 0.875rem;
  }
}