/**
 * Cashair Utility Classes
 * ========================
 * 
 * Dit bestand bevat utility classes die de CSS variabelen
 * uit kleuren.php gebruiken voor consistente styling.
 * 
 * BESCHIKBARE VARIABELEN (uit kleuren.php):
 * -----------------------------------------
 * Accent kleuren (schakeringen van hoofdkleur):
 *   --accent-kleur100  (donkerst/origineel)
 *   --accent-kleur90
 *   --accent-kleur80
 *   --accent-kleur70
 *   --accent-kleur60
 *   --accent-kleur50
 *   --accent-kleur40
 *   --accent-kleur30
 *   --accent-kleur20
 *   --accent-kleur10   (lichtst)
 * 
 * Tekst kleuren:
 *   --tekst-kleur-donker
 *   --tekst-kleur-licht
 * 
 * Speciale accent kleuren:
 *   --accent-kleur-light  (= shade 40)
 *   --accent-kleur-wit    (= shade 10)
 *   --accent-kleur-zwart  (= primary active)
 * 
 * Status kleuren:
 *   --groen / --bs-success
 *   --rood / --bs-danger
 *   --oranje / --bs-warning
 *   --wit
 * 
 * Bootstrap overrides (automatisch):
 *   --bs-primary, --bs-secondary, --bs-success, etc.
 * 
 * Bestand: /opus/assets/css/classes.css
 * @version 2.0.0
 */


/* ================================================== */
/*   TEKST KLEUREN                                    */
/* ================================================== */

.text-theme   { color: var(--accent-kleur50); }
.text-lichter { color: var(--accent-kleur20); }
.text-donker  { color: var(--accent-kleur90); }
.tekst1       { color: var(--accent-kleur80) !important; }


/* ================================================== */
/*   ACHTERGROND KLEUREN                              */
/* ================================================== */

.text-accent-bg-licht,
.card-header {
    background-color: var(--accent-kleur-light);
    color: var(--accent-kleur);
}

.bg-accent1,
.bg-accent1-inactive,
.alert-accent1 {
    color: var(--accent-kleur30) !important;
    background-color: var(--accent-kleur80) !important;
}

.bg-accent1:hover {
    color: var(--accent-kleur80) !important;
    background-color: var(--accent-kleur30) !important;
    border: 1px solid var(--accent-kleur90) !important;
}

.bg-accent2 {
    color: var(--accent-kleur50) !important;
    background-color: var(--accent-kleur10) !important;
}

.bg-accent3 {
    color: var(--accent-kleur80) !important;
    background-color: var(--accent-kleur10) !important;
}


/* ================================================== */
/*   BUTTONS - CUSTOM                                 */
/* ================================================== */

.btn-vol {
    background-color: var(--accent-kleur100) !important;
    color: var(--accent-kleur20) !important;
}

.btn-vol:hover,
.btn-vol:focus {
    background-color: var(--accent-kleur60) !important;
    color: var(--accent-kleur100) !important;
    border: 1px solid var(--accent-kleur100) !important;
}

.btn-leeg {
    background-color: var(--accent-kleur30) !important;
    color: var(--accent-kleur100) !important;
    border: 1px solid var(--accent-kleur100) !important;
}

.btn-leeg:hover,
.btn-leeg:focus {
    background-color: var(--accent-kleur80) !important;
    color: var(--accent-kleur100) !important;
    border: 1px solid var(--accent-kleur20) !important;
}


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

.badge1 {
    color: var(--accent-kleur10) !important;
    background-color: var(--accent-kleur90) !important;
}

.badge1-invert {
    color: var(--accent-kleur90) !important;
    background-color: var(--accent-kleur10) !important;
}

.badge1:hover {
    color: var(--accent-kleur90) !important;
    background-color: var(--accent-kleur10) !important;
    border: 0.4px solid var(--accent-kleur90) !important;
}

.badge-warning {
    color: var(--accent-kleur100) !important;
    background-color: var(--oranje) !important;
}


/* ================================================== */
/*   ACCORDION                                        */
/* ================================================== */

.accordion-button,
.accordion-header {
    color: var(--accent-kleur50) !important;
    background-color: var(--accent-kleur20) !important;
}


/* ================================================== */
/*   ALERTS                                           */
/* ================================================== */

.alert-info {
    color: var(--accent-kleur70) !important;
    background-color: var(--accent-kleur10) !important;
    border: 1px solid var(--accent-kleur90) !important;
}


/* ================================================== */
/*   BORDERS                                          */
/* ================================================== */

.border3 {
    border: 2px solid var(--accent-kleur90) !important;
}


/* ================================================== */
/*   LINKS                                            */
/* ================================================== */

a {
    color: var(--accent-kleur100) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--accent-kleur20);
    text-decoration: underline;
}

a.ticket-link {
    color: var(--accent-kleur100);
    text-decoration: none;
}

a.ticket-link:hover,
a.ticket-link:focus {
    color: var(--accent-kleur100);
    text-decoration: underline;
}

a.ticket-link:active {
    color: var(--accent-kleur100);
    text-decoration: none;
}


/* ================================================== */
/*   BOOTSTRAP OVERRIDES                              */
/*   (Voor extra specificiteit waar nodig)            */
/* ================================================== */

/* Buttons */
.btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: var(--wit) !important;
}

.btn-primary:hover {
    background-color: var(--accent-kleur90) !important;
    border-color: var(--accent-kleur90) !important;
}

.btn-secondary {
    background-color: var(--bs-secondary) !important;
    border-color: var(--bs-secondary) !important;
    color: var(--wit) !important;
}

.btn-secondary:hover {
    background-color: var(--accent-kleur60) !important;
    border-color: var(--accent-kleur60) !important;
}

.btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: var(--wit) !important;
}

.btn-success:hover {
    filter: brightness(1.1);
}

.btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: var(--wit) !important;
}

.btn-danger:hover {
    filter: brightness(0.9);
}

.btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: var(--accent-kleur100) !important;
}

.btn-warning:hover {
    filter: brightness(0.95);
}

.btn-outline-danger {
    color: var(--rood) !important;
    background-color: transparent !important;
    border: 1px solid var(--rood) !important;
}

.btn-outline-danger:hover {
    color: var(--wit) !important;
    background-color: var(--rood) !important;
    border: 1px solid var(--rood) !important;
}

.btn-group,
.btn-outline-primary {
    color: var(--accent-kleur70) !important;
    background-color: var(--accent-kleur10) !important;
    border: 0.6px solid var(--accent-kleur90) !important;
}

.active,
.btn-outline-primary:hover {
    color: var(--accent-kleur70) !important;
}


/* Alerts */
.alert-primary {
    background-color: var(--accent-kleur20) !important;
    color: var(--accent-kleur100) !important;
}

.alert-success {
    background-color: #e0f2e9;
    color: var(--groen) !important;
}

.alert-danger {
    background-color: #f8d7da;
    color: var(--rood) !important;
}

.alert-warning {
    background-color: var(--bs-warning) !important;
    color: var(--accent-kleur100) !important;
}

.alert-info {
    background-color: var(--accent-kleur20) !important;
    color: var(--accent-kleur80) !important;
}


/* Badges */
.badge.bg-primary   { background-color: var(--bs-primary) !important; }
.badge.bg-secondary { background-color: var(--bs-secondary) !important; }
.badge.bg-success   { background-color: var(--bs-success) !important; }
.badge.bg-danger    { background-color: var(--bs-danger) !important; }
.badge.bg-warning   { background-color: var(--bs-warning) !important; color: var(--accent-kleur100) !important; }
.badge.bg-info      { background-color: var(--bs-info) !important; }


/* Navbar */
.navbar {
    background-color: var(--accent-kleur100) !important;
}

.navbar .nav-link {
    color: var(--wit) !important;
}

.navbar .nav-link:hover {
    color: var(--accent-kleur30) !important;
}


/* Background utilities */
.bg-primary   { background-color: var(--bs-primary) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success   { background-color: var(--bs-success) !important; }
.bg-danger    { background-color: var(--bs-danger) !important; }
.bg-warning   { background-color: var(--bs-warning) !important; }
.bg-info      { background-color: var(--bs-info) !important; }
.bg-light     { background-color: var(--bs-light) !important; }
.bg-dark      { background-color: var(--bs-dark) !important; }


/* Text utilities */
.text-primary   { color: var(--bs-primary) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success   { color: var(--bs-success) !important; }
.text-danger    { color: var(--bs-danger) !important; }
.text-warning   { color: var(--bs-warning) !important; }
.text-info      { color: var(--bs-info) !important; }
.text-light     { color: var(--bs-light) !important; }
.text-dark      { color: var(--bs-dark) !important; }




/* ================================================== */
/*   EINDE UTILITY CLASSES                            */
/* ================================================== */

/**
 * KM Link Classes - Toevoegen aan classes.css
 * ============================================
 * 
 * Deze classes werken samen met km_link_vars() of km_css_vars()
 * 
 * GEBRUIK:
 * --------
 * 
 * <!-- Op lichte achtergrond -->
 * <div style="<?= km_style('light') ?>">
 *     <a class="km-link-light" href="#">Link tekst</a>
 * </div>
 * 
 * <!-- Op donkere achtergrond -->
 * <div style="<?= km_style('primary') ?>">
 *     <a class="km-link-dark" href="#">Link tekst</a>
 * </div>
 * 
 * <!-- Of automatisch met parent class -->
 * <div class="km-bg-light">
 *     <a class="km-link" href="#">Automatisch correct</a>
 * </div>
 */


/* ================================================== */
/*   KM LINK CLASSES                                  */
/* ================================================== */

/* Link voor LICHTE achtergronden (donkere tekst) */
.km-link-light {
    color: var(--km-link-on-light, var(--accent-kleur100)) !important;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.km-link-light:hover,
.km-link-light:focus {
    color: var(--km-link-hover-light, var(--accent-kleur80)) !important;
    text-decoration: underline;
}

/* Link voor DONKERE achtergronden (lichte tekst) */
.km-link-dark {
    color: var(--km-link-on-dark, var(--accent-kleur30)) !important;
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.2s ease;
}

.km-link-dark:hover,
.km-link-dark:focus {
    color: var(--km-link-hover-dark, var(--accent-kleur10)) !important;
    text-decoration: underline;
}


/* ================================================== */
/*   KM BUTTON CLASSES (optioneel - als alternatief)  */
/* ================================================== */

/* Volle button */
.km-btn-vol {
    background-color: var(--accent-kleur100) !important;
    border: 1px solid var(--accent-kleur100) !important;
    color: var(--tekst-kleur-licht) !important;
    transition: all 0.2s ease;
}

.km-btn-vol:hover,
.km-btn-vol:focus {
    background-color: var(--accent-kleur80) !important;
    border-color: var(--accent-kleur80) !important;
}

/* Lege button */
.km-btn-leeg {
    background-color: var(--accent-kleur20) !important;
    border: 1px solid var(--accent-kleur100) !important;
    color: var(--accent-kleur100) !important;
    transition: all 0.2s ease;
}

.km-btn-leeg:hover,
.km-btn-leeg:focus {
    background-color: var(--accent-kleur30) !important;
}

/* Zachte button */
.km-btn-soft {
    background-color: var(--accent-kleur10) !important;
    border: 1px solid transparent !important;
    color: var(--accent-kleur100) !important;
    transition: all 0.2s ease;
}

.km-btn-soft:hover,
.km-btn-soft:focus {
    background-color: var(--accent-kleur20) !important;
}

/* Ghost button */
.km-btn-ghost {
    background-color: transparent !important;
    border: 1px solid transparent !important;
    color: var(--accent-kleur100) !important;
    transition: all 0.2s ease;
}

.km-btn-ghost:hover,
.km-btn-ghost:focus {
    background-color: var(--accent-kleur10) !important;
}


/* ================================================== */
/*   SUCCESS/WARNING/DANGER VARIANTEN                 */
/* ================================================== */

/* Success buttons */
.km-btn-vol-success {
    background-color: var(--groen) !important;
    border-color: var(--groen) !important;
    color: var(--wit) !important;
}

.km-btn-leeg-success {
    background-color: var(--accent-kleur20) !important;
    border: 1px solid var(--groen) !important;
    color: var(--groen) !important;
}

/* Warning buttons */
.km-btn-vol-warning {
    background-color: var(--oranje) !important;
    border-color: var(--oranje) !important;
    color: var(--accent-kleur100) !important;
}

.km-btn-leeg-warning {
    background-color: var(--accent-kleur20) !important;
    border: 1px solid var(--oranje) !important;
    color: var(--oranje) !important;
}

/* Danger buttons */
.km-btn-vol-danger {
    background-color: var(--rood) !important;
    border-color: var(--rood) !important;
    color: var(--wit) !important;
}

.km-btn-leeg-danger {
    background-color: var(--accent-kleur20) !important;
    border: 1px solid var(--rood) !important;
    color: var(--rood) !important;
}


/* ================================================== */
/*   EINDE KM CLASSES                                 */
/* ================================================== */