/* =========================================================
   INZOX CRM - Brand Theme Overrides for AdminLTE 3
   Primary Blue : #0066FF
   Dark Navy    : #0B0E1E
   Accent Light : #3388FF
   ========================================================= */

:root {
    --inzox-blue: #0066FF;
    --inzox-navy: #0B0E1E;
    --inzox-accent: #3388FF;
}

/* --- Sidebar --- */
.main-sidebar,
.main-sidebar .sidebar {
    background-color: var(--inzox-navy) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-link.active {
    background-color: var(--inzox-blue) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(0, 102, 255, 0.35);
}
.nav-sidebar .nav-link {
    color: #c2c7d0 !important;
}
.nav-sidebar .nav-link:hover {
    background-color: rgba(0, 102, 255, 0.18) !important;
    color: #ffffff !important;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(0, 102, 255, 0.25) !important;
    color: #fff !important;
}
.brand-link {
    background-color: var(--inzox-navy) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: center;
}
.brand-link .brand-image {
    max-height: 36px;
    width: auto;
    margin: 0 auto;
    float: none;
}
.brand-link .brand-text {
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.user-panel .info a {
    color: #fff !important;
}

/* --- Top Navbar --- */
.main-header.navbar {
    background-color: var(--inzox-blue) !important;
    border-bottom: none !important;
}
.main-header .nav-link,
.main-header .navbar-brand,
.main-header .navbar-nav .nav-link {
    color: #ffffff !important;
}
.main-header .nav-link:hover {
    color: #e6efff !important;
}

/* --- Buttons --- */
.btn-primary {
    background-color: var(--inzox-blue) !important;
    border-color: var(--inzox-blue) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #0055dd !important;
    border-color: #0055dd !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 255, 0.25) !important;
}
.btn-outline-primary {
    color: var(--inzox-blue) !important;
    border-color: var(--inzox-blue) !important;
}
.btn-outline-primary:hover {
    background-color: var(--inzox-blue) !important;
    color: #fff !important;
}

/* --- Links / Focus --- */
a {
    color: var(--inzox-blue);
}
a:hover {
    color: #0055dd;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--inzox-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 255, 0.18) !important;
}

/* --- Cards / Headers --- */
.card-primary:not(.card-outline) > .card-header {
    background-color: var(--inzox-blue) !important;
}
.card.card-outline.card-primary {
    border-top: 3px solid var(--inzox-blue) !important;
}

/* --- Login / Register Page --- */
.login-page,
.register-page {
    background: linear-gradient(135deg, var(--inzox-navy) 0%, var(--inzox-blue) 100%) !important;
    min-height: 100vh;
}
.login-box,
.register-box {
    width: 400px;
    margin-top: 4rem;
}
.login-box .card,
.register-box .card {
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    border: none;
    overflow: hidden;
}
.login-logo,
.register-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}
.login-logo img,
.register-logo img {
    max-width: 180px;
    height: auto;
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.4));
}
.login-box-msg,
.register-box-msg {
    color: #495057;
    font-weight: 500;
}
.login-page .input-group-text,
.register-page .input-group-text {
    background-color: #f4f6f9;
    border-color: #ced4da;
    color: var(--inzox-blue);
}

/* --- Select2 (Bootstrap 4 theme) brand tweaks --- */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    background-color: var(--inzox-blue) !important;
    border-color: var(--inzox-blue) !important;
    color: #fff !important;
    padding: 2px 8px !important;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    color: #fff !important;
    font-weight: 700 !important;
    margin-right: 6px !important;
    border: none !important;
    background: transparent !important;
}
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ffd6d6 !important;
    background: transparent !important;
}
/* Select2 4.1.x compatibility: button + inner span structure */
.select2-container--bootstrap4 .select2-selection__choice__remove > span {
    display: inline !important;
}

/* --- DataTables tweaks --- */
table.dataTable thead th {
    background-color: #f4f6f9;
    color: var(--inzox-navy);
    border-bottom: 2px solid var(--inzox-blue) !important;
}

/* DataTables export buttons -> outline style, INZOX blue */
.dt-buttons .btn,
.dt-buttons .dt-button {
    background-color: #fff !important;
    background-image: none !important;
    color: var(--inzox-blue) !important;
    border: 1px solid var(--inzox-blue) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    margin-right: 4px;
    font-weight: 500;
}
.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover,
.dt-buttons .btn:focus,
.dt-buttons .dt-button:focus {
    background-color: var(--inzox-blue) !important;
    color: #fff !important;
    border-color: var(--inzox-blue) !important;
}
.dt-buttons .btn:active,
.dt-buttons .dt-button:active,
.dt-buttons .btn.active,
.dt-buttons .dt-button.active {
    background-color: var(--inzox-navy) !important;
    color: #fff !important;
    border-color: var(--inzox-navy) !important;
}
.dt-buttons .btn i,
.dt-buttons .dt-button i {
    color: inherit !important;
}

/* --- Footer --- */
.main-footer {
    border-top: 1px solid #dee2e6;
    color: #6c757d;
}
.main-footer a {
    color: var(--inzox-blue);
}