/**
 * Prodex Design System — Admin & Provider theme overrides
 * Source: prodex-design-system.html
 * Scope: visual only — no markup / JS changes
 */

:root {
    /* Buren Trade — System Design (EXACT from prodex-design-system.html :root) */
    --prodex-primary: #1f4a79;
    --prodex-primary-dark: #183c64;
    --prodex-primary-soft: #eff6ff;
    --prodex-link: #3a80ec;
    --prodex-blue: #3A80EC;
    --prodex-blue-soft: #E8F2FC;
    --prodex-green: #2ED47A;
    --prodex-green-soft: #E5FBF0;
    --prodex-red: #FF6B6B;
    --prodex-red-soft: #FFECEC;
    --prodex-yellow: #FFA53D;
    --prodex-yellow-soft: #FFF3E4;
    --prodex-teal: #2BC7C9;
    --prodex-teal-soft: #E4FAFA;
    --prodex-pink: #FF6FA5;
    --prodex-pink-soft: #FFEAF2;
    --prodex-ink-900: #111827;
    --prodex-ink-800: #1f2937;
    --prodex-ink-700: #374151;
    --prodex-ink-500: #6b7280;
    --prodex-ink-300: #9ca3af;
    --prodex-ink-100: #e5e7eb;
    --prodex-surface: #FFFFFF;
    --prodex-bg: #f4f6f8;
    --prodex-line: #e5e7eb;
    --prodex-line-soft: #f3f4f6;
    --prodex-radius-sm: 8px;
    --prodex-radius-md: 12px;
    --prodex-radius-lg: 16px;
    --prodex-radius-xl: 20px;
    --prodex-radius-pill: 999px;
    --prodex-shadow-sm: 0 2px 10px rgba(17, 24, 39, 0.05);
    --prodex-shadow-md: 0 10px 28px rgba(17, 24, 39, 0.08);
    --prodex-shadow-lg: 0 20px 48px rgba(17, 24, 39, 0.14);

    /* Map to existing template tokens */
    --c1: #1f4a79;
    --c1-rgb: 31, 74, 121;
    --c2: var(--prodex-red);
    --bg-color: var(--prodex-surface);
    --bg-color2: var(--prodex-line-soft);
    --text-light-color: var(--prodex-ink-500);
    --text-color: var(--prodex-ink-700);
    --link-color: var(--prodex-link);
    --input-border-color: var(--prodex-line);
    --input-border-color-active: rgba(31, 74, 121, 0.45);
    --title-color: var(--prodex-ink-900);
    --title-color2: var(--prodex-ink-500);
    --border-color: var(--prodex-line);
    --white-color: var(--prodex-surface);
    --body-bg: var(--prodex-bg);
    --light-bg: var(--prodex-line-soft);
    --c1-light-bg: #eff6ff;

    /* Booking status — separate from system primary (EXACT from HTML) */
    --booking-pending-bg: #E8F2FC;
    --booking-pending-fg: #0461A5;
    --booking-accepted-bg: #DCEEFD;
    --booking-accepted-fg: #2B95FF;
    --booking-ongoing-bg: #D5EAFB;
    --booking-ongoing-fg: #2B95FF;
    --booking-completed-bg: #DCEEE2;
    --booking-completed-fg: #0EA852;
    --booking-canceled-bg: #FBDDDD;
    --booking-canceled-fg: #FF3737;
    --success-color: var(--prodex-green);
    --timeline-color: var(--prodex-line);
    --shadow-color: rgba(17, 24, 39, 0.05);
    --dropdown-menu-color: var(--prodex-surface);
    --mobile-search-bg: var(--prodex-line-soft);
}

body {
    background-color: var(--prodex-bg) !important;
    color: var(--prodex-ink-700);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.main-area {
    background: var(--prodex-bg);
}

/* ---------- Header ---------- */
.header {
    background: rgba(241, 242, 247, 0.92) !important;
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--prodex-line) !important;
    box-shadow: none !important;
}

.header .search-form,
.header .search-form__input_group,
.header .form-control,
.header input[type="search"],
.header input[type="text"] {
    border-radius: 10px !important;
    background: var(--prodex-surface) !important;
    border: 1px solid var(--prodex-line) !important;
    color: var(--prodex-ink-900) !important;
}

.header .dropdown-menu {
    border: 1px solid var(--prodex-line) !important;
    border-radius: var(--prodex-radius-md) !important;
    box-shadow: var(--prodex-shadow-md) !important;
    padding: 6px !important;
}

.header .dropdown-item {
    border-radius: var(--prodex-radius-sm) !important;
    font-size: 13px;
    color: var(--prodex-ink-700);
}

.header .dropdown-item:hover,
.header .dropdown-item:focus {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

/* ---------- Sidebar ---------- */
.aside {
    background: var(--prodex-surface) !important;
    border-right: 1px solid var(--prodex-line) !important;
    box-shadow: none !important;
}

.aside-header {
    border-bottom: 1px solid var(--prodex-line);
    padding: 20px 16px !important;
}

.aside .logo .main-logo {
    max-height: 46px !important;
    width: auto;
    object-fit: contain;
}

.aside .user-profile {
    background: #f9fafb;
    border: 1px solid var(--prodex-line);
    border-radius: var(--prodex-radius-md);
    padding: 10px 12px !important;
    margin: 8px 8px 10px !important;
    overflow: hidden;
    max-width: calc(100% - 16px);
}

.aside .user-profile .avatar {
    flex-shrink: 0;
}

.aside .user-profile .media-body {
    min-width: 0;
    flex: 1;
    overflow: hidden;
}

.aside .user-profile .card-title {
    color: var(--prodex-ink-900) !important;
    font-weight: 600;
    font-size: 13px !important;
    line-height: 1.3;
    margin-bottom: 2px !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.aside .user-profile .card-text {
    color: var(--prodex-ink-500) !important;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    max-width: 100%;
}

.aside-body .nav-category {
    color: var(--prodex-ink-300) !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 10px 2px !important;
}

.aside-body .nav li {
    padding: 0.2rem 0 !important;
}

.aside-body .nav > li > a,
.aside-body .nav li a {
    border-radius: 8px;
    margin: 0 6px;
    padding: 8px 10px !important;
    color: var(--prodex-ink-700) !important;
    font-weight: 500;
    font-size: 13px;
    transition: background 0.2s ease, color 0.2s ease;
}

.aside-body .nav > li > a:hover,
.aside-body .nav li a:hover {
    background: var(--prodex-line-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

.aside-body .nav > li > a.active-menu,
.aside-body .nav li a.active-menu,
.active-menu {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
    font-weight: 600 !important;
}

.aside-body .nav li .link-title .count {
    background: var(--prodex-line-soft) !important;
    color: var(--prodex-ink-500) !important;
    border-radius: 999px;
    font-size: 11px;
}

.aside-body .nav > li > a.active-menu .link-title .count {
    background: #fff !important;
    color: var(--prodex-primary-dark) !important;
}

.aside-body .nav li.has-sub-item.sub-menu-opened > a {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

.aside-body .nav li.has-sub-item:after {
    inset-block-start: 0.55rem !important;
    inset-inline-end: 1rem !important;
    z-index: 2 !important;
    pointer-events: none !important;
    color: var(--prodex-ink-500);
}

.aside-body .nav li.has-sub-item.sub-menu-opened:after {
    color: var(--prodex-primary-dark) !important;
}

.aside-body .nav .sub-menu {
    padding-left: 4px;
    padding-top: 2px !important;
}

.aside-body .nav .sub-menu a {
    font-size: 12.5px;
    padding: 6px 10px 6px 32px !important;
}

/* ---------- Collapsed sidebar (aside-folded) ---------- */
/* Fix: theme padding/margin broke icon centering & category dash separators */
body.aside-folded:not(.open-aside-folded) .aside {
    overflow-x: hidden !important;
}

body.aside-folded:not(.open-aside-folded) .aside-header {
    padding: 12px 0 !important;
    justify-content: center !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body {
    padding: 0 6px 12px !important;
}

body.aside-folded:not(.open-aside-folded) .aside .user-profile {
    justify-content: center !important;
    margin: 10px 4px 12px !important;
    padding: 10px 0 !important;
    max-width: 100% !important;
    background: transparent !important;
    border-color: transparent !important;
    overflow: visible !important;
    min-height: 40px;
}

body.aside-folded:not(.open-aside-folded) .aside .user-profile .avatar {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    block-size: 32px !important;
    inline-size: 32px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
}

body.aside-folded:not(.open-aside-folded) .aside .user-profile .avatar > img,
body.aside-folded:not(.open-aside-folded) .aside .user-profile .avatar-img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    inline-size: 32px !important;
    block-size: 32px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

body.aside-folded:not(.open-aside-folded) .aside .user-profile .media-body {
    display: none !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav li {
    padding: 0.15rem 0 !important;
}

/* Hide category labels when folded — no floating dashes */
body.aside-folded:not(.open-aside-folded) .aside-body .nav-category,
body.aside-folded:not(.open-aside-folded) .aside-body li.nav-category {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    max-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 0 !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav-category:before,
body.aside-folded:not(.open-aside-folded) .aside-body li.nav-category:before {
    display: none !important;
    content: none !important;
}

/* Center menu icons */
body.aside-folded:not(.open-aside-folded) .aside-body .nav > li > a,
body.aside-folded:not(.open-aside-folded) .aside-body .nav li a {
    justify-content: center !important;
    align-items: center !important;
    margin: 2px 0 !important;
    padding: 10px 0 !important;
    min-height: 40px;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav > li > a.active-menu,
body.aside-folded:not(.open-aside-folded) .aside-body .nav li a.active-menu {
    border-radius: 8px !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav li a span:not(.material-icons):not(.material-symbols-outlined) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav li .material-icons,
body.aside-folded:not(.open-aside-folded) .aside-body .nav li .material-symbols-outlined {
    margin: 0 !important;
    font-size: 22px !important;
}

/* Hide submenu, chevron, counts when folded */
body.aside-folded:not(.open-aside-folded) .aside-body .nav li.has-sub-item:after {
    display: none !important;
    content: none !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav ul.sub-menu {
    display: none !important;
}

body.aside-folded:not(.open-aside-folded) .aside-body .nav li .link-title .count {
    display: none !important;
}

/* Hide promo / ads card in collapsed sidebar */
body.aside-folded:not(.open-aside-folded) .aside .nav .card,
body.aside-folded:not(.open-aside-folded) .aside-body .nav .card {
    display: none !important;
}

/* When hovered-reopen (open-aside-folded), restore expanded look */
body.aside-folded.open-aside-folded .aside-body .nav-category,
body.aside-folded.open-aside-folded .aside-body li.nav-category {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 10px 10px 2px !important;
    overflow: visible !important;
    font-size: 10.5px !important;
}

body.aside-folded.open-aside-folded .aside-body .nav > li > a,
body.aside-folded.open-aside-folded .aside-body .nav li a {
    justify-content: flex-start !important;
    margin: 0 6px !important;
    padding: 8px 10px !important;
}

body.aside-folded.open-aside-folded .aside-body .nav li a span:not(.material-icons):not(.material-symbols-outlined) {
    display: flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    opacity: 1 !important;
}

body.aside-folded.open-aside-folded .aside .user-profile .media-body {
    display: block !important;
}

/* ---------- Main content ---------- */
.main-content {
    padding-top: 8px;
}

.main-content .container-fluid {
    padding-left: 28px;
    padding-right: 28px;
}

.page-header-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--prodex-ink-900);
    margin: 8px 0 20px;
}

/* ---------- Cards ---------- */
.card {
    background: var(--prodex-surface) !important;
    border: 1px solid var(--prodex-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--prodex-shadow-sm) !important;
}

.card-body {
    padding: 22px !important;
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--prodex-line-soft) !important;
    border-radius: 18px 18px 0 0 !important;
}

/* ---------- KPI / business summary ---------- */
.business-summary {
    border-radius: 18px !important;
    border: 1px solid var(--prodex-line) !important;
    box-shadow: var(--prodex-shadow-sm) !important;
    padding: 22px 20px !important;
    min-height: 128px;
    background: var(--prodex-surface) !important;
}

.business-summary h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: var(--prodex-ink-900) !important;
}

.business-summary h3 {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--prodex-ink-500) !important;
    text-transform: none !important;
}

.business-summary-earning {
    background: linear-gradient(135deg, var(--prodex-primary-soft) 0%, #fff 100%) !important;
}

.business-summary-customers {
    background: linear-gradient(135deg, var(--prodex-yellow-soft) 0%, #fff 100%) !important;
}

.business-summary-providers {
    background: linear-gradient(135deg, var(--prodex-green-soft) 0%, #fff 100%) !important;
}

.business-summary-services {
    background: linear-gradient(135deg, var(--prodex-blue-soft) 0%, #fff 100%) !important;
}

.business-summary .absolute-img {
    width: 44px !important;
    height: 44px !important;
    opacity: 0.95;
}

/* ---------- Buttons ---------- */
.btn--primary,
.btn.btn--primary,
.btn-primary,
button.btn-primary {
    background: var(--prodex-primary) !important;
    border-color: var(--prodex-primary) !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.btn--primary:hover,
.btn.btn--primary:hover,
.btn-primary:hover {
    background: var(--prodex-primary-dark) !important;
    border-color: var(--prodex-primary-dark) !important;
}

.btn--secondary,
.btn-secondary {
    background: #fff !important;
    border: 1px solid var(--prodex-line) !important;
    color: var(--prodex-ink-700) !important;
    border-radius: 10px !important;
}

.btn-danger {
    background: var(--prodex-red) !important;
    border-color: var(--prodex-red) !important;
    border-radius: 10px !important;
}

/* ---------- Forms ---------- */
.form-control,
.form-select,
select.form-control,
textarea.form-control,
.input-label textarea,
.input-label input,
.select-wrap .js-select + .select2-container .select2-selection {
    border: 1px solid var(--prodex-line) !important;
    border-radius: 10px !important;
    color: var(--prodex-ink-900) !important;
    background: #fff !important;
    font-size: 13px !important;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
    border-color: var(--prodex-primary) !important;
    box-shadow: 0 0 0 3px var(--prodex-primary-soft) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--prodex-line) !important;
    border-radius: 10px !important;
    min-height: 42px !important;
}

.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--prodex-primary) !important;
    box-shadow: 0 0 0 3px var(--prodex-primary-soft) !important;
}

.select2-dropdown {
    border: 1px solid var(--prodex-line) !important;
    border-radius: var(--prodex-radius-md) !important;
    box-shadow: var(--prodex-shadow-md) !important;
}

.select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

/* ---------- Tables ---------- */
.table {
    color: var(--prodex-ink-700);
}

.table thead th {
    color: var(--prodex-ink-500) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--prodex-line) !important;
    background: transparent !important;
}

.table tbody td {
    border-bottom: 1px solid var(--prodex-line-soft) !important;
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background: var(--prodex-line-soft) !important;
}

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--prodex-line) !important;
    gap: 18px;
}

.nav-tabs .nav-link {
    border: none !important;
    color: var(--prodex-ink-500) !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 0 0 11px !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--prodex-primary) !important;
    border-bottom-color: var(--prodex-primary) !important;
    background: transparent !important;
}

.option-select-btn label span,
.option-select-btn li label span {
    border-radius: 10px !important;
    border: 1px solid var(--prodex-line) !important;
    background: #fff !important;
    color: var(--prodex-ink-700) !important;
}

.option-select-btn input:checked + span {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
    border-color: var(--prodex-primary) !important;
}

/* ---------- Badges / status ---------- */
.badge,
.status-badge {
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 11.5px !important;
    padding: 4px 11px !important;
}

.bg-success,
.badge-success,
.badge.badge-success {
    background: var(--booking-completed-bg) !important;
    color: var(--booking-completed-fg) !important;
}

.bg-danger,
.badge-danger,
.badge.badge-danger {
    background: var(--booking-canceled-bg) !important;
    color: var(--booking-canceled-fg) !important;
}

.bg-warning,
.badge-warning,
.badge.badge-warning {
    background: var(--booking-ongoing-bg) !important;
    color: var(--booking-ongoing-fg) !important;
}

.bg-info,
.badge-info,
.badge.badge-info {
    background: var(--booking-accepted-bg) !important;
    color: var(--booking-accepted-fg) !important;
}

.bg-primary,
.badge-primary {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

/* Booking status — explicit status classes (marketplace / lists) */
.booking-status.status-pending,
.status-pending {
    background: var(--booking-pending-bg) !important;
    color: var(--booking-pending-fg) !important;
}

.booking-status.status-accepted,
.status-accepted {
    background: var(--booking-accepted-bg) !important;
    color: var(--booking-accepted-fg) !important;
}

.booking-status.status-ongoing,
.status-ongoing {
    background: var(--booking-ongoing-bg) !important;
    color: var(--booking-ongoing-fg) !important;
}

.booking-status.status-completed,
.status-completed {
    background: var(--booking-completed-bg) !important;
    color: var(--booking-completed-fg) !important;
}

.booking-status.status-canceled,
.status-canceled {
    background: var(--booking-canceled-bg) !important;
    color: var(--booking-canceled-fg) !important;
}

/* ---------- Pagination ----------
   Template default fills page links with --title-color (dark navy).
   Force light surface + border so inactive pages read clearly and only
   the active page is primary blue. */
.pagination li a,
.pagination li span,
.page-item .page-link {
    background: var(--prodex-surface) !important;
    border: 1px solid var(--prodex-line) !important;
    border-radius: 8px !important;
    color: var(--prodex-ink-700) !important;
    font-weight: 600;
    font-size: 12.5px;
    margin: 0 3px;
}

.pagination li a:hover,
.page-item .page-link:hover {
    background: var(--prodex-primary-soft) !important;
    border-color: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
}

.pagination li.active a,
.pagination li.active span,
.page-item.active .page-link {
    background: var(--prodex-primary) !important;
    border-color: var(--prodex-primary) !important;
    color: #fff !important;
}

.page-item.disabled .page-link {
    background: var(--prodex-line-soft) !important;
    color: var(--prodex-ink-300) !important;
    opacity: 1;
}

/* ---------- Modals ---------- */
.modal-content {
    border: 1px solid var(--prodex-line) !important;
    border-radius: 14px !important;
    box-shadow: var(--prodex-shadow-md) !important;
}

.modal-header {
    border-bottom: 1px solid var(--prodex-line-soft) !important;
}

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

/* ---------- Lists / timeline ---------- */
.recent-transactions .timeline-item,
.common-list .list-item,
.top-providers .list-item {
    border-bottom: 1px solid var(--prodex-line-soft);
}

.recent-transactions h4,
.top-providers h4,
.earning-statistics h4,
.card-title h4,
h4.c1 {
    color: var(--prodex-ink-900) !important;
    font-weight: 700 !important;
}

/* ---------- Promo / CTA cards ---------- */
.card[data-bg-img] {
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden;
}

.card[data-bg-img] .card-body {
    background: linear-gradient(90deg, rgba(15, 40, 71, 0.85), rgba(31, 74, 121, 0.55));
}

.card[data-bg-img] h4,
.card[data-bg-img] p {
    color: #fff !important;
}

.card[data-bg-img] .btn--primary {
    border-radius: 10px !important;
    background: #fff !important;
    color: var(--prodex-ink-900) !important;
    border: none !important;
    font-weight: 700 !important;
}

/* ---------- Footer ---------- */
.footer {
    border-top: 1px solid var(--prodex-line);
    background: transparent !important;
    color: var(--prodex-ink-500);
}

/* ---------- Settings sidebar ---------- */
.settings-sidebar {
    border-left: 1px solid var(--prodex-line) !important;
    background: var(--prodex-surface) !important;
}

/* ---------- Misc ---------- */
.text-primary,
.c1 {
    color: var(--prodex-primary) !important;
}

.bg-primary {
    background-color: var(--prodex-primary) !important;
}

.border-primary {
    border-color: var(--prodex-primary) !important;
}

.preloader {
    background: var(--prodex-bg);
}

.statistics-card,
.account-cards,
.media-body-card {
    border-radius: 18px !important;
}

/* KPI / statistics cards — equal height across a row */
.statistics-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* keep the row's columns stretching so height:100% has an effect */
.row > [class*="col-"] > .statistics-card {
    min-height: 118px;
}

/* ---------- Date / native inputs ---------- */
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"] {
    border: 1px solid var(--prodex-line) !important;
    border-radius: 10px !important;
    color: var(--prodex-ink-900) !important;
    background: #fff !important;
    font-size: 13px !important;
    padding: 9px 12px !important;
    min-height: 42px;
}

input[type="date"]:focus,
input[type="datetime-local"]:focus,
input[type="time"]:focus,
input[type="month"]:focus {
    border-color: var(--prodex-primary) !important;
    box-shadow: 0 0 0 3px var(--prodex-primary-soft) !important;
    outline: none;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    filter: grayscale(1);
}

input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.9;
}

.offcanvas-overlay.active {
    background: rgba(20, 20, 43, 0.35);
}

/* ---------- Auth / Login pages ---------- */
.login-wrap,
.register-wrap {
    min-height: 100vh;
    background: var(--prodex-bg);
}

.login-left,
.register-left {
    position: relative;
}

.login-left::before,
.register-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 40, 71, 0.9), rgba(31, 74, 121, 0.75));
    z-index: 1;
}

.login-left .tf-box,
.register-left .tf-box {
    position: relative;
    z-index: 2;
}

.login-left .tf-box h2,
.register-left .tf-box h2 {
    color: #fff !important;
}

.login-left .tf-box .c1,
.register-left .tf-box .c1 {
    color: #bfdbfe !important;
}

.login-logo {
    max-height: 56px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.login-right-wrap,
.register-right-wrap {
    background: var(--prodex-surface) !important;
    border-left: 1px solid var(--prodex-line);
}

.login-right h2,
.register-right h2 {
    color: var(--prodex-ink-900) !important;
    font-weight: 700 !important;
}

.login-right p,
.register-right p {
    color: var(--prodex-ink-500) !important;
}

.form-floating.form-floating__icon > .form-control {
    border-radius: 10px !important;
    border: 1px solid var(--prodex-line) !important;
    min-height: 52px;
}

.form-floating.form-floating__icon > label {
    color: var(--prodex-ink-500);
}

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

.login-footer,
.register-footer {
    background: linear-gradient(135deg, #0f2847, #1f4a79) !important;
    border-radius: 0 !important;
}

.login-copy,
.register-copy {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
}

.badge.badge-primary {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary-dark) !important;
    border-radius: 999px !important;
}

/* ---------- Data tables / filters ---------- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--prodex-line) !important;
    border-radius: 8px !important;
}

.filter-card,
.page-title-wrap {
    border-radius: 18px !important;
}

.action-btn,
.btn-action {
    border-radius: 8px !important;
}

.alert {
    border-radius: 12px !important;
    border: 1px solid var(--prodex-line) !important;
}

.alert-success {
    background: var(--prodex-green-soft) !important;
    color: #1BA25B !important;
}

.alert-danger {
    background: var(--prodex-red-soft) !important;
    color: #E14545 !important;
}

.alert-warning {
    background: var(--prodex-yellow-soft) !important;
    color: #C97A16 !important;
}

.alert-info {
    background: var(--prodex-blue-soft) !important;
    color: #1C7FC9 !important;
}

@media (max-width: 991px) {
    .main-content .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }

    .business-summary h2 {
        font-size: 22px !important;
    }

    /* Layout shell — tablet: compact header padding, touch targets */
    .header {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .aside-toggle,
    .toggle-menu-button,
    .header-icon {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---------- Layout shell — mobile (≤767px) ---------- */
@media (max-width: 767px) {
    .main-content .container-fluid {
        padding-left: 12px;
        padding-right: 12px;
    }

    .page-header-title {
        font-size: 17px;
        margin: 4px 0 14px;
    }

    /* Sidebar overlay: keep template toggle intact, just refine width */
    .aside {
        box-shadow: var(--prodex-shadow-lg) !important;
    }

    /* User profile box — never overflow, keep email ellipsis */
    .aside .user-profile {
        margin: 8px 10px 10px !important;
    }

    /* Settings sidebar full-width, scrollable on small screens */
    .settings-sidebar {
        max-width: 100vw;
        overflow-y: auto;
    }

    /* Nav items comfortable touch height */
    .aside-body .nav > li > a,
    .aside-body .nav li a {
        min-height: 42px;
        display: flex;
        align-items: center;
    }

    /* Footer stacks and centers */
    .footer {
        text-align: center;
        font-size: 12px;
    }

    /* KPI cards single column already handled by grid; tighten padding */
    .business-summary {
        padding: 18px 16px !important;
        min-height: auto;
    }
}

/* ---------- Auth pages — mobile overflow fix ----------
   Root cause: .login-wrap is a CSS grid; grid items default to
   min-width:auto, so the branded left panel's min-content forces
   the column wider than the viewport and the form inherits that
   width (horizontal overflow). Allow tracks to shrink, and hide
   the decorative left panel on phones (design: form full width). */
@media (max-width: 991px) {
    .login-wrap,
    .register-wrap {
        grid-template-columns: 1fr !important;
        overflow-x: hidden;
    }

    .login-left,
    .register-left,
    .login-right,
    .register-right,
    .login-right-wrap,
    .register-right-wrap {
        min-width: 0;
        max-width: 100%;
    }

    .login-footer,
    .register-footer {
        flex-wrap: wrap;
        gap: 8px;
    }
}

@media (max-width: 767px) {
    /* .d-flex utility carries !important, so override display here */
    .login-left,
    .register-left {
        display: none !important;
    }

    .login-right,
    .register-right {
        width: 100%;
        margin: 0 auto;
    }
}

/* ============================================================
   DARK MODE — full palette (provider & admin)
   Fixes prodex light overrides breaking [theme="dark"]
   ============================================================ */
[theme="dark"] {
    /* Buren Trade blue, lightened for dark-mode readability (NO purple) */
    --prodex-primary: #6aa9e9;
    --prodex-primary-dark: #8bbef0;
    --prodex-primary-soft: rgba(58, 128, 236, 0.22);
    --prodex-surface: #232325;
    --prodex-bg: #18181a;
    --prodex-line: #404040;
    --prodex-line-soft: #2a2a2a;
    --prodex-ink-900: rgba(255, 255, 255, 0.92);
    --prodex-ink-700: #ccd0d3;
    --prodex-ink-500: #9aa3ad;
    --prodex-ink-300: #6b7280;
    --prodex-ink-100: #404040;
    --prodex-green-soft: rgba(46, 212, 122, 0.15);
    --prodex-red-soft: rgba(255, 107, 107, 0.15);
    --prodex-yellow-soft: rgba(255, 165, 61, 0.15);
    --prodex-blue-soft: rgba(61, 170, 250, 0.15);
    --prodex-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.28);
    --prodex-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.38);

    --bg-color: #39393b;
    --body-bg: #18181a;
    --white-color: #232325;
    --text-color: #ccd0d3;
    --title-color: rgba(255, 255, 255, 0.9);
    --title-color2: rgba(255, 255, 255, 0.65);
    --border-color: #5d5d5d;
    --light-bg: #2a2a2a;
    --dropdown-menu-color: #39393b;
    --mobile-search-bg: #505050;
    --c1-light-bg: rgba(58, 128, 236, 0.2);

    --booking-pending-bg: rgba(255, 165, 61, 0.18);
    --booking-pending-fg: #FFB86A;
    --booking-accepted-bg: rgba(61, 170, 250, 0.18);
    --booking-accepted-fg: #6BC0FF;
    --booking-ongoing-bg: rgba(43, 199, 201, 0.18);
    --booking-ongoing-fg: #5DD8DA;
    --booking-completed-bg: rgba(46, 212, 122, 0.18);
    --booking-completed-fg: #5AE99A;
    --booking-canceled-bg: rgba(255, 107, 107, 0.18);
    --booking-canceled-fg: #FF8F8F;
}

[theme="dark"] body {
    background-color: #18181a !important;
    color: #ccd0d3;
}

[theme="dark"] .main-area,
[theme="dark"] .main-content {
    background: #18181a !important;
}

[theme="dark"] .preloader {
    background: #18181a;
}

/* Header */
[theme="dark"] .header {
    background: rgba(24, 24, 26, 0.96) !important;
    border-bottom: 1px solid #404040 !important;
}

[theme="dark"] .header .search-form,
[theme="dark"] .header .search-form__input_group,
[theme="dark"] .header .form-control,
[theme="dark"] .header input[type="search"],
[theme="dark"] .header input[type="text"],
[theme="dark"] .header #modalOpener,
[theme="dark"] .header .bg--secondary {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .header .dropdown-menu {
    background: #39393b !important;
    border-color: #404040 !important;
}

[theme="dark"] .header .dropdown-item {
    color: #ccd0d3 !important;
}

[theme="dark"] .header .dropdown-item:hover,
[theme="dark"] .header .dropdown-item:focus {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary) !important;
}

/* Sidebar */
[theme="dark"] .aside {
    background: #232325 !important;
    border-right-color: #404040 !important;
}

[theme="dark"] .aside-header {
    border-bottom-color: #404040;
}

[theme="dark"] .aside .user-profile {
    background: #2a2a2a !important;
    border-color: #404040 !important;
}

[theme="dark"] .aside .user-profile .card-title {
    color: rgba(255, 255, 255, 0.92) !important;
}

[theme="dark"] .aside .user-profile .card-text {
    color: #9aa3ad !important;
}

[theme="dark"] .aside-body .nav-category {
    color: #6b7280 !important;
}

[theme="dark"] .aside-body .nav > li > a,
[theme="dark"] .aside-body .nav li a {
    color: #ccd0d3 !important;
}

[theme="dark"] .aside-body .nav > li > a:hover,
[theme="dark"] .aside-body .nav li a:hover {
    background: #2a2a2a !important;
    color: var(--prodex-primary) !important;
}

[theme="dark"] .aside-body .nav > li > a.active-menu,
[theme="dark"] .aside-body .nav li a.active-menu,
[theme="dark"] .active-menu {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary) !important;
}

[theme="dark"] .aside-body .nav li .link-title .count {
    background: #39393b !important;
    color: #9aa3ad !important;
}

[theme="dark"] .aside-body .nav > li > a.active-menu .link-title .count {
    background: #232325 !important;
    color: var(--prodex-primary) !important;
}

[theme="dark"] .aside-body .nav li.has-sub-item.sub-menu-opened > a {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary) !important;
}

[theme="dark"] .aside-body .nav li.has-sub-item.sub-menu-opened:after {
    color: var(--prodex-primary) !important;
}

/* Cards & content */
[theme="dark"] .card,
[theme="dark"] .filter-card,
[theme="dark"] .page-title-wrap,
[theme="dark"] .statistics-card,
[theme="dark"] .account-cards,
[theme="dark"] .media-body-card {
    background: #232325 !important;
    border-color: #404040 !important;
    color: #ccd0d3;
}

[theme="dark"] .card-header {
    border-bottom-color: #404040 !important;
    background: transparent !important;
}

[theme="dark"] .bg-white {
    background-color: #232325 !important;
}

[theme="dark"] .page-header-title,
[theme="dark"] .recent-transactions h4,
[theme="dark"] .top-providers h4,
[theme="dark"] .earning-statistics h4,
[theme="dark"] .card-title h4,
[theme="dark"] h4.c1,
[theme="dark"] .title-color,
[theme="dark"] h1,
[theme="dark"] h2,
[theme="dark"] h3,
[theme="dark"] h4,
[theme="dark"] h5,
[theme="dark"] h6 {
    color: rgba(255, 255, 255, 0.9) !important;
}

[theme="dark"] p,
[theme="dark"] .text-muted,
[theme="dark"] .card-text {
    color: #9aa3ad !important;
}

/* KPI cards */
[theme="dark"] .business-summary {
    background: #232325 !important;
    border-color: #404040 !important;
}

[theme="dark"] .business-summary h2 {
    color: rgba(255, 255, 255, 0.92) !important;
}

[theme="dark"] .business-summary h3 {
    color: #9aa3ad !important;
}

[theme="dark"] .business-summary-earning {
    background: linear-gradient(135deg, rgba(31, 74, 121, 0.35) 0%, #232325 100%) !important;
}

[theme="dark"] .business-summary-customers {
    background: linear-gradient(135deg, rgba(255, 165, 61, 0.18) 0%, #232325 100%) !important;
}

[theme="dark"] .business-summary-providers {
    background: linear-gradient(135deg, rgba(46, 212, 122, 0.15) 0%, #232325 100%) !important;
}

[theme="dark"] .business-summary-services {
    background: linear-gradient(135deg, rgba(61, 170, 250, 0.15) 0%, #232325 100%) !important;
}

/* Forms */
[theme="dark"] .form-control,
[theme="dark"] .form-select,
[theme="dark"] select.form-control,
[theme="dark"] textarea.form-control,
[theme="dark"] .input-label textarea,
[theme="dark"] .input-label input,
[theme="dark"] .theme-input-style,
[theme="dark"] .search-form__input {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .form-control:focus,
[theme="dark"] .form-select:focus,
[theme="dark"] textarea.form-control:focus,
[theme="dark"] .theme-input-style:focus {
    border-color: var(--prodex-primary) !important;
    box-shadow: 0 0 0 3px var(--prodex-primary-soft) !important;
}

[theme="dark"] .form-control::placeholder,
[theme="dark"] .theme-input-style::placeholder {
    color: #6b7280 !important;
}

[theme="dark"] .select2-container--default .select2-selection--single,
[theme="dark"] .select2-container--default .select2-selection--multiple {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ccd0d3 !important;
}

[theme="dark"] .select2-dropdown {
    background: #39393b !important;
    border-color: #404040 !important;
}

[theme="dark"] .select2-results__option {
    color: #ccd0d3 !important;
}

[theme="dark"] .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary) !important;
}

/* Buttons */
[theme="dark"] .btn--secondary,
[theme="dark"] .btn-secondary {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .btn--primary,
[theme="dark"] .btn.btn--primary,
[theme="dark"] .btn-primary,
[theme="dark"] button.btn-primary {
    background: #2f6db3 !important;
    border-color: #2f6db3 !important;
    color: #fff !important;
}

[theme="dark"] .btn--primary:hover,
[theme="dark"] .btn.btn--primary:hover,
[theme="dark"] .btn-primary:hover {
    background: #3a80c9 !important;
    border-color: #3a80c9 !important;
}

/* Tables */
[theme="dark"] .table {
    color: #ccd0d3 !important;
    --bs-table-bg: transparent;
    --bs-table-color: #ccd0d3;
    --bs-table-border-color: #404040;
    --bs-table-striped-bg: #2a2a2a;
    --bs-table-hover-bg: #2a2a2a;
}

[theme="dark"] .table thead th {
    color: #9aa3ad !important;
    border-bottom-color: #404040 !important;
    background: #2a2a2a !important;
}

[theme="dark"] .table tbody td {
    border-bottom-color: #353535 !important;
    color: #ccd0d3 !important;
    background: transparent !important;
}

[theme="dark"] .table tbody tr {
    background: #232325 !important;
}

[theme="dark"] .table-hover tbody tr:hover {
    background: #2a2a2a !important;
}

[theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #1e1e20 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .dataTables_wrapper {
    color: #ccd0d3;
}

[theme="dark"] .dataTables_wrapper .dataTables_filter input,
[theme="dark"] .dataTables_wrapper .dataTables_length select {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

/* Tabs */
[theme="dark"] .nav-tabs {
    border-bottom-color: #404040 !important;
}

[theme="dark"] .nav-tabs .nav-link {
    color: #9aa3ad !important;
}

[theme="dark"] .nav-tabs .nav-link.active,
[theme="dark"] .nav-tabs .nav-item.show .nav-link {
    color: var(--prodex-primary) !important;
    border-bottom-color: var(--prodex-primary) !important;
}

/* Pill-style nav tabs (booking list etc.): keep inactive tabs
   neutral in dark mode instead of picking up the generic blue
   link color; active pill keeps its blue fill. */
[theme="dark"] .nav-link:not(.active):not(.active-menu) {
    color: #9aa3ad;
}

[theme="dark"] .option-select-btn label span,
[theme="dark"] .option-select-btn li label span {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .option-select-btn input:checked + span {
    background: var(--prodex-primary-soft) !important;
    color: var(--prodex-primary) !important;
    border-color: var(--prodex-primary) !important;
}

/* Badges */
[theme="dark"] .badge.badge-primary,
[theme="dark"] .bg-primary.badge {
    background: rgba(31, 74, 121, 0.35) !important;
    color: var(--prodex-primary) !important;
}

/* Pagination */
[theme="dark"] .pagination li a,
[theme="dark"] .pagination li span,
[theme="dark"] .page-item .page-link {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .pagination li.active a,
[theme="dark"] .pagination li.active span,
[theme="dark"] .page-item.active .page-link {
    background: var(--prodex-primary) !important;
    border-color: var(--prodex-primary) !important;
    color: #fff !important;
}

[theme="dark"] input[type="date"],
[theme="dark"] input[type="datetime-local"],
[theme="dark"] input[type="time"],
[theme="dark"] input[type="month"] {
    background: #2a2a2a !important;
    border-color: #404040 !important;
    color: #ccd0d3 !important;
}

[theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(0.8);
}

/* Modals */
[theme="dark"] .modal-content {
    background: #232325 !important;
    border-color: #404040 !important;
    color: #ccd0d3;
}

[theme="dark"] .modal-header,
[theme="dark"] .modal-footer {
    border-color: #404040 !important;
}

[theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Settings sidebar (theme switcher) */
[theme="dark"] .settings-sidebar {
    background: #232325 !important;
    border-left-color: #404040 !important;
}

[theme="dark"] .settings-sidebar .settings-content h4 {
    color: rgba(255, 255, 255, 0.9) !important;
}

[theme="dark"] .settings-sidebar .setting-box-wrap h5 {
    color: #9aa3ad !important;
}

[theme="dark"] .setting-box.light-mode {
    background-color: #39393b !important;
}

[theme="dark"] .setting-box.dark-mode {
    background-color: #18181a !important;
}

[theme="dark"] .setting-box {
    border-color: #404040;
}

[theme="dark"] .setting-box.active {
    border-color: var(--prodex-primary) !important;
}

/* Footer & misc */
[theme="dark"] .footer {
    border-top-color: #404040;
    color: #9aa3ad;
}

[theme="dark"] .text-primary,
[theme="dark"] .c1 {
    color: var(--prodex-primary) !important;
}

[theme="dark"] .recent-transactions .timeline-item,
[theme="dark"] .common-list .list-item,
[theme="dark"] .top-providers .list-item {
    border-bottom-color: #353535;
}

[theme="dark"] .filter-aside,
[theme="dark"] .offcanvas,
[theme="dark"] .dropdown-menu {
    background: #232325 !important;
    border-color: #404040 !important;
    color: #ccd0d3;
}

[theme="dark"] .dropdown-item {
    color: #ccd0d3 !important;
}

[theme="dark"] .dropdown-item:hover,
[theme="dark"] .dropdown-item:focus {
    background: #2a2a2a !important;
    color: var(--prodex-primary) !important;
}

[theme="dark"] .alert {
    border-color: #404040 !important;
}

[theme="dark"] .bg-light {
    background-color: #2a2a2a !important;
    color: #ccd0d3 !important;
}

[theme="dark"] .bg-card {
    background-color: #39393b !important;
    color: #9aa3ad !important;
}

[theme="dark"] .border,
[theme="dark"] .border-bottom,
[theme="dark"] .border-top {
    border-color: #404040 !important;
}

[theme="dark"] a:not(.btn) {
    color: var(--prodex-primary);
}

[theme="dark"] .wizard .content,
[theme="dark"] .wizard .steps {
    background: #232325;
}

[theme="dark"] .empty-state,
[theme="dark"] .no-data-found {
    color: #9aa3ad;
}

/* ============================================================
   CHAT PAGE — modern messenger redesign (admin + provider)
   Scope: .chat-page  ·  visual only, no JS/markup logic changed
   ============================================================ */
.chat-page .row {
    align-items: stretch;
}

/* --- Left panel (conversation list) --- */
.chat-page .col-xxl-3 > .card,
.chat-page .col-lg-4 > .card {
    border-radius: 16px !important;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Search field — icon + input always on ONE line */
.chat-page .search-form__input_group {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: 44px;
    background: var(--prodex-line-soft);
    border: 1px solid var(--prodex-line);
    border-radius: 10px;
    padding-left: 10px;
}

.chat-page .search-form__input_group .search-form__icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--prodex-ink-300);
}

.chat-page .search-form__input_group .search-form__icon .material-icons {
    font-size: 20px;
}

.chat-page .search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 10px !important;
    font-size: 13px;
}

.chat-page .search-form__input:focus {
    box-shadow: none !important;
}

.chat-page .ripple-animation {
    flex-shrink: 0;
    cursor: pointer;
    opacity: 0.65;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--prodex-line-soft);
}

.chat-page .ripple-animation:hover {
    opacity: 1;
}

.chat-page .ripple-animation .svg,
.chat-page .ripple-animation img {
    width: 18px;
    height: 18px;
}

/* New-chat button (moved into the left panel header) */
.chat-page .chat-new-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}

.chat-page .chat-new-btn .material-icons {
    font-size: 19px;
}

/* Own profile row */
.chat-page .profile-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--prodex-ink-900);
    margin: 0;
}

.chat-page .avatar-status {
    background: var(--prodex-green) !important;
    box-shadow: 0 0 0 2px #fff;
}

/* --- Tabs → compact underline tabs (fit long MN labels in narrow panel) --- */
/* give the tab row the full panel width (override mx-lg-4) */
.chat-page div:has(> .nav--tabs) {
    margin-left: 8px !important;
    margin-right: 8px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto;
    border-bottom: none !important;
}

/* admin nests the tab row inside an extra .media.px-3 — trim it for room */
.chat-page .media:has(.nav--tabs) {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 4px !important;
}

.chat-page .nav--tabs {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    padding: 0;
    background: transparent;
    border: none !important;
    border-bottom: 1px solid var(--prodex-line) !important;
    border-radius: 0;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
}

.chat-page .nav--tabs::-webkit-scrollbar {
    display: none;
}

.chat-page .nav--tabs .nav-item {
    flex: 0 1 auto;
    min-width: 0;
}

.chat-page .nav--tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0;
    padding: 9px 5px !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--prodex-ink-500);
    opacity: 1;
    white-space: nowrap;
    background: transparent !important;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.chat-page .nav--tabs .nav-link:hover {
    color: var(--prodex-primary);
}

.chat-page .nav--tabs .nav-link.active {
    color: var(--prodex-primary) !important;
    border-bottom-color: var(--prodex-primary) !important;
}

/* --- Conversation list --- */
.chat-page .inbox_chat {
    padding: 0 10px 8px;
}

.chat-page .chat_list {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 12px;
    margin-bottom: 2px;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.chat-page .chat_list:hover {
    background: var(--prodex-line-soft) !important;
}

.chat-page .chat_list.active {
    background: var(--prodex-primary-soft) !important;
    border-color: rgba(31, 74, 121, 0.15);
}

.chat-page .chat_list .chat_people {
    min-width: 0;
    flex: 1;
    align-items: center;
}

.chat-page .chat_list .chat_ib {
    min-width: 0;
    overflow: hidden;
}

.chat-page .chat_list .chat_ib h5 {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--prodex-ink-900);
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-page .chat_list .chat_ib .fz-12 {
    color: var(--prodex-ink-500);
    font-size: 12px;
}

.chat-page .chat_list .avatar {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

/* unread indicator */
.chat-page .chat_list .bg-info {
    background: var(--prodex-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.chat-page .chat_list .bg-info .material-symbols-outlined {
    font-size: 15px;
}

/* --- Right panel (conversation / empty state) --- */
.chat-page .card-chat {
    border-radius: 16px !important;
    min-block-size: calc(100vh - 220px);
}

.chat-page .chat-empty-state {
    text-align: center;
    color: var(--prodex-ink-500);
}

.chat-page .chat-empty-icon {
    font-size: 56px;
    color: var(--prodex-primary);
    background: var(--prodex-primary-soft);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
}

.chat-page .chat-empty-state h4 {
    color: var(--prodex-ink-900);
    font-weight: 700;
}

.chat-page .chat-empty-text {
    color: var(--prodex-ink-500);
    font-size: 13px;
    max-width: 320px;
}

/* --- Message bubbles --- */
.chat-page .message_text {
    border-radius: 14px;
    line-height: 1.45;
    font-size: 13.5px;
}

.chat-page .received_msg .message_text {
    background: var(--prodex-line-soft) !important;
    color: var(--prodex-ink-900);
    border-bottom-left-radius: 4px;
}

.chat-page .outgoing_msg .message_text {
    background: var(--prodex-primary) !important;
    color: #fff !important;
    border-bottom-right-radius: 4px;
}

.chat-page .time_date {
    color: var(--prodex-ink-300);
}

/* --- Mobile --- */
@media (max-width: 991px) {
    .chat-page .card-chat {
        min-block-size: 60vh;
    }
    .chat-page .inbox_chat {
        max-block-size: 40vh;
    }
}

/* ---------- Chat page — dark mode ---------- */
[theme="dark"] .chat-page .search-form__input_group {
    background: #2a2a2a;
    border-color: #404040;
}

[theme="dark"] .chat-page .nav--tabs {
    background: transparent;
    border-bottom-color: #404040 !important;
}

[theme="dark"] .chat-page .nav--tabs .nav-link {
    color: #9aa3ad;
}

[theme="dark"] .chat-page .nav--tabs .nav-link.active {
    color: var(--prodex-primary) !important;
    border-bottom-color: var(--prodex-primary) !important;
}

[theme="dark"] .chat-page .profile-name,
[theme="dark"] .chat-page .chat_list .chat_ib h5,
[theme="dark"] .chat-page .chat-empty-state h4 {
    color: rgba(255, 255, 255, 0.92);
}

[theme="dark"] .chat-page .chat_list:hover {
    background: #2a2a2a !important;
}

[theme="dark"] .chat-page .chat_list.active {
    background: var(--prodex-primary-soft) !important;
    border-color: rgba(106, 169, 233, 0.25);
}

[theme="dark"] .chat-page .received_msg .message_text {
    background: #2a2a2a !important;
    color: #ccd0d3;
}

[theme="dark"] .chat-page .chat-empty-icon {
    background: var(--prodex-primary-soft);
    color: var(--prodex-primary);
}