/*
 * SevenTimes – Design Token Colors
 * Standaardkleuren voor het hele project.
 * Gebruik deze CSS-variabelen in alle andere stijlbestanden.
 *
 * Shift-kleuren:
 *   --color-blue   #4B92DB  (voorkeur / primair)
 *   --color-green  #00A693
 *   --color-orange #FF9966
 */

:root {
    /* ── Basis shift-kleuren ─────────────────────────────── */
    --color-blue:   #4B92DB;
    --color-green:  #00A693;
    --color-orange: #FF9966;

    /* Hover/active variants (UI buttons, links) */
    --color-green-hover: #008C7A;

    /* ── Extended palette (secondary tones, UI accents) ─── */
    --color-blue-dark:  #1560BD;   /* label/header blue — 25+ usages */
    --color-blue-hover: #3A7BC8;   /* blue button hover state */
    --color-blue-tint:  #eaf3ff;   /* light blue panel/modal background */
    --color-form-bg:    #d0dff2;   /* form card / panel background */
    --color-field-bg:   #e8eff9;   /* input/note area light blue background */
    --color-star:       #FFD700;   /* star rating gold */

    /* ── Shift-type stripe tints ─────────────────────────── */
    --color-blue-stripe:   #6fa8e2;   /* lighter blue in blue-x-shift diagonal */
    --color-orange-stripe: #ffad85;   /* lighter orange in orange-x-shift diagonal */
    --color-orange-pale:   #f3c5ae;   /* very light orange for rejected/past states */

    /* ── Gray & pink shift types ─────────────────────────── */
    --color-gray-shift:      #b8b8b8;   /* gray stripe foreground */
    --color-gray-shift-dark: #a0a0a0;   /* gray stripe shadow */
    --color-gray-bg:         #d5eeee;   /* soft teal placeholder background */
    --color-pink:            #f85084;   /* pink shift type */
    --color-pink-light:      #fa82a7;   /* lighter pink in pink-x-shift diagonal */

    /* ── RGB-kanalen (voor gebruik met rgba()) ───────────── */
    --color-blue-dark-rgb: 21, 96, 189;
    --color-blue-rgb:   75, 146, 219;
    --color-green-rgb:  0, 166, 147;
    --color-orange-rgb: 255, 153, 102;

    /* ── Achtergrond-tints (percentages van de basiskleur) ── */
    /* 10 % */
    --bg-blue-10:   rgba(var(--color-blue-rgb),   0.10);
    --bg-green-10:  rgba(var(--color-green-rgb),  0.10);
    --bg-orange-10: rgba(var(--color-orange-rgb), 0.10);

    /* 20 % */
    --bg-blue-20:   rgba(var(--color-blue-rgb),   0.20);
    --bg-green-20:  rgba(var(--color-green-rgb),  0.20);
    --bg-orange-20: rgba(var(--color-orange-rgb), 0.20);

    /* 30 % */
    --bg-blue-30:   rgba(var(--color-blue-rgb),   0.30);
    --bg-green-30:  rgba(var(--color-green-rgb),  0.30);
    --bg-orange-30: rgba(var(--color-orange-rgb), 0.30);

    /* 40 % */
    --bg-blue-40:   rgba(var(--color-blue-rgb),   0.40);
    --bg-green-40:  rgba(var(--color-green-rgb),  0.40);
    --bg-orange-40: rgba(var(--color-orange-rgb), 0.40);

    /* 70 % */
    --bg-blue-70:   rgba(var(--color-blue-rgb),   0.70);
    --bg-green-70:  rgba(var(--color-green-rgb),  0.70);
    --bg-orange-70: rgba(var(--color-orange-rgb), 0.70);

    /* 100 % (volledig dekkend) */
    --bg-blue-100:   var(--color-blue);
    --bg-green-100:  var(--color-green);
    --bg-orange-100: var(--color-orange);
}

/* ════════════════════════════════════════════════════════════
   Utility-klassen – achtergrond + witte tekst
   Voorkeur: blue-shift
   ════════════════════════════════════════════════════════════ */

/* ── Blue (primair / voorkeur) ───────────────────────────── */
.bg-blue-10  { background-color: rgba(75, 146, 219, 0.10); color: #1a3a5c; }
.bg-blue-20  { background-color: rgba(75, 146, 219, 0.20); color: #1a3a5c; }
.bg-blue-30  { background-color: rgba(75, 146, 219, 0.30); color: #1a3a5c; }
.bg-blue-40  { background-color: rgba(75, 146, 219, 0.40); color: #fff; }
.bg-blue-70  { background-color: rgba(75, 146, 219, 0.70); color: #fff; }
.bg-blue-100 { background-color: #4B92DB;                  color: #fff; }

/* ── Green ───────────────────────────────────────────────── */
.bg-green-10  { background-color: rgba(0, 166, 147, 0.10); color: #004d45; }
.bg-green-20  { background-color: rgba(0, 166, 147, 0.20); color: #004d45; }
.bg-green-30  { background-color: rgba(0, 166, 147, 0.30); color: #004d45; }
.bg-green-40  { background-color: rgba(0, 166, 147, 0.40); color: #fff; }
.bg-green-70  { background-color: rgba(0, 166, 147, 0.70); color: #fff; }
.bg-green-100 { background-color: #00A693;                  color: #fff; }

/* ── Orange ──────────────────────────────────────────────── */
.bg-orange-10  { background-color: rgba(255, 153, 102, 0.10); color: #7a3300; }
.bg-orange-20  { background-color: rgba(255, 153, 102, 0.20); color: #7a3300; }
.bg-orange-30  { background-color: rgba(255, 153, 102, 0.30); color: #7a3300; }
.bg-orange-40  { background-color: rgba(255, 153, 102, 0.40); color: #fff; }
.bg-orange-70  { background-color: rgba(255, 153, 102, 0.70); color: #fff; }
.bg-orange-100 { background-color: #FF9966;                   color: #fff; }

/* ════════════════════════════════════════════════════════════
   Tekst-kleur utility-klassen
   ════════════════════════════════════════════════════════════ */
.text-blue   { color: var(--color-blue);   }
.text-green  { color: var(--color-green);  }
.text-orange { color: var(--color-orange); }

/* Ensure text utility colors win over form label defaults (all-form.css) */
.basic-form label.text-green { color: var(--color-green) !important; }

/* ════════════════════════════════════════════════════════════
   Bootstrap btn-success override — use project green
   ════════════════════════════════════════════════════════════ */
.btn-success {
    --bs-btn-bg:           var(--color-green);
    --bs-btn-border-color: var(--color-green);
    --bs-btn-hover-bg:     var(--color-green-hover);
    --bs-btn-hover-border-color: var(--color-green-hover);
    --bs-btn-active-bg:    var(--color-green-hover);
    --bs-btn-active-border-color: var(--color-green-hover);
    --bs-btn-disabled-bg:  var(--color-green);
    --bs-btn-disabled-border-color: var(--color-green);
}
.btn-outline-success {
    --bs-btn-color:        var(--color-green);
    --bs-btn-border-color: var(--color-green);
    --bs-btn-hover-bg:     var(--color-green);
    --bs-btn-hover-border-color: var(--color-green);
    --bs-btn-active-bg:    var(--color-green);
    --bs-btn-active-border-color: var(--color-green);
}