/*
 * SatuEvent Brand Color Override
 * Primary   : #FF5A5A (coral red)
 * Secondary : #F2680F (deep orange)
 * Third     : #FF8B5A (salmon)
 */

/* ─── Bootstrap :root ───────────────────────────────────────────────────── */
:root {
  --bs-primary:               #FF5A5A;
  --bs-primary-rgb:           255, 90, 90;
  --bs-link-color:            #FF5A5A;
  --bs-link-color-rgb:        255, 90, 90;
  --bs-link-hover-color:      #F2680F;
  --bs-link-hover-color-rgb:  242, 104, 15;
  --bs-focus-ring-color:      rgba(255, 90, 90, 0.25);
}

/* ─── Metronic light theme ───────────────────────────────────────────────── */
[data-bs-theme=light] {
  --bs-primary:                 #FF5A5A;
  --bs-primary-rgb:             255, 90, 90;
  --bs-primary-active:          #F2680F;
  --bs-primary-light:           #FFF0F0;
  --bs-primary-inverse:         #ffffff;
  --bs-primary-clarity:         rgba(255, 90, 90, 0.2);
  --bs-text-primary:            #FF5A5A;
  --bs-component-active-bg:     #FF5A5A;
  --bs-component-hover-color:   #FF5A5A;
  --bs-component-checked-bg:    #FF5A5A;
  --bs-menu-link-color-hover:   #FF5A5A;
  --bs-menu-link-color-show:    #FF5A5A;
  --bs-menu-link-color-here:    #FF5A5A;
  --bs-menu-link-color-active:  #FF5A5A;
}

/* ─── Metronic dark theme ────────────────────────────────────────────────── */
[data-bs-theme=dark] {
  --bs-primary:                 #FF5A5A;
  --bs-primary-rgb:             255, 90, 90;
  --bs-primary-active:          #FF8B5A;
  --bs-primary-light:           #4d1010;
  --bs-primary-inverse:         #ffffff;
  --bs-primary-clarity:         rgba(255, 90, 90, 0.2);
  --bs-text-primary:            #FF8B5A;
  --bs-component-active-bg:     #FF5A5A;
  --bs-component-hover-color:   #FF8B5A;
  --bs-component-checked-bg:    #FF5A5A;
  --bs-menu-link-color-hover:   #FF8B5A;
  --bs-menu-link-color-show:    #FF8B5A;
  --bs-menu-link-color-here:    #FF8B5A;
  --bs-menu-link-color-active:  #FF8B5A;
  --bs-link-color:              #FF8B5A;
  --bs-link-color-rgb:          255, 139, 90;
  --bs-link-hover-color:        #FF5A5A;
  --bs-link-hover-color-rgb:    255, 90, 90;
}

/* ─── Button overrides (hardcoded in style.bundle.css) ───────────────────── */
.btn-primary {
  --bs-btn-bg:                  #FF5A5A;
  --bs-btn-border-color:        #FF5A5A;
  --bs-btn-hover-bg:            #F2680F;
  --bs-btn-hover-border-color:  #F2680F;
  --bs-btn-active-bg:           #F2680F;
  --bs-btn-active-border-color: #F2680F;
  --bs-btn-disabled-bg:         #FF5A5A;
  --bs-btn-disabled-border-color: #FF5A5A;
  --bs-btn-focus-shadow-rgb:    255, 90, 90;
  --bs-btn-color:               #ffffff;
  --bs-btn-hover-color:         #ffffff;
  --bs-btn-active-color:        #ffffff;
  --bs-btn-disabled-color:      #ffffff;
}

.btn-outline-primary {
  --bs-btn-color:               #FF5A5A;
  --bs-btn-border-color:        #FF5A5A;
  --bs-btn-hover-bg:            #FF5A5A;
  --bs-btn-hover-border-color:  #FF5A5A;
  --bs-btn-active-bg:           #FF5A5A;
  --bs-btn-active-border-color: #FF5A5A;
  --bs-btn-disabled-color:      #FF5A5A;
  --bs-btn-disabled-border-color: #FF5A5A;
  --bs-btn-focus-shadow-rgb:    255, 90, 90;
}

/* ─── Form controls ──────────────────────────────────────────────────────── */
.form-check-input:checked {
  background-color: #FF5A5A;
  border-color:     #FF5A5A;
}
.form-check-input[type=checkbox]:indeterminate {
  background-color: #FF5A5A;
  border-color:     #FF5A5A;
}
.form-control:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 90, 0.25);
}
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 90, 90, 0.25); }
.form-range:focus::-moz-range-thumb     { box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(255, 90, 90, 0.25); }
.form-range::-webkit-slider-thumb       { background-color: #FF5A5A; }
.form-range::-moz-range-thumb           { background-color: #FF5A5A; }

/* ─── Nav pills ──────────────────────────────────────────────────────────── */
.nav-pills {
  --bs-nav-pills-link-active-bg: #FF5A5A;
}
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(255, 90, 90, 0.25);
}

/* ─── Progress bar ───────────────────────────────────────────────────────── */
.progress,
.progress-stacked {
  --bs-progress-bar-bg: #FF5A5A;
}

/* ─── Pagination & list-group active ─────────────────────────────────────── */
.page-link.active,
.active > .page-link {
  background-color: #FF5A5A;
  border-color:     #FF5A5A;
  color:            #ffffff;
}

/* ─── Toolbar header: force WHITE text (toolbar area is dark) ─────────────── */
/* The page title (.page-heading text-gray-900) and breadcrumb crumbs default
   to dark/faint and are invisible on the dark toolbar in light mode. Force
   them all to white on every page at once. Bullet separators keep their bg. */
.app-toolbar .page-title .page-heading,
.app-toolbar .page-heading,
.app-toolbar .breadcrumb .breadcrumb-item,
.app-toolbar .breadcrumb .breadcrumb-item a,
.app-toolbar .breadcrumb .breadcrumb-item > span:not(.bullet) {
  color: #ffffff !important;
}
.app-toolbar .breadcrumb .breadcrumb-item a:hover {
  color: #f2680f !important;
}

/* ─── Domain checker TLD cards ───────────────────────────────────────────── */
/* badge-light-primary: light brand background + brand text */
.badge-light-primary {
  color:            #FF5A5A;
  background-color: #FFF0F0;
}
/* border-primary on tld-card overridden to brand */
.tld-card.border-primary {
  border-color: #FF5A5A !important;
}