/* Fonts are bundled with the app, not fetched from a CDN: this has to be readable in a server room
   with no internet, which is exactly when somebody needs it. */
@import url('fonts/fonts.css');

html, body {
    margin: 0;
    /* Named here as well as in the theme so the first paint is not Roboto - MudBlazor applies the
       theme a moment after the page appears, and the swap is visible as a flash. */
    font-family: "IBM Plex Sans Thai", "Noto Sans Thai", "Segoe UI", system-ui, sans-serif;
}

/* Asset tags, serials, IP and MAC addresses. These are compared character by character against a
   sticker on a machine, so the digits have to line up down the column. */
.itam-mono, .itam-mono * {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

code.itam-mono {
    font-size: .875em;
}

/* A rule instead of a shadow under the app bar: easier to read on a screen that gets scanned. */
.itam-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* MAUI on Android: keeps content out from under the status bar. Inert on desktop. */
.status-bar-safe-area {
    display: none;
}

/* A label/value line where the value is a machine identifier. */
.itam-field-value {
    font-family: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-variant-numeric: tabular-nums;
}

/* ---- camera scanning ---- */

.itam-scan-frame {
    position: relative;
    width: 100%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    margin: 0 auto;
    border-radius: 6px;
    overflow: hidden;
    background: var(--mud-palette-text-primary);
}

.itam-scan-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A frame to aim with. Nothing is cropped to it - the decoder reads the whole picture - but a
   technician needs somewhere to point, and a bare video gives them nothing. */
.itam-scan-reticle {
    position: absolute;
    inset: 18% 12%;
    border: 2px solid var(--mud-palette-primary);
    border-radius: 6px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .28);
    pointer-events: none;
}

/* ── the appearance picker ─────────────────────────────────────────────────────────────────────
   The ring marks the selection rather than the dot changing colour: a dot that recolours to show
   it is chosen stops showing what it chooses. */
.itam-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.itam-swatch {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .7rem .4rem .45rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    cursor: pointer;
}

.itam-swatch:hover {
    border-color: var(--mud-palette-lines-inputs);
}

.itam-swatch:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.itam-swatch--on {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
}

.itam-swatch-dot {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    /* The dots are the app's own accents, and several are close in lightness to the surface behind
       them; the inset line keeps the pale ones from dissolving into the card. */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}

.itam-swatch-name {
    font-size: .8125rem;
    white-space: nowrap;
}