:root {
    --nuprc-grid-link-weight: 400;
    --nuprc-col-operator-width: 540px;
    --sidebar-width: 240px !important;
    --sidebar-bg: #1a2332 !important;
    --sidebar-text: #c9d1d9 !important;
    --sidebar-text-hover: #ffffff !important;
    --sidebar-active-bg: #2d3f55 !important;
    --sidebar-active-text: #ffffff !important;
    --accent: #2563eb !important;
    --bg: #0d1117 !important;
    --surface: #161b22 !important;
    --content-bg: #eef0f3;
    --border: #30363d !important;
    --text: #e6edf3 !important;
    --text-muted: #8b949e !important;

    /* Dashboard theme tokens -- defined globally so Blazor CSS scoping
       does not prevent them from being visible to component stylesheets */
    --dash-bg: #0d1117 !important;
    --dash-surface: #161b22 !important;
    --dash-border: #30363d !important;
    --dash-text: #e6edf3 !important;
    --dash-muted: #8b949e !important;
    --dash-accent: #1f6feb !important;
    --dash-danger: #da3633 !important;
    --dash-warning: #d29922 !important;
    --dash-success: #238636 !important;
    --l-ffffff: #ffffff;
    --l-f8f9fa: #f8f9fa;
    --l-1a1f2e: #1a1f2e;
    --l-e1e4e8: #e1e4e8;
    --l-57606a: #57606a;
    --l-e2e8f0: #e2e8f0;
    --l-f8fafc: #f8fafc;
    --l-1f2937: #1f2937;
    --l-374151: #374151;
    --l-0969da: #0969da;
    --l-dbeafe: #dbeafe;
    --l-1d4ed8: #1d4ed8;
    --l-f6f8fa: #f6f8fa;
    --l-f3f4f6: #f3f4f6;
    --l-dcfce7: #dcfce7;
    --l-166534: #166534;
    --l-fef3c7: #fef3c7;
    --l-92400e: #92400e;
    --l-ffedd5: #ffedd5;
    --l-9a3412: #9a3412;
    --l-fee2e2: #fee2e2;
    --l-991b1b: #991b1b;
    --l-d0d7de: #d0d7de;
    --l-44505a: #44505a;
    --l-fn-1: rgba(255, 255, 255, 0.08); /* rgba(255, 255, 255, 0.08) */
    --l-fn-2: rgba(31, 111, 235, 0.18); /* rgba(31, 111, 235, 0.18) */

    /* Layout dimension tokens */
    --topbar-height: 52px;
}

*, *::before, *::after {
    box-sizing: border-box;
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.9375rem;
    color: var(--text);
    background: var(--bg) !important;
}

/* Base anchor colour -- without this, any <a> with no class/scoped style
   (e.g. "Back to Workbench" links added ad hoc, not wrapped in a styled
   container) falls through to the browser's default link colour
   (blue unvisited / purple visited) instead of an intentional colour.
   White/underline (not colour alone) carries the link signal on dark
   surfaces. Scoped rules (.sidebar-nav a, .stat-card a, .error-page a,
   .xxx-back a, .nuprc-grid-host ... a, etc.) all have higher specificity
   and are unaffected by this base rule. */
a {
    color: var(--l-ffffff);
    text-decoration: underline;
}

a:visited {
    color: var(--l-ffffff);
    text-decoration: underline;
}

/* ── Shell ─────────────────────────────────────────────── */

.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────── */

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--l-fn-1);
    flex-shrink: 0;
}

.sidebar-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sidebar-brand-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--l-ffffff);
    letter-spacing: 0.04em;
}

.sidebar-brand-sub {
    font-size: 0.7rem;
    color: var(--sidebar-text);
    opacity: 0.7;
}

.sidebar-nav {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6rem 1.25rem;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.875rem;
    border-left: 3px solid transparent;
    transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-text-hover);
}

.sidebar-nav a.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    border-left-color: var(--accent);
}

.nav-icon {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.8;
}

.sidebar-nav a.active .nav-icon,
.sidebar-nav a:hover .nav-icon {
    opacity: 1;
}

.sidebar-gov-badge-link {
    display: block;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    text-decoration: none;
}

.sidebar-gov-badge {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid rgba(192, 150, 42, 0.5);
    border-radius: 8px;
    background: rgba(192, 150, 42, 0.06);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.sidebar-gov-badge-link:hover .sidebar-gov-badge {
    border-color: rgba(192, 150, 42, 0.9);
    background: rgba(192, 150, 42, 0.12);
}

.sgb-shield {
    flex-shrink: 0;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sgb-shield svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}

.sgb-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(192, 150, 42, 0.35);
    flex-shrink: 0;
}

.sgb-content {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.sgb-title {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #ffffff;
    text-transform: uppercase;
}

.sgb-classified {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.5);
}

.sgb-official {
    font-size: 0.75rem;
    font-weight: 700;
    color: #f0c040;
    letter-spacing: 0.04em;
}

.sgb-policy {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.75);
    margin-top: 0.1rem;
}

.sgb-arrow {
    color: #f0c040;
}



.sidebar-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--l-fn-1);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.sidebar-footer .user-email {
    color: var(--sidebar-text);
    margin-bottom: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer form {
    margin: 0 0 0.5rem;
}

.sidebar-footer button {
    width: 100%;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--sidebar-text);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
}

.sidebar-footer button:hover {
    background: var(--l-fn-1);
    color: var(--l-ffffff);
}

.sidebar-copyright {
    font-size: 0.65rem;
    color: var(--sidebar-text);
    opacity: 0.4;
    margin-top: 0.25rem;
}

/* ── Sidebar collapsed state ─────────────────────────────── */

.app-shell.sidebar-collapsed .sidebar {
    width: 56px;
    overflow: hidden;
}

.app-shell.sidebar-collapsed .sidebar-brand-text {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-nav a span:not(.nav-icon) {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-footer .user-email {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-footer button span {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-copyright {
    display: none;
}

.app-shell.sidebar-collapsed .sidebar-gov-badge-link {
    display: none;
}

.app-shell.sidebar-collapsed .main-content {
    margin-left: 56px;
}

.topbar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 1.1rem;
    padding: 0 0.5rem;
    height: 100%;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: -240px;
        z-index: 200;
        transition: left 0.2s;
    }

    .app-shell.sidebar-collapsed .sidebar {
        left: 0;
        width: var(--sidebar-width);
        overflow: visible;
    }

    .main-content {
        margin-left: 0;
    }

    .app-shell.sidebar-collapsed .main-content {
        margin-left: 0;
    }
}

/* ── Main content ───────────────────────────────────────── */

.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    height: 100vh;
    background: var(--bg) !important;
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Light canvas override -- asset detail pages */
.main-content:has(.asset-page)  { background: var(--l-f8f9fa) !important; }
.main-content:has(.asset-shell) { background: var(--l-f8f9fa) !important; }

/* RightDetail light canvas */
.main-content:has(.right-detail-page) {
    background: var(--l-f8f9fa) !important;
}

/* RightDetail -- RadzenCard light override (global scope reaches across component boundaries) */
.main-content:has(.right-detail-page) .rz-card {
    background: var(--l-ffffff) !important;
    color: var(--l-1a1f2e) !important;
    border: 1px solid var(--l-e1e4e8) !important;
    box-shadow: none !important;
}

.main-content:has(.right-detail-page) .rz-card .text-muted,
.main-content:has(.right-detail-page) .rz-card small,
.main-content:has(.right-detail-page) .rz-card label {
    color: var(--l-57606a) !important;
}

/* ── Generic detail page light canvas ──────────────────── */

.main-content:has(.detail-page) {
    background: var(--l-f8f9fa) !important;
}

.main-content:has(.detail-page) .rz-card {
    background: var(--l-ffffff) !important;
    color: var(--l-1a1f2e) !important;
    border: 1px solid var(--l-e1e4e8) !important;
    box-shadow: none !important;
}

.main-content:has(.detail-page) .text-muted,
.main-content:has(.detail-page) small,
.main-content:has(.detail-page) label {
    color: var(--l-57606a) !important;
}

.detail-page {
    background: var(--l-f8f9fa);
    min-height: 100vh;
    color: var(--l-1a1f2e);
}

.detail-page .page-header h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--l-1a1f2e);
}

.detail-page .detail-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--l-e1e4e8);
}

.detail-page .detail-section-heading {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--l-57606a);
    border-bottom: 1px solid var(--l-e1e4e8);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.detail-page .party-group {
    margin-bottom: 1rem;
}

.detail-page .party-group-heading {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--l-1a1f2e);
    margin-bottom: 0.375rem;
}

.detail-page .party-row {
    display: flex;
    gap: 1.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: var(--l-1a1f2e);
    border-bottom: 1px solid #f0f0f0;
}

.detail-page .party-name  { flex: 1; font-weight: 500; }
.detail-page .party-role  { color: var(--l-57606a); min-width: 100px; }
.detail-page .party-equity { color: var(--l-57606a); min-width: 60px; text-align: right; }

/* ── Full-register virtual scroll ───────────────────────── */
/* page-body becomes a flex column so RightsRegisterGrid fills remaining
   height without a calc tied to topbar and page-header pixel values. */

.page-body:has(.rights-register-host) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rights-register-host {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.page-body:has(.field-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.field-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-body:has(.well-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.well-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-body:has(.facility-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.facility-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-body:has(.fdp-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.fdp-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-body:has(.submission-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.submission-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.page-body:has(.search-grid-region) {
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.search-grid-region {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ── GIS page-body scroll lock ─────────────────────────── */
/* Maps uses .gis-shell which fills PageFrame content area.
   Overflow hidden prevents the map canvas causing page scroll.
   Padding is preserved — same geometry as all other pages.   */
.page-body:has(.gis-shell) {
    overflow: hidden;
}

/* ── Governance PDF viewer -- full-height iframe ────────────────── */
.nuprc-page-frame-content:has(.gov-pdf-viewer) {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}

.nuprc-page-frame-content:has(.gov-pdf-viewer) > * {
    flex-shrink: 0;
}

.nuprc-page-frame-content:has(.gov-pdf-viewer) .gov-pdf-viewer {
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* ── Topbar ─────────────────────────────────────────────── */

.topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.625rem 1.5rem;
    gap: 1rem;
    flex-shrink: 0;
}

.topbar-search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 480px;
}

.topbar-search-icon {
    color: var(--text-muted);
    font-size: 1rem;
    flex-shrink: 0;
}

.topbar-search-input {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: var(--text);
    font-size: 0.875rem;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 !important;
}

.topbar-search-input::placeholder {
    color: var(--text-muted);
}

.topbar-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.75rem;
    flex-shrink: 0 !important;
}

.topbar-icon-btn {
    position: relative;
    width: 2rem;
    height: 2rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1rem;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.topbar-icon-btn:hover {
    background: var(--sidebar-active-bg);
    color: var(--text);
}

.topbar-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--dash-danger);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.05rem 0.28rem;
    line-height: 1.4;
}

.topbar-user-chip {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
    flex-shrink: 0;
}

.topbar-user-chip:hover {
    background: var(--sidebar-active-bg);
}

.topbar-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--dash-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    letter-spacing: 0.04em;
}

.topbar-user-info {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.2;
}

.topbar-user-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.topbar-user-role {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.page-body {
    flex: 1;
    min-height: 0;
    padding: 1.5rem;
    overflow-y: auto;
    background: var(--content-bg);
    color: var(--l-1a1f2e);
}

/* ── Auth layout ────────────────────────────────────────── */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
}

.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ── RadzenCard dark theme override ─────────────────────── */

.rz-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
}

.rz-card .text-muted,
.rz-card small,
.rz-card label {
    color: var(--text-muted) !important;
}

/* ── Page header ────────────────────────────────────────── */

/* Rendered via SectionOutlet as a direct child of .main-content (padding: 0),
   so needs its own horizontal + top padding to match .page-body alignment. */
.page-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
    flex-shrink: 0;
    min-width: 160px;
}

/* Detail pages keep .page-header inside .page-body — cancel the outer padding
   and restore the original bottom margin used there. */
.page-body .page-header {
    padding: 0;
    margin-bottom: 1.5rem;
}

.page-header h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

/* ── Environment badge ──────────────────────────────────── */

.env-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.env-badge.development {
    background: rgba(210, 153, 34, 0.15);
    color: var(--dash-warning);
}

.env-badge.production {
    background: rgba(35, 134, 54, 0.15);
    color: var(--dash-success);
}

/* ── Dashboard stat cards ───────────────────────────────── */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}

.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.5rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
    margin-bottom: 0.75rem;
}

.stat-card a {
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}

.stat-card a:hover {
    text-decoration: underline;
}

/* ── Error / not-found pages ────────────────────────────── */

.error-page {
    text-align: center;
    padding: 1rem 0;
}

.error-page h2 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.error-page p {
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

.error-page a {
    color: var(--accent);
    text-decoration: none;
    font-size: 0.9rem;
}

.error-page a:hover {
    text-decoration: underline;
}

/* ── Search box ─────────────────────────────────────────── */

.search-box {
    width: 100%;
    max-width: 360px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.875rem;
    background: var(--surface);
    color: var(--text);
}

.search-box:focus {
    outline: none;
    border-color: var(--accent);
}

/* ── Empty state ────────────────────────────────────────── */

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    font-size: 0.9375rem;
}

/* ── NuprcDataGrid: light enterprise treatment ──────────────────── */
/* Applies to all grids wrapped in <NuprcDataGrid> (div.nuprc-grid-host). */

.nuprc-grid-host {
    /* No visual properties -- selector specificity anchor only */
    transition: opacity 0.15s ease;
}

.nuprc-grid-host.nuprc-grid-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.nuprc-grid-host {
    position: relative;
}

.nuprc-grid-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 10;
    pointer-events: none;
    background: rgba(37, 99, 235, 0.10);
    border-radius: 2px 2px 0 0;
    overflow: hidden;
}

.nuprc-grid-progress-bar {
    height: 100%;
    background: #2563eb;
    border-radius: 2px;
    animation: nuprc-progress-indeterminate 1.4s ease-in-out infinite;
    transform-origin: left;
}

@keyframes nuprc-progress-indeterminate {
    0%   { transform: translateX(-100%) scaleX(0.4); }
    50%  { transform: translateX(60%)   scaleX(0.6); }
    100% { transform: translateX(200%)  scaleX(0.4); }
}

.nuprc-grid-host .rz-grid {
    background: var(--l-ffffff) !important;
    border: 1px solid var(--l-e2e8f0) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    overflow: hidden !important;
}

.nuprc-grid-host .rz-grid-table {
    background: var(--l-ffffff) !important;
}

.nuprc-grid-host .rz-column-header {
    background: var(--l-f8fafc) !important;
    border-bottom: 1px solid var(--l-e2e8f0) !important;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* For paged (non-virtual) grids: remove rz-data-grid-data as a vertical scroll
   container so thead { sticky; top:0 } anchors to .page-body instead.
   overflow-y:clip (unlike hidden) does NOT create a CSS scroll container per spec,
   so horizontal overflow and virtual grids are unaffected. */
.nuprc-grid-host:not(.nuprc-grid-virtual) .rz-data-grid-data {
    overflow: clip !important;
}

.nuprc-grid-host:not(.nuprc-grid-virtual) .rz-datatable {
    overflow: visible;
}

.nuprc-grid-host .rz-column-title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

.nuprc-grid-host .rz-data-row td {
    background: var(--l-ffffff) !important;
    color: var(--l-1f2937) !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
    font-size: 0.875rem !important;
}

/* Radzen wraps cell text in .rz-cell-data, which carries its own explicit
   color (var(--rz-grid-cell-color), near-white in the dark theme) -- that
   beats the inherited color from .rz-data-row td above, however !important
   that inherited rule is. Target it directly. */
.nuprc-grid-host .rz-data-row td .rz-cell-data {
    color: var(--l-1f2937) !important;
}

/* RadzenDataGrid's built-in "no records" row (.rz-datatable-emptymessage,
   inside .rz-datatable-emptymessage-row) has no explicit color in Radzen's
   own default.css, so it inherits body's dark-theme color (var(--text),
   near-white) -- invisible against the forced-white grid box above. Same
   root cause as .rz-cell-data; same light-theme token reused here. */
.nuprc-grid-host .rz-datatable-emptymessage-row .rz-datatable-emptymessage,
.nuprc-grid-host .rz-datatable-emptymessage {
    color: var(--l-1f2937) !important;
}

.nuprc-grid-host .rz-data-row:nth-child(even) td {
    background: var(--l-f8fafc) !important;
}

.nuprc-grid-host .rz-data-row:hover td {
    background: #eff6ff !important;
    color: var(--l-1f2937) !important;
}

.nuprc-grid-clickable .rz-data-row {
    cursor: pointer;
}

.nuprc-grid-host .rz-data-row td a {
    color: var(--l-1f2937) !important;
    font-weight: var(--nuprc-grid-link-weight) !important;
    text-decoration: none !important;
}

.nuprc-grid-host .rz-data-row td a:hover {
    color: #2563eb !important;
    text-decoration: underline !important;
}

.nuprc-grid-host .rz-pager {
    background: var(--l-f8fafc) !important;
    border-top: 1px solid var(--l-e2e8f0) !important;
    color: var(--l-374151) !important;
}

.nuprc-grid-host .rz-state-active {
    background: #2563eb !important;
    color: var(--l-ffffff) !important;
    border-radius: 4px !important;
}

.nuprc-grid-host .rz-pager .rz-pager-item:has(.rz-pager-prev) {
    margin-inline-end: 0 !important;
}

.nuprc-grid-host .rz-pager .rz-pager-item:has(.rz-pager-next) {
    margin-inline-start: 0 !important;
}

/* Future: filter-row selectors (.rz-filter-row, .rz-filterdescriptor)
   go here when AllowFiltering is first enabled on any grid. */

/* ── Radzen DropDown -- dark theme fix ──────────────────────────────────────
   Radzen dropdown popups render at body level outside the component tree.
   Scoped CSS cannot reach them. These global selectors restore legible
   dark-theme colours for all RadzenDropDown instances on dark pages.        */

.rz-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
}

.rz-dropdown .rz-dropdown-label {
    color: var(--text) !important;
    background: transparent !important;
}

.rz-dropdown .rz-dropdown-trigger {
    color: var(--text-muted) !important;
}

.rz-dropdown:hover,
.rz-dropdown.rz-state-focused {
    border-color: var(--accent) !important;
}

/* Popup panel -- rendered at body level */
.rz-popup .rz-dropdown-panel,
.rz-dropdown-panel {
    background: #ffffff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.12) !important;
}

.rz-dropdown-panel .rz-dropdown-item {
    color: var(--l-1f2937) !important;
    background: #ffffff !important;
    font-size: 0.875rem !important;
}

.rz-dropdown-panel .rz-dropdown-item:hover,
.rz-dropdown-panel .rz-dropdown-item.rz-state-highlight {
    background: #f0f4ff !important;
    color: var(--l-1f2937) !important;
}

.rz-dropdown-panel .rz-dropdown-item.rz-state-selected {
    background: var(--accent) !important;
    color: var(--l-ffffff) !important;
}

/* ── Filter popup (CheckBoxList) ───────────────────── */
.rz-filter-menu,
.rz-datagrid-menu,
.rz-popup:has(.rz-filter-checkboxlist) {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
    color: var(--text) !important;
}

.rz-filter-search input,
.rz-filter-search-content input {
    background: var(--bg) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    border-radius: 4px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.rz-filter-checkboxlist {
    background: var(--surface) !important;
    color: var(--text) !important;
}

.rz-checkbox-list-item {
    color: var(--text) !important;
    font-size: 0.8125rem !important;
    padding: 0.25rem 0.75rem !important;
}

.rz-checkbox-list-item:hover {
    background: var(--sidebar-active-bg) !important;
}

.rz-checkbox-box {
    background: var(--bg) !important;
    border-color: var(--border) !important;
}

.rz-checkbox.rz-state-checked .rz-checkbox-box {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.rz-filter-menu-buttons,
.rz-datagrid-menu-buttons {
    display: flex !important;
    gap: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    border-top: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.rz-filter-menu-buttons button,
.rz-datagrid-menu-buttons button {
    font-size: 0.8125rem !important;
    border-radius: 4px !important;
}

/* ── Filter popup (Radzen 5.9.9 class names) ───────── */
.rz-grid-filter,
.rz-datafilter {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--text-muted) !important;
}

.rz-datafilter-item,
.rz-chkbox-label,
.rz-checkbox-list-vertical label {
    color: var(--text) !important;
}

.rz-chkbox-box {
    background: var(--bg) !important;
    border-color: var(--text-muted) !important;
}

.rz-chkbox-checked .rz-chkbox-box,
.rz-chkbox-box.rz-state-active {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
}

.rz-grid-filter-buttons button {
    background: var(--bg) !important;
    color: var(--text) !important;
    border: 1px solid var(--text-muted) !important;
}

/* Placeholder text */
.rz-dropdown .rz-placeholder {
    color: var(--text-muted) !important;
}

.rz-grid-table .rz-state-highlight td,
.rz-grid-table .rz-state-highlight td a {
    color: #1a2332 !important;
}

/* ── Page toolbar controls (PageFrame Toolbar slot) ───────────────────
   All toolbar control text is sourced from var(--text).                */
.rz-dropdown.nuprc-toolbar-control {
    min-width: 180px;
    background: #ffffff !important;
    border: 1px solid #e8edf2 !important;
    border-radius: 6px !important;
}

.rz-dropdown.nuprc-toolbar-control .rz-dropdown-label,
.rz-dropdown.nuprc-toolbar-control .rz-placeholder {
    color: var(--l-1f2937) !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    opacity: 1 !important;
}

.rz-dropdown.nuprc-toolbar-control .rz-dropdown-trigger,
.rz-dropdown.nuprc-toolbar-control .rz-dropdown-clear-icon {
    color: var(--l-57606a) !important;
}

.filters .rz-dropdown-clear-icon {
    opacity: 1 !important;
    color: white !important;
    font-size: 1rem !important;
}

/* Catalogue row colouring by licence class */
.nuprc-grid-host .row-pel td { background-color: rgba(99, 179, 237, 0.12) !important; }
.nuprc-grid-host .row-pel:nth-child(even) td { background-color: rgba(99, 179, 237, 0.18) !important; }
.nuprc-grid-host .row-ppl td { background-color: rgba(104, 211, 145, 0.12) !important; }
.nuprc-grid-host .row-ppl:nth-child(even) td { background-color: rgba(104, 211, 145, 0.18) !important; }
.nuprc-grid-host .row-pml td { background-color: rgba(246, 173, 85, 0.12) !important; }
.nuprc-grid-host .row-pml:nth-child(even) td { background-color: rgba(246, 173, 85, 0.18) !important; }
.nuprc-grid-host .row-opl td { background-color: rgba(252, 129, 74, 0.12) !important; }
.nuprc-grid-host .row-opl:nth-child(even) td { background-color: rgba(252, 129, 74, 0.18) !important; }
.nuprc-grid-host .row-oml td { background-color: rgba(183, 148, 244, 0.12) !important; }
.nuprc-grid-host .row-oml:nth-child(even) td { background-color: rgba(183, 148, 244, 0.18) !important; }