/* ============================================================
   BRAND.CSS — ChatNex style
   Palette:
     #fffcfb   Warm white      → navbar, page background
     #112c45   Deep navy       → headings, body text
     #048978   Teal            → primary buttons, active links, accents
     #164063   Dark blue       → button/link hover state
     #edfaf8   Ice teal        → hero backgrounds, section tints
     #c7f0ea   Teal tint       → hero gradient end, badges
     #6b7280   Mid grey        → muted text, nav links
   ============================================================ */


/* ── 1. CSS VARIABLES ─────────────────────────────────────── */
:root {
    --cn-white:        #fffcfb;
    --cn-bg:           #f5f9f8;
    --cn-hero-from:    #d4f2ee;
    --cn-hero-to:      #edfaf8;
    --cn-blue:         #048978;
    --cn-blue-hover:   #164063;
    --cn-blue-light:   #edfaf8;
    --cn-blue-tint:    #c7f0ea;
    --cn-heading:      #112c45;
    --cn-text:         #1e3a52;
    --cn-muted:        #6b7280;
    --cn-border:       #d4e5e2;
    --cn-shadow:       0 1px 3px rgba(4,137,120,0.08), 0 1px 2px rgba(4,137,120,0.04);
    --cn-shadow-md:    0 4px 16px rgba(4, 137, 120, 0.12);

    /* actions */
    --cn-success:      #059669;
    --cn-danger:       #dc2626;
    --cn-warning:      #d97706;
}


/* ── 2. PAGE & LAYOUT ─────────────────────────────────────── */
body,
#layout-wrapper,
.main-content,
.page-content {
    background-color: var(--cn-bg) !important;
    color: var(--cn-text) !important;
    font-family: 'Inter', 'Segoe UI', sans-serif !important;
}


/* ── 3. NAVBAR ────────────────────────────────────────────── */
#page-topbar,
.navbar-header,
.navbar {
    background-color: var(--cn-white) !important;
    border-bottom: 1px solid var(--cn-border) !important;
    box-shadow: var(--cn-shadow) !important;
}

.navbar-brand-box,
.logo-box {
    background-color: var(--cn-white) !important;
}

.navbar-brand,
.logo-txt {
    color: var(--cn-heading) !important;
    font-weight: 500 !important;
}

/* Nav links — grey by default, teal on hover/active */
.navbar-nav .nav-link,
#page-topbar .nav-link,
.header-item {
    color: var(--cn-muted) !important;
    font-weight: 500 !important;
    transition: color 0.15s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
#page-topbar .nav-link:hover {
    color: var(--cn-blue) !important;
}

/* Top-right "Try Free Trial" text link */
.navbar-nav .nav-link.nav-cta-text {
    color: var(--cn-heading) !important;
    font-weight: 600 !important;
}

/* "Contact Us" / primary CTA button in navbar */
.navbar .btn-navbar-cta,
.navbar .btn-primary {
    background-color: var(--cn-blue) !important;
    border-color: var(--cn-blue) !important;
    color: var(--cn-white) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 22px !important;
}

.navbar .btn-navbar-cta:hover,
.navbar .btn-primary:hover {
    background-color: var(--cn-blue-hover) !important;
    border-color: var(--cn-blue-hover) !important;
}

/* Navbar dropdown */
.dropdown-menu {
    background-color: var(--cn-white) !important;
    border: 1px solid var(--cn-border) !important;
    box-shadow: var(--cn-shadow-md) !important;
    border-radius: 10px !important;
}

.dropdown-item {
    color: var(--cn-text) !important;
    font-weight: 500;
}

.dropdown-item:hover {
    background-color: var(--cn-blue-light) !important;
    color: var(--cn-blue) !important;
}


/* ── 4. SIDEBAR ───────────────────────────────────────────── */
#sidebar-menu,
.vertical-menu,
.left-side-menu {
    background-color: var(--cn-white) !important;
    border-right: 1px solid var(--cn-border) !important;
}

#sidebar-menu ul li a {
    color: var(--cn-muted) !important;
    font-weight: 500;
}

#sidebar-menu ul li a:hover {
    color: var(--cn-blue) !important;
    background-color: var(--cn-blue-light) !important;
}

#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
    color: var(--cn-blue) !important;
    background-color: var(--cn-blue-light) !important;
    font-weight: 600 !important;
    border-right: 3px solid var(--cn-blue);
}

#sidebar-menu .menu-title {
    color: var(--cn-muted) !important;
    font-size: 11px !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
}


/* ── 5. HERO / PAGE HEADER BANNER ────────────────────────── */
.page-hero,
.page-title-box {
    background: linear-gradient(135deg, var(--cn-hero-from) 0%, var(--cn-hero-to) 100%) !important;
    border-radius: 16px !important;
    padding: 48px 40px !important;
    margin-bottom: 32px !important;
}

.page-hero h1,
.page-hero h2,
.page-title-box h4 {
    color: var(--cn-heading) !important;
    font-size: 2.4rem !important;
    font-weight: 800 !important;
}

.page-hero p {
    color: var(--cn-text) !important;
    font-size: 1rem !important;
    max-width: 480px;
}


/* ── 6. CARDS ─────────────────────────────────────────────── */
.card {
    background-color: var(--cn-white) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--cn-shadow) !important;
    color: var(--cn-text) !important;
    transition: box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--cn-shadow-md) !important;
}

.card-header {
    background-color: var(--cn-white) !important;
    border-bottom: 1px solid var(--cn-border) !important;
    font-weight: 600;
    color: var(--cn-heading) !important;
}

.card-title {
    color: var(--cn-heading) !important;
    font-weight: 700 !important;
}


/* ── 7. TABLES ────────────────────────────────────────────── */
.table thead th {
    background-color: var(--cn-blue-light) !important;
    color: var(--cn-blue) !important;
    border-bottom: 2px solid var(--cn-blue-tint) !important;
    border-top: none !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.table tbody td {
    color: var(--cn-text) !important;
    border-color: var(--cn-border) !important;
    background-color: var(--cn-white) !important;
    vertical-align: middle !important;
}

.table-striped tbody tr:nth-of-type(odd) td {
    background-color: #f2faf9 !important;
}

.table tbody tr:hover td {
    background-color: var(--cn-blue-light) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--cn-white) !important;
    color: var(--cn-text) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--cn-muted) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: var(--cn-white) !important;
    color: var(--cn-text) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--cn-blue) !important;
    color: var(--cn-white) !important;
    border-color: var(--cn-blue) !important;
}


/* ── 8. BUTTONS ───────────────────────────────────────────── */

/* Primary */
.btn-primary {
    background-color: var(--cn-blue) !important;
    border-color: var(--cn-blue) !important;
    color: var(--cn-white) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--cn-blue-hover) !important;
    border-color: var(--cn-blue-hover) !important;
    box-shadow: 0 4px 12px rgba(4, 137, 120, 0.3) !important;
}

/* Secondary — outlined teal */
.btn-secondary {
    background-color: transparent !important;
    border: 2px solid var(--cn-blue) !important;
    color: var(--cn-blue) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-secondary:hover {
    background-color: var(--cn-blue) !important;
    color: var(--cn-white) !important;
}

/* Success */
.btn-success {
    background-color: var(--cn-success) !important;
    border-color: var(--cn-success) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-success:hover {
    background-color: #047857 !important;
    border-color: #047857 !important;
}

/* Danger */
.btn-danger {
    background-color: var(--cn-danger) !important;
    border-color: var(--cn-danger) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* Warning */
.btn-warning {
    background-color: var(--cn-warning) !important;
    border-color: var(--cn-warning) !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-warning:hover {
    background-color: #b45309 !important;
    border-color: #b45309 !important;
}

/* Light */
.btn-light {
    background-color: var(--cn-blue-light) !important;
    border-color: var(--cn-blue-tint) !important;
    color: var(--cn-blue) !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.btn-light:hover {
    background-color: var(--cn-blue-tint) !important;
}


/* ── 9. FORMS & INPUTS ────────────────────────────────────── */
.form-control,
.form-select,
.select2-selection {
    background-color: var(--cn-white) !important;
    color: var(--cn-text) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cn-blue) !important;
    box-shadow: 0 0 0 3px rgba(4, 137, 120, 0.15) !important;
}

.form-label, label {
    color: var(--cn-heading) !important;
    font-weight: 500;
}

.select2-container--default .select2-selection--single {
    background-color: var(--cn-white) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
    height: 38px !important;
}

.select2-container--default .select2-results__option--highlighted {
    background-color: var(--cn-blue) !important;
}

.select2-dropdown {
    background-color: var(--cn-white) !important;
    border-color: var(--cn-border) !important;
    border-radius: 8px !important;
    box-shadow: var(--cn-shadow-md) !important;
}


/* ── 10. BADGES & STATUS ──────────────────────────────────── */
.badge.bg-primary,
.badge-soft-primary {
    background-color: var(--cn-blue-tint) !important;
    color: var(--cn-blue) !important;
}

.badge.bg-success,
.badge-soft-success {
    background-color: #d1fae5 !important;
    color: var(--cn-success) !important;
}

.badge.bg-danger,
.badge-soft-danger {
    background-color: #fee2e2 !important;
    color: var(--cn-danger) !important;
}

.badge.bg-warning,
.badge-soft-warning {
    background-color: #fef3c7 !important;
    color: var(--cn-warning) !important;
}


/* ── 11. BREADCRUMB ───────────────────────────────────────── */
.breadcrumb {
    background-color: var(--cn-white) !important;
    border: 1px solid var(--cn-border) !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    display: inline-flex !important;
}

.breadcrumb-item a            { color: var(--cn-blue) !important; font-weight: 500; }
.breadcrumb-item.active        { color: var(--cn-muted) !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--cn-muted) !important; }


/* ── 12. TYPOGRAPHY ───────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-title {
    color: var(--cn-heading) !important;
    font-weight: 700 !important;
}

p, span, li {
    color: var(--cn-text);
}

a {
    color: var(--cn-blue) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--cn-blue-hover) !important;
    text-decoration: underline !important;
}


/* ── 13. MODALS ───────────────────────────────────────────── */
.modal-content {
    background-color: var(--cn-white) !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}

.modal-header {
    background-color: var(--cn-blue-light) !important;
    border-bottom: 1px solid var(--cn-blue-tint) !important;
    border-radius: 16px 16px 0 0 !important;
}

.modal-title {
    color: var(--cn-heading) !important;
    font-weight: 700 !important;
}

.modal-footer {
    border-top: 1px solid var(--cn-border) !important;
}


/* ── 14. ALERTS ───────────────────────────────────────────── */
.alert-success {
    background-color: #ecfdf5 !important;
    border-color: #a7f3d0 !important;
    color: #065f46 !important;
    border-radius: 8px !important;
}
.alert-danger {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
    border-radius: 8px !important;
}
.alert-warning {
    background-color: #fffbeb !important;
    border-color: #fde68a !important;
    color: #92400e !important;
    border-radius: 8px !important;
}
.alert-info {
    background-color: var(--cn-blue-light) !important;
    border-color: var(--cn-blue-tint) !important;
    color: var(--cn-blue-hover) !important;
    border-radius: 8px !important;
}


/* ── 15. FOOTER ───────────────────────────────────────────── */
.footer {
    background-color: var(--cn-white) !important;
    border-top: 1px solid var(--cn-border) !important;
    color: var(--cn-muted) !important;
}


/* ── 16. SCROLLBAR ────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: var(--cn-bg); }
::-webkit-scrollbar-thumb { background: var(--cn-blue-tint); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cn-blue); }


/* ── 17. NAV LINK ALIX ────────────────────────────────────── */
.nav-link-alix {
    color: var(--cn-muted) !important;
    font-size: 0.9rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link-alix:hover,
.nav-link-alix:focus {
    color: var(--cn-heading) !important;
    background-color: var(--cn-blue-light) !important;
}

.nav-link-alix.nav-link-active {
    color: var(--cn-blue) !important;
    font-weight: 500;
    background-color: var(--cn-blue-light) !important;
}

.nav-link-alix.active {
    background-color: rgba(4, 137, 120, 0.10) !important;
    color: var(--cn-blue) !important;
}


/* ── 18. MISC ─────────────────────────────────────────────── */
.card {
    border-radius: 0.5rem;
}

h1.h3 {
    letter-spacing: -0.3px;
}

*, body {
    font-family: 'Urbanist', sans-serif !important;
}