:root {
    --font-sans: 'Geist', system-ui, -apple-system, sans-serif;
    --font-mono: 'Geist Mono Variable', 'Geist Mono', ui-monospace, monospace;
    --background: #081b34;
    --foreground: #f4f6f7;
    --card: #0c294f;
    --card-foreground: #f4f6f7;
    --popover: #0c294f;
    --popover-foreground: #f4f6f7;
    --primary: #3da9df;
    --primary-foreground: #ffffff;
    --secondary: #112e54;
    --secondary-foreground: #f4f6f7;
    --muted: #0a2240;
    --muted-foreground: #527692;
    --accent: #0f3360;
    --accent-foreground: #f4f6f7;
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: #1e4e78;
    --input: #1e4e78;
    --ring: #3da9df;
    --chart-1: #3da9df;
    --chart-2: #2d8bbf;
    --chart-3: #1e6e9f;
    --chart-4: #14527a;
    --chart-5: #0d3a5a;
    --sidebar: #081b34;
    --sidebar-foreground: #f4f6f7;
    --sidebar-primary: #3da9df;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #0c294f;
    --sidebar-accent-foreground: #f4f6f7;
    --sidebar-border: #1e4e78;
    --sidebar-ring: #3da9df;
    --font-sans: Inter, sans-serif;
    --font-serif: Source Serif 4, serif;
    --font-mono: JetBrains Mono, monospace;
    --radius: 0.5rem;
    --shadow-x: 0;
    --shadow-y: 1px;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-opacity: 0.1;
    --shadow-color: oklch(0 0 0);
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

.dark {
    --background: #030c17;
    --foreground: oklch(0.9219 0 0);
    --card: #051525;
    --card-foreground: oklch(0.9219 0 0);
    --popover: #051525;
    --popover-foreground: oklch(0.9219 0 0);
    --primary: #3da9df;
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: #071a30;
    --secondary-foreground: oklch(0.9219 0 0);
    --muted: #04101f;
    --muted-foreground: oklch(0.7155 0 0);
    --accent: #09223c;
    --accent-foreground: oklch(0.8823 0.0571 254.1284);
    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: #0a2038;
    --input: #0a2038;
    --ring: #3da9df;
    --chart-1: oklch(0.7137 0.1434 254.6240);
    --chart-2: oklch(0.6231 0.1880 259.8145);
    --chart-3: oklch(0.5461 0.2152 262.8809);
    --chart-4: oklch(0.4882 0.2172 264.3763);
    --chart-5: oklch(0.4244 0.1809 265.6377);
    --sidebar: #030c17;
    --sidebar-foreground: oklch(0.9219 0 0);
    --sidebar-primary: #3da9df;
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: #09223c;
    --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
    --sidebar-border: #0a2038;
    --sidebar-ring: #3da9df;
    --font-sans: Inter, sans-serif;
    --font-serif: Source Serif 4, serif;
    --font-mono: JetBrains Mono, monospace;
    --radius: 0.5rem;
    --shadow-x: 0;
    --shadow-y: 1px;
    --shadow-blur: 3px;
    --shadow-spread: 0px;
    --shadow-opacity: 0.1;
    --shadow-color: oklch(0 0 0);
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);
    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --font-serif: var(--font-serif);
    --radius-sm: calc(var(--radius) - 4px);
    --radius-md: calc(var(--radius) - 2px);
    --radius-lg: var(--radius);
    --radius-xl: calc(var(--radius) + 4px);
    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow: var(--shadow);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);
}

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
}

h1 {
    letter-spacing: -0.025em;
}

/* Override BbAlert background to use card surface — keeps AccentBorder colour context */
.sr-alert-card { background-color: var(--card) !important; }

/* Card depth — atmospheric blue glow */
[data-slot="card"] {
    box-shadow: 0 0 0 1px rgba(61, 169, 223, 0.18), 0 8px 32px rgba(61, 169, 223, 0.10);
    transition: box-shadow 200ms ease, border-color 200ms ease;
}

[role="tab"][data-state="inactive"]:hover {
    background-color: var(--muted);
    color: var(--foreground);
    transition: background-color 150ms, color 150ms;
}
[role="tab"] { cursor: pointer; }

/* Tailwind utilities absent from blazorblueprint.css (no project build step) */
.overflow-x-auto   { overflow-x: auto; }
.overflow-x-clip   { overflow-x: clip; }
.overflow-x-scroll { overflow-x: scroll; }
.grid-cols-3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Opacity-modifier variants (JIT — must be hand-declared without a build step) */
.bg-primary\/5              { background-color: rgba(61, 169, 223, 0.05); }
.bg-primary\/10             { background-color: rgba(61, 169, 223, 0.10); }
.hover\:bg-muted\/40:hover  { background-color: rgba(10, 34, 64, 0.40); }
.hover\:bg-muted\/30:hover  { background-color: rgba(10, 34, 64, 0.30); }

/* Arbitrary-value font size */
.text-\[10px\] { font-size: 0.625rem; }

/*
 * Scrollable table wrapper.
 * Forces the direct w-full child (BbDataTable root) to expand to the table's
 * natural content width instead of snapping to the viewport width.
 * This keeps BbDataTable's inner bordered div aligned with the table right edge
 * so it scrolls cleanly without the "orphaned border" artifact.
 */
.table-scroll {
    overflow-x: auto;
}
/* The scrollable table grows to its content width (min. the container width) so its
   right border/edge extends to the end of the content and scrolls with it, instead of
   staying pinned at the original viewport edge (the "orphaned border" artifact). Long
   text is bounded per-column (e.g. a max-w-* on the description cell) so this only kicks
   in when the remaining columns genuinely need more than the container width. */
.table-scroll > .w-full {
    width: max-content;
    min-width: 100%;
}

/* Responsive key-value detail grid */
.sr-detail-grid {
    display: grid;
    column-gap: 1rem;
    row-gap: 0.625rem;
    grid-template-columns: auto 1fr;
    font-size: 0.875rem;
}
@media (min-width: 640px) {
    .sr-detail-grid {
        column-gap: 1.5rem;
        grid-template-columns: 130px 1fr;
    }
}

code, pre, .mono {
    font-family: var(--font-mono);
}

/* Textarea background must match other input fields */
textarea {
    background-color: var(--background);
    color: var(--foreground);
}

.loading-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--background);
    gap: 1rem;
}

.loading-spinner {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--muted-foreground);
    animation: bb-spin 0.75s linear infinite;
}

.loading-label {
    color: var(--muted-foreground);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    margin: 0;
}

/* Hidden — used only by Blazor runtime internally */
.loading-progress {
    display: none !important;
}

@keyframes bb-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

#blazor-error-ui {
    background-color: var(--background);
    border-top: 1px solid var(--destructive);
    color: var(--foreground);
    bottom: 0;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    align-items: center;
    gap: 0.5rem;
}

#blazor-error-ui .error-icon {
    color: var(--destructive);
    flex-shrink: 0;
    vertical-align: middle;
    margin-right: 0.25rem;
}

#blazor-error-ui .reload {
    color: var(--primary);
    text-decoration: underline;
    margin-left: 0.25rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--muted-foreground);
}

/* -----------------------------------------------------------------------
   Status / Risk / Action badge colors — BbBadge handles layout/shape
   ----------------------------------------------------------------------- */

/* Report Status */
.sr-badge-submitted     { background-color: #3b82f6 !important; color: #ffffff !important; }
.sr-badge-review        { background-color: #d97706 !important; color: #ffffff !important; }
.sr-badge-investigation { background-color: #ea580c !important; color: #ffffff !important; }
.sr-badge-closed        { background-color: #059669 !important; color: #ffffff !important; }

/* Risk Level */
.sr-badge-negligible   { background-color: #059669 !important; color: #ffffff !important; }
.sr-badge-low          { background-color: #3b82f6 !important; color: #ffffff !important; }
.sr-badge-medium       { background-color: #d97706 !important; color: #ffffff !important; }
.sr-badge-high         { background-color: #ea580c !important; color: #ffffff !important; }
.sr-badge-critical     { background-color: #dc2626 !important; color: #ffffff !important; }
.sr-badge-unclassified { background-color: #64748b !important; color: #ffffff !important; }

/* Action Status */
.sr-badge-open                 { background-color: #3b82f6 !important; color: #ffffff !important; }
.sr-badge-inprogress           { background-color: #d97706 !important; color: #ffffff !important; }
.sr-badge-pendingverification  { background-color: #f59e0b !important; color: #ffffff !important; }
.sr-badge-completed            { background-color: #059669 !important; color: #ffffff !important; }
.sr-badge-rejected             { background-color: #e11d48 !important; color: #ffffff !important; }
.sr-badge-overdue              { background-color: #dc2626 !important; color: #ffffff !important; }

/* KPI stat card — accent top border */
.sr-kpi-card {
    border-top: 2px solid #3da9df !important;
}

/* File upload drop zone — drag-active state */
.sr-dropzone-active {
    border-color: var(--primary) !important;
    background-color: rgba(61, 169, 223, 0.10) !important;
}


/* -----------------------------------------------------------------------
   ApexCharts — responsive width + dark mode
   ----------------------------------------------------------------------- */

.selectable-rows tbody tr {
    cursor: pointer;
    transition: background-color 150ms ease;
}

.selectable-rows tbody tr:hover {
    background-color: rgba(61, 169, 223, 0.07) !important;
}

/* Sidebar — pin footer to viewport bottom */
aside[data-variant="sidebar"] {
    height: 100dvh !important;
    background: linear-gradient(180deg, #0d2244 0%, #081b34 60%) !important;
}

[data-sidebar="content"] {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}

.apexcharts-canvas,
.apexcharts-canvas svg {
    max-width: 100% !important;
}

/* Applied unconditionally — :root carries a dark palette so chart text must
   always use theme variables, not ApexCharts' default light-mode grey. */
.apexcharts-canvas svg text,
.apexcharts-canvas .apexcharts-text {
    fill: var(--foreground) !important;
}

.apexcharts-legend-text {
    color: var(--foreground) !important;
}

.apexcharts-gridline {
    stroke: var(--border) !important;
}

.apexcharts-tooltip,
.apexcharts-tooltip.apexcharts-theme-light {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--card-foreground) !important;
}

.apexcharts-tooltip-title {
    background: var(--muted) !important;
    border-bottom-color: var(--border) !important;
    color: var(--muted-foreground) !important;
}

.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--popover-foreground) !important;
}

/* .dark overrides — variables resolve identically in dark mode */
.dark .apexcharts-canvas svg text,
.dark .apexcharts-canvas .apexcharts-text {
    fill: var(--foreground) !important;
}

.dark .apexcharts-legend-text {
    color: var(--foreground) !important;
}

.dark .apexcharts-gridline {
    stroke: var(--border) !important;
}

.dark .apexcharts-tooltip,
.dark .apexcharts-tooltip.apexcharts-theme-light {
    background: var(--card) !important;
    border-color: var(--border) !important;
    color: var(--card-foreground) !important;
}

.dark .apexcharts-tooltip-title {
    background: var(--muted) !important;
    border-bottom-color: var(--border) !important;
    color: var(--muted-foreground) !important;
}

.dark .apexcharts-xaxistooltip,
.dark .apexcharts-yaxistooltip {
    background: var(--popover) !important;
    border-color: var(--border) !important;
    color: var(--popover-foreground) !important;
}

/* -----------------------------------------------------------------------
   Guided Tour (Driver.js) — restyled to match the app's popover/card
   surface instead of Driver's default white theme. Class names are
   Driver.js's own (driver-popover-*); the "sr-guided-tour" class is passed
   via popoverClass so this scoping only ever affects our tours.
   ----------------------------------------------------------------------- */

.sr-guided-tour.driver-popover {
    background: var(--popover);
    color: var(--popover-foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
    padding: 1rem;
}

.sr-guided-tour .driver-popover-title {
    color: var(--popover-foreground);
    font-size: 0.9375rem;
    font-weight: 600;
}

.sr-guided-tour .driver-popover-description {
    color: var(--muted-foreground);
    font-size: 0.875rem;
}

.sr-guided-tour .driver-popover-progress-text {
    color: var(--muted-foreground);
    font-size: 0.75rem;
}

.sr-guided-tour .driver-popover-footer button {
    background: var(--primary);
    color: var(--primary-foreground);
    border: none;
    border-radius: calc(var(--radius) - 2px);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    text-shadow: none;
    padding: 0.375rem 0.75rem;
}

.sr-guided-tour .driver-popover-footer button:hover {
    background: var(--primary);
    opacity: 0.9;
}

.sr-guided-tour .driver-popover-footer .driver-popover-prev-btn {
    background: var(--secondary);
    color: var(--secondary-foreground);
}

.sr-guided-tour .driver-popover-close-btn {
    color: var(--muted-foreground);
}

.sr-guided-tour .driver-popover-arrow-side-top.driver-popover-arrow {
    border-top-color: var(--popover);
}
.sr-guided-tour .driver-popover-arrow-side-bottom.driver-popover-arrow {
    border-bottom-color: var(--popover);
}
.sr-guided-tour .driver-popover-arrow-side-left.driver-popover-arrow {
    border-left-color: var(--popover);
}
.sr-guided-tour .driver-popover-arrow-side-right.driver-popover-arrow {
    border-right-color: var(--popover);
}

.driver-active-element {
    border-radius: calc(var(--radius) - 2px);
}