/* ServiceGrid brand layer: clear service operations, dispatch, finance, and trust workflows. */

:root {
    --servora-navy: var(--app-primary, #123047);
    --servora-teal: var(--app-secondary, #2f6f73);
    --servora-amber: var(--app-accent, #b56a2a);
    --servora-ink: var(--app-text, #172033);
    --servora-muted: var(--app-muted, #667085);
    --servora-line: var(--app-line, #d9e1ea);
    --servora-bg: var(--app-bg, #f5f7fa);
    --servora-surface: var(--app-surface, #ffffff);
    --servora-shadow: 0 18px 42px rgba(18, 48, 71, 0.08);
    --servora-soft-shadow: 0 12px 28px rgba(18, 48, 71, 0.055);
}

html[data-bs-theme="light"] body.admin-layout,
body.admin-layout:not(.dark-version) {
    background:
        linear-gradient(90deg, rgba(18, 48, 71, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(18, 48, 71, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, #f8fafc 0%, var(--servora-bg) 56%, #eef2f6 100%);
    background-size: 40px 40px, 40px 40px, auto;
    color: var(--servora-ink);
}

.app-page-loader__panel,
.admin-layout .card,
.app-navbar,
.app-sidenav,
.marketplace-table-card,
.marketplace-detail-card,
.marketplace-form-card,
.marketplace-record-hero,
.marketplace-kpi-grid .mkpi,
.marketplace-side-rail .mcc {
    border-color: color-mix(in srgb, var(--servora-line) 82%, var(--servora-navy) 18%) !important;
}

.app-navbar {
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.045), rgba(var(--app-accent-rgb), 0.035)),
        rgba(255, 255, 255, 0.92);
    box-shadow: var(--servora-soft-shadow);
    backdrop-filter: blur(18px);
}

.app-navbar__context {
    color: color-mix(in srgb, var(--servora-navy) 72%, var(--servora-muted) 28%);
    font-weight: 900;
    letter-spacing: 0;
}

.app-navbar__icon,
.app-navbar__user,
.theme-toggle {
    border-radius: 8px;
    border-color: color-mix(in srgb, var(--servora-line) 76%, var(--servora-navy) 24%);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(18, 48, 71, 0.06);
}

.app-sidenav {
    --app-sidenav-section: color-mix(in srgb, var(--servora-muted) 72%, var(--servora-navy) 28%);
    --app-sidenav-separator: color-mix(in srgb, var(--servora-line) 86%, var(--servora-navy) 14%);
    --app-sidenav-hover: color-mix(in srgb, var(--servora-navy) 5%, #ffffff);
    --app-sidenav-nested-hover: color-mix(in srgb, var(--servora-teal) 6%, #ffffff);
    --app-sidenav-icon-bg: color-mix(in srgb, var(--servora-navy) 6%, #ffffff);
    --app-sidenav-icon-border: color-mix(in srgb, var(--servora-line) 70%, var(--servora-navy) 30%);
    --app-sidenav-footer-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.72), #ffffff);
    background:
        linear-gradient(180deg, #ffffff 0%, #f9fcff 56%, #f3f8fa 100%) !important;
    box-shadow: 18px 0 48px rgba(18, 48, 71, 0.07);
}

.app-sidenav .sidebar-logo {
    border-radius: 8px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--servora-teal) 12%, #ffffff), #ffffff 54%, color-mix(in srgb, var(--servora-amber) 12%, #ffffff));
    border-color: color-mix(in srgb, var(--servora-line) 72%, var(--servora-teal) 28%);
    box-shadow: 0 12px 30px rgba(18, 48, 71, 0.10);
}

.app-sidenav .sidebar-brand-name {
    color: var(--servora-ink) !important;
    font-weight: 950;
}

.app-sidenav .sidebar-brand-tagline {
    color: var(--servora-muted) !important;
    font-weight: 750;
}

.app-sidenav__section {
    letter-spacing: 0.14em;
}

.app-sidenav .navbar-nav .nav-link {
    border: 1px solid transparent;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.app-sidenav .navbar-nav .nav-link:hover {
    border-color: color-mix(in srgb, var(--servora-line) 72%, var(--servora-navy) 28%);
    transform: translateX(2px);
}

.app-sidenav .navbar-nav .nav-link.active,
.sidenav.app-sidenav.theme-sidebar-light .navbar-nav .nav-link.active,
.sidenav.app-sidenav.theme-sidebar-transparent .navbar-nav .nav-link.active {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--servora-navy) 0%, color-mix(in srgb, var(--servora-navy) 64%, var(--servora-teal) 36%) 100%) !important;
    border-color: color-mix(in srgb, var(--servora-teal) 54%, var(--servora-navy) 46%);
    box-shadow: 0 16px 34px rgba(var(--app-primary-rgb), 0.22);
}

.app-sidenav .navbar-nav .nav-link.active i,
.app-sidenav .navbar-nav .nav-link.active .nav-link-text {
    color: #ffffff !important;
}

.app-sidenav .navbar-nav .nav-link.active > .app-sidenav__main > i:first-child {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.2);
}

.app-sidenav__avatar {
    color: #ffffff;
    background: linear-gradient(135deg, var(--servora-navy), var(--servora-teal));
}

.app-sidenav__logout {
    border-color: color-mix(in srgb, var(--servora-line) 70%, var(--servora-navy) 30%) !important;
    color: var(--servora-ink) !important;
    background: #ffffff !important;
}

.app-sidenav__logout:hover {
    color: #ffffff !important;
    background: var(--servora-navy) !important;
}

.mphb {
    color: var(--servora-ink);
}

.mphb--hero,
.marketplace-page-header {
    border-radius: 8px !important;
    border-top: 4px solid var(--servora-navy) !important;
    background:
        linear-gradient(90deg, rgba(var(--app-primary-rgb), 0.08) 0%, transparent 36%),
        linear-gradient(180deg, #ffffff 0%, #f9fcff 100%) !important;
    box-shadow: var(--servora-shadow) !important;
}

.mphb__orb,
.mphb__ring,
.mphb__ribbon,
.mphb__dots,
.mphb__panel {
    display: none !important;
}

.mphb__grid {
    opacity: 0.34;
    background-image:
        linear-gradient(color-mix(in srgb, var(--servora-navy) 18%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--servora-teal) 16%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
}

.mphb__badge,
.marketplace-eyebrow {
    border-color: color-mix(in srgb, var(--servora-line) 68%, var(--servora-teal) 32%) !important;
    background: color-mix(in srgb, var(--servora-teal) 8%, #ffffff) !important;
    color: var(--servora-navy) !important;
}

.mphb__title,
.marketplace-page-header .mphb__title,
.marketplace-card-head h2,
.marketplace-detail-card h2,
.marketplace-record-hero__main h2 {
    color: var(--servora-ink) !important;
    letter-spacing: 0 !important;
}

.mphb__subtitle,
.marketplace-page-header .mphb__subtitle,
.marketplace-card-head p,
.marketplace-record-hero__main p {
    color: var(--servora-muted) !important;
}

.mui-tabs__nav .mui-tabs__btn.active,
.marketplace-module-tabs .mui-tabs__btn.active,
.marketplace-queue-tabs__nav .mui-tabs__btn.active {
    background:
        linear-gradient(135deg, var(--servora-navy), color-mix(in srgb, var(--servora-navy) 62%, var(--servora-teal) 38%)) !important;
    border-color: color-mix(in srgb, var(--servora-teal) 42%, var(--servora-navy) 58%) !important;
    box-shadow: 0 16px 34px rgba(var(--app-primary-rgb), 0.2) !important;
}

.marketplace-kpi-grid .mkpi,
.marketplace-table-card,
.marketplace-detail-card,
.marketplace-component-form,
.marketplace-guidance-card,
.marketplace-inline-table,
.tbl-summary-card,
.mcc {
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, #ffffff 100%) !important;
    box-shadow: var(--servora-soft-shadow) !important;
}

.marketplace-kpi-grid .mkpi {
    border-top: 3px solid color-mix(in srgb, var(--servora-navy) 62%, var(--servora-teal) 38%) !important;
}

.marketplace-count,
.marketplace-detail-item,
.marketplace-record-line,
.marketplace-record-metrics > div,
.marketplace-compact-row {
    background: color-mix(in srgb, var(--servora-bg) 74%, #ffffff) !important;
    border-color: var(--servora-line) !important;
}

.tbl-table thead th {
    color: color-mix(in srgb, var(--servora-navy) 64%, var(--servora-muted) 36%) !important;
    background: color-mix(in srgb, var(--servora-bg) 82%, #ffffff) !important;
}

.tbl-status--success {
    color: #047857 !important;
    background: #e8f7ef !important;
}

.tbl-status--warning {
    color: #b45309 !important;
    background: #fff4de !important;
}

.tbl-status--danger {
    color: #dc2626 !important;
    background: #feecec !important;
}

html[data-bs-theme="dark"] .tbl-status--primary,
body.dark-version .tbl-status--primary {
    color: #9bd5df !important;
    background: rgba(47, 111, 115, 0.18) !important;
    border-color: rgba(47, 111, 115, 0.42) !important;
}

html[data-bs-theme="dark"] .tbl-status--secondary,
body.dark-version .tbl-status--secondary {
    color: #d7e0ee !important;
    background: rgba(148, 163, 184, 0.14) !important;
    border-color: rgba(148, 163, 184, 0.32) !important;
}

html[data-bs-theme="dark"] .tbl-status--success,
body.dark-version .tbl-status--success {
    color: #63e6a8 !important;
    background: rgba(34, 197, 94, 0.16) !important;
    border-color: rgba(34, 197, 94, 0.36) !important;
}

html[data-bs-theme="dark"] .tbl-status--warning,
body.dark-version .tbl-status--warning {
    color: #ffd38a !important;
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.36) !important;
}

html[data-bs-theme="dark"] .tbl-status--danger,
body.dark-version .tbl-status--danger {
    color: #ff9a9a !important;
    background: rgba(239, 68, 68, 0.17) !important;
    border-color: rgba(239, 68, 68, 0.42) !important;
}

.mui-btn--primary,
.btn.bg-gradient-dark,
.bg-gradient-dark {
    background:
        linear-gradient(135deg, var(--servora-navy), color-mix(in srgb, var(--servora-navy) 66%, var(--servora-teal) 34%)) !important;
}

.auth-card-header {
    background:
        linear-gradient(135deg, var(--servora-navy), color-mix(in srgb, var(--servora-navy) 58%, var(--servora-teal) 42%)) !important;
}

[data-bs-theme="dark"] body.admin-layout,
body.dark-version.admin-layout {
    background:
        linear-gradient(90deg, rgba(45, 212, 191, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, rgba(181, 106, 42, 0.025) 1px, transparent 1px),
        linear-gradient(180deg, #071521 0%, #0c1b2a 58%, #08131f 100%);
    background-size: 36px 36px, 36px 36px, auto;
    color: #e8eef7;
}

[data-bs-theme="dark"] .app-navbar,
[data-bs-theme="dark"] .app-sidenav,
[data-bs-theme="dark"] .admin-layout .card,
[data-bs-theme="dark"] .marketplace-table-card,
[data-bs-theme="dark"] .marketplace-detail-card,
[data-bs-theme="dark"] .marketplace-component-form,
[data-bs-theme="dark"] .marketplace-guidance-card,
[data-bs-theme="dark"] .marketplace-inline-table,
[data-bs-theme="dark"] .tbl-summary-card,
[data-bs-theme="dark"] .marketplace-kpi-grid .mkpi,
[data-bs-theme="dark"] .mcc,
body.dark-version .app-sidenav,
body.dark-version .admin-layout .card,
body.dark-version .marketplace-table-card,
body.dark-version .marketplace-detail-card,
body.dark-version .marketplace-component-form,
body.dark-version .marketplace-guidance-card,
body.dark-version .marketplace-inline-table,
body.dark-version .tbl-summary-card,
body.dark-version .marketplace-kpi-grid .mkpi,
body.dark-version .mcc {
    background: linear-gradient(180deg, #102033 0%, #0c1a2a 100%) !important;
    border-color: #22384d !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .app-sidenav .sidebar-brand-name,
[data-bs-theme="dark"] .mphb__title,
[data-bs-theme="dark"] .marketplace-card-head h2,
[data-bs-theme="dark"] .marketplace-detail-card h2 {
    color: #f8fbff !important;
}

[data-bs-theme="dark"] .app-sidenav .sidebar-brand-tagline,
[data-bs-theme="dark"] .mphb__subtitle,
[data-bs-theme="dark"] .marketplace-card-head p {
    color: #9fb0c6 !important;
}

html[data-bs-theme="dark"] body.admin-layout,
body.dark-version.admin-layout {
    background:
        linear-gradient(90deg, rgba(47, 111, 115, 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgba(181, 106, 42, 0.035) 1px, transparent 1px),
        linear-gradient(180deg, #081420 0%, #0b1826 54%, #07121d 100%) !important;
    background-size: 42px 42px, 42px 42px, auto !important;
    color: #edf4fb !important;
}

html[data-bs-theme="dark"] .app-navbar,
body.dark-version .app-navbar {
    background:
        linear-gradient(90deg, rgba(47, 111, 115, 0.16), rgba(18, 48, 71, 0.82)),
        #0d1a29 !important;
    border-color: #26384d !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22) !important;
}

html[data-bs-theme="dark"] .app-navbar__context,
body.dark-version .app-navbar__context {
    color: #a9b9cd !important;
}

html[data-bs-theme="dark"] .app-navbar__icon,
html[data-bs-theme="dark"] .app-navbar__user,
html[data-bs-theme="dark"] .theme-toggle,
body.dark-version .app-navbar__icon,
body.dark-version .app-navbar__user,
body.dark-version .theme-toggle {
    background: #101d2d !important;
    border-color: #2b4057 !important;
    color: #f4f8fd !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .app-sidenav,
body.dark-version .app-sidenav {
    --app-sidenav-section: #8799af;
    --app-sidenav-separator: #27394d;
    --app-sidenav-hover: #132235;
    --app-sidenav-nested-hover: #111f30;
    --app-sidenav-icon-bg: #101d2d;
    --app-sidenav-icon-border: #2a3d53;
    --app-sidenav-footer-bg: linear-gradient(180deg, #101d2d 0%, #0d1828 100%);
    background: linear-gradient(180deg, #0d1a29 0%, #0a1725 100%) !important;
    border-color: #24364b !important;
    box-shadow: 18px 0 48px rgba(0, 0, 0, 0.24) !important;
}

html[data-bs-theme="dark"] .app-sidenav .sidebar-logo,
body.dark-version .app-sidenav .sidebar-logo {
    background: linear-gradient(135deg, #f8fbff 0%, #dce8f2 100%) !important;
    border-color: #2f6f73 !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .app-sidenav .navbar-nav .nav-link,
body.dark-version .app-sidenav .navbar-nav .nav-link {
    color: #d9e4f2 !important;
}

html[data-bs-theme="dark"] .app-sidenav .navbar-nav .nav-link:not(.active):hover,
body.dark-version .app-sidenav .navbar-nav .nav-link:not(.active):hover {
    color: #ffffff !important;
    background: #132235 !important;
    border-color: #2a4058 !important;
}

html[data-bs-theme="dark"] .app-sidenav__user,
body.dark-version .app-sidenav__user {
    background: linear-gradient(180deg, #142236 0%, #101d2d 100%) !important;
    border-color: #2a3d53 !important;
}

html[data-bs-theme="dark"] .app-sidenav__user-name,
body.dark-version .app-sidenav__user-name {
    color: #f4f8fd !important;
}

html[data-bs-theme="dark"] .app-sidenav__user-email,
body.dark-version .app-sidenav__user-email {
    color: #9fb0c6 !important;
}

html[data-bs-theme="dark"] .app-sidenav__logout,
body.dark-version .app-sidenav__logout,
html[data-bs-theme="dark"] .sidenav.app-sidenav .app-sidenav__logout,
body.dark-version .sidenav.app-sidenav .app-sidenav__logout {
    background: #101d2d !important;
    border-color: #2a4058 !important;
    color: #f4f8fd !important;
    box-shadow: none !important;
}

html[data-bs-theme="dark"] .app-sidenav__logout i,
html[data-bs-theme="dark"] .app-sidenav__logout span,
body.dark-version .app-sidenav__logout i,
body.dark-version .app-sidenav__logout span,
html[data-bs-theme="dark"] .sidenav.app-sidenav .app-sidenav__logout i,
html[data-bs-theme="dark"] .sidenav.app-sidenav .app-sidenav__logout span,
body.dark-version .sidenav.app-sidenav .app-sidenav__logout i,
body.dark-version .sidenav.app-sidenav .app-sidenav__logout span {
    color: inherit !important;
}

html[data-bs-theme="dark"] .app-sidenav__logout:hover,
body.dark-version .app-sidenav__logout:hover,
html[data-bs-theme="dark"] .sidenav.app-sidenav .app-sidenav__logout:hover,
body.dark-version .sidenav.app-sidenav .app-sidenav__logout:hover {
    background: linear-gradient(135deg, #2f6f73, #123047) !important;
    border-color: #2f6f73 !important;
    color: #ffffff !important;
}