/* The web Manager's own styles, beside MudBlazor's. */

/* A figure on the live status page. */
.av-stat-number { font-size: 1.75rem; font-weight: 600; line-height: 1.2; }

/* The footer under a table: the range, the pages, the page size. */
.av-pager { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; padding-top: 0.5rem; }
.av-pager .mud-select { max-width: 9rem; }

/* The facts of a chosen row: a label and its value in two columns. */
.av-facts { display: grid; grid-template-columns: 8rem 1fr; gap: 0.25rem 0.75rem; margin: 0; }
.av-facts dt { color: var(--mud-palette-text-secondary); }
.av-facts dd { margin: 0; overflow-wrap: anywhere; }

/* A log: a dark block of fixed-width lines, newest at the bottom. */
.av-log { background: #0f1720; color: #d7dde5; font: 12px/1.5 Consolas, "Cascadia Mono", monospace; border-radius: 8px; padding: 12px; overflow: auto; max-height: 65vh; white-space: pre; }
.av-log .av-log-warn { color: #ffd479; }
.av-log .av-log-error { color: #ff8a80; }

/* Wide tables scroll inside their card instead of stretching the page. */
.av-scroll { overflow-x: auto; }

/* Fixed-width text (a MAC address, a code, a fingerprint, a link) and quiet text. */
.av-mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 0.8125rem; }
.av-muted { color: var(--mud-palette-text-secondary); }

/* A person's photo, or the initials in its place, at the top of the person's card. */
.av-person-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.av-photo { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.av-photo-empty { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); display: grid; place-items: center; font-size: 1.75rem; font-weight: 600; }

/* The History section: one line for each change. */
.av-history { font-size: 0.8125rem; }
.av-history-line { padding: 0.3rem 0; border-bottom: 1px dashed var(--mud-palette-lines-default); }

/* The new pairing code: the QR picture and the typed code beside it. */
.av-code-row { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.av-qr { width: 156px; height: 156px; image-rendering: pixelated; flex-shrink: 0; }
.av-code { font: 600 1.25rem/1.3 Consolas, "Cascadia Mono", monospace; letter-spacing: 0.08em; margin: 0.4rem 0; overflow-wrap: anywhere; }
.av-link { overflow-wrap: anywhere; user-select: all; }

/* The menu (WebManagerTheme and ThemeAccents): the logos at its top and foot, the chosen item in turquoise. The layout's outer element holds the --av-* colors. */
.av-drawer { display: flex; flex-direction: column; min-height: 100%; }
.av-drawer-top { display: flex; align-items: center; justify-content: center; min-height: var(--mud-appbar-height); padding: 0 16px; }
.av-drawer-top img, .av-drawer-foot img { display: block; max-width: 100%; height: auto; }
.av-drawer-foot { display: flex; justify-content: center; margin-top: auto; padding: 24px 16px 16px; }
/* A section's title is larger than its items and has room above it; the items of a section sit closer together than MudBlazor's 8px above and below. */
.av-drawer .av-nav-section { display: block; padding: 0 16px; margin: 20px 0 4px; font-size: 1rem; font-weight: 600; line-height: 1.5; letter-spacing: 0; text-transform: none; }
.av-drawer .av-nav-section:first-child { margin-top: 12px; }
.av-drawer .mud-navmenu .mud-nav-link { padding-top: 3px; padding-bottom: 3px; }
.av-theme .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled),
.av-theme .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):hover,
.av-theme .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):focus-visible,
.av-theme .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled):active { background-color: var(--av-nav-selected-bg); color: var(--av-nav-selected-text); font-weight: 500; }
.av-theme .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon { color: var(--av-nav-selected-text); }

/* The status chips (online, offline, repeater): pale in light, deep in dark, with text that reads on each. */
.av-theme .mud-chip.mud-chip-filled.av-chip-ok { background-color: var(--av-ok-bg); color: var(--av-ok-text); }
.av-theme .mud-chip.mud-chip-filled.av-chip-off { background-color: var(--av-off-bg); color: var(--av-off-text); }
.av-theme .mud-chip.mud-chip-filled.av-chip-rep { background-color: var(--av-rep-bg); color: var(--av-rep-text); }