/**
 * Eazelead — brand theme (#428bca)
 */
:root {
    --brand-primary: #428bca;
    --brand-primary-hover: #357ebd;
    --brand-primary-active: #3071a9;
    --brand-primary-light: #e8f4fc;
    --brand-primary-rgb: 66, 139, 202;

    --brand-sidebar: #428bca;
    --brand-sidebar-hover: #357ebd;
    --brand-sidebar-active: rgba(255, 255, 255, 0.18);
    --brand-sidebar-border: rgba(255, 255, 255, 0.22);
    --brand-sidebar-accent: #ffffff;

    --brand-accent: #6ba3d1;
    --brand-dark: #2c5282;
    --brand-muted: #64748b;
    --brand-surface: #ffffff;
    --brand-page-bg: #f4f7fc;
    --brand-border: #e2e8f0;

    /* Aliases for module CSS */
    --primary-color: var(--brand-primary);
    --secondary-color: var(--brand-sidebar-hover);
    --primary: var(--brand-primary);
    --primary-dark: var(--brand-primary-hover);
    --primary-light: var(--brand-primary-light);
    --perm-primary: var(--brand-primary);
    --perm-secondary: var(--brand-primary-hover);
    --mkt-primary: var(--brand-primary);
    --mkt-primary-dark: var(--brand-primary-hover);
    --sidebar-bg: var(--brand-sidebar);
    --bg-color: var(--brand-page-bg);
    --hover-color: var(--brand-primary-light);
}

[data-theme="dark"] {
    --brand-sidebar: #357ebd;
    --brand-sidebar-hover: #3071a9;
    --brand-primary: #428bca;
    --brand-primary-hover: #357ebd;
    --sidebar-bg: var(--brand-sidebar) !important;
    --bg-color: #0f172a !important;
    --brand-page-bg: #0f172a;
}

/* —— Sidebar —— */
#sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: var(--brand-sidebar) !important;
    box-shadow: 2px 0 12px rgba(66, 139, 202, 0.25);
}

.sidebar-top {
    flex-shrink: 0;
    padding: 16px 14px 12px;
    border-bottom: 1px solid var(--brand-sidebar-border);
}

.sidebar-product-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
    margin-bottom: 10px;
}

.sidebar-product-brand:hover {
    color: #fff;
    opacity: 0.92;
}

.sidebar-product-brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.sidebar-product-brand__text {
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin: 0;
    color: #fff !important;
    line-height: 1.2;
    white-space: nowrap;
}

.sidebar-product-brand__text em {
    font-style: normal;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 600;
}

.sidebar-company-name {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    padding: 0 2px;
    line-height: 1.35;
    word-break: break-word;
    text-align: left;
}

.sidebar-collapsed .sidebar-product-brand__text,
.sidebar-collapsed .sidebar-company-name {
    opacity: 0;
    width: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.sidebar-collapsed .sidebar-product-brand {
    justify-content: center;
    margin-bottom: 0;
}

#sidebar .sidebar-menu {
    flex: 1 1 auto;
    min-height: 0;
    height: auto !important;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 8px 0 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

#sidebar .sidebar-menu::-webkit-scrollbar {
    width: 6px;
}

#sidebar .sidebar-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 6px;
}

#sidebar .sidebar-menu li a:hover {
    background: rgba(255, 255, 255, 0.14) !important;
}

#sidebar .sidebar-menu li a.active {
    background: var(--brand-sidebar-active) !important;
    box-shadow: inset 3px 0 0 var(--brand-sidebar-accent);
    color: #fff !important;
}

#sidebar .sidebar-menu li a.active i {
    color: #fff !important;
}

/* —— Topbar & page shell —— */
#topbar {
    border-bottom: 2px solid var(--brand-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    background-color: var(--brand-surface);
}

.toggle-btn {
    color: var(--brand-primary) !important;
}

.toggle-btn:hover {
    color: var(--brand-primary-hover) !important;
}

#page-content-component,
.page-container,
.main-container .page-container {
    background-color: var(--brand-page-bg);
}

.page-title,
.page-header .page-title {
    color: var(--brand-dark);
}

.page-title i,
.page-header .page-title i,
.filter-title i {
    color: var(--brand-primary) !important;
}

.filter-section {
    border-color: var(--brand-border);
}

/* —— All primary action buttons —— */
.btn-primary,
.btn-primary:focus,
.btn-primary:active:focus,
input[type="submit"].btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--brand-primary-hover) !important;
    border-color: var(--brand-primary-hover) !important;
    color: #fff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #9ca3af !important;
    border-color: #9ca3af !important;
}

.btn-outline-primary {
    color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    background-color: transparent !important;
}

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

.btn-link {
    color: var(--brand-primary);
}

.btn-link:hover {
    color: var(--brand-primary-hover);
}

/* Custom primary buttons project-wide */
.qcr-btn-primary,
.perm-btn-primary,
.mkt-btn-primary,
.um-btn-primary,
.ls-btn-primary,
.dfb-btn-primary,
.tm-btn-primary,
.ez-btn-signin,
.customer-management-table-btn-primary,
.lm-ov-action--primary,
[class*="-btn-primary"]:not(.btn-outline-primary) {
    background-color: var(--brand-primary) !important;
    background-image: none !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

.qcr-btn-primary:hover,
.perm-btn-primary:hover,
.mkt-btn-primary:hover,
.um-btn-primary:hover,
.ls-btn-primary:hover,
.dfb-btn-primary:hover,
.tm-btn-primary:hover,
.ez-btn-signin:hover:not(:disabled),
.customer-management-table-btn-primary:hover,
.lm-ov-action--primary:hover {
    background-color: var(--brand-primary-hover) !important;
    background-image: none !important;
    border-color: var(--brand-primary-hover) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.25) !important;
}

/* —— Forms —— */
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--brand-primary-rgb), 0.25);
}

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

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

.page-link {
    color: var(--brand-primary);
}

.page-link:hover {
    color: var(--brand-primary-hover);
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* —— Table row actions —— */
.crm-act--edit,
.inv-act--edit,
.leads-table .icon-btn.edit {
    color: var(--brand-primary) !important;
    border-color: #b8d4ee !important;
    background: var(--brand-primary-light) !important;
}

.crm-act--edit:hover,
.inv-act--edit:hover {
    background: #d9ecf8 !important;
    color: var(--brand-primary-hover) !important;
}

/* —— Misc chrome —— */
.global-back-btn {
    background: var(--brand-primary) !important;
    box-shadow: 0 4px 14px rgba(var(--brand-primary-rgb), 0.4) !important;
}

.global-back-btn:hover {
    background: var(--brand-primary-hover) !important;
}

.topbar-brand {
    display: none;
    align-items: center;
    gap: 8px;
    margin-left: 10px;
    font-weight: 600;
    font-size: 15px !important;
    color: var(--brand-dark);
}

.topbar-brand img {
    width: 26px;
    height: 26px;
    border-radius: 6px;
}

.card-icon,
.dashboard-card .card-icon {
    color: var(--brand-primary) !important;
}

.page-container a:not(.btn):not(.crm-act):not(.inv-act):not(.nav-link),
.filter-section a:not(.btn) {
    color: var(--brand-primary);
}

.page-container a:not(.btn):not(.crm-act):not(.inv-act):hover,
.filter-section a:not(.btn):hover {
    color: var(--brand-primary-hover);
}

#sidebar a,
#sidebar a:hover,
.btn,
.crm-act,
.inv-act {
    color: inherit;
}

#sidebar .sidebar-product-brand,
#sidebar .sidebar-menu li a {
    color: var(--sidebar-text, rgba(255, 255, 255, 0.95));
}

@media (max-width: 768px) {
    .topbar-brand {
        display: inline-flex;
    }
}