/* Custom Pink Theme for Myssitar Fidélité */
:root {
    --pink-primary: #ec4899;
    --pink-dark: #db2777;
    --pink-darker: #9d174d;
    --pink-light: #fbcfe8;
    --pink-subtle: #fdf2f8;
    --pink-gradient: linear-gradient(180deg, #ec4899 10%, #9d174d 100%);
    --pink-gradient-horizontal: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #9d174d 100%);
    --pink-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
}

/* Background Gradients */
.bg-gradient-primary {
    background-color: var(--pink-primary) !important;
    background-image: var(--pink-gradient) !important;
    background-size: cover !important;
}

.bg-primary {
    background-color: var(--pink-primary) !important;
}

/* Text Colors */
.text-primary {
    color: var(--pink-dark) !important;
}

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

/* Border Accent Cards */
.border-left-primary {
    border-left: 0.25rem solid var(--pink-dark) !important;
}

.border-primary {
    border-color: var(--pink-dark) !important;
}

/* Buttons */
.btn-primary {
    color: #fff !important;
    background-color: var(--pink-dark) !important;
    border-color: var(--pink-dark) !important;
    box-shadow: 0 2px 6px rgba(219, 39, 119, 0.3);
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    color: #fff !important;
    background-color: var(--pink-darker) !important;
    border-color: var(--pink-darker) !important;
    box-shadow: 0 4px 12px rgba(157, 23, 77, 0.4);
}

.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.2rem rgba(236, 72, 153, 0.5) !important;
}

.btn-outline-primary {
    color: var(--pink-dark) !important;
    border-color: var(--pink-dark) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    color: #fff !important;
    background-color: var(--pink-dark) !important;
    border-color: var(--pink-dark) !important;
}

/* DataTables & Table Styling */
#dataTable thead {
    background-color: var(--pink-dark) !important;
    color: #ffffff !important;
}

#dataTable thead th {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff !important;
    background-color: var(--pink-dark) !important;
    border-color: var(--pink-dark) !important;
}

.page-link {
    color: var(--pink-dark) !important;
}

.page-link:hover {
    color: var(--pink-darker) !important;
    background-color: var(--pink-subtle) !important;
}

/* Forms & Inputs */
.form-control:focus {
    border-color: var(--pink-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(236, 72, 153, 0.25) !important;
}

.custom-control-input:checked ~ .custom-control-label::before {
    color: #fff;
    border-color: var(--pink-dark) !important;
    background-color: var(--pink-dark) !important;
}

/* Progress Bars */
.progress-bar {
    background-color: var(--pink-dark) !important;
}

.progress-bar.bg-primary {
    background-color: var(--pink-primary) !important;
}

/* Scroll to top */
.scroll-to-top {
    background: rgba(219, 39, 119, 0.7) !important;
}

.scroll-to-top:hover {
    background: var(--pink-darker) !important;
}

/* Links inside content */
a {
    color: var(--pink-dark);
}

a:hover {
    color: var(--pink-darker);
}

/* Login Page Brand Logo */
.brand-logo {
    color: var(--pink-dark) !important;
}