/* ═══════════════════════════════════════════════════════════════
   MLAB UI — shadcn-flavored primitive layer
   Consumes the shadcn alias tokens defined in mlab-custom.css.
   Goal: one source of truth per primitive, composable & predictable.
   Namespaced `.mlab-ui-*` so it never collides with Bootstrap.
   Loaded last (via head.html) so token/focus harmonization wins.
═══════════════════════════════════════════════════════════════ */

/* ─── Global focus harmonization ───────────────────────────────
   Give every interactive control the same shadcn-style ring.
   Low specificity via :where() so page CSS can still override. */
:where(.form-control, .form-select, .btn, .form-check-input,
       .mlab-ui-input, .mlab-ui-btn, a.mlab-ui-focus):focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--ring-shadow);
    border-color: var(--ring);
}
:where(.form-control, .form-select):focus {
    border-color: var(--ring);
    box-shadow: var(--ring-shadow);
}

/* ─── Button ──────────────────────────────────────────────────── */
.mlab-ui-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 500;
    font-size: .875rem;
    line-height: 1;
    white-space: nowrap;
    border-radius: var(--radius);
    border: 1px solid transparent;
    padding: 0 1rem;
    height: 2.5rem;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--mlab-dur-fast) var(--mlab-ease),
                color var(--mlab-dur-fast) var(--mlab-ease),
                border-color var(--mlab-dur-fast) var(--mlab-ease),
                box-shadow var(--mlab-dur-fast) var(--mlab-ease);
}
.mlab-ui-btn:disabled { opacity: .5; pointer-events: none; }
.mlab-ui-btn > svg,
.mlab-ui-btn > [data-lucide] { width: 1rem; height: 1rem; }

.mlab-ui-btn--default   { background: var(--primary); color: var(--primary-foreground); }
.mlab-ui-btn--default:hover   { background: var(--primary); box-shadow: 0 4px 12px rgba(var(--mlab-shadow-ink-rgb), .20); }
.mlab-ui-btn--secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); }
.mlab-ui-btn--secondary:hover { background: color-mix(in srgb, var(--secondary) 92%, #000); }
.mlab-ui-btn--outline   { background: transparent; color: var(--foreground); border-color: var(--border); }
.mlab-ui-btn--outline:hover   { background: var(--muted); }
.mlab-ui-btn--ghost     { background: transparent; color: var(--foreground); }
.mlab-ui-btn--ghost:hover     { background: var(--muted); }
.mlab-ui-btn--accent    { background: var(--accent); color: var(--accent-foreground); }
.mlab-ui-btn--accent:hover    { background: color-mix(in srgb, var(--accent) 88%, #000); }
.mlab-ui-btn--destructive { background: var(--destructive); color: var(--destructive-foreground); }
.mlab-ui-btn--destructive:hover { background: color-mix(in srgb, var(--destructive) 88%, #000); }
.mlab-ui-btn--link      { background: transparent; color: var(--accent); padding: 0; height: auto; }
.mlab-ui-btn--link:hover      { text-decoration: underline; }

.mlab-ui-btn--sm { height: 2rem;   padding: 0 .75rem; font-size: .8125rem; border-radius: calc(var(--radius) - 2px); }
.mlab-ui-btn--lg { height: 2.75rem; padding: 0 1.5rem; font-size: .9375rem; }
.mlab-ui-btn--icon { width: 2.5rem; padding: 0; }

/* Inside a Bootstrap input-group, stretch to the group height and merge the
   left edge with the field instead of floating as a separate pill. */
.input-group > .mlab-ui-btn {
    height: auto;
    align-self: stretch;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* mlab-ui inputs/selects inside a Bootstrap .input-group: the primitives are
   display:block;width:100%, which would otherwise force sibling buttons/addons
   onto a new line. Make them behave as flex items and merge the shared edge. */
.input-group > .mlab-ui-input,
.input-group > .mlab-ui-select {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}
.input-group > .mlab-ui-input:not(:last-child),
.input-group > .mlab-ui-select:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .mlab-ui-input:not(:first-child),
.input-group > .mlab-ui-select:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ─── Card ────────────────────────────────────────────────────── */
.mlab-ui-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--mlab-shadow-sm);
    overflow: hidden; /* clip full-bleed tables/headers to the rounded corners */
}
/* A full-bleed table inside a card should not double its own border on the
   card's bottom edge (card border already closes it). */
.mlab-ui-card > .table-responsive:last-child .mlab-ui-table tbody tr:last-child td { border-bottom: 0; }
.mlab-ui-card__header  { padding: 1.25rem 1.25rem .75rem; }
.mlab-ui-card__title   { font-size: 1rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.mlab-ui-card__desc    { font-size: .8125rem; color: var(--muted-foreground); margin: .25rem 0 0; }
/* Full padding by default so header-less cards don't jam content to the top;
   drop the top padding only when a header already sits above the content. */
.mlab-ui-card__content { padding: 1.25rem; }
.mlab-ui-card__header + .mlab-ui-card__content { padding-top: 0; }
.mlab-ui-card__footer  { padding: .75rem 1.25rem 1.25rem; display: flex; gap: .5rem; align-items: center; }

/* ─── Stat / KPI card ─────────────────────────────────────────── */
.mlab-ui-stat { display: flex; flex-direction: column; gap: .3rem; }
.mlab-ui-stat__label {
    font-size: .7rem; font-weight: 500; letter-spacing: .04em;
    text-transform: uppercase; color: var(--muted-foreground);
    display: inline-flex; align-items: center; gap: .375rem;
}
.mlab-ui-stat__value { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.mlab-ui-stat__hint  { font-size: .75rem; color: var(--muted-foreground); }

/* ─── Input / Textarea / Label ────────────────────────────────── */
.mlab-ui-input,
.mlab-ui-textarea {
    display: block;
    width: 100%;
    background: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    padding: 0 .75rem;
    height: 2.5rem;
    font-size: .875rem;
    transition: border-color var(--mlab-dur-fast) var(--mlab-ease),
                box-shadow var(--mlab-dur-fast) var(--mlab-ease);
}
.mlab-ui-textarea { height: auto; min-height: 5rem; padding: .5rem .75rem; }
.mlab-ui-input--sm { height: 2rem; font-size: .8125rem; border-radius: calc(var(--radius) - 2px); }
.mlab-ui-input::placeholder,
.mlab-ui-textarea::placeholder { color: var(--muted-foreground); }
.mlab-ui-input[aria-invalid="true"],
.mlab-ui-textarea[aria-invalid="true"] { border-color: var(--destructive); }
.mlab-ui-label { display: inline-block; font-size: .8125rem; font-weight: 500; margin-bottom: .375rem; }

/* ─── Select ──────────────────────────────────────────────────── */
.mlab-ui-select {
    display: block;
    width: 100%;
    background-color: var(--background);
    color: var(--foreground);
    border: 1px solid var(--input);
    border-radius: var(--radius);
    padding: 0 2.25rem 0 .75rem;
    height: 2.5rem;
    font-size: .875rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    /* chevron-down (slate that reads in both themes) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .625rem center;
    background-size: 1rem;
    transition: border-color var(--mlab-dur-fast) var(--mlab-ease),
                box-shadow var(--mlab-dur-fast) var(--mlab-ease);
}
.mlab-ui-select--sm { height: 2rem; font-size: .8125rem; border-radius: calc(var(--radius) - 2px); }

/* ─── Page header ─────────────────────────────────────────────────
   One standard title block so pages stop hand-rolling h2/h3/h4 +
   pt-4 pb-3. Title + subtitle on the left, optional actions on the right. */
.mlab-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem 1rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.mlab-page-header__title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0;
}
.mlab-page-header__subtitle {
    font-size: .875rem;
    color: var(--muted-foreground);
    margin: .25rem 0 0;
}
.mlab-page-header__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }

/* ─── Badge ───────────────────────────────────────────────────── */
.mlab-ui-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1;
    padding: .25rem .5rem;
    border-radius: var(--mlab-radius-pill);
    border: 1px solid transparent;
}
.mlab-ui-badge--default     { background: var(--primary); color: var(--primary-foreground); }
.mlab-ui-badge--secondary   { background: var(--muted); color: var(--muted-foreground); }
.mlab-ui-badge--outline     { background: transparent; color: var(--foreground); border-color: var(--border); }
.mlab-ui-badge--accent      { background: var(--accent-subtle); color: var(--accent); }
.mlab-ui-badge--success     { background: var(--mlab-success-bg); color: var(--mlab-success); }
.mlab-ui-badge--warning     { background: var(--mlab-warning-bg); color: var(--mlab-warning); }
.mlab-ui-badge--destructive { background: var(--mlab-danger-bg);  color: var(--mlab-danger); }

/* ─── Alert ───────────────────────────────────────────────────── */
.mlab-ui-alert {
    display: flex; gap: .75rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--foreground);
    font-size: .875rem;
}
.mlab-ui-alert__title { font-weight: 600; margin: 0 0 .25rem; }
.mlab-ui-alert--success     { border-color: rgba(var(--mlab-success-rgb), .35); background: var(--mlab-success-bg); }
.mlab-ui-alert--warning     { border-color: rgba(var(--mlab-warning-rgb), .35); background: var(--mlab-warning-bg); }
.mlab-ui-alert--destructive { border-color: rgba(var(--mlab-danger-rgb), .35);  background: var(--mlab-danger-bg); }
.mlab-ui-alert--info        { border-color: rgba(var(--mlab-info-rgb), .35);    background: var(--mlab-info-bg); }

/* ─── Table ───────────────────────────────────────────────────── */
.mlab-ui-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.mlab-ui-table thead th {
    text-align: left;
    font-weight: 500;
    color: var(--muted-foreground);
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.mlab-ui-table tbody td {
    padding: .75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    max-width: 340px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mlab-ui-table tbody tr:last-child td { border-bottom: 0; }
.mlab-ui-table tbody tr { transition: background-color var(--mlab-dur-fast) var(--mlab-ease); }
.mlab-ui-table tbody tr:hover { background: var(--muted); }
/* Align the outer columns with the card's inner padding so table content
   lines up with the card title/footer instead of sitting tighter. */
.mlab-ui-table th:first-child,
.mlab-ui-table td:first-child { padding-left: 1.25rem; }
.mlab-ui-table th:last-child,
.mlab-ui-table td:last-child  { padding-right: 1.25rem; }
/* The actions column (last) holds buttons: never truncate or clip it. */
.mlab-ui-table td:last-child,
.mlab-ui-table th:last-child { max-width: none; overflow: visible; }

/* ─── Tabs (segmented) ────────────────────────────────────────── */
.mlab-ui-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .25rem;
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.mlab-ui-tab {
    border: 0;
    background: transparent;
    color: var(--muted-foreground);
    font-size: .8125rem;
    font-weight: 500;
    padding: .4rem .85rem;
    border-radius: calc(var(--radius) - 2px);
    cursor: pointer;
    transition: background-color var(--mlab-dur-fast) var(--mlab-ease),
                color var(--mlab-dur-fast) var(--mlab-ease);
}
.mlab-ui-tab:hover { color: var(--foreground); }
.mlab-ui-tab.active { background: var(--card); color: var(--foreground); box-shadow: var(--mlab-shadow-xs); }
.mlab-ui-tabpane { display: none; }
.mlab-ui-tabpane.active { display: block; }

/* ─── Pagination ──────────────────────────────────────────────── */
.mlab-ui-pagination { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.mlab-ui-pagination button {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--foreground);
    border-radius: calc(var(--radius) - 2px);
    font-size: .8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--mlab-dur-fast) var(--mlab-ease);
}
.mlab-ui-pagination button:hover:not(:disabled):not(.active) { background: var(--muted); }
.mlab-ui-pagination button.active { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent); }
.mlab-ui-pagination button:disabled { opacity: .4; cursor: default; }

/* ─── Separator ───────────────────────────────────────────────── */
.mlab-ui-separator { height: 1px; background: var(--border); border: 0; margin: 1rem 0; }

/* ─── Skeleton ────────────────────────────────────────────────── */
.mlab-ui-skeleton {
    background: var(--muted);
    border-radius: var(--mlab-radius-sm);
    position: relative;
    overflow: hidden;
}
.mlab-ui-skeleton::after {
    content: "";
    position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent,
                rgba(var(--accent-rgb), .06), transparent);
    animation: mlab-ui-shimmer 1.4s infinite;
}
@keyframes mlab-ui-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
    .mlab-ui-skeleton::after { animation: none; }
}

/* ─── Empty state ─────────────────────────────────────────────── */
.mlab-ui-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: .5rem; padding: 3rem 1.5rem; color: var(--muted-foreground);
}
.mlab-ui-empty__icon { width: 2.5rem; height: 2.5rem; opacity: .5; }
.mlab-ui-empty__title { font-weight: 600; color: var(--foreground); }

/* ═══════════════════════════════════════════════════════════════
   SURFACES — clean white-card-on-grey-canvas hierarchy (post-login).
   Pre-login pages keep their own look via body.mlab-pub.
═══════════════════════════════════════════════════════════════ */
body:not(.mlab-pub) { background: var(--canvas) !important; }
body:not(.mlab-pub) .content-page { background: transparent; }

/* Cards lift a touch more so white pops on the grey canvas. */
.mlab-ui-card { box-shadow: 0 1px 2px rgba(var(--mlab-shadow-ink-rgb), .04), 0 1px 3px rgba(var(--mlab-shadow-ink-rgb), .06); }
html[data-bs-theme=dark] .mlab-ui-card { box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* A little amber life on KPI icons. */
.mlab-ui-stat__label i[data-lucide],
.mlab-ui-stat__label svg { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   BOOTSTRAP HARMONIZATION
   The backend injects plain Bootstrap markup (.btn, .card, .badge)
   into templates. Retune Bootstrap's own CSS variables so injected
   controls match the shadcn look without editing the Rust source.
═══════════════════════════════════════════════════════════════ */

/* Cards: one radius everywhere so nested cards stop mismatching. */
.card {
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-border-color: var(--border);
}
/* When a Bootstrap .card was converted to .mlab-ui-card but an inner
   .card-body/.card-header/.card-footer was kept (or comes from injected
   backend HTML), Bootstrap's spacing vars are no longer inherited from a
   .card ancestor, which collapses their left/right padding. Redeclare them
   here so nested Bootstrap card parts keep proper padding. */
.mlab-ui-card {
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1rem;
    --bs-card-cap-padding-x: 1.25rem;
    --bs-card-cap-padding-y: .75rem;
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
}
/* Explicit padding (does NOT rely on Bootstrap's --bs-card-* var inheritance,
   which breaks once the .card ancestor is gone). Covers leftover Bootstrap
   card parts AND backend-injected content placed directly in a card. */
.mlab-ui-card > .card-body   { padding: 1rem 1.25rem; }
.mlab-ui-card > .card-header { padding: .75rem 1.25rem; }
.mlab-ui-card > .card-footer { padding: .75rem 1.25rem; }
/* redkit-result filter bar: match the card's horizontal padding. */
.mlab-ui-card > .filter-bar  { padding-left: 1.25rem; padding-right: 1.25rem; }

/* Buttons: shadcn sizing + radius + neutral outline + brand fill. */
.btn {
    --bs-btn-border-radius: var(--radius);
    --bs-btn-font-weight: 500;
    --bs-btn-padding-x: 1rem;
    --bs-btn-padding-y: .5rem;
    --bs-btn-font-size: .875rem;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    /* Konrix sets radius with high specificity — force the shadcn value. */
    border-radius: var(--radius) !important;
}
.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .375rem;
    --bs-btn-font-size: .8125rem;
    border-radius: calc(var(--radius) - 2px) !important;
}
.btn-lg { border-radius: var(--radius) !important; }

/* Konrix paints button colors directly (not via --bs-btn-* vars), so we
   override the real properties. Scoped to backend-injected Bootstrap buttons;
   the mlab-ui-btn primitives never need this. */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
}
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    box-shadow: 0 4px 12px rgba(var(--mlab-shadow-ink-rgb), .20) !important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
    background-color: transparent !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover,
.btn-outline-primary:active,
.btn-outline-secondary:active,
.btn-outline-dark:active {
    background-color: var(--muted) !important;
    border-color: var(--border) !important;
    color: var(--foreground) !important;
}
/* Accent-forward Bootstrap button when the backend wants emphasis. */
.btn-accent {
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-color: var(--accent-foreground);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 88%, #000);
    --bs-btn-hover-color: var(--accent-foreground);
}

/* Checkboxes / switches / radios: use the amber accent when checked, so they
   never fall back to the theme's (sometimes green) primary. */
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}
.form-check-input:focus { border-color: var(--ring); box-shadow: var(--ring-shadow); }

/* Badges: soft shadcn pills for injected .badge markup. */
.badge { border-radius: var(--mlab-radius-pill); font-weight: 600; }
/* bg-primary badge → neutral primary (theme's primary is green in some dark configs). */
.badge.bg-primary { background-color: var(--primary) !important; color: var(--primary-foreground) !important; }

/* Alerts: align radius/border with the token system. */
.alert { --bs-alert-border-radius: var(--radius); }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL — topbar + sidebar (Konrix classes, shadcn refinement)
═══════════════════════════════════════════════════════════════ */

/* Topbar: drop the glassmorphism for a solid surface + clean hairline.
   Pure white in light, opaque near-black in dark. */
.app-topbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: none !important;
}
html[data-bs-theme=dark] .app-topbar {
    background: var(--ins-body-bg, #020202) !important;
}

/* Topbar dropdowns (account menu, product menus): clean shadcn popover. */
.app-topbar .dropdown-menu {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--mlab-shadow-lg);
    padding: .35rem;
    min-width: 220px;
}
html[data-bs-theme=dark] .app-topbar .dropdown-menu {
    background: var(--ins-tertiary-bg, #111);
}
.app-topbar .dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: calc(var(--radius) - 2px);
    padding: .5rem .6rem;
    margin: 1px 0;
    font-size: .875rem;
    font-weight: 500;
    color: var(--foreground);
}
.app-topbar .dropdown-menu .dropdown-item:hover,
.app-topbar .dropdown-menu .dropdown-item:focus {
    background: var(--muted);
    color: var(--foreground);
}
.app-topbar .dropdown-menu .dropdown-item > svg,
.app-topbar .dropdown-menu .dropdown-item > [data-lucide] { width: 16px; height: 16px; }
.app-topbar .dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--border);
    margin: .35rem -.05rem;
    opacity: 1;
}
.app-topbar .dropdown-menu .dropdown-header {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted-foreground);
}

/* ── Topbar mega-menu (Resources) + product menus (Governance/Detection/…) ──
   Align the dense nav dropdowns: one amber accent instead of four product
   colors, muted hovers, token borders. Markup/JS untouched. */
.mlab-mega-menu, .mlab-product-menu { padding: 0 !important; }

.mlab-mega-menu-col + .mlab-mega-menu-col { border-left-color: var(--border) !important; }
.mlab-mega-menu-footer {
    border-top: 1px solid var(--border) !important;
    background: var(--muted) !important;
}
.mlab-mega-menu-footer a { color: var(--muted-foreground) !important; }
.mlab-mega-menu-footer a:hover { color: var(--foreground) !important; }

.mlab-dropdown-eyebrow, .mlab-dropdown-eyebrow-inline {
    color: var(--muted-foreground) !important;
    opacity: 1 !important;
    font-weight: 600;
}

.mlab-dropdown-link {
    color: var(--foreground);
    border-radius: calc(var(--radius) - 2px);
    font-weight: 500;
    padding: .4rem .5rem;
}
.mlab-dropdown-link:hover { background: var(--muted); }
.mlab-dropdown-link i[data-lucide] { opacity: 1; color: var(--muted-foreground); }

.mlab-product-item { border-radius: calc(var(--radius) - 2px); }
.mlab-product-item:hover { background: var(--muted); }

/* One calm amber icon chip everywhere (was 4 product colors). */
.mlab-product-icon {
    background: var(--accent-subtle) !important;
    border-radius: var(--mlab-radius-sm);
}
.mlab-product-icon i[data-lucide] { color: var(--accent) !important; }
.mlab-product-item.is-soon .mlab-product-icon {
    background: var(--muted) !important;
}
.mlab-product-item.is-soon .mlab-product-icon i[data-lucide] { color: var(--muted-foreground) !important; }

.mlab-product-title { color: var(--foreground); }
.mlab-product-subtitle { color: var(--muted-foreground); }
.mlab-product-sublinks a { color: var(--muted-foreground); }
.mlab-product-sublinks a:hover { color: var(--accent); }

.mlab-soon-badge {
    background: var(--muted);
    color: var(--muted-foreground);
    border-radius: var(--mlab-radius-sm);
    font-weight: 600;
}

/* Topbar action links (Resources/Governance/… buttons, theme toggle, search). */
.app-topbar .topbar-menu .topbar-item .topbar-link:hover { background: var(--muted) !important; }

/* Sidebar section labels: quiet uppercase eyebrows. */
.side-nav .side-nav-title {
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .68rem;
    font-weight: 600;
    color: var(--muted-foreground);
    padding: .75rem .85rem .35rem;
    margin: 0;
}

/* Sidebar items: rounded, quiet by default, muted hover. */
.side-nav .side-nav-link {
    border-radius: var(--radius);
    margin: 1px .5rem;
    padding: .5rem .6rem;
    color: var(--muted-foreground);
    font-weight: 500;
    transition: background-color var(--mlab-dur-fast) var(--mlab-ease),
                color var(--mlab-dur-fast) var(--mlab-ease);
}
.side-nav .side-nav-link:hover {
    background: var(--muted);
    color: var(--foreground);
}
.side-nav .side-nav-link .menu-icon { color: inherit; }

/* Active item: amber-tinted surface + amber text/icon. */
.side-nav .side-nav-item.active > .side-nav-link,
.side-nav .side-nav-link.active {
    background: var(--accent-subtle);
    color: var(--accent);
}
.side-nav .side-nav-item.active > .side-nav-link .menu-icon,
.side-nav .side-nav-link.active .menu-icon {
    color: var(--accent);
}
/* Submenu: slightly tighter, no double icon column. */
.side-nav .sub-menu .side-nav-link { padding-left: 2.4rem; font-weight: 400; }