/*
 * Eolas Brand Theme Override
 *
 *   Primary        #50B7C1  RGB  80 183 193  — teal (logo colour)
 *   Secondary      #567E82  RGB  86 126 130  — deep teal
 *   Warning        #C26B4F  RGB 194 107  79  — mid orange
 *   Success        #7CC576  RGB 124 197 118  — green (kept)
 *   Danger         #F35C48  RGB 243  92  72  — red  (kept)
 *   Dark Gray      #3B4242  RGB  59  66  66  — sidebar icons / neutral dark
 *   Deep Brown Gray #423F3B RGB  66  63  59  — deep neutral
 *
 * Secondary and Warning are mid-to-light tones — WCAG contrast requires
 * dark (#000) button text rather than white on those backgrounds.
 * Override applies after style.css.
 */

/* ── 1. Root colour tokens ────────────────────────────────────────────────── */
:root,
[data-bs-theme=light] {
  /* Base colours */
  --bs-primary:   #50B7C1;
  --bs-secondary: #567E82;
  --bs-success:   #7CC576;
  --bs-warning:   #C26B4F;
  --bs-danger:    #F35C48;

  /* RGB counterparts (used by bg-opacity, text-opacity, border-opacity utilities) */
  --bs-primary-rgb:   80, 183, 193;
  --bs-secondary-rgb: 86, 126, 130;
  --bs-success-rgb:   124, 197, 118;
  --bs-warning-rgb:   194, 107, 79;
  --bs-danger-rgb:    243, 92, 72;

  /* Primary shades */
  --bs-primary-50: #3A8A92;
  --bs-primary-60: #2B666B;
  --bs-primary-70: #D0EDF0;
  --bs-primary-50-rgb: 58, 138, 146;
  --bs-primary-60-rgb: 43, 102, 107;
  --bs-primary-70-rgb: 208, 237, 240;

  /* Success shades */
  --bs-success-50: #4E9549;
  --bs-success-60: #62B25D;
  --bs-success-70: #AADDAA;
  --bs-success-80: #D2EDD1;
  --bs-success-90: #E8F7E7;
  --bs-success-50-rgb: 78, 149, 73;
  --bs-success-60-rgb: 98, 178, 93;
  --bs-success-70-rgb: 170, 221, 170;
  --bs-success-80-rgb: 210, 237, 209;
  --bs-success-90-rgb: 232, 247, 231;

  /* Danger shades */
  --bs-danger-div:     #FFC9C5;
  --bs-danger-40:      #BF2A18;
  --bs-danger-50:      #D53C28;
  --bs-danger-60:      #C02018;
  --bs-danger-70:      #FCD6D2;
  --bs-danger-80:      #F57060;
  --bs-danger-90:      #A82018;
  --bs-danger-100:     #FFF2F1;
  --bs-danger-div-rgb: 255, 201, 197;
  --bs-danger-40-rgb:  191, 42, 24;
  --bs-danger-50-rgb:  213, 60, 40;
  --bs-danger-60-rgb:  192, 32, 24;
  --bs-danger-70-rgb:  252, 214, 210;
  --bs-danger-80-rgb:  245, 112, 96;
  --bs-danger-90-rgb:  168, 32, 24;
  --bs-danger-100-rgb: 255, 242, 241;

  /* Secondary shade */
  --bs-secondary-50: #3F5B5F;
  --bs-secondary-50-rgb: 63, 91, 95;

  /* Text emphasis (accessible dark tones for text on white backgrounds) */
  --bs-primary-text-emphasis:   #1E4649;
  --bs-secondary-text-emphasis: #3F5B5F;
  --bs-success-text-emphasis:   #2A4E27;
  --bs-warning-text-emphasis:   #5E2A18;
  --bs-danger-text-emphasis:    #5D1C15;

  /* Subtle backgrounds (very light tints) */
  --bs-primary-bg-subtle:   #D0EDF0;
  --bs-secondary-bg-subtle: #CCDBDD;
  --bs-success-bg-subtle:   #D5EFCE;
  --bs-warning-bg-subtle:   #F5DDD6;
  --bs-danger-bg-subtle:    #FDD9D5;

  /* Subtle borders */
  --bs-primary-border-subtle:   #A8DBE0;
  --bs-secondary-border-subtle: #97B8BB;
  --bs-success-border-subtle:   #B3E0AE;
  --bs-warning-border-subtle:   #DDA28E;
  --bs-danger-border-subtle:    #F9A89F;

  /* Links */
  --bs-link-color:     #50B7C1;
  --bs-link-color-rgb: 80, 183, 193;
  --bs-link-hover-color: #3A8A92;

  /* Form validation */
  --bs-form-valid-color:         #7CC576;
  --bs-form-valid-border-color:  #7CC576;
  --bs-form-invalid-color:       #F35C48;
  --bs-form-invalid-border-color:#F35C48;

  /* Border colour tint used in some template components */
  --bs-border-color-50: #D0EDF0;
}

/* Dark theme token overrides */
[data-bs-theme=dark] {
  --bs-primary:           #70C8D1;
  --bs-secondary:         #7BA3A7;
  --bs-success:           #96D491;
  --bs-warning:           #D4896A;
  --bs-danger:            #F57A68;
  --bs-primary-rgb:       112, 200, 209;
  --bs-secondary-rgb:     123, 163, 167;
  --bs-success-rgb:       150, 212, 145;
  --bs-warning-rgb:       212, 137, 106;
  --bs-danger-rgb:        245, 122, 104;
  --bs-link-color:        #70C8D1;
  --bs-link-color-rgb:    112, 200, 209;
  --bs-link-hover-color:  #96D8DF;
  --bs-primary:           #50B7C1;
  --bs-primary-rgb:       80, 183, 193;

  /* Keep primary same in dark — it reads well */
  --bs-primary-text-emphasis:   #A8DBE0;
  --bs-secondary-text-emphasis: #567E82;
  --bs-success-text-emphasis:   #B3E0AE;
  --bs-warning-text-emphasis:   #DDA28E;
  --bs-danger-text-emphasis:    #F9A89F;

  --bs-primary-bg-subtle:   #1B3D40;
  --bs-secondary-bg-subtle: #1C3133;
  --bs-success-bg-subtle:   #253D23;
  --bs-warning-bg-subtle:   #3D1F14;
  --bs-danger-bg-subtle:    #4A1912;

  --bs-form-valid-color:          #96D491;
  --bs-form-valid-border-color:   #96D491;
  --bs-form-invalid-color:        #F57A68;
  --bs-form-invalid-border-color: #F57A68;
}

/* ── 2. Button variants ───────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-color:               #FFF;
  --bs-btn-bg:                  #50B7C1;
  --bs-btn-border-color:        #50B7C1;
  --bs-btn-hover-color:         #FFF;
  --bs-btn-hover-bg:            #6AC3CC;
  --bs-btn-hover-border-color:  #62BFC9;
  --bs-btn-focus-shadow-rgb:    80, 183, 193;
  --bs-btn-active-color:        #FFF;
  --bs-btn-active-bg:           #40929A;
  --bs-btn-active-border-color: #3A8A92;
  --bs-btn-disabled-color:      #FFF;
  --bs-btn-disabled-bg:         #50B7C1;
  --bs-btn-disabled-border-color: #50B7C1;
}

.btn-secondary {
  --bs-btn-color:               #FFF;
  --bs-btn-bg:                  #567E82;
  --bs-btn-border-color:        #567E82;
  --bs-btn-hover-color:         #FFF;
  --bs-btn-hover-bg:            #6B9397;
  --bs-btn-hover-border-color:  #628B8F;
  --bs-btn-focus-shadow-rgb:    86, 126, 130;
  --bs-btn-active-color:        #FFF;
  --bs-btn-active-bg:           #456469;
  --bs-btn-active-border-color: #3F5B5F;
  --bs-btn-disabled-color:      #FFF;
  --bs-btn-disabled-bg:         #567E82;
  --bs-btn-disabled-border-color: #567E82;
}

.btn-success {
  --bs-btn-color:               #FFF;
  --bs-btn-bg:                  #7CC576;
  --bs-btn-border-color:        #7CC576;
  --bs-btn-hover-color:         #FFF;
  --bs-btn-hover-bg:            #92CE8D;
  --bs-btn-hover-border-color:  #8CCB87;
  --bs-btn-focus-shadow-rgb:    124, 197, 118;
  --bs-btn-active-color:        #FFF;
  --bs-btn-active-bg:           #62A65D;
  --bs-btn-active-border-color: #5A9E57;
  --bs-btn-disabled-color:      #FFF;
  --bs-btn-disabled-bg:         #7CC576;
  --bs-btn-disabled-border-color: #7CC576;
}

.btn-warning {
  --bs-btn-color:               #000;
  --bs-btn-bg:                  #C26B4F;
  --bs-btn-border-color:        #C26B4F;
  --bs-btn-hover-color:         #000;
  --bs-btn-hover-bg:            #CE8268;
  --bs-btn-hover-border-color:  #C87A60;
  --bs-btn-focus-shadow-rgb:    194, 107, 79;
  --bs-btn-active-color:        #000;
  --bs-btn-active-bg:           #A85A40;
  --bs-btn-active-border-color: #9E5438;
  --bs-btn-disabled-color:      #000;
  --bs-btn-disabled-bg:         #C26B4F;
  --bs-btn-disabled-border-color: #C26B4F;
}

.btn-danger {
  --bs-btn-color:               #FFF;
  --bs-btn-bg:                  #F35C48;
  --bs-btn-border-color:        #F35C48;
  --bs-btn-hover-color:         #FFF;
  --bs-btn-hover-bg:            #F57568;
  --bs-btn-hover-border-color:  #F46D60;
  --bs-btn-focus-shadow-rgb:    243, 92, 72;
  --bs-btn-active-color:        #FFF;
  --bs-btn-active-bg:           #C54939;
  --bs-btn-active-border-color: #BC4536;
  --bs-btn-disabled-color:      #FFF;
  --bs-btn-disabled-bg:         #F35C48;
  --bs-btn-disabled-border-color: #F35C48;
}

/* ── 3. Outline button variants ──────────────────────────────────────────── */
.btn-outline-primary {
  --bs-btn-color:               #50B7C1;
  --bs-btn-border-color:        #50B7C1;
  --bs-btn-hover-color:         #000;
  --bs-btn-hover-bg:            #50B7C1;
  --bs-btn-hover-border-color:  #50B7C1;
  --bs-btn-focus-shadow-rgb:    80, 183, 193;
  --bs-btn-active-color:        #000;
  --bs-btn-active-bg:           #50B7C1;
  --bs-btn-active-border-color: #50B7C1;
  --bs-btn-disabled-color:      #50B7C1;
  --bs-btn-disabled-border-color: #50B7C1;
}

.btn-outline-secondary {
  --bs-btn-color:               #567E82;
  --bs-btn-border-color:        #567E82;
  --bs-btn-hover-color:         #FFF;
  --bs-btn-hover-bg:            #567E82;
  --bs-btn-hover-border-color:  #567E82;
  --bs-btn-focus-shadow-rgb:    86, 126, 130;
  --bs-btn-active-color:        #FFF;
  --bs-btn-active-bg:           #567E82;
  --bs-btn-active-border-color: #567E82;
  --bs-btn-disabled-color:      #567E82;
  --bs-btn-disabled-border-color: #567E82;
}

.btn-outline-success {
  --bs-btn-color:               #7CC576;
  --bs-btn-border-color:        #7CC576;
  --bs-btn-hover-color:         #000;
  --bs-btn-hover-bg:            #7CC576;
  --bs-btn-hover-border-color:  #7CC576;
  --bs-btn-focus-shadow-rgb:    124, 197, 118;
  --bs-btn-active-color:        #000;
  --bs-btn-active-bg:           #7CC576;
  --bs-btn-active-border-color: #7CC576;
  --bs-btn-disabled-color:      #7CC576;
  --bs-btn-disabled-border-color: #7CC576;
}

.btn-outline-warning {
  --bs-btn-color:               #C26B4F;
  --bs-btn-border-color:        #C26B4F;
  --bs-btn-hover-color:         #000;
  --bs-btn-hover-bg:            #C26B4F;
  --bs-btn-hover-border-color:  #C26B4F;
  --bs-btn-focus-shadow-rgb:    194, 107, 79;
  --bs-btn-active-color:        #000;
  --bs-btn-active-bg:           #C26B4F;
  --bs-btn-active-border-color: #C26B4F;
  --bs-btn-disabled-color:      #C26B4F;
  --bs-btn-disabled-border-color: #C26B4F;
}

.btn-outline-danger {
  --bs-btn-color:               #F35C48;
  --bs-btn-border-color:        #F35C48;
  --bs-btn-hover-color:         #000;
  --bs-btn-hover-bg:            #F35C48;
  --bs-btn-hover-border-color:  #F35C48;
  --bs-btn-focus-shadow-rgb:    243, 92, 72;
  --bs-btn-active-color:        #000;
  --bs-btn-active-bg:           #F35C48;
  --bs-btn-active-border-color: #F35C48;
  --bs-btn-disabled-color:      #F35C48;
  --bs-btn-disabled-border-color: #F35C48;
}

/* ── 4. Alert variants ───────────────────────────────────────────────────── */
.alert-primary {
  --bs-alert-color:        #1E4649;
  --bs-alert-bg:           #D0EDF0;
  --bs-alert-border-color: #A8DBE0;
  --bs-alert-link-color:   #1E4649;
}
.alert-secondary {
  --bs-alert-color:        #2A4A4E;
  --bs-alert-bg:           #D4E5E7;
  --bs-alert-border-color: #97B8BB;
  --bs-alert-link-color:   #2A4A4E;
}
.alert-success {
  --bs-alert-color:        #2A4E27;
  --bs-alert-bg:           #D5EFCE;
  --bs-alert-border-color: #B3E0AE;
  --bs-alert-link-color:   #2A4E27;
}
.alert-warning {
  --bs-alert-color:        #5E2A18;
  --bs-alert-bg:           #F5DDD6;
  --bs-alert-border-color: #DDA28E;
  --bs-alert-link-color:   #5E2A18;
}
.alert-danger {
  --bs-alert-color:        #5D1C15;
  --bs-alert-bg:           #FDD9D5;
  --bs-alert-border-color: #F9A89F;
  --bs-alert-link-color:   #5D1C15;
}

/* ── 5. Badge variants ───────────────────────────────────────────────────── */
.badge.bg-primary   { background-color: #50B7C1 !important; color: #000; }
.badge.bg-secondary { background-color: #567E82 !important; color: #000; }
.badge.bg-success   { background-color: #7CC576 !important; color: #000; }
.badge.bg-warning   { background-color: #C26B4F !important; color: #000; }
.badge.bg-danger    { background-color: #F35C48 !important; color: #000; }

.badge.text-bg-primary   { background-color: #50B7C1 !important; color: #000 !important; }
.badge.text-bg-secondary { background-color: #567E82 !important; color: #000 !important; }
.badge.text-bg-success   { background-color: #7CC576 !important; color: #000 !important; }
.badge.text-bg-warning   { background-color: #C26B4F !important; color: #000 !important; }
.badge.text-bg-danger    { background-color: #F35C48 !important; color: #000 !important; }

/* ── 6. Progress bars ────────────────────────────────────────────────────── */
.progress-bar.bg-primary   { background-color: #50B7C1 !important; }
.progress-bar.bg-secondary { background-color: #567E82 !important; }
.progress-bar.bg-success   { background-color: #7CC576 !important; }
.progress-bar.bg-warning   { background-color: #C26B4F !important; }
.progress-bar.bg-danger    { background-color: #F35C48 !important; }

/* Default progress bar (no colour class) */
.progress-bar {
  background-color: #50B7C1;
}

/* ── 7. Form validation SVG icons (URL-encoded hex colours) ──────────────── */
/* Valid — #7CC576 → %237CC576 */
.was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #7CC576;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%237CC576' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
}
.was-validated .form-select:valid,
.form-select.is-valid {
  border-color: #7CC576;
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%237CC576' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
}

/* Invalid — #F35C48 → %23F35C48 */
.was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #F35C48;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23F35C48'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F35C48' stroke='none'/%3e%3c/svg%3e");
}
.was-validated .form-select:invalid,
.form-select.is-invalid {
  border-color: #F35C48;
  --bs-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2020/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23F35C48'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23F35C48' stroke='none'/%3e%3c/svg%3e");
}

/* ── 8. Focus rings ──────────────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #50B7C1;
  box-shadow: 0 0 0 0.25rem rgba(80, 183, 193, 0.25);
}

/* ── 9. Link colour ──────────────────────────────────────────────────────── */
a { color: #50B7C1; }
a:hover { color: #3A8A92; }

/* ── 10. Sidebar icons & active item ─────────────────────────────────────── */
.layout-menu .menu-item .menu-link .menu-icon {
  color: #3B4242;
}
.layout-menu .menu-item .menu-link.active,
.layout-menu .menu-item .menu-link:hover {
  color: #50B7C1;
}
.layout-menu .menu-item .menu-link.active .menu-icon,
.layout-menu .menu-item .menu-link:hover .menu-icon {
  color: #50B7C1;
}

/* ── 11. Buttons: normalize default size to match form-control height ───── */
/*
 * Bootstrap defaults: padding-y 0.375rem, font-size 0.88rem → ~38px tall.
 * Template form-control is 50px.  Override via CSS vars so .btn-sm / .btn-lg
 * are unaffected.
 */
.btn:not(.btn-sm):not(.btn-lg) {
  --bs-btn-padding-y:     3px;
  --bs-btn-padding-x:     8px;
  --bs-btn-font-size:     0.875rem;
  --bs-btn-border-radius: 8px;
}

/* ── 12. Form controls: normalize select sizing to match input ───────────── */
.form-select {
  height: 50px;
  padding: 14px 44px 14px 16px;
  font-size: 15px;
  color: #3A4252;
  background-color: #fff;
  border: 1px solid #D5D9E2;
  border-radius: 7px;
  transition: all ease 0.5s;
  background-position: right 14px center;
}

/* Remove grey text from elements carrying both classes */
.form-control.form-select {
  color: #3A4252;
}

/* ── 13. Sidebar logo — centred ──────────────────────────────────────────── */
.sidebar-area .logo a {
  text-align: center;
}

/* Dark mode */
[data-theme=dark] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: #15203c;
  border-color: #15203c;
  color: #fff;
}

/* ── 14. Explicit text-secondary override ────────────────────────────────────
 * Bootstrap 5.3 changed .text-secondary to map to --bs-secondary-color
 * (body muted text) rather than the theme secondary. This ensures our
 * secondary colour is always applied regardless of Bootstrap version or
 * any hardcoded value in Trezo's compiled style.css.
 */
.text-secondary { color: #567E82 !important; }

/* ── 15. Missing / broken wh utility sizes ────────────────────────────────────
 * The Trezo theme skips wh-56 and wh-72, and has wh-80 with height:60px (typo).
 * Defining them here so icon circles render as true circles everywhere.
 */
.wh-56 { width: 56px; height: 56px; }
.wh-72 { width: 72px; height: 72px; }
.wh-80 { width: 80px !important; height: 80px !important; }

.pt-100 {
    padding-top: 100px;
}
.pb-100 {
    padding-bottom: 100px;
}
.mt-100 {
    margin-top: 100px;
}
.mb-100 {
    margin-bottom: 100px;
}

.pt-75 {
    padding-top: 75px;
}
.pb-75 {
    padding-bottom: 75px;
}