:root {
    --js-bg: #EDEDED;
    --js-header-bg: #2b2b2b;
    --js-primary: #008374;
    --js-primary-soft: #0aa790;
    --js-primary-dark: #026655;
    --js-accent: #F6B925;
    --js-card-bg: #ffffff;
    --js-chip-bg: #f9fafb;
    --js-border: #dddddd;
    --js-border-soft: #e5e7eb;
    --js-text-main: #1f2937;
    --js-text-muted: #6b7280;
    --yellow: #f6bb26;
    --teal-light: #026655;

    /* px ? em converted */
    --radius-lg: 1em;
    /* 16px */
    --radius-md: 0.875em;
    /* 14px */
    --radius-pill: 62.4375em;
    /* 999px */

    --shadow-soft: 0 0.125em 0.375em rgba(15, 23, 42, .05);
    --shadow-hover: 0 0.625em 1.5625em rgba(15, 23, 42, .16);

    --font-main: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    --ui-scaling: 0.8333vw;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

#topLoader {
    position: fixed;
    top: 0;
    left: 0;
    height: 0.4em;
    width: 0%;
    background: var(--yellow);
    z-index: 999999;
    transition: width 0.4s ease;
}

.custom-scale-wrapper {
    font-size: var(--ui-scaling);
    width: 100%;
}

@media (max-width: 1000px) {
    .custom-scale-wrapper {
        font-size: 10px;
    }
}

@media (min-width: 7680px) {
    .custom-scale-wrapper {
        font-size: 64px;
    }
}

.ico {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
}

.ico {
    font-size: 1em;
    line-height: 1;
}


html,
body {
    height: 100%
}


body {
    font-family: var(--font-main);
    background: var(--js-bg);
    color: var(--js-text-main);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}

a {
    text-decoration: none;
    color: inherit
}




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

.nav-tabs {
    background: var(--js-primary);
    color: #fff;
}

.nav-tabs-inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0.8em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75em;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 0.725em;
    flex-wrap: wrap;
}

.nav-tab {
    padding: 0.55em 1.1em;
    border-radius: var(--radius-pill);
    border: 0.0625em solid transparent;
    display: flex;
    align-items: center;
    gap: 0.45em;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.08);
    color: #e5e7eb;
    transition: 0.18s;
}

.nav-tab span.ico {
    font-size: 1.05em;
}

.nav-tab:hover {
    background: rgba(0, 0, 0, 0.18);
}

.nav-tab.active {
    background: #fff;
    color: var(--js-primary-dark);
    border-color: rgba(0, 0, 0, 0.02);
}

.nav-secondary {
    display: flex;
    gap: 0.5em;
    flex-wrap: wrap;
}

.nav-secondary-pill {
    padding: 0.45em 0.9em;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.12);
    color: #e5e7eb;
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4em;
}

/* ================= MOBILE MENU ================= */

.mobile-menu-btn {
    display: none;
    background: #fff;
    color: var(--js-primary);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.55em 1em;
    font-weight: 700;
    cursor: pointer;
    align-items: center;
    gap: 0.5em;
    box-shadow: var(--shadow-soft);
}

.mobile-menu-dropdown {
    display: none;
    background: #fff;
    border-bottom: 0.0625em solid var(--js-border);
    box-shadow: 0 0.25em 0.75em rgba(0, 0, 0, 0.16);
}

.mobile-menu-dropdown.show {
    display: block;
}

.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7em;
    padding: 0.85em 1.25em;
    border-top: 0.0625em solid var(--js-border-soft);
    font-weight: 600;
    color: var(--js-text-main);
    cursor: pointer;
    transition: 0.16s;
}

.mobile-menu-item span.ico {
    font-size: 1.1em;
}

.mobile-menu-item:hover {
    background: #f3f4f6;
}

.mobile-menu-item.active {
    background: #e6f7f5;
    color: var(--js-primary-dark);
}

/* ================= USER AVATAR + INFO ================= */
.mode-btn i {
    color: inherit;
    font-size: 1.1em;
}


/* ================= DESKTOP NAVIGATION BAR ================= */

.desktop-nav {
    display: none;
    background: #009688;
    padding: 0 1.875em;
    box-shadow: 0 0.125em 0.3125em rgba(0, 0, 0, 0.1);
}

/* PAGE */
.page {
    max-width: 100%;
    margin: 0 auto;
    padding: 1.6em 1.5em 2.4em;
    padding-inline: 8em;
}

.top-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2em;
    flex-wrap: wrap;
    margin-bottom: 1.4em;
}

.page-title {
    font-size: 2.5em;
    font-weight: 800;
    color: var(--js-text-main);
}

.page-sub {
    margin-top: 0.35em;
    color: var(--js-text-muted);
    font-size: 1.1em;
    max-width: 40em;
    font-weight: 400;
}

.top-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8em;
    min-width: 15em;
}

/* MODE TOGGLE */
.mode-toggle {
    display: flex;
    background: #f3f4f6;
    padding: 0.18em;
    border-radius: 62.5em;
    box-shadow: 0 0.125em 0.375em rgba(15, 23, 42, .12);
    margin-bottom: 1em;
}

.mode-btn {
    flex: 1;
    border: none;
    background: transparent;
    border-radius: 62.5em;
    padding: 0.4em 0.9em;
    font-size: 1.1em;
    font-weight: 700;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    transition: 0.16s;
    white-space: nowrap;
}

.mode-btn span.ico {
    font-size: 1em;
}

.mode-btn.active {
    background: #fff;
    color: #026655;
    box-shadow: 0 0.375em 1em rgba(15, 23, 42, .16);
}

/* BUTTONS */
.btn {
    padding: 1em 2em;
    border: none;
    border-radius: 3em;
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    cursor: pointer;
    transition: 0.16s;
    white-space: nowrap;
    box-shadow: 0 0.625em 1.375em rgba(15, 23, 42, .22);
}

.btn-primary {
    background: var(--teal-light);
    color: #fff;
    box-shadow: 0 0.25em 1em rgba(38, 95, 92, 0.3);
}

.btn-primary:hover {
    transform: translateY(-0.2em);
    opacity: 0.9;
    background: var(--teal-light);
}
.btn-primary:active{
    background-color: var(--teal-light) !important;
}
.btn-secondary {
    background: #313131;
    color: #fff;
}

.btn-secondary:hover {
    background: #313131;
    transform: translateY(-0.2em);
    opacity: 0.99999;
}

.btn-green {
    background: var(--teal-light);
    color: #fff;
}

.btn-green:hover {
    background: var(--teal-light);
    transform: translateY(-0.0625em);
    box-shadow: 0 0.75em 1.625em rgba(15, 23, 42, .28);
    color: #fff;
    opacity: 0.9;
}

.btn-ghost {
    background: #fff;
    color: var(--js-primary-dark);
    border: 0.125em solid rgba(0, 131, 116, .3);
    box-shadow: 0 0.25em 0.75em rgba(15, 23, 42, .06);
    padding: 0.8em 1.8em;
}

.btn-ghost:hover {
    border-color: var(--js-primary-dark);
    background: #f5fffd;
    color: var(--js-primary-dark);
    opacity: 0.9;
}

.btn-icon-only {
    padding: 0.65em 0.9em;
}

.actions {
    display: flex;
    gap: 0.7em;
    flex-wrap: wrap;
}

/* CARDS / WELCOME */
.card {
    background: var(--js-card-bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--js-border);
    box-shadow: var(--shadow-soft);
    padding: 1.4em 1.45em;
    font-size: 1em;
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.18em 0.5em;
}

.welcome {
    margin-bottom: 1.6em;
    background: linear-gradient(135deg, var(--js-primary-dark), var(--js-primary-soft));
    color: #f9fafb;
    border-color: transparent;
    box-shadow: 0 0.6em 1.8em rgba(0, 0, 0, .25);
    position: relative;
    overflow: hidden;
    font-size: 1em;
}

.welcome::after {
    content: "";
    position: absolute;
    right: -3.75em;
    top: -2.5em;
    width: 11.25em;
    height: 11.25em;
    border-radius: 50%;
    border: 1.6em solid rgba(255, 255, 255, .06);
}

.welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.4em;
    flex-wrap: wrap;
}

.welcome-left {
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
}

.welcome-badge {
    width: 2.6em;
    height: 2.6em;
    border-radius: 1.1em;
    background: rgba(255, 255, 255, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8em;
}

.welcome-text h2 {
    font-size: 1.55em;
    font-weight: 700;
    margin-bottom: .2em;
}

.welcome-text p {
    color: #e5f9f7;
    font-size: 1.1em;
    max-width: 36em;
    font-weight: 400;
    margin-bottom: 0;
}

.welcome-badge i {
    font-size: 1.1em;
}

/* STATS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14.4em, 1fr));
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
}

.stat-card {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
    font-size: 1em;
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.18em 0.5em;
    border-width: 0.2em;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.18);
    border-image: initial;
}

.stat-card::before {
    content: "";
    position: absolute;
    inset: auto -40% -40% auto;
    height: 80%;
    background: radial-gradient(circle at top, var(--js-primary-soft), transparent 60%);
    opacity: .14;
    pointer-events: none;
}

.stat-card:hover {
    transform: translateY(-.2em);
    /* 3px */
    box-shadow: var(--shadow-hover);
}

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .8em;
}

.stat-label {
    font-size: 1.1em;
    color: var(--js-text-muted);
    margin-bottom: .3em;
    font-weight: 600;
}

.stat-value {
    font-size: 2.4em;
    font-weight: 700;
    color: var(--js-text-main);
    line-height: 1.1;
}

.stat-foot {
    margin-top: .9em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .983em;
    color: var(--js-text-muted);
    font-weight: 400;
}

.stat-icon {
    width: 2.5em;
    height: 2.5em;
    border-radius: 5.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    background: var(--js-chip-bg);
}

.stat-icon.a {
    background: #e6f7f5;
    color: var(--js-primary-dark);
}

.stat-icon.b {
    background: #fff3e6;
    color: var(--js-accent);
}

.stat-icon.c {
    background: #e6f0ff;
    color: #2563eb;
}

.stat-icon.d {
    background: #f3e6ff;
    color: #9333ea;
}

.chip {
    padding: 0.5426em .97em;
    border-radius: var(--radius-pill);
    border: 1px solid var(--js-border-soft);
    background: var(--js-chip-bg);
    font-size: 0.9em;
    line-height: 1em;
    font-weight: 600;
    color: var(--js-text-main);
    display: inline-flex;
    align-items: center;
    gap: .25em;
}

.chip.good {
    background: #e6f7f5;
    border-color: rgba(0, 131, 116, .32);
    color: var(--js-primary-dark);
}

.chip.warn {
    background: #fff3e6;
    border-color: rgba(246, 185, 37, .4);
    color: #b45309;
}

/* TYPES / PANELS */
.types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22.25em, 1fr));
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
}

.type-card {
    padding: 1.3em;
    font-size: 1em;
       background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.14) 0px 0.18em 0.5em;
    border-width: 0.2em;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.18);
    border-image: initial;
    position: relative;
}

.type-head {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: .85em;
    align-items: center;
}

.type-card .btn {
    width: 100%;
    padding: 0.8em 2em;
}

.type-main {
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
}

.type-icon-circle {
    width: 3em;
    height: 3em;
    border-radius: 0.6em;
    background: var(--teal-light);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    box-shadow: 0 .25em .75em rgba(15, 23, 42, .12);
    flex-shrink: 0;
}
.type-title-badge {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: .15em;
    padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    color: var(--js-primary-dark);
    background-color: #f0f7ff;
    text-wrap: nowrap;
    width: max-content;
    position: absolute;
    left: 50%;
    right: 50%;
    transform: translate(-50%,-50%);
}

.type-desc {
    font-size: 1.051em;
    color: var(--js-text-muted);
    font-weight: 400;
}

.type-content .type-desc {
    margin-top: 0.5em;
    margin-bottom: 0;
}

.type-badge {
    padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    font-size: .9em;
    line-height: .9em;
    font-weight: 700;
    text-transform: uppercase;
    background: #fff;
    color: var(--js-primary-dark);
    white-space: nowrap;
}
.type-title.badge{
     padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    font-size: .9em;
    line-height: 1em;
    font-weight: 700;
    text-transform: uppercase;
    background: #fff;
    color: var(--js-primary-dark);
    white-space: nowrap;
}
.mini-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: .7em;
    margin-top: .8em;
}

.mini-kpi {
    flex: 1;
    min-width: 7.5em;
    /* 120px */
    border-radius: .75em;
    padding: .65em .8em;
    background: #f9fafb;
    border: 1px solid var(--js-border-soft);
    font-size: 1em;
    text-align: center;
}

table i {
    font-size: 1em;
}

.mini-kpi .k {
    font-size: .84em;
    font-weight: 700;
    color: var(--js-text-muted);
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mini-kpi .v {
    margin-top: .2em;
    font-size: 1.4em;
    font-weight: 700;
}

.type-actions {
    margin-top: .95em;
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
}

/* GRID LAYOUT */
.grid-2 {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
    /* ?? scaling anchor */
}

/* CARD HEAD / SELECT */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 1em;
}

.card-head h3 {
    font-size: 1.25em;
    font-weight: 700;
}

.select {
    border-radius: var(--radius-pill);
    border: .125em solid var(--js-border);
    padding: .5em .9em;
    font-weight: 700;
    font-size: 1.01em;
    color: var(--js-text-main);
    background: #fff;
    cursor: pointer;
}

.select:focus {
    border-radius: var(--radius-pill);
    border: .125em solid var(--js-border);
    outline: none;
}

/* CHARTS */
.chart-wrap {
    border-radius: var(--radius-md);
    border: .0625em solid var(--js-border-soft);
    padding: 1em;
    background: #fff;
    position: relative;
    overflow: hidden;
    font-size: 1em;
}

canvas {
    width: 100%;
    height: 16.25em;
    /* 260px */
    display: block;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: .9em;
    font-size: 1em;
    margin-top: .7em;
    color: var(--js-text-muted);
    font-weight: 600;
}

.dot {
    width: .625em;
    /* 10px */
    height: .625em;
    border-radius: 50%;
    display: inline-block;
    margin-right: .35em;
}

.dot.a {
    background: var(--js-primary-dark);
}

.dot.b {
    background: #2563eb;
}

.dot.c {
    background: var(--js-accent);
}

.chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: #111827;
    color: #f9fafb;
    font-size: .76em;
    padding: .35em .55em;
    border-radius: .5em;
    box-shadow: 0 .25em .75em rgba(0, 0, 0, .35);
    transform: translate(-50%, -110%);
    white-space: nowrap;
    z-index: 5;
    opacity: 0;
    transition: opacity .08s ease-out;
}

/* vertical legend */
.vertical-legend {
    margin-top: .7em;
    display: flex;
    flex-wrap: wrap;
    gap: .45em;
    font-size: .82em;
    color: var(--js-text-muted);
    font-weight: 600;
}

.vertical-legend span {
    display: flex;
    align-items: center;
    gap: .25em;
    padding: 0.65426em .997em;
    border-radius: 999em;
    font-size: 1.1em;
    line-height: 1em;
    background: #f9fafb;
    border: .0625em solid #e5e7eb;
}

/* QUICK ACTIONS */
.qa-list {
    display: flex;
    flex-direction: column;
    gap: .8em;
}

.qa-btn {
    width: 100%;
    border-radius: var(--radius-md);
    border: none;
    background: #fff;
    padding: .9em 1em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    cursor: pointer;
    transition: .16s;
    box-shadow: 0 .375em 1.125em rgba(15, 23, 42, .12);
}

.qa-btn:hover {
    transform: translateY(-.0625em);
    box-shadow: 0 .625em 1.625em rgba(15, 23, 42, .18);
}

.qa-left {
    display: flex;
    align-items: center;
    gap: .8em;
}

.qa-ico {
    font-size: 1.5em;
}

.qa-t {
    font-weight: 700;
    font-size: 1em;
    text-align: justify;
}

.qa-s {
    font-size: 1em;
    color: var(--js-text-muted);
    margin-top: .1em;
    font-weight: 400;
}

.qa-right {
    font-weight: 700;
    color: var(--js-primary-dark);
}

/* ACTIVITY */
.activity {
    display: flex;
    flex-direction: column;
    gap: .75em;
}

.act-item {
    border-radius: var(--radius-md);
    border: .0625em solid var(--js-border-soft);
    background: #f9fafb;
    padding: .9em 1em;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1em;
}

.act-left {
    display: flex;
    gap: .8em;
}

.act-ico {
    width: 2.5em;
    /* 40px */
    height: 2.5em;
    border-radius: .875em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e6f7f5;
    color: var(--js-primary-dark);
    font-size: 1.2em;
}

.act-title {
    font-weight: 700;
    font-size: 1.3em;
}

.act-meta {
    font-size: 1em;
    color: var(--js-text-muted);
    margin-top: .1em;
    font-weight: 400;
}

.act-time {
    font-size: 1em;
    font-weight: 600;
    color: var(--js-text-muted);
    white-space: nowrap;
}

/* TABLE */
.table-wrap {
    overflow: auto;
    border-radius: var(--radius-md);
    border: .0625em solid var(--js-border-soft);
    /* 1px */
    font-size: 1em;
    /* scaling anchor */
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 45em;
    /* 720px */
    background: #fff;
}

th,
td {
    padding: .75em .9em;
    text-align: left;
    border-bottom: .0625em solid var(--js-border-soft);
    font-size: 1.1em;
}

.card-head .btn {
    padding: .6em 2em;
}

th {
    background: #f9fafb;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--js-text-muted);
    font-weight: 700;
}

td {
    font-weight: 600;
    color: var(--js-text-main);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .26em .7em;
    border-radius: var(--radius-pill);
    border: .0625em solid var(--js-border);
    font-size: .9em;
    font-weight: 600;
    background: #fff;
    text-wrap: nowrap;
}

.status.live {
    background: #e6f7f5;
    border-color: rgba(0, 131, 116, .35);
    color: var(--js-primary-dark);
}

.status.pending {
    background: #fff3e6;
    border-color: rgba(246, 185, 37, .45);
    color: #b45309;
}

.status.closed {
    background: #f3f4f6;
    border-color: var(--js-border-soft);
    color: #6b7280;
}

/* MODE VISIBILITY */
body[data-mode="seller"] [data-mode-section="buyer"] {
    display: none !important;
}

body[data-mode="buyer"] [data-mode-section="seller"] {
    display: none !important;
}


/* RESPONSIVE */
@media (max-width:980px) {
    .grid-2 {
        grid-template-columns: 1fr
    }

    canvas {
        height: 240px
    }

    .top-right {
        align-items: flex-start;
        margin-left: auto;
    }
    .top-left-side{
        max-width: 50%;
    }

    .stats-grid,
    .types-grid {
        grid-template-columns: repeat(auto-fit, minmax(35.25em, 1fr));
    }
    .mode-toggle{
        margin-left: auto;
    }

}

@media (max-width:499px) {
.type-card .left{
   display: flex;
   align-items: center;
   flex-direction: column;
   gap: 1em;
}
.type-title-badge {
    transform: translate(-5%,-100%);
    left: inherit;
    right: 0;
}
}
@media (max-width:767px) {
    .header-inner {
    justify-content: center;
}
.header-actions{
    display: none;
}
    .top-row {
        gap: .2em;
    }

    .user-name {
        font-size: 1.2em;
    }

    .logo {
        font-size: 2.5em;
    }

    .desktop-dropdown {
        display: none;
    }

    .mobile-dropdown {
        display: block;
    }

    .user-info.nav-item {
        color: #fff;
    }

    .bottom-nav .nav-item.user-info:hover,
    .bottom-nav .nav-item.user-info.active {
        color: #fff;
    }

    .logo-tag {
        font-size: 1em;
        padding: 0.23em 0.65em;
    }

    .nav-tabs-inner {
        display: none
    }

    .mobile-menu-btn {
        display: inline-flex;
        margin: .6rem 1.2em 0;
        margin-bottom: .51em;
    }

    .page {
        padding: 1.25rem 1rem 1.8rem;
        padding-top: 1em;
    }

    .page-title {
        font-size: 2em
    }

    .actions,
    .action {
        width: 100%;
        
    }
    .top-row .actions,
    .top-row .action{
display: flex;
        flex-direction: column;
        justify-content: end;
    }
    .btn {
        width: 100%
    }
    .top-right .btn{
        /* width: max-content; */
        margin-bottom: 0.5em;
    }
    .stats-grid,
    .types-grid {
        grid-template-columns: 1fr
    }

    .welcome-inner {
        align-items: flex-start
    }

    .top-right {
        width: 100%
    }

    .card-head .btn {
        padding: .6em 2em;
        width: max-content;
    }
    .mobile-menu-item i{
        color: inherit;
    }
/* .top-right .actions {
    margin-left: auto;
    align-items: flex-end;
    gap: 1em;
    justify-content: end;
} */
    /* .top-right .actions button{
        width: max-content;
    } */
}

@media (min-width: 768px) {
    .hdr-pill {
        display: flex;
    }

    .bottom-nav {
        display: none;
    }
}
@media (min-width: 500px) {
.type-card {
    padding: 1.3em 1em;
    font-size: 0.8em;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
}
.type-card .left{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1em;
}
.types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
}
.type-head {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: .85em;
    align-items: center;
    width: 25%;
}
.type-card .content{
    width: 100%;
}
.type-card .type-content{
    width: 34%;
}
.mini-kpis {
    gap: .7em;
    width: 13%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.type-actions {
    margin-top: .95em;
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    width: 20%;
}
.type-title-badge {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: .15em;
    padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    color: var(--js-primary-dark);
    background-color: #f0f7ff;
    text-wrap: nowrap;
    width: max-content;
    position: relative;
    right: initial;
    left: initial;
    transform: initial;
}
.type-main {
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
    flex-direction: column-reverse;
}
.mini-kpi .v {
    margin-top: .1em;
    font-size: 2em;
    font-weight: 900;
}
.mini-kpi .k {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--js-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.011em;
    word-wrap: normal;
}
.mini-kpi {
    flex: 1;
    min-width: 7.5em;
    padding: 1em 0.5em;
    font-size: 1em;
}
.type-desc {
    font-size: 1.351em;
    color: var(--js-text-muted);
    font-weight: 400;
}
.type-main .right{
    width: 100%;
}
.type-title-badge {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: .15em;
    padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    color: var(--js-primary-dark);
    background-color: #f0f7ff;
    text-wrap: nowrap;
    width: max-content;
    position: relative;
    right: initial;
    left: initial;
    transform: initial;
    min-width: 75%;
    text-align: center;
    margin: auto;
}
}
@media (min-width: 991px) {
.type-card {
    padding: 1.3em 2em;
    font-size: 1em;
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    gap: 1em;
    justify-content: space-between;
}
.types-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1em;
    margin-bottom: 1.6em;
    font-size: 1em;
}
.type-head {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: .85em;
    align-items: center;
    width: 19%;
}
.type-card .content{
    width: 100%;
}
.type-card .type-content{
    width: 34%;
}
.mini-kpis {
    gap: .7em;
    width: 21%;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.type-actions {
    margin-top: .95em;
    display: flex;
    flex-wrap: wrap;
    gap: .6em;
    width: 16%;
}
.type-title-badge {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: .15em;
    padding: 0.5426em .97em;
    border-radius: 999em;
    border: 1px solid var(--js-border);
    color: var(--js-primary-dark);
    background-color: #f0f7ff;
    text-wrap: nowrap;
    width: max-content;
    position: relative;
    right: initial;
    left: initial;
    transform: initial;
}
.type-main {
    display: flex;
    align-items: center;
    gap: .7em;
    width: 100%;
    flex-direction: column-reverse;
}
.mini-kpi .v {
    margin-top: .1em;
    font-size: 2em;
    font-weight: 900;
}
.mini-kpi .k {
    font-size: 0.9em;
    font-weight: 700;
    color: var(--js-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.011em;
    word-wrap: normal;
}
.mini-kpi {
    flex: 1;
    min-width: 7.5em;
    padding: 1em 0.5em;
    font-size: 1em;
}
.type-desc {
    font-size: 1.351em;
    color: var(--js-text-muted);
    font-weight: 400;
}
.type-head {
    width: 20%;
}
}