/* ── Executive Ledger: minimal overrides ── */

/* Hero KPI card: left accent + ambient shadow */
.kpi-hero-card {
    height: 100%;
    border-left: 8px solid var(--mud-palette-primary);
    border-radius: 0.75rem;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(26, 28, 28, 0.04);
}

/* Secondary KPI card: tonal background with hover lift */
.kpi-secondary-card {
    height: 100%;
    border-radius: 0.75rem;
    background: #f3f3f3;
    transition: background-color 0.2s ease;
}
.kpi-secondary-card:hover {
    background: #ffffff;
}

/* Ranked horizontal bar list (Top-N categories with long labels). Name left at
   full width, proportional brand bar in the middle, value right — no rotated
   axis labels. */
.hbar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.hbar-label {
    flex: 0 0 40%;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
}
.hbar-track {
    flex: 1 1 auto;
    height: 0.75rem;
    background: #f3f3f3;
    border-radius: 0.375rem;
    overflow: hidden;
}
.hbar-fill {
    height: 100%;
    min-width: 2px;
    background: var(--mud-palette-primary);
    border-radius: 0.375rem;
    transition: width 0.3s ease;
}
.hbar-value {
    flex: 0 0 2.5rem;
    text-align: right;
    font-weight: 700;
    font-size: 0.875rem;
}

/* Dashboard chart axis/category labels — MudChart's default SVG text is tiny
   once the chart is scaled into the card. MudChart sets font-size inline, so
   !important is required to override it. Scoped to the dashboard so other
   charts (e.g. Analysis) keep their defaults. Values are SVG user units that
   scale with the chart's viewBox. */
.dashboard-charts .mud-chart svg text,
.dashboard-charts .mud-charts-xaxis,
.dashboard-charts .mud-charts-yaxis {
    font-size: 32px !important;
}

/* Quick actions dark bar */
.quick-actions-bar {
    background: #2f3131;
    border-radius: 0.75rem;
}

/* Gradient accent card */
.gradient-card {
    background: linear-gradient(135deg, #6c181d 0%, #8b2f31 100%);
    border-radius: 0.75rem;
}

/* Status chip dot */
.status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
}
.status-dot--pulse {
    animation: pulse 2s infinite;
}

/* Priority badge */
.priority-badge {
    display: inline-flex;
    padding: 0.25rem 0.75rem;
    border-radius: 0.125rem;
    font-size: 0.625rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

/* Table row hover slide */
.campaign-row:hover {
    transform: translateX(4px);
}

/* Soften framework borders */
.mud-appbar {
    box-shadow: 0 1px 3px rgba(26, 28, 28, 0.06) !important;
}
.mud-drawer {
    border-right: none !important;
}

/* ── PBC-Service brand: AppBar logo overlay ──
   Foundation's IdentityMainLayout exposes no BrandTemplate slot. The PBC-Service
   logo is injected as the leading flex child of the toolbar via ::before so it
   sits inside the gutter, vertically centered, before the title text. Scoped to
   the top header so the bottom footer (footer.mud-appbar) stays clean. */
header.mud-appbar {
    min-height: 80px;
}
header.mud-appbar > .mud-toolbar {
    min-height: 80px;
    align-items: center;
}
header.mud-appbar > .mud-toolbar::before {
    content: "";
    display: block;
    width: 148px;             /* ~2.3:1 aspect (logo intrinsic 753.75x327.75) at 64px height */
    height: 64px;
    margin: 8px 16px;
    background-image: url('/img/pbc-logo.svg');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    flex-shrink: 0;
}

/* Logo SVG is black-on-transparent. Force the top AppBar to a light background
   in both themes so the logo stays legible until a dark variant is supplied.
   Footer keeps its theme default. Text color is left to the theme
   (AppbarText) so Foundation defaults are not overridden. */
.mud-theme-dark header.mud-appbar,
header.mud-appbar {
    background-color: #ffffff !important;
}

/* Brand headline ("Security Dashboard") in primary color to match the rest
   of the system's accent palette. */
header.mud-appbar > .mud-toolbar .mud-typography,
header.mud-appbar > .mud-toolbar h1,
header.mud-appbar > .mud-toolbar h2,
header.mud-appbar > .mud-toolbar h3,
header.mud-appbar > .mud-toolbar h4,
header.mud-appbar > .mud-toolbar h5,
header.mud-appbar > .mud-toolbar h6 {
    color: var(--mud-palette-primary);
}

/* Sync MudBlazor's layout offset with the taller (80px) AppBar so the
   permanent drawer items are no longer hidden behind the header. */
.mud-layout {
    --mud-appbar-height: 80px;
}
aside.mud-drawer.mud-drawer-fixed {
    top: 80px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── Blazor defaults ── */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}