/* ============================================
   ABI BEAUTY CRM - SIDEBAR & NAVBAR THEME
   Accent: #ec008c
   Only sidebar + navbar dark, content stays light
   ============================================ */

:root {
    --abi-accent: #ec008c;
    --abi-accent-light: #ff3daa;
    --abi-accent-dark: #c00073;
    --abi-bg-sidebar: #1a1a2e;
    --abi-bg-navbar: #1a1a2e;
    --abi-border: #2a2a4a;
}

/* === SIDEBAR === */
.main-sidebar {
    background-color: var(--abi-bg-sidebar) !important;
}

.main-sidebar .brand-link {
    background-color: var(--abi-bg-sidebar) !important;
    border-bottom: 1px solid var(--abi-border) !important;
}

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--abi-accent) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(236, 0, 140, 0.4);
}

.sidebar-dark-primary .nav-sidebar .nav-link:hover {
    background-color: rgba(236, 0, 140, 0.15) !important;
    color: var(--abi-accent-light) !important;
}

.sidebar-dark-primary .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(236, 0, 140, 0.2) !important;
    color: var(--abi-accent-light) !important;
}

.nav-header {
    color: var(--abi-accent) !important;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.sidebar-version .btn-outline-light {
    border-color: var(--abi-accent) !important;
    color: var(--abi-accent-light) !important;
}

.sidebar-version .btn-outline-light:hover {
    background-color: var(--abi-accent) !important;
    color: #fff !important;
}

/* === LOGIN LOGO — hide text, show only image === */
.login-page .login-logo a,
.register-page .register-logo a {
    font-size: 0 !important;
    display: flex;
    justify-content: center;
}

.login-page .login-logo a img,
.register-page .register-logo a img {
    height: 80px !important;
    font-size: 1rem;
}

/* === BRAND LOGO === */
.brand-link .brand-text {
    color: #e0e0e0 !important;
    font-weight: 300;
}

.brand-link .brand-text b {
    color: var(--abi-accent) !important;
    font-weight: 700;
}

/* === NAVBAR === */
.main-header.navbar {
    background-color: var(--abi-bg-navbar) !important;
    border-bottom: 2px solid var(--abi-accent) !important;
}

.main-header .nav-link {
    color: #e0e0e0 !important;
}

.main-header .nav-link:hover {
    color: var(--abi-accent-light) !important;
}

.main-header .navbar-badge {
    color: #fff;
}

/* === BUTTONS accent only === */
.btn-primary {
    background-color: var(--abi-accent) !important;
    border-color: var(--abi-accent) !important;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--abi-accent-dark) !important;
    border-color: var(--abi-accent-dark) !important;
    box-shadow: 0 2px 8px rgba(236, 0, 140, 0.4) !important;
}

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

.btn-outline-primary:hover {
    background-color: var(--abi-accent) !important;
    color: #fff !important;
}

/* === RESERVATION ALERT BAR === */
.reservation-alert-bar {
    background: linear-gradient(135deg, var(--abi-accent) 0%, var(--abi-accent-dark) 100%) !important;
}

/* === BADGES === */
.badge-primary, .bg-primary {
    background-color: var(--abi-accent) !important;
}

/* === PAGINATION active === */
.page-item.active .page-link {
    background-color: var(--abi-accent) !important;
    border-color: var(--abi-accent) !important;
}

/* === LOGIN / AUTH PAGES === */
.login-page, .register-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%) !important;
}

.login-page .login-box .card,
.register-page .register-box .card {
    background-color: #1e1e3a !important;
    border-top: 3px solid var(--abi-accent) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.login-page .card-header,
.register-page .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #2a2a4a !important;
    color: #e0e0e0 !important;
}

.login-page .card-header h3,
.register-page .card-header h3 {
    color: #e0e0e0 !important;
}

.login-page .card-body,
.register-page .card-body {
    color: #e0e0e0 !important;
}

.login-page .form-control,
.register-page .form-control {
    background-color: #252545 !important;
    border-color: #2a2a4a !important;
    color: #e0e0e0 !important;
}

.login-page .form-control:focus,
.register-page .form-control:focus {
    border-color: var(--abi-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(236, 0, 140, 0.25) !important;
}

.login-page .input-group-text,
.register-page .input-group-text {
    background-color: #252545 !important;
    border-color: #2a2a4a !important;
    color: #8a8a9a !important;
}

.login-page .login-logo a,
.register-page .register-logo a {
    color: #e0e0e0 !important;
}

.login-page a, .register-page a {
    color: var(--abi-accent-light) !important;
}

.login-page a:hover, .register-page a:hover {
    color: var(--abi-accent) !important;
}

.login-page .card-footer,
.register-page .card-footer {
    background-color: transparent !important;
    border-top: 1px solid #2a2a4a !important;
}

.login-page .icheck-primary > input:checked + label::before {
    background-color: var(--abi-accent) !important;
    border-color: var(--abi-accent) !important;
}

/* === FORM FOCUS === */
.form-control:focus {
    border-color: var(--abi-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(236, 0, 140, 0.25) !important;
}

/* === TABLE HEADER accent === */
.table thead th {
    border-bottom: 2px solid var(--abi-accent) !important;
}

/* === PROGRESS BAR === */
.progress-bar {
    background-color: var(--abi-accent) !important;
}

/* === CARD OUTLINE PRIMARY === */
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--abi-accent) !important;
}

.card-primary.card-outline {
    border-top-color: var(--abi-accent) !important;
}