/* RestroAI Hospitality UI Layer */
:root,
[data-bs-theme="light"] {
    --ra-font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ra-bg: #f6f4f0;
    --ra-bg-soft: #fbfaf7;
    --ra-surface: #fffdfb;
    --ra-surface-raised: #ffffff;
    --ra-border: #e6dfd8;
    --ra-border-strong: #d3c7bd;
    --ra-text: #20252b;
    --ra-heading: #15191f;
    --ra-muted: #68717c;
    --ra-muted-2: #8d96a0;
    --ra-accent: #cf4f3f;
    --ra-accent-rgb: 207, 79, 63;
    --ra-success: #287a5b;
    --ra-warning: #b77a21;
    --ra-danger: #be3d35;
    --ra-info: #2f6f9f;
    --ra-ai: #7551b8;
    --ra-radius-sm: 6px;
    --ra-radius: 8px;
    --ra-radius-lg: 10px;
    --ra-shadow: 0 14px 32px rgba(32, 37, 43, 0.08);
    --ra-shadow-strong: 0 22px 44px rgba(32, 37, 43, 0.12);
    --app-soft-card-radius: var(--ra-radius);
    --app-soft-card-bg: var(--ra-surface-raised);
    --app-soft-card-border: var(--ra-border);
    --app-soft-card-divider: rgba(32, 37, 43, 0.08);
    --app-soft-card-shadow: var(--ra-shadow);
    --app-soft-card-shadow-hover: var(--ra-shadow-strong);
    --bs-primary: var(--ra-accent);
    --bs-info: var(--ra-info);
    --bs-success: var(--ra-success);
    --bs-warning: var(--ra-warning);
    --bs-danger: var(--ra-danger);
    --bs-border-radius: var(--ra-radius);
}

[data-bs-theme="dark"] {
    --ra-bg: #12151a;
    --ra-bg-soft: #171b22;
    --ra-surface: #1b2028;
    --ra-surface-raised: #20262f;
    --ra-border: #303842;
    --ra-border-strong: #44505d;
    --ra-text: #eff3f7;
    --ra-heading: #ffffff;
    --ra-muted: #a7b0bc;
    --ra-muted-2: #7f8a96;
    --ra-accent: #f06d5f;
    --ra-accent-rgb: 240, 109, 95;
    --ra-success: #55b88b;
    --ra-warning: #d6a348;
    --ra-danger: #ee675e;
    --ra-info: #69a8d1;
    --ra-ai: #a184e5;
    --ra-shadow: 0 14px 32px rgba(0, 0, 0, 0.28);
    --ra-shadow-strong: 0 24px 50px rgba(0, 0, 0, 0.36);
}

html {
    font-family: var(--ra-font);
}

body {
    font-family: var(--ra-font);
    color: var(--ra-text);
    background:
        linear-gradient(90deg, rgba(var(--ra-accent-rgb), 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(180deg, rgba(47, 111, 159, 0.045), transparent 260px),
        var(--ra-bg);
    letter-spacing: 0;
}

body.admin-layout .main-content,
.tenant-workspace {
    background:
        repeating-linear-gradient(90deg, transparent 0 20px, rgba(32, 37, 43, 0.018) 20px 21px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0));
}

.container-fluid {
    max-width: 1620px;
}

a {
    color: var(--ra-accent);
}

a:hover {
    color: color-mix(in srgb, var(--ra-accent) 82%, var(--ra-heading));
}

/* Admin shell */
.app-sidenav,
.sidenav {
    border-right: 1px solid var(--ra-border) !important;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 251, 0.92)),
        var(--ra-surface) !important;
    box-shadow: 12px 0 34px rgba(32, 37, 43, 0.06);
}

.sidenav .navbar-brand {
    border-bottom: 1px solid var(--ra-border);
}

.sidenav .nav-link {
    border-radius: var(--ra-radius) !important;
    color: var(--ra-muted) !important;
    font-weight: 800;
    margin: 0.08rem 0.65rem;
}

.sidenav .nav-link.active,
.sidenav .nav-link.is-active,
.sidenav .nav-link.bg-gradient-primary {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 70%, var(--ra-heading))) !important;
    box-shadow: 0 12px 24px rgba(var(--ra-accent-rgb), 0.24) !important;
}

.app-navbar,
.navbar-main {
    border: 1px solid rgba(230, 223, 216, 0.8);
    border-radius: var(--ra-radius) !important;
    background: rgba(255, 253, 251, 0.88) !important;
    box-shadow: 0 16px 30px rgba(32, 37, 43, 0.07);
    backdrop-filter: blur(14px);
}

/* Tenant shell */
.tenant-workspace {
    min-height: 100vh;
}

.tenant-workspace__inner {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tenant-topbar {
    position: sticky;
    top: 0.75rem;
    z-index: 1010;
    display: grid;
    grid-template-columns: minmax(230px, 0.75fr) minmax(260px, 1.25fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 0.8rem;
    border: 1px solid rgba(230, 223, 216, 0.9);
    border-radius: var(--ra-radius);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 253, 251, 0.9)),
        var(--ra-surface-raised);
    box-shadow: var(--ra-shadow);
    backdrop-filter: blur(16px);
}

.tenant-topbar::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, var(--ra-accent), var(--ra-success), var(--ra-info), var(--ra-ai));
    opacity: 0.78;
    border-radius: 999px;
    pointer-events: none;
}

.tenant-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    color: var(--ra-heading);
    text-decoration: none;
}

.tenant-brand:hover {
    color: var(--ra-heading);
}

.tenant-brand__mark {
    width: 46px;
    height: 46px;
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    color: #fff;
    background:
        linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 62%, var(--ra-heading))),
        var(--ra-accent);
    box-shadow: 0 12px 24px rgba(var(--ra-accent-rgb), 0.24);
}

.tenant-brand__copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tenant-brand__copy strong {
    font-size: 1rem;
    line-height: 1.15;
    color: var(--ra-heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tenant-brand__copy small {
    margin-top: 0.18rem;
    color: var(--ra-muted);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tenant-topbar__center,
.tenant-topbar__actions {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-width: 0;
}

.tenant-topbar__actions {
    justify-content: flex-end;
}

.tenant-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 220px;
    flex: 1 1 320px;
    height: 42px;
    padding: 0 0.8rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-bg-soft);
    color: var(--ra-muted);
}

.tenant-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ra-text);
    font-weight: 750;
}

.tenant-search input::placeholder {
    color: var(--ra-muted-2);
}

.tenant-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 34px;
    padding: 0.35rem 0.62rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-surface);
    color: var(--ra-muted);
    font-size: 0.74rem;
    font-weight: 850;
    white-space: nowrap;
}

.tenant-chip--success {
    color: var(--ra-success);
    border-color: color-mix(in srgb, var(--ra-success) 22%, var(--ra-border));
    background: color-mix(in srgb, var(--ra-success) 8%, var(--ra-surface));
}

.tenant-chip--success > span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--ra-success) 14%, transparent);
}

.tenant-icon-action {
    width: 42px;
    height: 42px;
    border-radius: var(--ra-radius);
    border: 1px solid var(--ra-border);
    background: var(--ra-surface);
    color: var(--ra-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.tenant-icon-action:hover,
.tenant-icon-action.is-active {
    color: var(--ra-accent);
    border-color: color-mix(in srgb, var(--ra-accent) 32%, var(--ra-border));
    box-shadow: 0 0 0 4px rgba(var(--ra-accent-rgb), 0.09);
    transform: translateY(-1px);
}

.tenant-icon-action--accent {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ra-ai), color-mix(in srgb, var(--ra-ai) 68%, var(--ra-heading)));
}

.tenant-icon-action--accent:hover {
    color: #fff;
}

.tenant-nav {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.75rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background:
        linear-gradient(180deg, rgba(255, 253, 251, 0.95), rgba(255, 255, 255, 0.82)),
        var(--ra-surface);
    box-shadow: 0 10px 28px rgba(32, 37, 43, 0.06);
    scrollbar-width: thin;
}

.tenant-nav__group {
    flex: 0 0 auto;
    min-width: 190px;
    padding: 0.5rem;
    border-radius: var(--ra-radius);
    border: 1px solid color-mix(in srgb, var(--ra-border) 72%, transparent);
    background: rgba(255, 255, 255, 0.54);
}

.tenant-nav__group.is-hidden {
    display: none;
}

.tenant-nav__group-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.42rem;
    color: var(--ra-muted);
    font-size: 0.67rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tenant-nav__group-title::before {
    content: "";
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    opacity: 0.48;
}

.tenant-nav__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.tenant-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 38px;
    padding: 0.5rem 0.64rem;
    border-radius: var(--ra-radius);
    color: var(--ra-muted);
    text-decoration: none;
    font-size: 0.79rem;
    font-weight: 850;
    border: 1px solid transparent;
    background: transparent;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.tenant-nav__link:hover {
    color: var(--ra-heading);
    border-color: var(--ra-border);
    background: var(--ra-surface-raised);
    transform: translateY(-1px);
}

.tenant-nav__link.is-active {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 68%, var(--ra-heading)));
    box-shadow: 0 10px 20px rgba(var(--ra-accent-rgb), 0.24);
}

.tenant-nav__link.is-hidden {
    display: none;
}

.tenant-nav.is-compact .tenant-nav__group {
    min-width: auto;
}

.tenant-nav.is-compact .tenant-nav__group-title {
    justify-content: center;
    font-size: 0;
}

.tenant-nav.is-compact .tenant-nav__group-title::before {
    width: 24px;
}

.tenant-nav.is-compact .tenant-nav__link span {
    display: none;
}

.tenant-content-shell {
    min-width: 0;
}

/* Shared page header */
.mphb {
    border-radius: var(--ra-radius) !important;
    border-color: var(--ra-border) !important;
    background:
        linear-gradient(90deg, rgba(32, 37, 43, 0.04) 1px, transparent 1px) 0 0 / 26px 26px,
        linear-gradient(180deg, var(--ra-surface-raised), var(--ra-bg-soft)) !important;
    box-shadow: var(--ra-shadow) !important;
}

.mphb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(90deg, transparent 0 18px, rgba(var(--ra-accent-rgb), 0.08) 18px 19px),
        linear-gradient(90deg, rgba(var(--ra-accent-rgb), 0.08), transparent 32%);
    clip-path: polygon(0 0, 42% 0, 28% 100%, 0 100%);
    opacity: 0.56;
    pointer-events: none;
}

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

.mphb__grid {
    opacity: 0.34 !important;
    background-image:
        linear-gradient(rgba(32, 37, 43, 0.09) 1px, transparent 1px),
        linear-gradient(90deg, rgba(32, 37, 43, 0.09) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
}

.mphb__eyebrow {
    border-radius: var(--ra-radius) !important;
    color: var(--ra-accent) !important;
    background: rgba(var(--ra-accent-rgb), 0.08) !important;
    border: 1px solid rgba(var(--ra-accent-rgb), 0.16);
}

.mphb__title {
    color: var(--ra-heading) !important;
    letter-spacing: 0 !important;
}

.mphb__subtitle {
    color: var(--ra-muted) !important;
}

.mphb__panel,
.mphb__ribbon {
    border-radius: var(--ra-radius) !important;
    border-color: var(--ra-border) !important;
    background: rgba(255, 253, 251, 0.74) !important;
}

/* Cards, KPIs, charts, tables */
.card,
.mkpi,
.mcc,
.tbl-panel,
.gd-card,
.demo-card,
.setup-card,
.pos-card,
.kds-card,
.report-card,
.inventory-card,
.customer-card {
    border-radius: var(--ra-radius) !important;
    border-color: var(--ra-border) !important;
    background-color: var(--ra-surface-raised) !important;
    box-shadow: var(--ra-shadow) !important;
}

.mkpi {
    background:
        linear-gradient(90deg, rgba(var(--ra-accent-rgb), 0.075), transparent 42%),
        var(--ra-surface-raised) !important;
}

.mkpi::after {
    display: none !important;
}

.mkpi::before {
    height: 3px !important;
    background: linear-gradient(90deg, var(--ra-accent), var(--ra-success), var(--ra-info)) !important;
}

.mkpi__title,
.tbl-table thead th {
    color: var(--ra-muted) !important;
    letter-spacing: 0.055em !important;
}

.mkpi__value,
.tbl-table__title,
.tbl-cell-strong {
    color: var(--ra-heading) !important;
    letter-spacing: 0 !important;
}

.mkpi__subtitle,
.tbl-table__sub,
.tbl-cell-muted {
    color: var(--ra-muted) !important;
}

.mkpi__icon,
.tbl-identity__avatar {
    border-radius: var(--ra-radius) !important;
    color: var(--ra-accent) !important;
    border-color: rgba(var(--ra-accent-rgb), 0.18) !important;
    background: rgba(var(--ra-accent-rgb), 0.09) !important;
}

.mcc__head,
.tbl-panel__head,
.tbl-table thead th {
    background:
        linear-gradient(180deg, rgba(32, 37, 43, 0.035), transparent),
        var(--ra-bg-soft) !important;
}

.tbl-panel:hover,
.mkpi:hover,
.card:hover {
    border-color: color-mix(in srgb, var(--ra-accent) 24%, var(--ra-border)) !important;
}

.tbl-table tbody td {
    color: var(--ra-text) !important;
    background: var(--ra-surface-raised) !important;
}

.tbl-table tbody tr:hover td {
    background: color-mix(in srgb, var(--ra-accent) 3%, var(--ra-surface-raised)) !important;
}

.tbl-status,
.status-pill,
.ra-status-pill {
    border-radius: var(--ra-radius) !important;
    font-weight: 850;
}

.tbl-status--primary,
.ra-status-pill--primary {
    color: var(--ra-accent) !important;
    background: rgba(var(--ra-accent-rgb), 0.09) !important;
    border-color: rgba(var(--ra-accent-rgb), 0.18) !important;
}

.tbl-status--success,
.ra-status-pill--success {
    color: var(--ra-success) !important;
    background: color-mix(in srgb, var(--ra-success) 9%, var(--ra-surface)) !important;
    border-color: color-mix(in srgb, var(--ra-success) 18%, var(--ra-border)) !important;
}

.tbl-status--warning,
.ra-status-pill--warning {
    color: var(--ra-warning) !important;
    background: color-mix(in srgb, var(--ra-warning) 10%, var(--ra-surface)) !important;
    border-color: color-mix(in srgb, var(--ra-warning) 18%, var(--ra-border)) !important;
}

.tbl-status--danger,
.ra-status-pill--danger {
    color: var(--ra-danger) !important;
    background: color-mix(in srgb, var(--ra-danger) 9%, var(--ra-surface)) !important;
    border-color: color-mix(in srgb, var(--ra-danger) 18%, var(--ra-border)) !important;
}

.tbl-action-btn,
.mui-btn,
.btn {
    border-radius: var(--ra-radius) !important;
    letter-spacing: 0 !important;
}

.mui-btn--primary:not(.mui-btn--outline),
.btn-primary,
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 72%, var(--ra-heading))) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 22px rgba(var(--ra-accent-rgb), 0.22) !important;
}

.form-control,
.form-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: var(--ra-radius) !important;
    border-color: var(--ra-border) !important;
    color: var(--ra-text);
    background-color: var(--ra-surface) !important;
}

.form-control:focus,
.form-select:focus,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus {
    border-color: color-mix(in srgb, var(--ra-accent) 42%, var(--ra-border)) !important;
    box-shadow: 0 0 0 4px rgba(var(--ra-accent-rgb), 0.12) !important;
}

/* New reusable component classes */
.ra-action-toolbar,
.ra-metric-strip,
.ra-module-card,
.ra-empty-state {
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-surface-raised);
    box-shadow: var(--ra-shadow);
}

.ra-action-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem;
}

.ra-action-toolbar__title {
    color: var(--ra-heading);
    font-weight: 900;
    line-height: 1.2;
}

.ra-action-toolbar__description {
    margin-top: 0.15rem;
    color: var(--ra-muted);
    font-size: 0.86rem;
}

.ra-action-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.ra-metric-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.6rem;
    padding: 0.7rem;
}

.ra-metric-strip__item {
    padding: 0.7rem;
    border-radius: var(--ra-radius-sm);
    background: var(--ra-bg-soft);
    border: 1px solid color-mix(in srgb, var(--ra-border) 78%, transparent);
}

.ra-metric-strip__label {
    display: block;
    color: var(--ra-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ra-metric-strip__value {
    display: block;
    margin-top: 0.18rem;
    color: var(--ra-heading);
    font-size: 1.05rem;
    font-weight: 900;
}

.ra-metric-strip__hint,
.ra-module-card__meta {
    display: block;
    margin-top: 0.25rem;
    color: var(--ra-muted-2);
    font-size: 0.78rem;
    font-weight: 750;
}

.ra-module-card {
    position: relative;
    overflow: hidden;
    padding: 1rem;
    color: var(--ra-text);
    text-decoration: none;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.ra-module-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--ra-module-accent, var(--ra-accent));
}

.ra-module-card:hover {
    color: var(--ra-text);
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ra-accent) 28%, var(--ra-border));
    box-shadow: var(--ra-shadow-strong);
}

.ra-module-card__icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--ra-module-accent, var(--ra-accent)) 10%, var(--ra-surface));
    color: var(--ra-module-accent, var(--ra-accent));
}

.ra-module-card__title {
    margin-top: 0.75rem;
    color: var(--ra-heading);
    font-size: 1rem;
    font-weight: 900;
}

.ra-module-card__text,
.ra-empty-state__text {
    color: var(--ra-muted);
    font-size: 0.87rem;
    line-height: 1.5;
}

.ra-empty-state {
    padding: 2rem;
    text-align: center;
}

.ra-empty-state__icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.8rem;
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ra-bg-soft);
    color: var(--ra-muted);
    border: 1px solid var(--ra-border);
}

.ra-empty-state__title {
    color: var(--ra-heading);
    font-weight: 900;
}

.ra-empty-state__actions {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ra-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    min-height: 30px;
    padding: 0.32rem 0.64rem;
    border: 1px solid var(--ra-border);
    background: var(--ra-bg-soft);
    color: var(--ra-muted);
    font-size: 0.76rem;
    line-height: 1;
    white-space: nowrap;
}

.ra-status-pill__dot {
    width: 0.46rem;
    height: 0.46rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}

.ra-status-pill--secondary {
    color: var(--ra-muted);
    background: var(--ra-bg-soft);
}

/* Module polish */
.pos-shell,
.pos-terminal,
.kds-board,
.waiter-shell,
.qr-menu-shell,
.reports-studio,
.demo-studio,
.setup-command,
.inventory-shell,
.customers-shell {
    color: var(--ra-text);
}

.pos-terminal,
.kds-board,
.reports-studio,
.demo-studio {
    border-radius: var(--ra-radius);
}

[class*="__drawer"],
[class*="-drawer"] {
    border-radius: var(--ra-radius) !important;
    border-color: var(--ra-border) !important;
}

[data-page-loader] {
    --loader-accent: var(--ra-accent);
}

/* RestroAI topbar */
.ra-topbar {
    position: sticky;
    top: 0.75rem;
    z-index: 1010;
    display: grid;
    grid-template-columns: minmax(230px, 0.9fr) minmax(280px, 1.35fr) auto;
    gap: 0.85rem;
    align-items: center;
    margin: 0.75rem 1rem 1rem;
    padding: 0.78rem;
    border: 1px solid rgba(230, 223, 216, 0.9);
    border-radius: var(--ra-radius) !important;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 253, 251, 0.9)),
        var(--ra-surface-raised) !important;
    box-shadow: var(--ra-shadow);
    backdrop-filter: blur(16px);
}

.ra-topbar::before {
    content: "";
    position: absolute;
    inset: 0.45rem 0.7rem auto;
    height: 22px;
    pointer-events: none;
    opacity: 0.46;
    background:
        linear-gradient(90deg, transparent 0 12px, rgba(var(--ra-accent-rgb), 0.18) 12px 13px, transparent 13px 25px),
        linear-gradient(90deg, rgba(40, 122, 91, 0.16), transparent 34%, rgba(47, 111, 159, 0.13), transparent 72%, rgba(117, 81, 184, 0.12));
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.ra-topbar::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ra-accent), var(--ra-success), var(--ra-info), var(--ra-ai));
    opacity: 0.82;
    pointer-events: none;
}

.ra-topbar--tenant {
    margin: 0;
}

.ra-topbar__identity,
.ra-topbar__main,
.ra-topbar__actions,
.ra-topbar__chips {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    min-width: 0;
}

.ra-topbar__identity,
.ra-topbar__actions {
    gap: 0.62rem;
}

.ra-topbar__main {
    flex-direction: column;
    align-items: stretch;
    gap: 0.48rem;
}

.ra-topbar__actions {
    justify-content: flex-end;
}

.ra-topbar__chips {
    gap: 0.45rem;
    flex-wrap: wrap;
}

.ra-topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-width: 0;
    color: var(--ra-heading);
    text-decoration: none;
}

.ra-topbar__brand:hover {
    color: var(--ra-heading);
}

.ra-topbar__brand-mark {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background:
        linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 62%, var(--ra-heading))),
        var(--ra-accent);
    box-shadow: 0 12px 24px rgba(var(--ra-accent-rgb), 0.24);
}

.ra-topbar__brand-copy {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ra-topbar__brand-copy strong {
    color: var(--ra-heading);
    font-size: 1rem;
    line-height: 1.15;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ra-topbar__brand-copy small {
    margin-top: 0.18rem;
    color: var(--ra-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ra-breadcrumb .breadcrumb-item,
.ra-breadcrumb .breadcrumb-item a {
    color: var(--ra-muted);
    font-size: 0.74rem;
    font-weight: 800;
    text-decoration: none;
}

.ra-breadcrumb .breadcrumb-item.active,
.ra-breadcrumb .breadcrumb-item[aria-current="page"] {
    color: var(--ra-heading);
}

.ra-command-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    min-height: 42px;
    padding: 0 0.72rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background:
        linear-gradient(90deg, rgba(var(--ra-accent-rgb), 0.045), transparent 42%),
        var(--ra-bg-soft);
    color: var(--ra-muted);
    cursor: text;
}

.ra-command-search input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--ra-text);
    font-size: 0.87rem;
    font-weight: 800;
}

.ra-command-search input::placeholder {
    color: var(--ra-muted-2);
}

.ra-command-search kbd {
    min-width: 1.45rem;
    padding: 0.16rem 0.34rem;
    border: 1px solid var(--ra-border);
    border-radius: 5px;
    background: var(--ra-surface-raised);
    color: var(--ra-muted);
    font-size: 0.72rem;
    line-height: 1;
    box-shadow: none;
}

.ra-status-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    padding: 0.36rem 0.64rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-bg-soft);
    color: var(--ra-muted);
    font-size: 0.76rem;
    font-weight: 900;
    white-space: nowrap;
}

.ra-status-chip__dot {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 15%, transparent);
}

.ra-status-chip--success {
    color: var(--ra-success);
    border-color: color-mix(in srgb, var(--ra-success) 28%, var(--ra-border));
    background: color-mix(in srgb, var(--ra-success) 8%, var(--ra-bg-soft));
}

.ra-status-chip--warning {
    color: var(--ra-warning);
    border-color: color-mix(in srgb, var(--ra-warning) 30%, var(--ra-border));
    background: color-mix(in srgb, var(--ra-warning) 9%, var(--ra-bg-soft));
}

.ra-icon-action,
.tenant-icon-action.ra-icon-action {
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    background: var(--ra-bg-soft);
    color: var(--ra-heading);
    text-decoration: none;
    transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.ra-icon-action:hover,
.tenant-icon-action.ra-icon-action:hover,
.ra-icon-action.is-active {
    color: var(--ra-heading);
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--ra-accent) 32%, var(--ra-border));
    background: color-mix(in srgb, var(--ra-accent) 8%, var(--ra-bg-soft));
}

.ra-icon-action--accent,
.tenant-icon-action--accent.ra-icon-action {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 70%, var(--ra-heading)));
}

.ra-icon-action--accent:hover,
.tenant-icon-action--accent.ra-icon-action:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--ra-accent), color-mix(in srgb, var(--ra-accent) 58%, var(--ra-heading)));
}

.ra-profile-toggle {
    min-height: 42px;
    max-width: 260px;
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    padding: 0.28rem 0.38rem 0.28rem 0.3rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-surface-raised);
    color: var(--ra-heading);
    text-align: left;
}

.ra-profile-toggle__avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--ra-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--ra-info) 70%, var(--ra-heading)), var(--ra-ai));
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 950;
}

.ra-profile-toggle__copy,
.ra-profile-menu__header span:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ra-profile-toggle__copy strong,
.ra-profile-menu__header strong {
    color: var(--ra-heading);
    font-size: 0.78rem;
    line-height: 1.1;
    font-weight: 950;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ra-profile-toggle__copy small,
.ra-profile-menu__header small {
    max-width: 150px;
    margin-top: 0.12rem;
    color: var(--ra-muted);
    font-size: 0.68rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ra-profile-menu {
    min-width: 252px;
    padding: 0.45rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-surface-raised);
    box-shadow: var(--ra-shadow-strong);
}

.ra-profile-menu__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem;
    margin-bottom: 0.25rem;
    border: 1px solid var(--ra-border);
    border-radius: var(--ra-radius);
    background: var(--ra-bg-soft);
}

.ra-profile-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 38px;
    border-radius: var(--ra-radius-sm);
    color: var(--ra-text);
    font-size: 0.84rem;
    font-weight: 850;
}

.ra-profile-menu .dropdown-item i {
    color: var(--ra-muted);
}

.ra-profile-menu .dropdown-item:hover {
    background: color-mix(in srgb, var(--ra-accent) 9%, var(--ra-bg-soft));
    color: var(--ra-heading);
}

.ra-profile-menu__danger {
    color: var(--ra-danger) !important;
}

.ra-profile-menu__danger i {
    color: var(--ra-danger) !important;
}

.tenant-nav__link.is-hidden,
.tenant-nav__group.is-hidden,
.app-sidenav .nav-item.is-hidden,
.app-sidenav .nav-link.is-hidden {
    display: none !important;
}

/* Motion */
@keyframes ra-soft-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.mphb,
.mkpi,
.tbl-panel,
.ra-module-card,
.tenant-nav__group {
    animation: ra-soft-enter 0.28s ease both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 1199.98px) {
    .ra-topbar {
        grid-template-columns: 1fr;
        position: relative;
        top: 0;
        margin: 0.75rem 0.75rem 1rem;
    }

    .ra-topbar--tenant {
        margin: 0;
    }

    .ra-topbar__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .tenant-topbar {
        grid-template-columns: 1fr;
        position: relative;
        top: 0;
    }

    .tenant-topbar__center,
    .tenant-topbar__actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .tenant-search {
        min-width: min(100%, 320px);
    }
}

@media (max-width: 767.98px) {
    .ra-topbar {
        padding: 0.65rem;
    }

    .ra-topbar__identity {
        width: 100%;
    }

    .ra-topbar__brand-mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .ra-topbar__chips,
    .ra-status-chip {
        display: none;
    }

    .ra-profile-toggle__copy {
        display: none;
    }

    .ra-profile-toggle {
        width: 42px;
        justify-content: center;
    }

    .ra-profile-toggle > .bi-chevron-down {
        display: none;
    }

    .ra-command-search {
        flex-basis: 100%;
    }

    .tenant-topbar {
        padding: 0.7rem;
    }

    .tenant-brand__mark {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .tenant-chip {
        display: none;
    }

    .tenant-search {
        flex-basis: 100%;
    }

    .tenant-nav {
        padding: 0.55rem;
    }

    .tenant-nav__group {
        min-width: 170px;
    }
}

[data-bs-theme="dark"] body {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 42px 42px,
        linear-gradient(180deg, rgba(240, 109, 95, 0.05), transparent 280px),
        var(--ra-bg);
}

[data-bs-theme="dark"] .tenant-topbar,
[data-bs-theme="dark"] .ra-topbar,
[data-bs-theme="dark"] .tenant-nav,
[data-bs-theme="dark"] .tenant-nav__group,
[data-bs-theme="dark"] .app-navbar,
[data-bs-theme="dark"] .navbar-main,
[data-bs-theme="dark"] .app-sidenav,
[data-bs-theme="dark"] .sidenav,
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .mkpi,
[data-bs-theme="dark"] .mcc,
[data-bs-theme="dark"] .tbl-panel,
[data-bs-theme="dark"] .ra-action-toolbar,
[data-bs-theme="dark"] .ra-metric-strip,
[data-bs-theme="dark"] .ra-module-card,
[data-bs-theme="dark"] .ra-empty-state {
    background: var(--ra-surface-raised) !important;
    border-color: var(--ra-border) !important;
}

[data-bs-theme="dark"] .tenant-search,
[data-bs-theme="dark"] .ra-command-search,
[data-bs-theme="dark"] .tenant-chip,
[data-bs-theme="dark"] .tenant-icon-action,
[data-bs-theme="dark"] .ra-icon-action,
[data-bs-theme="dark"] .ra-profile-toggle,
[data-bs-theme="dark"] .ra-profile-menu,
[data-bs-theme="dark"] .ra-profile-menu__header,
[data-bs-theme="dark"] .ra-metric-strip__item,
[data-bs-theme="dark"] .ra-empty-state__icon {
    background: var(--ra-surface) !important;
    border-color: var(--ra-border) !important;
}

[data-bs-theme="dark"] .tbl-table tbody td,
[data-bs-theme="dark"] .tbl-table thead th,
[data-bs-theme="dark"] .mcc__head,
[data-bs-theme="dark"] .tbl-panel__head {
    background: var(--ra-surface) !important;
}