/* ---------- Monitoring portal: global look (design "Monitoring Portal") ----------
 * Design tokens first. Components use these variables (never literal colours) so light and dark mode follow.
 *   --mon-bg / --mon-surface / --mon-surface-2   page, card, table head / hover
 *   --mon-border / --mon-line / --mon-line-soft  card border, inner separators, table row lines
 *   --mon-text / --mon-text-2 / --mon-muted / --mon-faint   text hierarchy
 *   --mon-chip / --mon-seg                       count pill, segmented control track
 *   --mon-accent / --mon-accent-hover / --mon-accent-bg     indigo accent
 *   --st-<status> (dot/bar colour), --st-<status>-bg (pill background), --st-<status>-fg (pill text)
 *     for up, warning, down, unknown, paused; .st-<status> sets --st / --st-bg / --st-fg.
 */

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/Geist-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Geist";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/Geist-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/GeistMono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Geist Mono";
    font-style: normal;
    font-weight: 400 500;
    font-display: swap;
    src: url("fonts/GeistMono-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --mon-font: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mon-font-mono: "Geist Mono", "Cascadia Code", Consolas, "SFMono-Regular", Menlo, monospace;

    --mon-bg: #f5f5f2;
    --mon-surface: #ffffff;
    --mon-surface-2: #fafaf8;
    --mon-border: #e6e5e1;
    --mon-line: #efeeea;
    --mon-line-soft: #f1f0ec;
    --mon-input-border: #dddcd7;
    --mon-text: #1c1d1f;
    --mon-text-2: #45464a;
    --mon-muted: #6b6c70;
    --mon-faint: #8a8b8f;
    --mon-chip: #f1f0ec;
    --mon-seg: #eceae5;
    --mon-seg-active: #ffffff;
    --mon-hover: #f3f3f0;
    --mon-accent: #3f5bd6;
    --mon-accent-hover: #324bbf;
    --mon-accent-bg: #eef1fc;
    --mon-inverse: #1c1d1f;
    --mon-inverse-hover: #333538;
    --mon-inverse-fg: #ffffff;
    --mon-radius: 12px;
    --mon-radius-sm: 8px;
    --mon-shadow-pop: 0 12px 32px rgba(0, 0, 0, .14);
    --mon-code-bg: #16181b;
    --mon-code-fg: #e8e8e6;

    --st-up: #22a05b;
    --st-warning: #e59a0b;
    --st-down: #de3b40;
    --st-unknown: #9aa0a8;
    --st-paused: #6f8fca;
    --st-up-bg: #e5f3ea;
    --st-warning-bg: #fbf0da;
    --st-down-bg: #fbe7e7;
    --st-unknown-bg: #eeeff1;
    --st-paused-bg: #e7edf7;
    --st-up-fg: #17804a;
    --st-warning-fg: #94600a;
    --st-down-fg: #c42b31;
    --st-unknown-fg: #5b6069;
    --st-paused-fg: #3d5d97;
    --mon-bar-track: #eeede9;
}

.theme-dark {
    --mon-bg: #111214;
    --mon-surface: #1a1b1e;
    --mon-surface-2: #1f2023;
    --mon-border: #2a2c30;
    --mon-line: #26282c;
    --mon-line-soft: #232529;
    --mon-input-border: #36383d;
    --mon-text: #e8e8e6;
    --mon-text-2: #c9cbcf;
    --mon-muted: #9da1a8;
    --mon-faint: #7d8189;
    --mon-chip: #26282c;
    --mon-seg: #232529;
    --mon-seg-active: #34363b;
    --mon-hover: #232529;
    --mon-accent: #7b8ff0;
    --mon-accent-hover: #8fa0f3;
    --mon-accent-bg: rgba(123, 143, 240, .14);
    --mon-inverse: #e8e8e6;
    --mon-inverse-hover: #ffffff;
    --mon-inverse-fg: #16181b;
    --mon-shadow-pop: 0 12px 32px rgba(0, 0, 0, .5);
    --mon-code-bg: #0b0c0e;

    --st-up: #2fb56b;
    --st-warning: #eba42a;
    --st-down: #ea5156;
    --st-unknown: #7f858e;
    --st-paused: #7d9bd3;
    --st-up-bg: rgba(47, 181, 107, .15);
    --st-warning-bg: rgba(235, 164, 42, .15);
    --st-down-bg: rgba(234, 81, 86, .16);
    --st-unknown-bg: rgba(154, 160, 168, .15);
    --st-paused-bg: rgba(125, 155, 211, .16);
    --st-up-fg: #5fd394;
    --st-warning-fg: #f3bf5c;
    --st-down-fg: #f5878b;
    --st-unknown-fg: #b3b8c0;
    --st-paused-fg: #a4bbe6;
    --mon-bar-track: #2a2c30;
}

html, body {
    font-family: var(--mon-font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--mon-bg);
    color: var(--mon-text);
}

h1:focus {
    outline: none;
}

a {
    color: inherit;
}

.mud-typography, .mud-input, .mud-button-root, .mud-table, .mud-tab, .mud-chip, .mud-alert, .mud-list-item-text, .mud-menu-item-text {
    font-family: var(--mon-font);
}

/* ---------- status ---------- */

.st-up { --st: var(--st-up); --st-bg: var(--st-up-bg); --st-fg: var(--st-up-fg); }
.st-warning { --st: var(--st-warning); --st-bg: var(--st-warning-bg); --st-fg: var(--st-warning-fg); }
.st-down { --st: var(--st-down); --st-bg: var(--st-down-bg); --st-fg: var(--st-down-fg); }
.st-unknown { --st: var(--st-unknown); --st-bg: var(--st-unknown-bg); --st-fg: var(--st-unknown-fg); }
.st-paused { --st: var(--st-paused); --st-bg: var(--st-paused-bg); --st-fg: var(--st-paused-fg); }

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--st);
    flex: none;
    vertical-align: middle;
}

.status-dot.pulse {
    animation: st-pulse 2s infinite;
}

@keyframes st-pulse {
    0% { box-shadow: 0 0 0 0 var(--st); }
    70% { box-shadow: 0 0 0 6px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .status-dot.pulse { animation: none; }
}

/* Pill: rounded rectangle, dot + label (design "status badge"). */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px 0 9px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1;
    color: var(--st-fg);
    background: var(--st-bg);
    white-space: nowrap;
    vertical-align: middle;
}

.status-chip .status-dot {
    width: 6px;
    height: 6px;
}

.status-chip.small {
    height: 22px;
    padding: 0 9px 0 8px;
    font-size: 12px;
}

.status-strip {
    border-left: 3px solid var(--st);
}

.status-text {
    color: var(--st-fg);
}

/* Stacked status bar (segments with 2px gaps). */
.counts-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mon-bar-track);
    min-width: 60px;
}

.counts-bar > span {
    display: block;
    height: 100%;
    min-width: 3px;
    background: var(--st);
}

.counts-bar.thick {
    height: 10px;
    border-radius: 5px;
}

.counts-bar.thin {
    height: 5px;
}

.counts-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 12.5px;
    color: var(--mon-muted);
    margin-top: 10px;
}

.counts-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.counts-legend .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
}

.counts-legend b {
    color: var(--mon-text);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mini-counts {
    display: inline-flex;
    gap: 10px;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.mini-counts > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--st-fg);
}

.mini-counts > span.st-up {
    color: var(--mon-text);
}

.mini-counts .status-dot {
    width: 7px;
    height: 7px;
}

/* ---------- page elements ---------- */

.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.page-header > .ph-main {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-header .ph-icon {
    width: 48px;
    height: 48px;
    border-radius: 11px;
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    display: grid;
    place-items: center;
    color: var(--mon-text-2);
    flex: none;
}

.page-header .ph-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.page-header .ph-crumbs {
    font-size: 12.5px;
    color: var(--mon-muted);
}

.page-header h1 {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.25;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.page-header .subtitle {
    color: var(--mon-muted);
    font-size: 13.5px;
}

.page-header .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Card: white surface, hairline border, 12px radius. MudPaper with class mon-card, or a plain element. */
.mon-card {
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius) !important;
    box-shadow: none !important;
}

.mon-card-title {
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* Card head row: title, optional count pill, spacer, link. */
.card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px 12px;
    min-height: 52px;
}

.card-head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.card-head .spacer {
    flex: 1;
}

.count-pill {
    font-size: 12px;
    color: var(--mon-muted);
    background: var(--mon-chip);
    border-radius: 10px;
    padding: 1px 8px;
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    line-height: 18px;
}

/* Segmented control (filters, time ranges). */
.seg {
    display: inline-flex;
    flex-wrap: wrap;
    background: var(--mon-seg);
    border-radius: 9px;
    padding: 3px;
    gap: 2px;
}

.seg > button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mon-muted);
    cursor: pointer;
    white-space: nowrap;
}

.seg > button:hover {
    color: var(--mon-text);
}

.seg > button.active {
    background: var(--mon-seg-active);
    color: var(--mon-text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

.seg > button .n {
    color: var(--mon-faint);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
}

.seg.small > button {
    height: 26px;
    padding: 0 10px;
    font-size: 12.5px;
}

/* Plain buttons in the design language (for places where MudButton is too heavy). */
.mon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--mon-input-border);
    background: var(--mon-surface);
    border-radius: 8px;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--mon-text);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}

.mon-btn:hover {
    background: var(--mon-surface-2);
    text-decoration: none;
    color: var(--mon-text);
}

.mon-btn.primary {
    border-color: var(--mon-accent);
    background: var(--mon-accent);
    color: #fff;
}

.mon-btn.primary:hover {
    background: var(--mon-accent-hover);
}

.mon-btn.dark {
    border-color: var(--mon-inverse);
    background: var(--mon-inverse);
    color: var(--mon-inverse-fg);
}

.mon-btn.dark:hover {
    background: var(--mon-inverse-hover);
}

.mon-btn.danger {
    border-color: color-mix(in srgb, var(--st-down) 30%, var(--mon-surface));
    color: var(--st-down-fg);
}

.mon-btn.danger:hover {
    background: var(--st-down-bg);
    color: var(--st-down-fg);
}

.mon-btn.small {
    height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
    border-radius: 7px;
}

.mon-btn .mud-icon-root {
    font-size: 18px;
}

.mon-btn:disabled {
    opacity: .5;
    cursor: default;
}

/* Data table in the design language (plain <table>). Wrap in .table-scroll for small widths. */
.table-scroll {
    overflow-x: auto;
}

.mon-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.mon-table th {
    text-align: left;
    color: var(--mon-muted);
    font-size: 12px;
    font-weight: 500;
    padding: 8px 12px;
    background: var(--mon-surface-2);
    border-top: 1px solid var(--mon-line);
    border-bottom: 1px solid var(--mon-line);
    white-space: nowrap;
}

.mon-table td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--mon-line-soft);
    vertical-align: top;
}

.mon-table tr:last-child td {
    border-bottom: 0;
}

.mon-table th:first-child, .mon-table td:first-child {
    padding-left: 20px;
}

.mon-table th:last-child, .mon-table td:last-child {
    padding-right: 20px;
}

.mon-table tbody tr.clickable:hover, .mon-table tbody tr.hover:hover {
    background: var(--mon-surface-2);
}

.mon-table td.num, .mon-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mon-table .sub {
    font-size: 12.5px;
    color: var(--mon-muted);
}

.mon-table .strong {
    font-weight: 500;
}

/* Empty state inside a card. */
.empty-state {
    text-align: center;
    padding: 40px 20px 48px;
    color: var(--mon-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.empty-state .es-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mon-chip);
    color: var(--mon-muted);
    display: grid;
    place-items: center;
}

.empty-state.ok .es-icon {
    background: var(--st-up-bg);
    color: var(--st-up-fg);
}

.empty-state .es-icon .mud-icon-root {
    font-size: 24px;
}

.empty-state h3 {
    color: var(--mon-text);
    font-size: 15px;
    font-weight: 600;
    margin: 4px 0 0;
}

.empty-state p {
    margin: 0 auto 8px;
    max-width: 420px;
    font-size: 13.5px;
}

.muted {
    color: var(--mon-muted);
}

.faint {
    color: var(--mon-faint);
}

.small {
    font-size: 12.5px;
}

.mono {
    font-family: var(--mon-font-mono);
    font-size: .93em;
}

.num {
    font-variant-numeric: tabular-nums;
}

.nowrap {
    white-space: nowrap;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.clickable {
    cursor: pointer;
}

.link, a.link {
    color: var(--mon-accent);
    text-decoration: none;
    font-weight: 400;
    cursor: pointer;
}

.link:hover {
    color: var(--mon-accent-hover);
    text-decoration: underline;
}

.link.plain {
    color: var(--mon-text);
    font-weight: 500;
}

.row-missing td {
    opacity: .5;
}

.code-block {
    position: relative;
    background: var(--mon-code-bg);
    color: var(--mon-code-fg);
    border-radius: 8px;
    padding: 14px 48px 14px 16px;
    font-family: var(--mon-font-mono);
    font-size: 12.5px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

.code-block .copy {
    position: absolute;
    top: 6px;
    right: 6px;
    color: var(--mon-code-fg);
}

.secret-value {
    font-family: var(--mon-font-mono);
    background: var(--st-warning-bg);
    padding: 10px 12px;
    border-radius: 8px;
    word-break: break-all;
    font-size: 12.5px;
}

/* Key/value strip (device info, sensor facts): cells separated by hairlines. */
.info-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    border-radius: var(--mon-radius);
    overflow: hidden;
}

.info-strip > div {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-shadow: 1px 0 0 var(--mon-line);
}

.info-strip .label {
    font-size: 12px;
    color: var(--mon-muted);
}

.info-strip .value {
    font-size: 13.5px;
    overflow-wrap: anywhere;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px 24px;
}

.detail-grid .label {
    font-size: 12px;
    color: var(--mon-muted);
}

.detail-grid .value {
    font-size: 13.5px;
    margin-top: 4px;
    word-break: break-word;
}

.section-title {
    font-weight: 600;
    font-size: 15px;
    margin: 24px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section {
    font-size: 12px;
    font-weight: 500;
    color: var(--mon-muted);
    margin: 18px 0 2px;
}

/* ---------- MudBlazor overrides: bring the component library into the design language ---------- */

.mud-paper-outlined {
    border-color: var(--mon-border);
}

.mud-paper.mon-card, .mud-paper-outlined {
    border-radius: var(--mon-radius);
}

.mud-paper.mon-card {
    overflow: hidden;
}

/* A table directly at the top of a card: the card border replaces the header's top line. */
.mon-card > .mud-table .mud-table-head .mud-table-cell,
.mon-card > .table-scroll:first-child .mon-table th {
    border-top: 0;
}

/* Buttons */
.mud-button-root.mud-button {
    border-radius: 8px;
    min-height: 34px;
    padding: 0 12px;
    font-weight: 500;
    letter-spacing: normal;
    box-shadow: none !important;
}

.mud-button-root.mud-button.mud-button-size-small {
    min-height: 28px;
    padding: 0 10px;
    font-size: 12.5px;
}

.mud-button-root.mud-button .mud-button-icon-start {
    margin-left: -2px;
    margin-right: 6px;
}

.mud-button-root.mud-button .mud-button-icon-size-medium > *:first-child {
    font-size: 18px;
}

.mud-button-outlined {
    border-color: var(--mon-input-border);
    background: var(--mon-surface);
}

.mud-button-outlined.mud-button-outlined-default,
.mud-button-outlined.mud-button-outlined-primary,
.mud-button-outlined.mud-button-outlined-inherit {
    color: var(--mon-text);
    border-color: var(--mon-input-border);
}

.mud-button-outlined:hover {
    background: var(--mon-surface-2) !important;
}

.mud-button-outlined.mud-button-outlined-error {
    border-color: color-mix(in srgb, var(--st-down) 35%, transparent);
    color: var(--st-down-fg);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--mon-accent-hover);
}

.mud-button-filled.mud-button-filled-dark {
    background: var(--mon-inverse);
    color: var(--mon-inverse-fg);
}

/* Inputs */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px;
    border-color: var(--mon-input-border);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--mon-faint);
}

.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mon-accent);
}

.mud-input > input.mud-input-root, .mud-input > textarea.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: 13.5px;
}

.mud-input-label {
    font-size: 13.5px;
}

.mud-input-helper-text {
    font-size: 12px;
}

/* Tables */
.mud-table {
    background: transparent;
    font-size: 13.5px;
}

.mud-table-container {
    border-radius: inherit;
}

.mud-table-root .mud-table-head .mud-table-cell {
    background: var(--mon-surface-2);
    color: var(--mon-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    padding: 8px 12px;
    border-top: 1px solid var(--mon-line);
    border-bottom: 1px solid var(--mon-line);
    white-space: nowrap;
}

.mud-table-root .mud-table-body .mud-table-cell {
    font-size: 13.5px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mon-line-soft);
}

.mud-table-dense .mud-table-root .mud-table-body .mud-table-cell {
    padding: 9px 12px;
}

.mud-table-root .mud-table-head .mud-table-cell:first-child,
.mud-table-root .mud-table-body .mud-table-cell:first-child {
    padding-left: 20px;
}

.mud-table-root .mud-table-head .mud-table-cell:last-child,
.mud-table-root .mud-table-body .mud-table-cell:last-child {
    padding-right: 20px;
}

.mud-table-root .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--mon-surface-2);
}

.mud-table-pagination {
    border-top: 1px solid var(--mon-line);
    font-size: 12.5px;
}

.mud-table-row.clickable-row {
    cursor: pointer;
}

.mud-table-row.mud-selected-item {
    background: var(--mon-accent-bg) !important;
}

@media (max-width: 600px) {
    .mud-table-root .mud-table-body .mud-table-cell:first-child,
    .mud-table-root .mud-table-body .mud-table-cell:last-child {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Tabs: underline style, 46px high */
.mud-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--mon-line);
    padding: 0 12px;
}

.mud-tabs .mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: 46px;
}

.mud-tabs .mud-tab {
    min-height: 46px;
    min-width: 0;
    padding: 0 10px;
    margin-right: 4px;
    font-size: 13.5px;
    font-weight: 500;
    text-transform: none;
    color: var(--mon-muted);
    letter-spacing: normal;
}

.mud-tabs .mud-tab:hover {
    background: transparent;
    color: var(--mon-text);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--mon-text);
}

.mud-tabs .mud-tab .mud-icon-root {
    font-size: 18px;
    margin-right: 7px;
}

.mud-tabs .mud-tab-slider {
    background: var(--mon-accent);
    height: 2px;
}

.mud-tabs .mud-tab .mud-badge.mud-badge-default, .mud-tabs .mud-tab .mud-badge {
    background: var(--mon-chip);
    color: var(--mon-muted);
    font-weight: 400;
    font-size: 11.5px;
}

.mud-tabs-rounded {
    border-radius: 0;
}

/* Chips, alerts, dialogs, menus */
.mud-chip {
    border-radius: 6px;
    font-size: 12.5px;
}

.mud-alert {
    border-radius: 10px;
    font-size: 13.5px;
}

.mud-dialog {
    border-radius: 14px;
    border: 1px solid var(--mon-border);
}

.mud-dialog .mud-dialog-title {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.01em;
}

.mud-popover {
    border-radius: 10px;
    border: 1px solid var(--mon-border);
    box-shadow: var(--mon-shadow-pop) !important;
}

/* Menus opened from the (off-canvas) sidebar must lie above it. */
.mud-popover.nav-popover {
    z-index: 1400 !important;
    min-width: 220px;
}

.mud-popover .mud-list {
    padding: 6px;
}

.mud-popover .mud-list-item, .mud-popover .mud-menu-item {
    border-radius: 6px;
    font-size: 13px;
}

.mud-toggle-group {
    border-radius: 8px;
}

.mud-switch-label, .mud-checkbox .mud-typography {
    font-size: 13px;
}

.mud-snackbar {
    border-radius: 10px;
    font-family: var(--mon-font);
}

.mud-tooltip {
    font-size: 12px;
    border-radius: 6px;
}

.mud-progress-linear.mud-progress-linear-color-primary {
    border-radius: 2px;
}

/* ---------- chart ---------- */

.ts-chart {
    position: relative;
    width: 100%;
}

.ts-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.ts-chart .grid line {
    stroke: var(--mon-line);
    stroke-width: 1;
}

.ts-chart .axis text {
    fill: var(--mon-faint);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.ts-chart .line {
    fill: none;
    stroke: var(--mon-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.ts-chart .area {
    fill: var(--mon-accent);
    opacity: .08;
}

.ts-chart .limit-warn {
    stroke: var(--st-warning);
    stroke-dasharray: 5 4;
    stroke-width: 1.5;
}

.ts-chart .limit-error {
    stroke: var(--st-down);
    stroke-dasharray: 5 4;
    stroke-width: 1.5;
}

.ts-chart .hover-line {
    stroke: var(--mon-faint);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.ts-chart .hover-dot {
    fill: var(--mon-accent);
    stroke: var(--mon-surface);
    stroke-width: 2;
}

.ts-tooltip {
    position: absolute;
    top: 4px;
    pointer-events: none;
    background: var(--mon-surface);
    border: 1px solid var(--mon-border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    white-space: nowrap;
    transform: translateX(-50%);
}

/* ---------- misc ---------- */

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1.5rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "Beim Anzeigen dieses Bereichs ist ein Fehler aufgetreten.";
}

#blazor-error-ui {
    color-scheme: light only;
    background: #fffbe6;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.menu-form {
    margin: 0;
}

.menu-form-button {
    all: unset;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    min-height: 34px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
}

.menu-form-button:hover {
    background: var(--mon-hover);
}

.menu-form-button.current {
    font-weight: 500;
}

.menu-form-button.current .mud-icon-root {
    color: var(--mon-accent);
}

/* Vendor logos (Simple Icons, single path): drawn in the text colour via mask, so they follow light/dark mode. */
.vendor-logo {
    display: inline-block;
    vertical-align: middle;
    flex: none;
    background-color: currentColor;
    opacity: .85;
    -webkit-mask: var(--vendor-logo) center / contain no-repeat;
    mask: var(--vendor-logo) center / contain no-repeat;
}

.vendor-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex: none;
    padding: 0 4px;
    border-radius: 4px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    color: hsl(var(--vendor-hue) 55% 32%);
    background: hsl(var(--vendor-hue) 60% 90%);
}

.theme-dark .vendor-initials {
    color: hsl(var(--vendor-hue) 70% 80%);
    background: hsl(var(--vendor-hue) 35% 24%);
}

/* Square icon tile (device/site icon in lists). */
.icon-tile {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: var(--mon-hover);
    display: grid;
    place-items: center;
    color: var(--mon-text-2);
    flex: none;
}

.icon-tile .mud-icon-root {
    font-size: 17px;
}

.icon-tile.lg {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: var(--mon-chip);
}

.icon-tile.lg .mud-icon-root {
    font-size: 20px;
}