/* =============================================================
   RABARANY — shared brand palette (front, admin, login)
   Primary   #55606B  rgb(85, 96, 107)   charcoal
   Secondary #3B444B  rgb(59, 68, 75)
   Tertiary  #353839  rgb(53, 56, 57)
   ============================================================= */

:root {
    --brand-primary: #55606B;
    --brand-primary-rgb: 85, 96, 107;
    --brand-secondary: #3B444B;
    --brand-secondary-rgb: 59, 68, 75;
    --brand-tertiary: #353839;
    --brand-tertiary-rgb: 53, 56, 57;

    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-secondary: var(--brand-secondary);
    --bs-secondary-rgb: var(--brand-secondary-rgb);
}

/* ---------- Surfaces / text / borders ---------- */
.bg-primary,
.badge.bg-primary,
a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
    background-color: var(--brand-primary) !important;
}

.text-primary,
a.text-primary,
a.text-primary:hover,
a.text-primary:focus {
    color: var(--brand-primary) !important;
}

.border-primary,
.border-top-primary,
.border-bottom-primary,
.border-start-primary,
.border-end-primary {
    border-color: var(--brand-primary) !important;
}

.alert-primary,
.bg-light-primary,
.badge.badge-light-primary,
.avatar.bg-light-primary {
    background: rgba(var(--brand-primary-rgb), 0.12) !important;
    color: var(--brand-primary) !important;
}

.overlay-primary {
    background: rgba(var(--brand-primary-rgb), 0.6);
}

.bg-primary.badge-glow,
.border-primary.badge-glow {
    box-shadow: 0 0 10px var(--brand-primary);
}

.bullet.bullet-primary {
    background-color: var(--brand-primary);
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary {
    background-color: var(--brand-secondary) !important;
    border-color: var(--brand-tertiary) !important;
    color: #fff !important;
}

.btn-primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px var(--brand-tertiary);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.25rem rgba(var(--brand-primary-rgb), 0.5) !important;
}

.btn-outline-primary,
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.active {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-outline-primary:hover:not(.disabled):not(:disabled),
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:disabled {
    background-color: rgba(var(--brand-primary-rgb), 0.12) !important;
}

.btn-flat-primary,
.btn-flat-primary:hover,
.btn-flat-primary:active,
.btn-flat-primary.active,
.btn-flat-primary:focus {
    color: var(--brand-primary);
}

.btn-flat-primary:hover:not(.disabled):not(:disabled) {
    background-color: rgba(var(--brand-primary-rgb), 0.12);
}

.btn-flat-primary:active,
.btn-flat-primary.active,
.btn-flat-primary:focus {
    background-color: rgba(var(--brand-primary-rgb), 0.2);
}

.btn-relief-primary {
    background-color: var(--brand-primary);
    color: #fff;
}

.btn-relief-primary:hover:not(.disabled):not(:disabled) {
    background-color: var(--brand-secondary);
}

.btn-relief-primary:active,
.btn-relief-primary.active,
.btn-relief-primary:focus {
    background-color: var(--brand-tertiary);
}

/* ---------- Forms ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-secondary);
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 3px 10px 0 rgba(var(--brand-primary-rgb), 0.15);
}

.form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.form-switch .form-check-input:checked {
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
}

.custom-control-primary .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-primary.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-control-primary.custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* ---------- Pagination / nav ---------- */
.page-item.active .page-link,
.pagination-primary .page-item.active .page-link {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary);
    color: #fff;
}

.pagination-primary .page-item .page-link:hover,
.pagination-primary .page-item.prev-item .page-link:hover,
.pagination-primary .page-item.next-item .page-link:hover {
    color: var(--brand-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--brand-primary);
}

.nav-tabs .nav-link.active {
    color: var(--brand-primary);
}

a {
    color: var(--brand-primary);
}

a:hover {
    color: var(--brand-secondary);
}

/* ---------- Loader ---------- */
html .pace .pace-progress {
    background: var(--brand-tertiary) !important;
}

.spinner-border.text-primary {
    color: var(--brand-primary) !important;
}

/* ---------- Admin sidebar ---------- */
.main-menu .navbar-header .navbar-brand .brand-text {
    color: var(--brand-primary);
}

.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a,
.main-menu.menu-light .navigation > li ul .active,
.main-menu.menu-dark .navigation > li ul .active {
    background: linear-gradient(118deg, var(--brand-primary), rgba(var(--brand-primary-rgb), 0.7));
    box-shadow: 0 0 10px 1px rgba(var(--brand-primary-rgb), 0.45);
    color: #fff;
}

.main-menu.menu-light .navigation > li .active > a,
.main-menu.menu-dark .navigation > li .active > a {
    color: var(--brand-primary);
}

.main-menu.menu-light .navigation > li ul .active > a,
.main-menu.menu-dark .navigation > li ul .active > a {
    color: #fff;
}

/* ---------- Vuexy extras ---------- */
.modal.modal-primary .modal-header .modal-title {
    color: var(--brand-primary);
}

.waves-effect.waves-light .waves-ripple {
    background: radial-gradient(rgba(var(--brand-primary-rgb), 0.2) 0, rgba(var(--brand-primary-rgb), 0.3) 40%, rgba(var(--brand-primary-rgb), 0.4) 50%, rgba(var(--brand-primary-rgb), 0.5) 60%, rgba(255, 255, 255, 0) 70%);
}