/* LiMo Tools — app styles layered on top of MudBlazor. */

h1:focus {
    outline: none;
}

/* Monospace surfaces used by the command builders. */
.limo-mono, .limo-code {
    font-family: 'Consolas', 'Courier New', monospace;
}

.limo-code {
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 8px;
    padding: 14px;
    font-size: 12.5px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

.limo-code-sm {
    font-size: 12px;
    padding: 11px;
}

.limo-url {
    color: #7dd3fc;
}

.limo-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    padding: 2px 7px;
    border-radius: 5px;
    color: #fff;
    vertical-align: middle;
}

.limo-badge-post { background: #0ea5e9; }
.limo-badge-get  { background: #16a34a; }
.limo-badge-sms  { background: #7c3aed; }

code {
    background: rgba(125, 211, 252, .15);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .85em;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
}

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


/*
 * Printing one element. limoInterop.printElement marks the body and the element, and these rules hide everything
 * that is not inside the marked element. The report keeps its tables and headings; the navigation, the loader,
 * the tab row and the picker do not reach the paper.
 */
@media print {
    body.printing-one * {
        visibility: hidden;
    }

    body.printing-one .print-target,
    body.printing-one .print-target * {
        visibility: visible;
    }

    body.printing-one .print-target {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    /* A table split across a page break loses its heading, so keep each one whole where it fits. */
    body.printing-one .print-target table {
        page-break-inside: auto;
    }

    body.printing-one .print-target tr {
        page-break-inside: avoid;
    }
}

/* The report picker on Modem Config's Status tab and the matching card on the KoCos Configuration tab.

   A wrapping flex row put every tick where the previous one happened to end, so nothing lined up down the page
   and a list of eighteen options read as a jumble. A grid of equal columns fixes the left edges, and auto-fill
   means the column count follows the width rather than being set per breakpoint.

   14rem is measured, not guessed: the longest label, "Meter table with last reading", renders at 177px in the
   MudBlazor body face, plus 32px for the box and a little room. Anything narrower wraps that label onto a second
   line and undoes the tidying. */
.limo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    column-gap: 1rem;
    align-items: center;
}