/* ============================
   NEED24 VENDOR CONSOLE - UI REDESIGN
   Phase 1: Foundation
   ============================ */

/* ========= SIDEBAR - DARK NAVY THEME ========= */
#sidenav-main {
    background: linear-gradient(180deg, #0f1629 0%, #1a2540 100%) !important;
    border-right: none !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.3) !important;
}
#sidenav-main .navbar-brand {
    background: rgba(255,255,255,0.04) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: 1.2rem 1.5rem !important;
}
#sidenav-main .nav-link {
    color: rgba(255,255,255,0.78) !important;
    border-radius: 8px !important;
    margin: 2px 8px !important;
    padding: 0.55rem 1rem !important;
    transition: all 0.2s ease !important;
    font-size: 0.845rem !important;
    font-weight: 500 !important;
}
#sidenav-main .nav-link:hover {
    background: rgba(255,255,255,0.09) !important;
    color: #ffffff !important;
}
#sidenav-main .nav-link.active {
    background: rgba(30,144,255,0.22) !important;
    color: #ffffff !important;
    border-left: 3px solid #1e90ff !important;
}
#sidenav-main .nav-link[aria-expanded="true"] {
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
}
#sidenav-main .nav-link-text {
    color: inherit !important;
}
#sidenav-main h6.navbar-heading {
    color: rgba(255,255,255,0.38) !important;
    font-size: 0.63rem !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding-left: 1.5rem !important;
    padding-top: 1rem !important;
}
#sidenav-main hr {
    border-color: rgba(255,255,255,0.08) !important;
    margin: 0.5rem 1rem !important;
}
#sidenav-main .nav-link-ul {
    color: rgba(255,255,255,0.65) !important;
}
#sidenav-main .nav-link-ul::before {
    background: rgba(255,255,255,0.25) !important;
}
#sidenav-main .nav-link-ul:hover::before {
    background: #1e90ff !important;
}
#sidenav-main .rounded-icon {
    background-color: rgba(255,255,255,0.12) !important;
}
#sidenav-main .navbar-toggler-icon {
    filter: invert(1) !important;
}
#sidenav-main::-webkit-scrollbar { width: 4px; }
#sidenav-main::-webkit-scrollbar-track { background: transparent; }
#sidenav-main::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }
#sidenav-main::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }

/* ========= HEADER ========= */
#navbar-main,
.lw-header-container {
    background: #ffffff !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.07) !important;
    border-bottom: 1px solid #eef0f4 !important;
}
#navbar-main .nav-link {
    color: #344767 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}
#navbar-main .nav-link:hover { color: #1e90ff !important; }
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}
.breadcrumb-item a { color: #1e90ff !important; }
.breadcrumb-item.active { color: #6c757d !important; }

/* ========= MAIN CONTENT BACKGROUND ========= */
.main-content { background: #f4f6fb !important; }

/* ========= CARDS ========= */
.card {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 3px 18px rgba(0,0,0,0.07) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.11) !important;
}
.card .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding: 1rem 1.25rem 0.75rem !important;
    border-radius: 12px 12px 0 0 !important;
}
.card .card-body { padding: 1.25rem !important; }

/* ========= BUTTONS ========= */
.btn {
    border-radius: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    transition: all 0.2s ease !important;
    font-size: 0.845rem !important;
}
.btn-sm { border-radius: 6px !important; padding: 0.3rem 0.75rem !important; }
.btn-primary {
    background: linear-gradient(135deg,#1e90ff,#0066cc) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(30,144,255,0.32) !important;
}
.btn-primary:hover {
    background: linear-gradient(135deg,#0078e7,#0055aa) !important;
    box-shadow: 0 6px 16px rgba(30,144,255,0.42) !important;
    transform: translateY(-1px) !important;
}
.btn-success {
    background: linear-gradient(135deg,#25d366,#1a9e4a) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(37,211,102,0.3) !important;
}
.btn-success:hover { transform: translateY(-1px) !important; }
.btn-danger {
    background: linear-gradient(135deg,#ff4757,#cc1a2a) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(255,71,87,0.3) !important;
}
.btn-danger:hover { transform: translateY(-1px) !important; }
.btn-warning {
    background: linear-gradient(135deg,#ff9f43,#e67e22) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(255,159,67,0.3) !important;
}
.btn-warning:hover { transform: translateY(-1px) !important; }
.btn-info {
    background: linear-gradient(135deg,#17a2b8,#0c7a8e) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(23,162,184,0.3) !important;
}
.btn-secondary {
    background: linear-gradient(135deg,#6c757d,#495057) !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(108,117,125,0.25) !important;
}

/* ========= TABLES ========= */
.table thead th {
    background: #f8f9fc !important;
    color: #8898aa !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #e9ecef !important;
    border-top: none !important;
    padding: 0.85rem 1rem !important;
}
.table tbody tr { transition: background 0.15s ease !important; }
.table tbody tr:hover { background: rgba(30,144,255,0.04) !important; }
.table tbody td {
    vertical-align: middle !important;
    padding: 0.8rem 1rem !important;
    border-bottom: 1px solid #f0f3f8 !important;
    border-top: none !important;
    font-size: 0.875rem !important;
    color: #525f7f !important;
}

/* ========= BADGES ========= */
.badge {
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.35em 0.72em !important;
    letter-spacing: 0.03em !important;
}

/* ========= FORM CONTROLS ========= */
.form-control, .custom-select {
    border-radius: 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 0.875rem !important;
    color: #344767 !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control:focus, .custom-select:focus {
    border-color: #1e90ff !important;
    box-shadow: 0 0 0 3px rgba(30,144,255,0.14) !important;
}

/* ========= DROPDOWN ========= */
.dropdown-menu {
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;
    padding: 0.5rem !important;
}
.dropdown-item {
    border-radius: 6px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    transition: all 0.15s !important;
}
.dropdown-item:hover {
    background: rgba(30,144,255,0.08) !important;
    color: #1e90ff !important;
}

/* ========= PAGE WRAPPER ========= */
.container-fluid { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }


/* ========= PAGE CONTENT HEADER BAND ========= */
.header.bg-primary,
.header.bg-gradient-primary,
.header.bg-default,
.header.bg-gradient-default {
    background: linear-gradient(135deg, #0f1629 0%, #1a2e5a 100%) !important;
    border-bottom: none !important;
}
.header.bg-primary .breadcrumb-item a,
.header.bg-gradient-primary .breadcrumb-item a {
    color: rgba(255,255,255,0.8) !important;
}
.header.bg-primary .breadcrumb-item.active,
.header.bg-gradient-primary .breadcrumb-item.active {
    color: rgba(255,255,255,0.6) !important;
}
.header.bg-primary h1, .header.bg-primary h2,
.header.bg-primary h3, .header.bg-primary h4,
.header.bg-primary h5, .header.bg-primary h6 {
    color: #ffffff !important;
}
.header.bg-primary p, .header.bg-primary span {
    color: rgba(255,255,255,0.85) !important;
}
.header.bg-primary .btn-neutral {
    background: rgba(255,255,255,0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    border-radius: 8px !important;
}
.header.bg-primary .btn-neutral:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* ========= ACTIVE NAV ITEM BADGE ========= */
#sidenav-main .badge-success {
    background: rgba(37,211,102,0.9) !important;
    color: #fff !important;
}

/* ========= ICON SHAPE CARDS (stat icon circles) ========= */
.icon-shape {
    border-radius: 10px !important;
}


/* ========= FIX: Cards inside page header band ========= */
/* Cards sit inside .header.bg-primary — restore their text colors */
.header.bg-primary .card,
.header.bg-gradient-primary .card,
.header.bg-default .card,
.header.bg-gradient-default .card {
    color: #344767 !important;
}
.header.bg-primary .card h1,
.header.bg-primary .card h2,
.header.bg-primary .card h3,
.header.bg-primary .card h4,
.header.bg-primary .card h5,
.header.bg-primary .card h6,
.header.bg-primary .card .h1,
.header.bg-primary .card .h2,
.header.bg-primary .card .h3,
.header.bg-primary .card .h4,
.header.bg-primary .card .h5,
.header.bg-primary .card .h6 {
    color: #344767 !important;
}
.header.bg-primary .card p,
.header.bg-primary .card span:not(.badge):not(.avatar) {
    color: #525f7f !important;
}
.header.bg-primary .card .text-muted,
.header.bg-primary .card .card-title {
    color: #8898aa !important;
}
.header.bg-primary .card .font-weight-bold,
.header.bg-primary .card .font-weight-bolder {
    color: #344767 !important;
}
/* Keep icon shapes white inside cards */
.header.bg-primary .card .icon-shape i,
.header.bg-primary .card .icon-shape span {
    color: #ffffff !important;
}

/* ========= STAT CARD NUMBERS - bigger & bolder ========= */
.card-body .h2.font-weight-bold,
.card-body h2.font-weight-bold,
.card-body .display-2 {
    font-size: 1.9rem !important;
    font-weight: 800 !important;
    color: #344767 !important;
    letter-spacing: -0.02em !important;
}
.card-body .card-title.text-uppercase.text-muted {
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    color: #8898aa !important;
    margin-bottom: 0.4rem !important;
}

/* ========= ICON SHAPES - smoother rounded ========= */
.icon.icon-shape {
    border-radius: 12px !important;
    width: 48px !important;
    height: 48px !important;
}

/* ========= PROGRESS BARS ========= */
.progress {
    border-radius: 4px !important;
    height: 6px !important;
    background: #e9ecef !important;
}
.progress-bar {
    border-radius: 4px !important;
}

/* ========= AVATAR INITIALS ========= */
.avatar-sm {
    width: 36px !important;
    height: 36px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
}

/* ========= FILTER BUTTONS (Today / This Week etc) ========= */
.btn-group .btn,
.btn-group-sm .btn {
    font-size: 0.78rem !important;
    padding: 0.3rem 0.9rem !important;
    font-weight: 600 !important;
}
.btn-group .btn-primary,
.btn-group .btn-outline-primary.active {
    background: #1e90ff !important;
    color: #fff !important;
    border-color: #1e90ff !important;
}

/* ========= AGENT PERFORMANCE TABLE AVATAR CIRCLE ========= */
.avatar.rounded-circle {
    font-weight: 800 !important;
    font-size: 0.85rem !important;
}

/* ========= CARD HEADER TITLE ========= */
.card .card-header h3,
.card .card-header h4,
.card .card-header h5 {
    color: #344767 !important;
    font-weight: 700 !important;
}

/* ========= QUICK ACTIONS SECTION ========= */
.lw-quick-action-btn,
.btn-block {
    border-radius: 8px !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
}


/* ================================================
   PHASE 2: COMPONENT POLISH
   ================================================ */

/* ========= OVERRIDE BOOTSTRAP PRIMARY COLOR ========= */
/* Bootstrap 4 primary = periwinkle (#a3b2ff) — replace with brand blue */
.bg-primary { background-color: #1e90ff !important; }
.text-primary { color: #1e90ff !important; }
.border-primary { border-color: #1e90ff !important; }
.btn-primary { background-color: #1e90ff !important; border-color: #1e90ff !important; }
.badge-primary { background-color: #1e90ff !important; }

/* ========= NAV TABS ========= */
.nav-tabs {
    border-bottom: 2px solid #e9ecef !important;
}
.nav-tabs .nav-link {
    color: #6c757d !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    padding: 0.65rem 1.2rem !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    transition: color 0.2s, border-color 0.2s !important;
}
.nav-tabs .nav-link:hover {
    color: #1e90ff !important;
    border-bottom-color: rgba(30,144,255,0.4) !important;
    background: transparent !important;
}
.nav-tabs .nav-link.active {
    color: #1e90ff !important;
    background: transparent !important;
    border-bottom: 2px solid #1e90ff !important;
    font-weight: 700 !important;
}

/* ========= NAV PILLS ========= */
.nav-pills .nav-link {
    color: #6c757d !important;
    background: #f0f2f5 !important;
    border-radius: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.4rem 1rem !important;
    transition: all 0.2s !important;
}
.nav-pills .nav-link:hover {
    background: #e0e6f0 !important;
    color: #344767 !important;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg,#1e90ff,#0066cc) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(30,144,255,0.3) !important;
}

/* ========= DATATABLES PAGINATION ========= */
.dataTables_paginate .pagination {
    gap: 3px !important;
}
.dataTables_paginate .page-item .page-link {
    border-radius: 6px !important;
    border: 1px solid #e9ecef !important;
    color: #525f7f !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0.38rem 0.7rem !important;
    min-width: 34px !important;
    text-align: center !important;
    transition: all 0.15s !important;
}
.dataTables_paginate .page-item .page-link:hover {
    background: #f0f4ff !important;
    border-color: #1e90ff !important;
    color: #1e90ff !important;
}
.dataTables_paginate .page-item.active .page-link {
    background: linear-gradient(135deg,#1e90ff,#0066cc) !important;
    border-color: #1e90ff !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(30,144,255,0.3) !important;
}
.dataTables_paginate .page-item.disabled .page-link {
    background: #f8f9fc !important;
    color: #c0c8d8 !important;
    border-color: #e9ecef !important;
}

/* ========= DATATABLES INFO & LENGTH ========= */
.dataTables_info {
    font-size: 0.82rem !important;
    color: #8898aa !important;
}
.dataTables_length label,
.dataTables_filter label {
    font-size: 0.82rem !important;
    color: #525f7f !important;
    font-weight: 500 !important;
}
.dataTables_length select,
.dataTables_filter input {
    border-radius: 6px !important;
    border: 1.5px solid #e2e8f0 !important;
    font-size: 0.82rem !important;
    padding: 0.25rem 0.5rem !important;
}
.dataTables_filter input:focus {
    border-color: #1e90ff !important;
    box-shadow: 0 0 0 3px rgba(30,144,255,0.12) !important;
    outline: none !important;
}

/* ========= FILTER CHIP BUTTONS (Run Ads All/Active/Draft etc) ========= */
.lw-filter-btn-group .btn,
[class*="lw-filter"] .btn,
.btn-outline-primary {
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    padding: 0.3rem 1rem !important;
}
.btn-outline-primary {
    border: 1.5px solid #1e90ff !important;
    color: #1e90ff !important;
    background: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary.active,
.btn-outline-primary:active {
    background: #1e90ff !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(30,144,255,0.3) !important;
}

/* ========= EMPTY STATE TABLE ========= */
.dataTables_empty,
.lw-empty-data-msg,
td.dataTables_empty {
    color: #8898aa !important;
    font-style: italic !important;
    font-size: 0.9rem !important;
    padding: 2.5rem 1rem !important;
    text-align: center !important;
}

/* ========= LIVE CHAT - CONTACT LIST ========= */
.lw-contacts-header {
    background: linear-gradient(135deg, #075e54, #128c7e) !important;
    padding: 0.85rem 1rem !important;
    color: #fff !important;
}
.lw-contact-list-header {
    background: #fff !important;
    border-bottom: 1px solid #e9ecef !important;
    padding: 0.6rem 0.8rem !important;
}
.lw-contact-list-item-selected,
.lw-contact.lw-contact-list-item-selected {
    background: rgba(37,211,102,0.1) !important;
    border-left: 3px solid #25d366 !important;
}
.lw-contact:hover {
    background: #f8f9fc !important;
}

/* ========= DASHBOARD QUICK STATS (Live Chat 170, Template 1 etc) ========= */
.lw-feature-card,
[class*="lw-quick-stat"],
.lw-dashboard-feature-item {
    border-radius: 10px !important;
    transition: transform 0.2s !important;
}
.lw-feature-card:hover {
    transform: translateY(-2px) !important;
}

/* ========= PAGE TITLES ========= */
.lw-page-title,
h1.lw-page-title {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    color: #0f1629 !important;
    letter-spacing: -0.01em !important;
}

/* ========= ALERTS ========= */
.alert {
    border-radius: 10px !important;
    border: none !important;
    font-size: 0.875rem !important;
}
.alert-success { background: rgba(37,211,102,0.12) !important; color: #1a7a3a !important; }
.alert-danger  { background: rgba(255,71,87,0.12) !important; color: #cc1a2a !important; }
.alert-warning { background: rgba(255,159,67,0.12) !important; color: #cc6600 !important; }
.alert-info    { background: rgba(30,144,255,0.1) !important; color: #0055aa !important; }

/* ========= MODAL ========= */
.modal-content {
    border: none !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18) !important;
}
.modal-header {
    border-bottom: 1px solid #f0f3f8 !important;
    padding: 1.2rem 1.5rem !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-header .modal-title {
    font-weight: 700 !important;
    color: #344767 !important;
    font-size: 1rem !important;
}
.modal-footer {
    border-top: 1px solid #f0f3f8 !important;
    padding: 0.85rem 1.5rem !important;
}
.modal-body { padding: 1.5rem !important; }

/* ========= TOOLTIPS ========= */
.tooltip-inner {
    border-radius: 6px !important;
    font-size: 0.78rem !important;
    padding: 0.4rem 0.75rem !important;
    background: #0f1629 !important;
}

/* ========= INPUT GROUPS ========= */
.input-group-text {
    border-radius: 8px 0 0 8px !important;
    border: 1.5px solid #e2e8f0 !important;
    background: #f8f9fc !important;
    color: #8898aa !important;
    font-size: 0.875rem !important;
}

/* ========= CUSTOM SELECT ========= */
.custom-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath fill='%238898aa' d='M0 0l4 5 4-5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
}

/* ========= LABEL TAGS (contact labels) ========= */
.badge-soft-primary { background: rgba(30,144,255,0.12) !important; color: #1e90ff !important; }
.badge-soft-success { background: rgba(37,211,102,0.12) !important; color: #1a7a3a !important; }
.badge-soft-warning { background: rgba(255,159,67,0.12) !important; color: #cc6600 !important; }
.badge-soft-danger  { background: rgba(255,71,87,0.12) !important; color: #cc1a2a !important; }
.badge-soft-info    { background: rgba(23,162,184,0.12) !important; color: #0c7a8e !important; }




/* ================================================
   PHASE 3: TYPOGRAPHY + ANIMATIONS + POLISH
   ================================================ */

/* ========= TYPOGRAPHY SYSTEM ========= */
body, .main-content {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Inter', sans-serif !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    color: #525f7f !important;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #344767 !important;
}
.text-sm  { font-size: 0.8125rem !important; }
.text-xs  { font-size: 0.75rem !important; }
strong, b { font-weight: 700 !important; color: #344767 !important; }
small     { font-size: 0.78rem !important; color: #8898aa !important; }

/* ========= MICRO-ANIMATIONS ========= */
/* Global smooth transitions */
a, button, .btn, .nav-link, .card, .badge, .dropdown-item,
.page-link, .form-control, .custom-select,
.lw-contact, .nav-tabs .nav-link {
    transition: all 0.18s ease !important;
}

/* Button press effect */
.btn:active {
    transform: scale(0.97) !important;
    box-shadow: none !important;
}

/* Card lift on hover */
.card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
}

/* Sidebar nav item slide effect */
#sidenav-main .nav-link {
    position: relative !important;
    overflow: hidden !important;
}
#sidenav-main .nav-link::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(255,255,255,0.06) !important;
    opacity: 0 !important;
    transition: opacity 0.2s !important;
}
#sidenav-main .nav-link:hover::after { opacity: 1 !important; }

/* Badge pulse for notification count */
@keyframes n24pulse {
    0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
    70%  { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(37,211,102,0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
#sidenav-main .badge-success {
    animation: n24pulse 2.5s infinite !important;
}

/* Page load fade-in */
@keyframes n24fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.main-content .container-fluid {
    animation: n24fadeIn 0.3s ease !important;
}

/* ========= SIDEBAR LOGO AREA POLISH ========= */
#sidenav-main .navbar-brand {
    display: flex !important;
    align-items: center !important;
    padding: 1rem 1.25rem !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(0,0,0,0.15) !important;
    min-height: 64px !important;
}
#sidenav-main .navbar-brand img {
    max-height: 36px !important;
    object-fit: contain !important;
}

/* ========= SIDEBAR ACTIVE STATE - stronger highlight ========= */
#sidenav-main .nav-link.active {
    background: linear-gradient(90deg, rgba(30,144,255,0.25) 0%, rgba(30,144,255,0.08) 100%) !important;
    color: #ffffff !important;
    border-left: 3px solid #1e90ff !important;
    border-radius: 0 8px 8px 0 !important;
    margin-left: 0 !important;
    padding-left: calc(1rem - 3px) !important;
    font-weight: 600 !important;
}
#sidenav-main .nav-link:not(.active) {
    border-left: 3px solid transparent !important;
    border-radius: 0 8px 8px 0 !important;
    margin-left: 0 !important;
    padding-left: calc(1rem - 3px) !important;
}

/* ========= NAVBAR TOP BAR - page title area ========= */
#navbar-main .navbar-brand-text {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0f1629 !important;
    letter-spacing: -0.02em !important;
}
#navbar-main strong {
    font-size: 1rem !important;
    font-weight: 800 !important;
    color: #0f1629 !important;
}
/* Separator line below top navbar */
#navbar-main {
    border-bottom: 1px solid #eef0f4 !important;
}

/* ========= PAGE HEADER BAND - typography ========= */
.header.bg-primary h1,
.header.bg-primary h2,
.header.bg-primary h3 {
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    margin: 0 !important;
}
.header.bg-primary .breadcrumb-item,
.header.bg-primary .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,0.65) !important;
}
.header.bg-primary .breadcrumb-item a {
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}
.header.bg-primary .breadcrumb-item.active {
    color: rgba(255,255,255,0.65) !important;
    font-weight: 400 !important;
}

/* ========= WHATSAPP CHAT - message bubbles ========= */
.message {
    border-radius: 12px !important;
    padding: 0.55rem 0.85rem !important;
    max-width: 75% !important;
    margin-bottom: 0.4rem !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
    position: relative !important;
}
.message.sent {
    background: #d9fdd3 !important;
    color: #111b21 !important;
    border-radius: 12px 12px 2px 12px !important;
    margin-left: auto !important;
}
.message.received {
    background: #ffffff !important;
    color: #111b21 !important;
    border-radius: 12px 12px 12px 2px !important;
    border: 1px solid #f0f2f5 !important;
}
/* Chat window background - subtle pattern */
.lw-whatsapp-chat-window,
.card-body.lw-whatsapp-chat-window {
    background: #efeae2 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c8bfb0' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    padding: 1rem !important;
    min-height: 300px !important;
}
/* Contact selected highlight */
.lw-contact.lw-contact-list-item-selected {
    background: linear-gradient(90deg, rgba(37,211,102,0.12), rgba(37,211,102,0.04)) !important;
    border-left: 3px solid #25d366 !important;
}

/* ========= MOBILE RESPONSIVE SIDEBAR ========= */
@media (max-width: 991px) {
    #sidenav-main {
        z-index: 1050 !important;
        background: linear-gradient(180deg, #0f1629 0%, #1a2540 100%) !important;
    }
    #sidenav-main .navbar-collapse {
        background: transparent !important;
        max-height: calc(100vh - 64px) !important;
        overflow-y: auto !important;
    }
    .navbar-vertical.fixed-left {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 250px !important;
    }
    .main-content {
        padding-left: 0 !important;
    }
}

/* ========= SCROLLBAR - MAIN CONTENT ========= */
.main-content::-webkit-scrollbar { width: 6px; }
.main-content::-webkit-scrollbar-track { background: #f5f7fa; }
.main-content::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 3px; }
.main-content::-webkit-scrollbar-thumb:hover { background: #9ba3b0; }

/* ========= TABLE SORTING ARROWS ========= */
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
    opacity: 0.5 !important;
    color: #8898aa !important;
}
table.dataTable thead .sorting_asc::after { opacity: 1 !important; color: #1e90ff !important; }
table.dataTable thead .sorting_desc::after { opacity: 1 !important; color: #1e90ff !important; }

/* ========= CONTACT LIST POLISH ========= */
.lw-contact {
    padding: 0.65rem 0.85rem !important;
    border-bottom: 1px solid #f5f7fa !important;
    cursor: pointer !important;
}
.lw-contact:last-child { border-bottom: none !important; }
.lw-contact-avatar .avatar {
    width: 42px !important;
    height: 42px !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}
.lw-last-message-at {
    font-size: 0.72rem !important;
    color: #8898aa !important;
}

/* ========= QUICK ACTION BUTTONS ========= */
.btn-block + .btn-block { margin-top: 0.5rem !important; }

/* ========= SECTION DIVIDERS ========= */
.lw-section-heading {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    color: rgba(255,255,255,0.4) !important;
    padding: 0.85rem 1.25rem 0.3rem !important;
}

/* ========= INPUT FOCUS GLOW ========= */
.form-control:focus,
.custom-select:focus {
    outline: none !important;
    border-color: #1e90ff !important;
    box-shadow: 0 0 0 3px rgba(30,144,255,0.14), 0 1px 3px rgba(0,0,0,0.08) !important;
}

/* ========= CHECKBOX & RADIO POLISH ========= */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #1e90ff !important;
    border-color: #1e90ff !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(30,144,255,0.2) !important;
}

/* ========= SPINNER / LOADING ========= */
.spinner-border { color: #1e90ff !important; }
.spinner-grow  { color: #1e90ff !important; }

/* ========= BACK TO TOP BUTTON ========= */
.lw-back-to-top, #backToTopBtn {
    background: linear-gradient(135deg,#1e90ff,#0066cc) !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 14px rgba(30,144,255,0.4) !important;
    border: none !important;
    color: #fff !important;
    transition: all 0.2s !important;
}
.lw-back-to-top:hover { transform: translateY(-2px) !important; }

/* ========= FOOTER ========= */
footer.footer, .footer {
    background: transparent !important;
    border-top: 1px solid #eef0f4 !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.78rem !important;
    color: #8898aa !important;
}

/* ========= WELCOME CARD ========= */
.lw-welcome-card, [class*="welcome"] .card-body {
    border-radius: 12px !important;
}