@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
:root {
    /* ================= COLORS ================= */

    --maincolor: #002b62;
    --secondary: #fb580b;

    --maincolor-dark: #001f47;
    --secondary-dark: #d94a09;

    --lightprimary: #e6eef8;
    --lightsecondary: #fff1e9;

    --headingcolor: #0A0A0A;
    --textcolor: #333333;
    --mutedtext: #6C757D;

    --white: #ffffff;
    --black: #000000;

    --bordercolor: #E5E7EB;
    --danger: #dc3545;
    --success: #198754;
    --warning: #ffc107;
    --brand-accent: var(--secondary);

    /* New Color Variables */
    --primary-color: #002b62;
    --primary-color-rgb: rgb(0, 43, 98);

    --secondary-color: #fb580b;
    --secondary-color-rgb: rgb(251, 88, 11);

    --tertiary-color: #F4F7FB;
    --tertiary-color-rgb: 244, 247, 251;

    /* ================= SHADOW ================= */

    --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.06);

    /* ================= BORDER RADIUS ================= */

    --commonbr: 12px;
    --smallbr: 6px;
    --capsule: 999px;

    /* ================= TRANSITION ================= */

    --smooth: all 0.3s ease;

    /* ================= FONTS ================= */

    --headingfont: 'Montserrat', sans-serif;
    --bodyfont: 'Poppins', sans-serif;

    --container-padding: 20px;
}

.curved {
    border-radius: var(--commonbr);
}

.page-wrapper{
    margin-top: 2rem;
}

.pageShell {
    background: linear-gradient(180deg, #f8fbff 0%, #f4f7fb 100%);
}
* {
    margin: 0;
    padding: 0;
    font-size: 12px;
    box-sizing: border-box;
}

body {
    font-family: var(--bodyfont);
    color: var(--textcolor);
    background: #f8f9fb;
    line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--headingfont);
    color: var(--headingcolor);
}

a {
    text-decoration: none;
}

ol,
ul {
    padding: 0;
    margin: 0;

}

/* =========================
BOOTSTRAP COLOR OVERRIDE
========================= */

.text-primary {
    color: var(--maincolor) !important;
}

.text-secondary {
    color: var(--secondary) !important;
}

.text-success {
    color: var(--success) !important;
}

.text-danger {
    color: var(--danger) !important;
}

.text-warning {
    color: var(--warning) !important;
}

.text-muted {
    color: var(--mutedtext) !important;
}

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

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

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

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

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

.bg-dark {
    background-color: var(--headingcolor) !important;
}

/* =========================
BUTTONS
========================= */

.btn-primary {
    background-color: var(--maincolor) !important;
    border-color: var(--maincolor) !important;
    color: #fff !important;
}

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

.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: #fff !important;
}

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

.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
}

.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
}

.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: #000 !important;
}

/* =========================
OUTLINE BUTTONS
========================= */

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

.btn-outline-primary:hover {
    background-color: var(--maincolor) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--secondary) !important;
    color: #fff !important;
}

/* =========================
BORDER COLORS
========================= */

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

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

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

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

/* =========================
BADGES
========================= */

.badge-primary {
    background-color: var(--maincolor) !important;
}

.badge-secondary {
    background-color: var(--secondary) !important;
}

.badge-success {
    background-color: var(--success) !important;
}

.badge-danger {
    background-color: var(--danger) !important;
}

/* =========================
ALERTS
========================= */

.alert-primary {
    background-color: var(--lightprimary) !important;
    color: var(--maincolor-dark) !important;
    border-color: var(--maincolor) !important;
}

.alert-secondary {
    background-color: var(--lightsecondary) !important;
    color: var(--secondary-dark) !important;
    border-color: var(--secondary) !important;
}

.alert-success {
    background-color: #d1e7dd !important;
    color: #0f5132 !important;
}

.alert-danger {
    background-color: #f8d7da !important;
    color: #842029 !important;
}

.alert-warning {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}

/* =========================
LINKS
========================= */

a {
    color: var(--maincolor);
}

a:hover {
    color: var(--maincolor-dark);
}

/* =========================
FORM FOCUS
========================= */

.form-control:focus,
.form-select:focus {
    border-color: var(--maincolor) !important;
    box-shadow: 0 0 0 0.2rem rgba(174, 0, 0, 0.15) !important;
}

/* =========================
TABLE HOVER
========================= */

.table-hover tbody tr:hover {
    background-color: var(--lightprimary) !important;
}

/* =========================
CUSTOM UTILITY (BONUS)
========================= */

.bg-lightprimary {
    background: var(--lightprimary) !important;
}

.bg-lightsecondary {
    background: var(--lightsecondary) !important;
}

.text-heading {
    color: var(--headingcolor) !important;
}

.text-body {
    color: var(--textcolor) !important;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--bordercolor);
    position: sticky;
    top: 0;
    z-index: 999;
}


/* LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-title {
    font-family: var(--headingfont);
    font-weight: 600;
    font-size: 14px;
}

.logo-sub {
    font-size: 12px;
    color: var(--mutedtext);
}

/* NAV CENTER */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.nav-center::-webkit-scrollbar {
    display: none;
}

.nav-pills-custom {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* NAV ITEM */
.nav-pills-custom li {
    padding: 8px 16px;
    border-radius: var(--capsule);
    background: #f1f3f5;
    font-size: 14px;
    cursor: pointer;
    transition: var(--smooth);
}

.nav-pills-custom li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--textcolor);
}

/* ACTIVE */
.nav-pills-custom li.active {
    background: var(--maincolor);
    box-shadow: var(--shadow-sm);
}

.nav-pills-custom li.active a {
    color: #fff;
}

/* HOVER */
.nav-pills-custom li:hover {
    background: var(--lightprimary);
}

/* ACTIVE INDICATOR */
.nav-pills-custom li.active {
    position: relative;
}

.nav-pills-custom li.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--maincolor);
    border-radius: var(--capsule);
}

/* RIGHT */
.nav-right {
    display: flex;
    align-items: center;
}

.profile-icon {
    width: 36px;
    height: 36px;
    background: var(--maincolor);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--smooth);
}

.profile-icon:hover {
    background: var(--maincolor-dark);
}

ul,
li {
    list-style: none;
}



.inputBox {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 14px;
}

.inputBox input,
.inputBox textarea,
.inputBox select {

    height: 50px;
    width: 100%;

    border: 1px solid var(--bordercolor);

    border-radius: var(--smallbr);

    padding-left: 50px;

    background: #fff;

    transition: var(--smooth);

}

.inputBox textarea {
    height: 110px;
    padding-top: 12px;
    resize: none;
}

.inputBox i {

    position: absolute;

    left: 0;

    height: 50px;
    width: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--secondary);

    font-size: 18px;

}

.inputBox input:focus,
.inputBox textarea:focus,
.inputBox select:focus {
    outline: none;
    border-color: var(--maincolor);

}

.inputBox input:focus~i,
.inputBox textarea:focus~i,
.inputBox select:focus~i {

    color: var(--maincolor);

}

.profile-sidebar-inner {
    padding: 10px;
}

.sidebar-title {
    font-weight: 600;
    margin-bottom: 10px;
}

.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sb-btn {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 10px;
    padding: 5px;
    padding-left: 8px;
    background: var(--maincolor);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    transition: 0.2s;
}

.sb-btn i {
    font-size: 16px;
}

.sb-btn:hover {
    background: #a93226;
}

.top-tabs {
    background: #666;
    color: #fff;
    padding: 8px;
    display: flex;
    gap: 20px;
    font-size: 13px;
}

.top-tabs a {
    color: #fff;
    text-decoration: none;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

/* SIDEBAR */
.profile-sidebar {
    border: 2px solid var(--maincolor);
    background: #fff;
    border-radius: 10px;
    height: 100%;
    padding: 15px;
}

/* TABLE BOX */
.table-card {
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.modal-title {
    color: #fff !important;
    font-weight: 800;
}

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



.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--bordercolor);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-title {
    font-family: var(--headingfont);
    font-weight: 600;
    font-size: 14px;
}

.logo-sub {
    font-size: 12px;
    color: var(--mutedtext);
}

/* NAV CENTER */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.nav-center::-webkit-scrollbar {
    display: none;
}

.nav-pills-custom {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* NAV ITEM */
.nav-pills-custom li {
    padding: 8px 16px;
    border-radius: var(--capsule);
    background: #f1f3f5;
    font-size: 14px;
    cursor: pointer;
    transition: var(--smooth);
}

.nav-pills-custom li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--textcolor);
}

/* ACTIVE */
.nav-pills-custom li.active {
    background: var(--maincolor);
    box-shadow: var(--shadow-sm);
}

.nav-pills-custom li.active a {
    color: #fff;
}

/* HOVER */
.nav-pills-custom li:hover {
    background: var(--lightprimary);
}

/* ACTIVE INDICATOR */
.nav-pills-custom li.active {
    position: relative;
}

.nav-pills-custom li.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--maincolor);
    border-radius: var(--capsule);
}

/* RIGHT */
.nav-right {
    display: flex;
    align-items: center;
}

.profile-icon {
    width: 36px;
    height: 36px;
    background: var(--maincolor);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--smooth);
}

.profile-icon:hover {
    background: var(--maincolor-dark);
}

ul,
li {
    list-style: none;
}

body {
    background: #f3f4f6;
    font-size: 13px;
}

.crm-page {
    height: calc(100vh - 70px);
}

/* LEFT */
.sidebar-box {
    background: #fff;
    border: 2px solid var(--maincolor);
    border-radius: 14px;
    height: 100%;
    padding: 12px;
    overflow: auto;
}

.sidebar-empty {
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-weight: 700;
}

/* RIGHT */
.content-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toolbar {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}

.table-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.table-scroll {
    overflow: auto;
    height: 100%;
}

/* TABLE */
#profileTable {
    width: max-content;
    min-width: 100%;
    margin: 0;
}

#profileTable thead th {
    background: var(--maincolor);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 8px 10px;
    border: none;
    text-align: center;
    cursor: pointer;
}

#profileTable tbody td {
    font-size: 12px;
    white-space: nowrap;
    padding: 5px;
    vertical-align: middle;
    border-color: #eef0f2;
    text-align: center;
}

#profileTable tbody td:nth-child(4) {
    text-align: left;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: 2px 0;
}

#profileTable thead th:nth-child(1) {
    border-radius: 10px 0 0 10px;
}

#profileTable thead th:last-child {
    border-radius: 0 10px 10px 0;
}

#profileTable tr th.w20 {
    width: 20px !important;
    padding: 0 !important;
}

#profileTable tr td.w20 {
    width: 20px !important;
    padding: 0 !important;
}

#profileTable tr td.srno {
    width: 20px !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #eee;
    border-radius: 50%;
    height: 20px;
}

.selected-row td:not(:nth-child(4)) {
    background: #eee !important;
}

.name-col.status-name {
    position: relative;
    color: var(--celltxt);
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 10px !important;
    cursor: pointer;
    background: var(--cellbg) !important;
    transition: all .2s ease;
}

tr.selected-row td.name-col.status-name::before,
tr.selected-row td.name-col.status-name::after {
    display: none !important;
}

.status-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
}

/* Width helpers */
.w40 {
    min-width: 40px
}

.w50 {
    width: 50px
}

.w60 {
    min-width: 60px
}

.w70 {
    min-width: 70px
}

.w80 {
    min-width: 80px
}

.w90 {
    max-width: 90px !important
}

.w100 {
    min-width: 100px
}

.w220 {
    min-width: 220px
}

.table-footer {
    padding: 8px 10px;
    border-top: 1px solid #eee;
    background: #fff;
}

.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--white);
    border-bottom: 1px solid var(--bordercolor);
    position: sticky;
    top: 0;
    z-index: 999;
}

/* LOGO */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.logo-text-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-title {
    font-family: var(--headingfont);
    font-weight: 600;
    font-size: 14px;
}

.logo-sub {
    font-size: 12px;
    color: var(--mutedtext);
}

/* NAV CENTER */
.nav-center {
    flex: 1;
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.nav-center::-webkit-scrollbar {
    display: none;
}

.nav-pills-custom {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
}

/* NAV ITEM */
.nav-pills-custom li {
    padding: 8px 16px;
    border-radius: var(--capsule);
    background: #f1f3f5;
    font-size: 14px;
    cursor: pointer;
    transition: var(--smooth);
}

.nav-pills-custom li a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--textcolor);
}

/* ACTIVE */
.nav-pills-custom li.active {
    background: var(--maincolor);
    box-shadow: var(--shadow-sm);
}

.nav-pills-custom li.active a {
    color: #fff;
}

/* HOVER */
.nav-pills-custom li:hover {
    background: var(--lightprimary);
}

/* ACTIVE INDICATOR */
.nav-pills-custom li.active {
    position: relative;
}

.nav-pills-custom li.active::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    background: var(--maincolor);
    border-radius: var(--capsule);
}

/* RIGHT */
.nav-right {
    display: flex;
    align-items: center;
}

.profile-icon {
    width: 36px;
    height: 36px;
    background: var(--maincolor);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--smooth);
}

.profile-icon:hover {
    background: var(--maincolor-dark);
}

ul,
li {
    list-style: none;
}




.mainBtn {
    background: var(--maincolor);
    color: #fff;
    padding: 10px 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--capsule);
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    transition: var(--smooth);
    width: max-content;
}

.mainBtn:hover {
    background: #fff;
    color: var(--maincolor);
    border-color: var(--maincolor);
}

.quickLink {
    display: block;
    text-decoration: none;
    color: inherit;
}

.panelCard {
    background: #fff;
    border: 1px solid var(--bordercolor);
    border-radius: 22px;
    box-shadow: var(--shadow-sm);
}

.hero {
    max-width: 1600px;
    margin: auto auto 20px;
    background: linear-gradient(135deg, var(--maincolor), var(--maincolor-dark));
    color: #fff;
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow);
}

.hero h1 {
    color: var(--white);
    margin: 0;
    font-size: 32px;
    font-weight: 800;
}

.hero-sub {
    margin-top: 8px;
    opacity: .92;
}

.metricCard {
    background: #fff;
    border: 1px solid var(--bordercolor);
    border-radius: 22px;
    padding: 18px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: var(--smooth);
}

.metricCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.metricIcon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
}

.sectionTitle {
    font-weight: 800;
    letter-spacing: -.02em;
}

.miniTable th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    border-bottom: 1px solid #e5e7eb;
}

.miniTable td {
    vertical-align: middle;
}

.hero-top h1 {
    color: var(--white);
}


.dm-card {
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .8);
    border-radius: var(--commonbr);
    box-shadow: var(--shadow);
    transition: var(--smooth);
}

.dm-card:hover {
    transform: translateY(-4px);
}

.hero-box {
    background:
        linear-gradient(135deg, var(--maincolor), var(--maincolor-dark));
    color: #fff;
    overflow: hidden;
    position: relative;
}

.hero-box:before {
    content: '';
    position: absolute;
    right: -50px;
    top: -50px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
}

.hero-box:after {
    content: '';
    position: absolute;
    right: 90px;
    bottom: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
}

.hero-title {
    font-size: 30px;
    font-weight: 800;
}

.hero-sub {
    opacity: .9;
    font-size: 14px;
}

.quick-btn {
    border-radius: var(--smallbr);
    padding: 12px;
    font-weight: 600;
    border: none;
    transition: var(--smooth);
}

.quick-btn:hover {
    transform: translateY(-2px);
}

.btn-main {
    background: var(--white);
    color: var(--maincolor);
}

.btn-gold {
    background: var(--secondary);
    color: #fff;
}

.stat-card {
    padding: 18px;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

.stat-icon i {
    font-size: 25px;
}

.bg-red {
    background: var(--lightprimary);
    color: var(--maincolor);
}

.bg-gold {
    background: var(--lightsecondary);
    color: var(--secondary-dark);
}

.bg-green {
    background: #dff5e7;
    color: var(--success);
}

.bg-blue {
    background: #d9f0ff;
    color: #0d6efd;
}

.stat-label {
    font-size: 13px;
    color: var(--mutedtext);
    margin-bottom: 6px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.stat-mini {
    font-size: 12px;
    color: var(--mutedtext);
    margin-top: 8px;
}

.block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.block-title {
    font-size: 18px;
    font-weight: 700;
}

.list-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed var(--bordercolor);
}

.list-row:last-child {
    border-bottom: 0;
}

.rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--lightprimary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--maincolor);
}

.badge-count {
    padding: 4px 10px;
    border-radius: var(--capsule);
    background: var(--headingcolor);
    color: #fff;
    font-size: 12px;
}

.table-modern thead th {
    background: #fff8f8;
    border: 0;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--mutedtext);
    padding: 14px;
}

.table-modern tbody td {
    padding: 14px;
    border-color: #f2f2f2;
    vertical-align: middle;
}

.table-modern tbody tr:hover {
    background: #fffafa;
}

.gender-m {
    color: #0d6efd;
    font-weight: 700;
}

.gender-f {
    color: #e91e63;
    font-weight: 700;
}

.small-link {
    font-size: 12px;
    color: var(--maincolor);
    text-decoration: none;
    font-weight: 600;
}

.small-link:hover {
    color: var(--secondary);
}

/* =========================
DM PROFILE POPUP UI
========================= */

.dm-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.dm-popup-box {
    width: 95%;
    max-width: 1100px;
    height: 90vh;
    background: var(--white);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dm-popup-header {
    padding: 10px 15px;
    border-bottom: 1px solid var(--bordercolor);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dm-popup-title {
    font-weight: 600;
}

.dm-popup-close {
    border: 0;
    background: none;
    font-size: 20px;
    cursor: pointer;
}

.dm-popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.dm-popup-loading {
    text-align: center;
    padding: 40px;
    color: var(--mutedtext);
}

.dm-popup-error {
    color: red;
    text-align: center;
    padding: 40px;
}

.pageWrap {
    padding: 20px
}

.cardBox {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);
    margin-bottom: 18px;
}

.pageTitle {
    font-size: 30px;
    font-weight: 800
}

.tabsBar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 15px 0 22px
}

.tabBtn {
    padding: 10px 16px;
    border-radius: 12px;
    background: #f8f8f8;
    cursor: pointer;
    font-weight: 700
}

.tabBtn.active {
    background: var(--maincolor);
    color: #fff
}

.stepBox {
    display: none
}

.stepBox.active {
    display: block
}

.secTitle {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 15px
}

.btnMain {
    background: var(--maincolor);
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700
}

.btnLight {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 12px 18px;
    border-radius: 12px;
    font-weight: 700
}

.rep {
    border: 1px dashed #ddd;
    padding: 15px;
    border-radius: 14px;
    margin-bottom: 12px
}

.sidebar-box::-webkit-scrollbar {
    width: 6px;
    background: #eee;
    border-radius: 999px;

}

.sidebar-box::-webkit-scrollbar-thumb {
    background: var(--lightprimary);
    border-radius: 999px;
}

.top-hero h2 {
    color: var(--white);
}

.profile-wrapper {
    position: relative;
}

.profile-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
    transition: 0.2s;
}

.profile-btn:hover {
    background: #f5f5f5;
}

.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dc3545;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.profile-text .name {
    font-size: 13px;
    font-weight: 600;
}

.profile-text .email {
    font-size: 11px;
    color: #777;
}

.profile-dropdown {
    position: absolute;
    right: 0;
    top: 110%;
    width: 220px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    display: none;
    overflow: hidden;
    z-index: 999;
}

.profile-dropdown a {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

.profile-dropdown a:hover {
    background: #f7f7f7;
}

.profile-dropdown .divider {
    height: 1px;
    background: #eee;
    margin: 5px 0;
}

.profile-dropdown .logout {
    color: var(--maincolor);
}

.pointer {
    cursor: pointer;
}


.thFilter {
    width: 100%;
    margin-top: 3px;
    height: 24px;
    border: 0;
    background: #fff;
    font-size: 11px;
    color: var(--secondary);
    padding: 0;
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: max-content;
    height: max-content;
    border-radius: 10px;
}

.thFilter:hover,
.thFilter:focus {
    background: transparent;
    box-shadow: none;
}

.thFilter option {
    color: #222;
}

.profile-bar-wrap {
    margin-bottom: 12px;
}

.toolbar {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
}

.tabs-holder {
    background: #ffffff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
    min-height: 100%;
    display: flex;
    align-items: center;
}

.tabs-empty {
    font-size: 14px;
    color: #6c757d;
    padding: 6px 10px;
}

.client-tabs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
}

.client-tabs-bar::-webkit-scrollbar {
    display: none;
}

.tabLink {
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f8f8f8;
    color: #222;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: all .25s ease;
    border: 1px solid transparent;
    flex: 0 0 auto;
}

.tabLink:hover {
    background: var(--maincolor);
    color: #fff;
    transform: translateY(-1px);
}

.tabLink.active {
    background: var(--maincolor);
    color: #fff;
}

@media(max-width:768px) {

    .toolbar,
    .tabs-holder {
        padding: 10px;
    }

    .tabLink {
        padding: 8px 12px;
        font-size: 13px;
    }
}

.fmCard {
    border: 1px solid #e9ecef;
    border-radius: 16px;
    margin-bottom: 12px;
    overflow: hidden;
}

.fmHead {
    padding: 12px 14px;
    background: #f8f9fa;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.fmBody {
    padding: 14px;
}

.table thead {
    background: var(--maincolor);
    color: #fff;
}
.metricIcon i{
    font-size: 30px;
}
.badge-ui {
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
}

.bg-in {
    background: #e3efff;
    color: #0d6efd;
}

.bg-out {
    background: #ffe4e4;
    color: var(--maincolor);
}

.bg-yes {
    background: #d1f7e1;
    color: #198754;
}

.bg-no {
    background: #eee;
    color: #555;
}

.navPhotoBtn {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;

    height: 55px;

    border: none;

    border-radius: 50%;

    background: rgba(255, 255, 255, .16);

    backdrop-filter: blur(6px);

    color: #fff;

    font-size: 34px;

    cursor: pointer;

    z-index: 5;

}

.prevPhotoBtn {

    left: 20px;

}

.nextPhotoBtn {

    right: 20px;

}

.photoCounter {

    position: absolute;

    bottom: 20px;

    left: 50%;

    transform: translateX(-50%);

    background: rgba(0, 0, 0, .55);

    color: #fff;

    padding: 8px 14px;

    border-radius: 30px;

    font-size: 13px;

}

.photoGrid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(170px, 1fr));

    gap: 14px;

}

.photoCard {

    position: relative;

    border-radius: 16px;

    overflow: hidden;

    background: #fff;

    border: 1px solid #eee;

}

.photoThumb {

    width: 100%;

    height: 240px;

    object-fit: cover;

    display: block;

    cursor: pointer;

}

.photoActions {

    position: absolute;

    right: 10px;

    bottom: 10px;

    display: flex;

    gap: 8px;

}

.iconBtn {

    width: 38px;

    height: 38px;

    border: none;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(0, 0, 0, .72);

    color: #fff;

    font-size: 18px;

    cursor: pointer;

    transition: .2s;

}

.iconBtn:hover {

    transform: scale(1.06);

}

.deleteBtn {

    background: #dc3545;

}

.photoPopup {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .92);

    z-index: 999999;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 20px;

}

.photoPopup img {

    max-width: 95%;

    max-height: 95vh;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);

}

.closePopupBtn {

    position: absolute;

    top: 18px;

    right: 18px;

    width: 45px;

    height: 45px;

    border: none;

    border-radius: 50%;

    background: #fff;

    color: #111;

    font-size: 24px;

    cursor: pointer;

}




.photoModuleWrap {

    padding: 10px;

}

.photoTopBar {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 14px;

}

.photoTitle {

    font-size: 18px;

    font-weight: 700;

}

.photoSub {

    font-size: 12px;

    color: #777;

}

.photoGrid {

    display: grid;

    grid-template-columns:
        repeat(auto-fill, minmax(180px, 1fr));

    gap: 14px;

}

.photoCard {

    background: #fff;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid #eee;

    position: relative;

}

.photoThumb {

    width: 100%;

    height: 230px;

    object-fit: cover;

    display: block;

    cursor: pointer;

}

.photoActions {

    display: flex;

    gap: 8px;

    padding: 10px;

}

.photoBtn {

    flex: 1;

    border: none;

    border-radius: 10px;

    padding: 8px;

    font-size: 12px;

    cursor: pointer;

}

.openPhotoBtn {

    background: #111827;

    color: #fff;

}

.deleteBtn {

    background: #dc3545;

    color: #fff;

}

.photoPopup {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .92);

    display: none;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    padding: 20px;

}

.photoPopup img {

    max-width: 95%;

    max-height: 95vh;

    border-radius: 12px;

}

.closePopupBtn {

    position: absolute;

    top: 18px;

    right: 20px;

    width: 42px;

    height: 42px;

    border: none;

    border-radius: 50%;

    background: #fff;

    font-size: 24px;

    cursor: pointer;

}


.ctCard {
    border: 1px solid #eee;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.ctHead {
    padding: 12px 14px;
    background: #f8f9fa;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.ctBody {
    padding: 14px;
}

.secHead {
    font-size: 16px;
    font-weight: 800;
    margin: 14px 0 12px;
}

.addBtn {
    border: none;
    background: var(--maincolor);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.smallMuted {
    font-size: 12px;
    color: #777;
}

.viewOnlyBox {
    background: #fff3cd;
    color: #8a6d00;
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: 600;
}

.edCard {
    border: 1px solid #eee;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.edHead {
    padding: 12px 14px;
    background: #f8f9fa;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.edBody {
    padding: 14px;
}

.muted {
    color: #6c757d;
    font-size: 13px;
}

.addBtn {
    border: none;
    background: #198754;
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.removeBtn {
    border: none;
    background: #f8d7da;
    color: #8a1f2d;
    padding: 8px 10px;
    border-radius: 10px;
}

.secHead {
    font-size: 16px;
    font-weight: 800;
    margin: 12px 0;
}

.fmCard {
    border: 1px solid #e9ecef;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.fmHead {
    padding: 12px 14px;
    background: #f8f9fa;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.fmBody {
    padding: 14px;
}

.fmMuted {
    color: #6c757d;
    font-size: 13px;
}

.addBtn {
    border: none;
    background: var(--maincolor);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.removeBtn {
    border: none;
    background: #f8d7da;
    color: #8a1f2d;
    padding: 8px 10px;
    border-radius: 10px;
}

.secTitle {
    font-size: 16px;
    font-weight: 800;
    margin: 12px 0;
}

.paid-box {
    background: #ecfdf3;
    border: 1px solid #b7ebc6;
    color: #166534;
    border-radius: 16px;
    padding: 16px;
}

.paid-box i {
    font-size: 22px;
}


.prCard {
    border: 1px solid #eee;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 14px;
    overflow: hidden;
}

.prHead {
    padding: 12px 14px;
    background: #f8f9fa;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.prBody {
    padding: 14px;
}

.muted {
    color: #6c757d;
    font-size: 13px;
}

.addBtn {
    border: none;
    background: var(--maincolor);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
}

.removeBtn {
    border: none;
    background: #f8d7da;
    color: #8a1f2d;
    padding: 8px 10px;
    border-radius: 10px;
}

.secHead {
    font-size: 16px;
    font-weight: 800;
    margin: 12px 0;
}



.pageWrap {
    padding: 18px;
}

.topBox {
    background: linear-gradient(135deg, var(--maincolor), var(--maincolor-dark));
    color: #fff;
    border-radius: 22px;
    padding: 24px;
    margin-bottom: 18px;
}

.topTitle {
    font-size: 28px;
    font-weight: 800;
}

.topSub {
    margin-top: 6px;
    opacity: .92;
}

.statRow {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.statCard {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(6px);
    border-radius: 16px;
    padding: 14px 18px;
    min-width: 180px;
}

.statLabel {
    font-size: 13px;
    opacity: .85;
}

.statValue {
    font-size: 24px;
    font-weight: 800;
}

.shortBtn {
    border: none;
    background: #198754;
    color: #fff;
    padding: 12px 18px;
    border-radius: 12px;
    height: 50px;
    font-weight: 700;
}

.tableWrap {
    background: #fff;
    border-radius: 22px;
    overflow: auto;
    border: 1px solid #ececec;
}

.matchTable {
    width: 100%;
    border-collapse: collapse;
    min-width: 2200px;
}

.matchTable thead {
    background: var(--maincolor);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 5;
}

.matchTable th {
    padding: 14px 12px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    border-right: 1px solid rgba(255, 255, 255, .1);
}

.matchTable th:hover {
    background: #890000;
}

.matchTable td {
    padding: 12px 10px;
    border-bottom: 1px solid #f1f1f1;
    white-space: nowrap;
}

.profileRow {
    transition: .15s;
    cursor: pointer;
}

.profileRow:hover {
    background: #fff6f6;
}

.selected-row {
    background: #ffe3e3 !important;
}

.nameBtn {
    border: none;
    background: none;
    color: var(--maincolor);
    font-weight: 700;
}

#loading {
    padding: 25px;
    text-align: center;
    font-weight: 700;
    color: #666;
}

.emptyBox {
    background: #fff;
    padding: 70px 20px;
    border-radius: 22px;
    text-align: center;
}

.emptyBox h3 {
    color: var(--maincolor);
    font-weight: 800;
}

/* =========================================
PROFILE TAB BUTTONS
========================================= */

.client-tabs-bar {

    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    overflow: hidden;
    overflow-x: scroll;

}

.page-wrap {
    padding: 20px;
}

.hero {

    max-width: 1600px;
    margin: auto auto 20px;

    background:
        linear-gradient(135deg,
            var(--maincolor),
            var(--maincolor-dark));

    color: #fff;

    border-radius: 28px;

    padding: 24px;

    box-shadow: var(--shadow);
}

.hero h1 {
color: var(--white);
    margin: 0;
    font-size: 32px;
    font-weight: 800;
}

.hero-sub {

    margin-top: 8px;
    opacity: .92;
}

.pills {

    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 16px;
}

.pill {

    background:
        rgba(255, 255, 255, .12);

    padding: 8px 14px;

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}

.toolbar {

    max-width: 1600px;
    margin: auto auto 18px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.btn-ui {

    border: none;

    border-radius: 14px;

    padding: 11px 18px;

    font-weight: 700;

    background: #111827;
    color: #fff;
}

.btn-main {

    background: var(--main);
}

.stats {

    max-width: 1600px;
    margin: auto auto 20px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 14px;
}

.stat {

    background: #001836;

    border-radius: 22px;

    padding: 18px;

    box-shadow: var(--shadow-sm);
}

.stat-label {

    color: #666;
    font-size: 12px;

    text-transform: uppercase;

    font-weight: 700;
}

.stat-value {

    margin-top: 8px;

    font-size: 28px;
    font-weight: 800;
}

.table-wrap {

    max-width: 1600px;
    margin: auto auto 24px;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);
}

.table-head {

    padding: 18px 20px;

    font-size: 20px;
    font-weight: 800;

    border-bottom: 1px solid #eee;

    background: #fff;
}

.table-responsive {
    overflow: auto;
}

.dm-table {

    width: 100%;
    border-collapse: collapse;
}

.dm-table th {

    background: #fafafa;

    padding: 16px 14px;

    font-size: 12px;
    text-transform: uppercase;

    color: #666;
}

.dm-table td {

    padding: 15px 14px;

    border-top: 1px solid #f1f1f1;

    vertical-align: top;

    font-size: 14px;
}

.tag {

    padding: 7px 12px;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;

    display: inline-block;
}

.bg-single {
    background: #fee2e2;
    color: #991b1b;
}

.bg-both {
    background: #dbeafe;
    color: #1d4ed8;
}

.bg-feedback {
    background: #dcfce7;
    color: #166534;
}

.bg-pending {
    background: #f3f4f6;
    color: #374151;
}

.action-btn {

    border: none;

    background: #111827;
    color: #fff;

    padding: 9px 14px;

    border-radius: 12px;

    font-size: 13px;
    font-weight: 700;
}

.modal-content {

    border: none;
    border-radius: 24px;
}

.form-control,
.form-select {

    min-height: 52px;

    border-radius: 16px;
}

@media(max-width:1000px) {

    .stats {
        grid-template-columns: 1fr;
    }
}

a.historyIconBtn{
    height: 50px;
    width: 50px;
    border-radius: 5px;
    background: var(--lightprimary);
    color: var(--maincolor);
    display: flex;
    align-items: center;
    justify-content: center;
    
}
a.historyIconBtn i{
    
    font-size: 20px;
}

#crmModalBody{
    overflow-y: scroll !important;
}
button.secondaryBtn{

    border-radius: 0 10px 10px 0;
    background: var(--main);
    color: var(--white);
    border: none;
}

/* =========================================================
HEADER / NAV
========================================================= */

.rcHeader {
    position: fixed;
    height: 80px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(0, 0, 0, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    z-index: 9999;
    transition: .35s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .06);
    width: calc(100% - 20px);
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 15px;
    box-shadow: 0 10px 20px -20px #000;
    border: 1px solid rgba(0, 0, 0, .1);
}

.rcHeader.hide {
    transform: translate(-50%, -100%);
    top: 0;
}

.headerSpace {
    height: 80px;
}

.dmLeft {
    width: 260px;
    flex-shrink: 0;
}

.dmLogo {
    height: 60px;
    width: auto;
    display: block;
    object-fit: contain;
}

.dmCenter {
    flex: 1;
    overflow: hidden;
    padding: 0 15px;
    position: relative;
}

.dmNav {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 6px 40px;
}

.dmNav::-webkit-scrollbar {
    display: none;
}

.dmNav a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 12px;
    color: var(--textcolor);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    transition: .25s;
}

.dmNav a:hover {
    background: var(--lightprimary);
    color: var(--maincolor);
}

.dmNav a.active {
    background: var(--maincolor);
    color: #fff;
}

.dmNav a i {
    font-size: 18px;
}

.navScrollBtn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: .2s;
    z-index: 2;
}

.dmCenter:hover .navScrollBtn {
    opacity: 1;
    pointer-events: auto;
}

.navScrollBtn.left {
    left: 6px;
}

.navScrollBtn.right {
    right: 6px;
}

.dmRight {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
}

.userButton {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 14px;
    transition: .3s;
}

.userButton:hover {
    background: #f5f5f5;
}

.dmAvatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--maincolor), var(--secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
}

.userName {
    font-weight: 700;
    color: #222;
}

.dmMobileToggle {
    display: none;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    background: #fff;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .06);
    color: var(--headingcolor);
    flex-shrink: 0;
}

.profileMenu {
    position: absolute;
    top: 65px;
    right: 0;
    width: 220px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
    border: 1px solid rgba(0, 0, 0, .08);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .25s;
    z-index: 10000;
}

.profileMenu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.profileMenu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    text-decoration: none;
    color: #333;
    font-weight: 600;
    transition: .2s;
}

.profileMenu a:hover {
    background: #f6f8fc;
    color: var(--maincolor);
}

.profileMenu a i {
    font-size: 18px;
}

.mobileMenuLink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 16px;
    color: var(--textcolor);
    text-decoration: none;
    font-weight: 700;
    transition: .2s;
}

.mobileMenuLink:hover,
.mobileMenuLink.active {
    background: var(--lightprimary);
    color: var(--maincolor);
}

.mobileMenuSection {
    padding: 18px;
}

.mobileMenuTitle {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mutedtext);
    font-weight: 800;
    margin: 0 0 12px;
}

.mobileMenuCard {
    border: 1px solid var(--bordercolor);
    border-radius: 18px;
    padding: 10px;
    background: #fff;
}

.mobileProfileBox {
    background: linear-gradient(135deg, var(--maincolor), var(--secondary));
    color: #fff;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 14px;
}

.mobileProfileBox .name {
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 4px;
}

.mobileProfileBox .role {
    opacity: .9;
    font-size: 12px;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .rcHeader {
        width: calc(100% - 12px);
        top: 6px;
        height: 70px;
        border-radius: 18px;
        padding: 8px 10px;
    }

    .headerSpace {
        height: 70px;
    }

    .dmLogo {
        height: 42px;
    }

    .dmCenter,
    .navScrollBtn {
        display: none;
    }

    .dmMobileToggle {
        display: inline-flex;
    }

    .userName {
        display: none;
    }

    .dmLeft {
        width: auto;
    }

    .dmRight {
        margin-left: auto;
    }

    .userButton {
        padding: 6px 8px;
    }

    .dmAvatar {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* =========================================================
FOOTER / TOAST / GLOBAL MODAL
========================================================= */

.dashboard-footer{
    background:#fff;
    border-top:1px solid #e9ecef;
    padding:18px 20px;
    margin-top:25px;
    border-radius:15px 15px 0 0;
    box-shadow:0 -3px 20px rgba(0,0,0,.04);
}

.footer-brand{
    font-size:15px;
    color:#555;
}

.footer-brand strong{
    font-weight:700;
}

.footer-btn{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--maincolor);
    color:#fff;
    padding:8px 18px;
    border-radius:30px;
    text-decoration:none;
    transition:.3s;
    font-weight:600;
}

.footer-btn:hover{
    background:var(--maincolor-dark);
    color:#fff;
    transform:translateY(-2px);
}

.footer-year{
    color:#777;
    font-weight:600;
}

#globalToast{
    min-width:340px;
    border-radius:16px;
    overflow:hidden;
}

#globalToast .toast-header{
    background:linear-gradient(135deg,var(--maincolor),var(--secondary));
}

#globalToast .toast-body{
    background:#fff;
    color:#333;
    padding:18px;
    font-size:15px;
}

@media(max-width:768px){
    .dashboard-footer{
        text-align:center;
    }

    .footer-btn{
        margin-top:10px;
    }

    #globalToast{
        min-width:95%;
    }
}

.modal-title {
    color: #fff !important;
    font-weight: 800;
}

.modal-content {
    border: none;
    border-radius: 24px;
}

/* =========================================================
SIDEBAR
========================================================= */

.sidebar {
    background: #fff;
    border-right: 1px solid #e9ecef;
}

.sidebar-logo {
    padding: 18px;
    border-bottom: 1px solid #f0f0f0;
}

.sidebar-inner {
    padding: 14px;
}

.sidebar-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--textcolor);
    text-decoration: none;
    font-weight: 600;
    transition: .2s;
}

.sidebar-menu a:hover {
    background: var(--lightprimary);
    color: var(--maincolor);
}

.sidebar-menu .submenu > a {
    justify-content: space-between;
}

.sidebar-menu .submenu ul {
    margin-top: 8px;
    padding-left: 14px;
}

.menu-title {
    margin: 14px 0 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--mutedtext);
    font-weight: 800;
}

@media (max-width: 991px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: 290px;
        transform: translateX(-100%);
        transition: .25s ease;
        z-index: 99999;
        box-shadow: 0 10px 30px rgba(0,0,0,.12);
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }
}

/* =========================================
RESPONSIVE GLOBAL DASHBOARD OVERRIDES
========================================= */

@media (max-width: 991px) {
    .page-wrapper,
    .pageWrap,
    .page-wrap,
    .crm-page,
    .content-wrap {
        height: auto !important;
        min-height: 0 !important;
    }

    .content,
    .container-fluid {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero,
    .topBox,
    .hero-top,
    .panelCard,
    .cardBox,
    .table-wrap,
    .table-card,
    .tableCard,
    .toolbar,
    .tabs-holder,
    .metricCard {
        border-radius: 18px !important;
    }

    .hero,
    .topBox {
        padding: 18px !important;
    }

    .pageTitle,
    .topTitle,
    .hero h1,
    .hero-top h1 {
        font-size: 24px !important;
        line-height: 1.2;
    }

    .statRow,
    .stats,
    .statsGrid {
        grid-template-columns: 1fr !important;
    }

    .table-responsive,
    .tableWrap,
    .table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .dm-table,
    .matchTable {
        min-width: 900px;
    }

    .btn,
    .mainBtn,
    .btn-ui,
    .btnMain,
    .addBtn,
    .shortBtn {
        width: 100%;
        justify-content: center;
    }

    .d-flex.gap-2.flex-wrap .btn,
    .d-flex.gap-2 .btn,
    .toolbar .btn,
    .hero .btn {
        width: auto;
    }
}

@media (max-width: 575px) {
    body {
        font-size: 12px;
    }

    .rcHeader {
        width: calc(100% - 8px) !important;
    }

    .footer-brand {
        font-size: 13px;
    }

    .footer-btn {
        width: 100%;
        justify-content: center;
    }

    .pageTitle,
    .topTitle,
    .hero h1,
    .hero-top h1 {
        font-size: 22px !important;
        color: var(--white);
    }

    .modal-dialog {
        margin: .5rem;
    }

    .modal-content {
        border-radius: 18px;
    }

    .form-control,
    .form-select {
        min-height: 46px;
    }
}



.dashboardHome .heroShell{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    padding:28px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg,#0f172a 0%,#123a7a 48%,#1d4ed8 100%);
    color:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.18);
}
.dashboardHome .heroGrid{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}
.dashboardHome .heroCopy{
    max-width:760px;
}
.dashboardHome .heroKicker{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.dashboardHome .heroCopy h1{
    font-size:48px;
    line-height:1.05;
    margin:0 0 12px;
}
.dashboardHome .dashboardHeroText,
.dashboardHome .heroText{
    max-width:760px;
    color:rgba(255,255,255,.85);
    font-size:16px;
    line-height:1.8;
}
.dashboardHome .heroMiniStats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}
.dashboardHome .heroMiniStats > div{
    min-width:130px;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.12);
}
.dashboardHome .heroMiniStats span{
    display:block;
    font-size:12px;
    color:rgba(255,255,255,.72);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.dashboardHome .heroMiniStats strong{
    display:block;
    font-size:24px;
    line-height:1;
    color:#fff;
}
.dashboardHome .heroActions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}
.dashboardHome .heroBtn{
    min-height:46px;
    border-radius:999px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}
.dashboardHome .summaryGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.dashboardHome .summaryCard{
    background:#fff;
    border-radius:22px;
    padding:18px;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 40px rgba(15,23,42,.07);
    display:flex;
    gap:14px;
    align-items:center;
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:108px;
    position:relative;
    overflow:hidden;
}
.dashboardHome .summaryCard:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 48px rgba(15,23,42,.12);
    color:inherit;
}
.dashboardHome .summaryIcon{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
}
.dashboardHome .summaryBody{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.dashboardHome .summaryBody span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.dashboardHome .summaryBody strong{
    display:block;
    font-size:34px;
    line-height:1;
    color:var(--headingcolor);
    font-variant-numeric:tabular-nums;
}
.dashboardHome .summaryBody small{
    color:#64748b;
    font-size:12px;
}
.dashboardHome .leadStatsGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.dashboardHome .leadStatCard{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
    min-height:104px;
}
.dashboardHome .leadStatIcon{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    color:#fff;
    flex-shrink:0;
}
.dashboardHome .leadStatMeta{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.dashboardHome .leadStatMeta span{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#64748b;
}
.dashboardHome .leadStatMeta strong{
    font-size:32px;
    line-height:1;
    color:var(--headingcolor);
    font-variant-numeric:tabular-nums;
}
.dashboardHome .leadStatMeta small{
    color:#64748b;
    font-size:12px;
}
.dashboardHome .quickLinksGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.dashboardHome .quickLinkCard{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(148,163,184,.14);
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:92px;
}
.dashboardHome .recentGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.dashboardHome .enquiryCard{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 38px rgba(15,23,42,.08);
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:150px;
}
.dashboardHome .enquiryIcon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    flex-shrink:0;
}
.dashboardHome .badgePill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}
.dashboardHome .summaryBlogs .summaryIcon{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.dashboardHome .summaryCases .summaryIcon{background:linear-gradient(135deg,#7c3aed,#5b21b6);}
.dashboardHome .summaryEnquiries .summaryIcon{background:linear-gradient(135deg,#f97316,#ea580c);}
.dashboardHome .summaryUsers .summaryIcon{background:linear-gradient(135deg,#10b981,#059669);}
.dashboardHome .statBlue .leadStatIcon{background:#e0f2fe;color:#0284c7;}
.dashboardHome .statGreen .leadStatIcon{background:#dcfce7;color:#16a34a;}
.dashboardHome .statPurple .leadStatIcon{background:#ede9fe;color:#7c3aed;}
.dashboardHome .statOrange .leadStatIcon{background:#ffedd5;color:#ea580c;}
.dashboardHome .statAmber .leadStatIcon{background:#fef3c7;color:#d97706;}
.dashboardHome .statRed .leadStatIcon{background:#fee2e2;color:#dc2626;}
.dashboardHome .is-new .enquiryIcon,.dashboardHome .badgePill.is-new{background:#dbeafe;color:#2563eb;}
.dashboardHome .is-pipeline .enquiryIcon,.dashboardHome .badgePill.is-pipeline{background:#ede9fe;color:#7c3aed;}
.dashboardHome .is-contacted .enquiryIcon,.dashboardHome .badgePill.is-contacted{background:#fef3c7;color:#b45309;}
.dashboardHome .is-followup .enquiryIcon,.dashboardHome .badgePill.is-followup{background:#e0e7ff;color:#4f46e5;}
.dashboardHome .is-quote .enquiryIcon,.dashboardHome .badgePill.is-quote{background:#ffedd5;color:#ea580c;}
.dashboardHome .is-negotiation .enquiryIcon,.dashboardHome .badgePill.is-negotiation{background:#fae8ff;color:#c026d3;}
.dashboardHome .is-won .enquiryIcon,.dashboardHome .badgePill.is-won{background:#dcfce7;color:#16a34a;}
.dashboardHome .is-lost .enquiryIcon,.dashboardHome .badgePill.is-lost{background:#fee2e2;color:#dc2626;}
.dashboardHome .is-default .enquiryIcon,.dashboardHome .badgePill.is-default{background:#e2e8f0;color:#334155;}
.dashboardHome{
    background:
        radial-gradient(circle at top right, rgba(29,78,216,.10), transparent 24%),
        radial-gradient(circle at left center, rgba(124,58,237,.08), transparent 28%),
        linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%);
    min-height:calc(100vh - 80px);
}
.heroShell{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    padding:28px;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(135deg,#0f172a 0%,#123a7a 48%,#1d4ed8 100%);
    color:#fff;
    box-shadow:0 24px 70px rgba(15,23,42,.18);
}
.heroGlow{
    position:absolute;
    inset:auto -120px -120px auto;
    width:320px;
    height:320px;
    background:radial-gradient(circle,rgba(255,255,255,.16),transparent 64%);
    pointer-events:none;
}
.heroGrid{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
}
.heroCopy{
    max-width:760px;
}
.heroKicker{
    display:inline-flex;
    align-items:center;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.12);
    color:#dbeafe;
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:14px;
}
.heroCopy h1{
    font-size:48px;
    line-height:1.05;
    margin:0 0 12px;
}
.heroText{
    max-width:760px;
    color:rgba(255,255,255,.85);
    font-size:16px;
    line-height:1.8;
}
.heroMiniStats{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:20px;
}
.heroMiniStats > div{
    min-width:130px;
    padding:12px 14px;
    border-radius:18px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.12);
}
.heroMiniStats span{
    display:block;
    font-size:12px;
    color:rgba(255,255,255,.72);
    margin-bottom:4px;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.heroMiniStats strong{
    display:block;
    font-size:24px;
    line-height:1;
    color:#fff;
}
.heroActions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
}
.heroBtn{
    min-height:46px;
    border-radius:999px;
    padding:0 18px;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:700;
}
.summaryGrid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
}
.summaryCard{
    background:#fff;
    border-radius:22px;
    padding:18px;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 40px rgba(15,23,42,.07);
    display:flex;
    gap:14px;
    align-items:center;
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:108px;
    position:relative;
    overflow:hidden;
}
.summaryCard:hover{
    transform:translateY(-4px);
    box-shadow:0 20px 48px rgba(15,23,42,.12);
    color:inherit;
}
.summaryIcon{
    width:56px;
    height:56px;
    min-width:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
}
.summaryBody{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.summaryBody span{
    display:block;
    color:#64748b;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.05em;
}
.summaryBody strong{
    display:block;
    font-size:34px;
    line-height:1;
    color:var(--headingcolor);
    font-variant-numeric:tabular-nums;
}
.summaryBody small{
    color:#64748b;
    font-size:12px;
}
.summaryBlogs .summaryIcon{background:linear-gradient(135deg,#2563eb,#1d4ed8);}
.summaryCases .summaryIcon{background:linear-gradient(135deg,#7c3aed,#5b21b6);}
.summaryEnquiries .summaryIcon{background:linear-gradient(135deg,#f97316,#ea580c);}
.summaryUsers .summaryIcon{background:linear-gradient(135deg,#10b981,#059669);}
.leadSnapshotPanel,.recentPanel{
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.leadStatsGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.leadStatCard{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 36px rgba(15,23,42,.08);
    min-height:104px;
}
.leadStatIcon{
    width:64px;
    height:64px;
    min-width:64px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    color:#fff;
    flex-shrink:0;
}
.leadStatMeta{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.leadStatMeta span{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#64748b;
}
.leadStatMeta strong{
    font-size:32px;
    line-height:1;
    color:var(--headingcolor);
    font-variant-numeric:tabular-nums;
}
.leadStatMeta small{
    color:#64748b;
    font-size:12px;
}
.statBlue .leadStatIcon{background:#e0f2fe;color:#0284c7;}
.statGreen .leadStatIcon{background:#dcfce7;color:#16a34a;}
.statPurple .leadStatIcon{background:#ede9fe;color:#7c3aed;}
.statOrange .leadStatIcon{background:#ffedd5;color:#ea580c;}
.statAmber .leadStatIcon{background:#fef3c7;color:#d97706;}
.statRed .leadStatIcon{background:#fee2e2;color:#dc2626;}
.quickLinksGrid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}
.quickLinkCard{
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(148,163,184,.14);
    box-shadow:0 12px 35px rgba(15,23,42,.05);
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:92px;
}
.quickLinkCard:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 50px rgba(15,23,42,.12);
    color:inherit;
}
.quickLinkIcon{
    width:54px;
    height:54px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--quick-bg);
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}
.quickLinkText{
    flex:1;
}
.quickLinkText strong{
    display:block;
    color:var(--headingcolor);
    margin-bottom:4px;
}
.quickLinkText span{
    display:block;
    color:#64748b;
    font-size:12px;
}
.quickLinkArrow{
    color:#94a3b8;
    font-size:20px;
}
.recentGrid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}
.enquiryCard{
    display:flex;
    gap:14px;
    align-items:flex-start;
    padding:16px;
    border-radius:22px;
    background:#fff;
    border:1px solid rgba(148,163,184,.16);
    box-shadow:0 14px 38px rgba(15,23,42,.08);
    text-decoration:none;
    color:inherit;
    transition:transform .25s ease, box-shadow .25s ease;
    min-height:150px;
}
.enquiryCard:hover{
    transform:translateY(-4px);
    color:inherit;
    box-shadow:0 22px 50px rgba(15,23,42,.12);
}
.enquiryIcon{
    width:60px;
    height:60px;
    min-width:60px;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    flex-shrink:0;
}
.enquiryBody{
    display:flex;
    flex-direction:column;
    gap:10px;
    width:100%;
}
.enquiryTop,.enquiryMid,.enquiryBottom{
    display:flex;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    align-items:flex-start;
}
.enquiryTop strong{
    font-size:16px;
    color:var(--headingcolor);
}
.enquiryTop span,.enquiryMeta{
    font-size:12px;
    color:#64748b;
}
.enquiryMid{
    padding-bottom:10px;
    border-bottom:1px dashed rgba(148,163,184,.18);
}
.enquiryMid span:first-child{
    font-weight:600;
    color:#334155;
}
.badgePill{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    letter-spacing:.03em;
    text-transform:uppercase;
}
.is-new .enquiryIcon,.badgePill.is-new{background:#dbeafe;color:#2563eb;}
.is-pipeline .enquiryIcon,.badgePill.is-pipeline{background:#ede9fe;color:#7c3aed;}
.is-contacted .enquiryIcon,.badgePill.is-contacted{background:#fef3c7;color:#b45309;}
.is-followup .enquiryIcon,.badgePill.is-followup{background:#e0e7ff;color:#4f46e5;}
.is-quote .enquiryIcon,.badgePill.is-quote{background:#ffedd5;color:#ea580c;}
.is-negotiation .enquiryIcon,.badgePill.is-negotiation{background:#fae8ff;color:#c026d3;}
.is-won .enquiryIcon,.badgePill.is-won{background:#dcfce7;color:#16a34a;}
.is-lost .enquiryIcon,.badgePill.is-lost{background:#fee2e2;color:#dc2626;}
.is-default .enquiryIcon,.badgePill.is-default{background:#e2e8f0;color:#334155;}
.priority-high{background:#fee2e2;color:#dc2626;}
.priority-medium{background:#fef3c7;color:#d97706;}
.priority-low{background:#dcfce7;color:#16a34a;}
.emptyState{
    padding:22px;
    border-radius:18px;
    background:#f8fbff;
    border:1px solid rgba(148,163,184,.14);
    color:#64748b;
}
.miniList{
    display:grid;
    gap:12px;
}
.miniListItem{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px;
    border-radius:18px;
    background:#f8fbff;
    border:1px solid rgba(148,163,184,.14);
    text-decoration:none;
    color:inherit;
}
.miniListItem strong{
    display:block;
    color:var(--headingcolor);
    margin-bottom:4px;
}
.miniListItem span{
    color:#64748b;
    font-size:13px;
}
@media (max-width: 1199px){
    .summaryGrid,
    .quickLinksGrid,
    .recentGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 991px){
    .heroGrid{
        flex-direction:column;
    }
    .heroActions{
        justify-content:flex-start;
    }
    .leadStatsGrid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width: 767px){
    .summaryGrid,
    .quickLinksGrid,
    .recentGrid,
    .leadStatsGrid{
        grid-template-columns:1fr;
    }
    .heroShell{
        padding:22px;
    }
    .heroCopy h1{
        font-size:36px;
    }
}