body {
    /*    font-size: .875rem;*/
}

*, ::after, ::before {
    box-sizing: border-box !important /*since Radzen V5*/
}


#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

.rz-dialog {
    display: flex !important;
    flex-direction: column !important;
}

.rz-dialog-content {
    flex: 1 !important;
    min-height: 0 !important;
}

.rz-treenode-content {
    margin: 0 !important;
}

.viewname {
    font-size: 0.9em;
}

/*X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .viewname {
        font-size: 1.1em;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}

li.borderless {
    border-top: 0 none;
    border-bottom: 0 none;
}

/* Classic look (Dashboard.Look = Classic, and the base for all looks): flat card with an
   accent line on top. The tint comes from --item-bg (inline, per item). */
.card-accent {
    background-color: var(--item-bg, #ffffff);
    border-top: 3px solid var(--item-accent, #6c757d) !important;
}

.viewitem-header {
    background: color-mix(in srgb, var(--item-accent, #6c757d) 12%, transparent);
    margin: -0.5rem -0.5rem 0.25rem -0.5rem;
    padding: 0.3rem 0.5rem;
}

@media (min-width: 768px) {
    .viewitem-header {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Glass looks (.dash-glass + .look-*): the cards frost the page backdrop (.dash-glass puts a
   fixed navy gradient on the body). Frosted tints the glass with the item's own colour, the
   dark looks (clear / navy / mist) use fixed translucent fills and white text. */
body:has(.dash-stage.dash-glass) {
    --tb-navy: #050a30;
    --tb-blue: #0b6fc2;
    --tb-orange: #f59e2b;
    background: #050a30; /* base colour behind the fixed .dash-backdrop layer (overscroll, footer) */
    min-height: 100vh;
}

/* Backdrop layer of a glass dashboard: fixed behind the page, so the cards' backdrop-filter
   frosts it. The same .dash-bg-* classes paint the item editor preview. */
.dash-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.dash-bg-navy {
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(11, 111, 194, .85), transparent 70%),
        radial-gradient(ellipse 60% 45% at 0% 100%, rgba(245, 158, 43, .22), transparent 70%),
        linear-gradient(160deg, #050a30 0%, #0a1a4a 55%, #0b2a63 100%);
}

.dash-bg-midnight {
    background:
        radial-gradient(ellipse 60% 45% at 85% 0%, rgba(59, 90, 190, .45), transparent 70%),
        linear-gradient(160deg, #02040f 0%, #070d24 60%, #0b1434 100%);
}

.dash-bg-ocean {
    background:
        radial-gradient(ellipse 70% 55% at 100% 0%, rgba(34, 211, 238, .50), transparent 70%),
        radial-gradient(ellipse 60% 45% at 0% 100%, rgba(52, 211, 153, .30), transparent 70%),
        linear-gradient(160deg, #031a2e 0%, #06384f 55%, #0b5470 100%);
}

.dash-bg-dusk {
    background:
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(245, 158, 43, .45), transparent 70%),
        radial-gradient(ellipse 60% 45% at 100% 0%, rgba(167, 139, 250, .40), transparent 70%),
        linear-gradient(160deg, #150d38 0%, #2b1856 55%, #3e1f63 100%);
}

.dash-bg-image {
    background-color: #050a30;
    background-size: cover;
    background-position: center;
}

body:has(.dash-stage.dash-glass) footer,
body:has(.dash-stage.dash-glass) footer a {
    color: rgba(255, 255, 255, .6) !important;
    border-color: rgba(255, 255, 255, .15) !important;
}

.dash-glass {
    min-height: 70vh;
    padding: 1rem;
}

.dash-glass .vi-glass .card-accent {
    --glass-radius: 1rem;
    position: relative;
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, .5) !important;
    border-radius: var(--glass-radius) !important;
    box-shadow: 0 8px 28px rgba(15, 30, 60, .22), inset 0 1px 0 rgba(255, 255, 255, .6) !important;
}

/* Title strip: negative margins stretch it over the card-body padding (px-2 pt-2,
   px-md-3 at >=768px) so it spans the full card width. */
.dash-glass .vi-glass .viewitem-header {
    border-radius: calc(var(--glass-radius, 1rem) - 1px) calc(var(--glass-radius, 1rem) - 1px) 0 0;
    padding: 0.4rem 0.5rem 0.3rem;
}

@media (min-width: 768px) {
    .dash-glass .vi-glass .viewitem-header {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Polish of the glass looks: lighter, bigger numbers with a small unit, softer labels, glowing
   "on" LEDs and an orange edge while a card is hovered. */
.dash-glass .vi-glass .vd-value {
    font-weight: 300 !important; /* beats the fw-normal class on the element */
    letter-spacing: -.01em;
}

.dash-glass .vi-glass .vd-unit {
    font-size: .55em;
    font-weight: 400;
    opacity: .7;
    margin-left: .1em;
}

.dash-glass .vi-glass .vd-name .fw-semibold {
    font-weight: 500 !important;
}

.dash-glass .vi-glass .status-led.on {
    box-shadow: 0 0 10px 1px color-mix(in srgb, var(--led-color) 70%, transparent);
}

.dash-glass .vi-glass:hover .card-accent {
    border-color: rgba(245, 158, 43, .6) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(245, 158, 43, .25) !important;
}

/* Item editor "Live Preview": a small stage of its own, since the dialog sits outside the page backdrop. */
.look-preview-stage {
    --tb-navy: #050a30;
    --tb-orange: #f59e2b;
    padding: .75rem !important;
    min-height: 0;
}

.dash-glass .dash-group-title {
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
    font-weight: 300;
    letter-spacing: .02em;
}

.dash-glass .dash-tabs { background: transparent; }

.dash-glass .dash-tab {
    color: #fff;
    border-color: rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.dash-glass .dash-tab.active {
    background: var(--tb-orange);
    border-color: var(--tb-orange);
    color: var(--tb-navy);
}

@media (max-width: 575.98px) {
    .dash-glass { padding: .5rem; }
}

/* Frosted: light milk glass, dark text. */
.look-frosted .card-accent {
    background-color: color-mix(in srgb, var(--item-bg, #ffffff) 70%, transparent) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 55%) !important;
}

.look-frosted .viewitem-header {
    background: linear-gradient(90deg, rgba(10, 26, 74, .16), rgba(10, 26, 74, .04));
}

/* Clear / Navy / Mist: white text, so Bootstrap and Radzen text variables are flipped
   for everything inside the card (lists, muted text, chart axes, legends, gauges). */
.look-clear .card-accent,
.look-navy .card-accent,
.look-mist .card-accent {
    color: #fff;
    --bs-body-color: #fff;
    --bs-card-color: #fff;
    --bs-card-title-color: #fff;
    --bs-list-group-color: #fff;
    --bs-list-group-border-color: rgba(255, 255, 255, .15);
    --bs-secondary-color: rgba(255, 255, 255, .7);
    --bs-border-color: rgba(255, 255, 255, .18);
    --rz-text-color: #fff;
    --rz-text-secondary-color: rgba(255, 255, 255, .7);
    --rz-chart-axis-color: rgba(255, 255, 255, .25);
    --rz-chart-axis-label-color: rgba(255, 255, 255, .85);
    --rz-chart-marker-stroke: rgba(5, 10, 48, .9);
    background-image: none !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .25) !important;
}

/* Control bar (buttons, setpoint / enum / colour inputs) on the dark glass: Bootstrap's grey
   outline buttons and white form fields vanish there, so they get light outlines and
   translucent fills. */
.look-clear .control-bar .btn-outline-secondary,
.look-navy .control-bar .btn-outline-secondary,
.look-mist .control-bar .btn-outline-secondary {
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .18);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .8);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(245, 158, 43, .35);
    --bs-btn-active-border-color: #f59e2b;
    --bs-btn-disabled-color: rgba(255, 255, 255, .55);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(255, 255, 255, .25);
}

.look-clear .control-bar .form-control,
.look-navy .control-bar .form-control,
.look-mist .control-bar .form-control,
.look-clear .control-bar .form-select,
.look-navy .control-bar .form-select,
.look-mist .control-bar .form-select,
.look-clear .control-bar .input-group-text,
.look-navy .control-bar .input-group-text,
.look-mist .control-bar .input-group-text {
    color: #fff;
    background-color: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .35);
    color-scheme: dark;
}

.look-clear .control-bar .form-select,
.look-navy .control-bar .form-select,
.look-mist .control-bar .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.look-clear .control-bar .form-select option,
.look-navy .control-bar .form-select option,
.look-mist .control-bar .form-select option {
    color: #212529;
    background-color: #fff;
}

.look-clear .control-bar .form-control:focus,
.look-navy .control-bar .form-control:focus,
.look-mist .control-bar .form-control:focus,
.look-clear .control-bar .form-select:focus,
.look-navy .control-bar .form-select:focus,
.look-mist .control-bar .form-select:focus {
    background-color: rgba(255, 255, 255, .2);
    border-color: #f59e2b;
    box-shadow: 0 0 0 .2rem rgba(245, 158, 43, .25);
}

.look-clear .control-bar .form-control:disabled,
.look-navy .control-bar .form-control:disabled,
.look-mist .control-bar .form-control:disabled,
.look-clear .control-bar .form-select:disabled,
.look-navy .control-bar .form-select:disabled,
.look-mist .control-bar .form-select:disabled {
    color: rgba(255, 255, 255, .55);
    background-color: rgba(255, 255, 255, .06);
}

/* Chart value chips are white rects; with white label text they need a dark fill instead. */
.look-clear .rz-series-data-label-chip,
.look-navy .rz-series-data-label-chip,
.look-mist .rz-series-data-label-chip {
    fill: rgba(5, 10, 48, .85);
    stroke: rgba(255, 255, 255, .3);
}

.look-clear .card-accent { background-color: rgba(255, 255, 255, .10) !important; border-color: rgba(255, 255, 255, .22) !important; }
.look-clear .viewitem-header { background: rgba(255, 255, 255, .08); }

.look-navy .card-accent { background-color: rgba(5, 10, 48, .55) !important; border-color: rgba(255, 255, 255, .14) !important; }
.look-navy .viewitem-header { background: rgba(245, 158, 43, .18); color: #ffd28a; }
.look-navy .viewitem-header .card-title { color: #ffd28a; }

.look-mist .card-accent { background-color: rgba(235, 242, 255, .40) !important; border-color: rgba(255, 255, 255, .45) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.look-mist .viewitem-header { background: rgba(255, 255, 255, .12); }

/* Dashboard layout.
   Level 1 (.dash-groups): groups flow in a wrapping flex row. --w is the group's
   GroupWidth weight (1..3); it is both the grow factor and the multiplier of the
   per-breakpoint basis (--unit), so a Double group is twice as wide as a Normal one
   and a group that no longer fits simply wraps to its own line.
   Level 2 (.dashgrid): the items of a group sit in a wrapping flex row; --item-min is
   the narrowest a tile may get before the row drops a tile. Tiles grow to share the
   row, so a tile that ends up alone in its line (e.g. before a full-width chart)
   spans the whole group instead of leaving a gap. */
.dash-groups {
    --unit: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.dash-group {
    flex: 1 1 100%;
    min-width: 0;
}

.dashgrid {
    --item-min: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.viewitem-wrap {
    flex: 1 1 min(100%, var(--item-min));
    min-width: 0; /* keep wide chart canvases from blowing up the row */
    container-type: inline-size; /* lets tile content size itself by the tile's width (cqw) */
}

/* ValueDisplay text scales with the tile, not the viewport: 2rem (Bootstrap fs-2) once
   the tile is ~25rem wide, shrinking down to 1.15rem in a narrow one. */
.vd-value { font-size: clamp(1.15rem, 8cqw, 2rem); }
.vd-icon  { font-size: clamp(1.15rem, 8cqw, 2rem); }

.viewitem-wrap .card {
    height: 100%;
}

/* Charts need room: they take a full row instead of a single tile. Any other item
   gets the same via its FullWidth option. */
.viewitem-wide {
    flex-basis: 100%;
}

/* Phones (< 768px): the groups form a swipeable carousel - one group per screen,
   snapping horizontally, with a chip bar (.dash-tabs) as index. From 768px on the
   groups sit side by side again and the bar is hidden. */
.dash-tabs {
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    padding: .25rem 0 .5rem;
    margin-bottom: .25rem;
    scrollbar-width: none;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bs-body-bg, #fff);
}

.dash-tabs::-webkit-scrollbar { display: none; }

.dash-tab {
    flex: 0 0 auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 50rem;
    background: transparent;
    color: inherit;
    padding: .2rem .8rem;
    font-size: .9rem;
    white-space: nowrap;
}

.dash-tab.active {
    background: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

@media (max-width: 767.98px) {
    .dash-groups {
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 0;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .dash-groups::-webkit-scrollbar { display: none; }

    .dash-group {
        flex: 0 0 100%;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 0 .25rem; /* replaces the gap so a page is exactly the strip width */
    }
}

@media (min-width: 768px) {
    .dash-tabs { display: none; }
}

/* xs (< 576px): one tile per line - the defaults above. */

@media (min-width: 576px) {
    .dashgrid { --item-min: 15rem; }
}

@media (min-width: 768px) {
    .dash-groups { --unit: 15rem; }
    .dash-group { flex: var(--w) 1 calc(var(--w) * var(--unit)); }
}

@media (min-width: 992px) {
    .dash-groups { --unit: 18rem; }
}

@media (min-width: 1200px) {
    .dash-groups { --unit: 20rem; }
    .dashgrid { --item-min: 16rem; }
}

/* Hover affordances on dashboard view items: card lifts slightly, and a drag
   handle / edit button fade in at the top corners. */
.viewitem-wrap .card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.viewitem-wrap:hover .card {
    transform: translateY(-2px);
}

.viewitem-edit-btn,
.viewitem-add-control-btn,
.viewitem-drag-handle {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s ease;
    line-height: 1.2;
    font-size: 0.8rem;
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
}

.viewitem-edit-btn {
    top: -8px;
    right: -2px;
    padding: 0.05rem 0.35rem;
}

.viewitem-add-control-btn {
    top: -8px;
    right: 30px;
    padding: 0.05rem 0.4rem;
    white-space: nowrap;
}

.viewitem-drag-handle {
    top: -8px;
    left: 2px;
    padding: 0.05rem 0.2rem;
    cursor: grab;
    color: #6c757d;
}

.viewitem-wrap:hover .viewitem-edit-btn,
.viewitem-wrap:hover .viewitem-add-control-btn,
.viewitem-wrap:hover .viewitem-drag-handle {
    opacity: 1;
}

/* In edit mode the floating drag/edit/add-control buttons straddle the card's top edge and
   would cover the chart's own header buttons (Expand): push the header below them. */
.viewitem-wrap:has(> .viewitem-edit-btn) .chart-head {
    padding-top: 0.75rem;
}

/* While a dialog is open, the page behind it is covered by the mask anyway: drop the costly
   per-card blur (every card re-blurs the fixed backdrop on each dialog repaint) and the
   hover lift. This is what makes opening/closing dialogs sluggish on phones. */
body:has(.rz-dialog-mask) .dash-glass .vi-glass .card-accent,
body:has(.rz-dialog-mask) .dash-glass .dash-tab {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

body:has(.rz-dialog-mask) .viewitem-wrap:hover .card {
    transform: none;
}

/* Touch devices: a lighter blur is visually near-identical but far cheaper to composite. */
@media (hover: none) {
    .dash-glass .vi-glass .card-accent {
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
    }
}

/* Account Widget & Navigation Styling */
.dropdown-item {
    transition: background-color 0.2s ease;
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Logout button in dropdown */
.dropdown-item form {
    margin: 0;
}

.dropdown-item form button {
    text-align: left;
}

.dropdown-item form button i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Navbar responsive */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
    }
}

/* Account widget mobile adjustments */
@media (max-width: 575px) {
    .d-flex.gap-2 {
        gap: 0.5rem !important;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
    }
}
/* Status LED (StatusLedView): colour and size come from the component via CSS variables. */
.status-led {
    margin: 0 auto;
    flex-shrink: 0;
    border-radius: 50%;
    width: var(--led-size, 16px);
    height: var(--led-size, 16px);
    background-color: var(--led-color, #6c757d);
}
.status-led.blink { animation: status-led-blink 0.5s infinite; }
@keyframes status-led-blink { 50% { background-color: #aaaaaa; } }

/* Right-hand part of a ValueDisplay / StateView row: takes the space between name and value for the sparkline. */
.vd-row-end { flex: 1 1 auto; min-width: min-content; justify-content: flex-end; }

/* Name block of a ValueDisplay / StateView row: the only part that gives way (ellipsis) when the row is too narrow,
   so value and side value are never overlapped. */
.vd-name { flex: 0 1 auto; min-width: 0; }

/* Row sparkline (SparklineView): stretches with the row, stroke colour inherits via currentColor. */
.sparkline {
    /* Basis as before; grows into the free space where the parent row stretches (see .vd-row-end). */
    flex: 1 1 clamp(48px, 14cqw, 120px);
    min-width: 48px;
    margin-inline: 0.75rem;
    height: 1.5rem;
    overflow: visible;
}

/* Colour control (ControlBarComponent): inside an input-group Bootstrap squeezes .form-control to
   width 1%, which shrinks the swatch to a sliver. Give the picker a fixed width so the chosen colour shows. */
.control-bar-color .form-control-color {
    flex: 0 0 3rem;
    width: 3rem;
    min-width: 3rem;
}