@font-face {
    font-family: 'Seven Segment';
    src: url('/SevenSegment.ttf') format('truetype');
}

/* Needed at every level of a bounded flex column so containers can shrink below their content size (viewport-locked device UI). */
.min-h-0 {
    min-height: 0;
}

/* Rounded panel of an interactivity zone ("island") */
.island {
}

/* Custom colors outside the MudBlazor palette, per theme (class set on MudLayout). */
.cart-theme-dark {
    --cart-accent-gradient: radial-gradient(ellipse at 90% 110%, rgba(72, 72, 240, 0.85) 0%, transparent 60%), linear-gradient(160deg, #09093A 0%, #16167A 45%, #2A2AC4 100%);
    --cart-pill-background: rgba(6, 6, 26, 0.45);
    --cart-cell-inactive: linear-gradient(135deg, #12124A 25%, #292961 70%);
    --cart-cell-empty: #12124A;
}

.cart-theme-light {
    --cart-accent-gradient: radial-gradient(ellipse at 90% 110%, rgba(110, 114, 236, 0.75) 0%, transparent 60%), linear-gradient(160deg, #F0F0FE 0%, #CFD1F8 45%, #A3A7EE 100%);
    --cart-pill-background: rgba(53, 53, 214, 0.14);
    --cart-cell-inactive: linear-gradient(135deg, #E6E7FA 25%, #A9ACEE 70%);
    --cart-cell-empty: #E6E7FA;
}

/* Highlighted island: the product card and the login form. */
.island-accent {
    background: var(--cart-accent-gradient) !important;
}

/* Small dimmed caption above a value ("Адрес хранения", "Миссия"). */
.field-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.75rem;
    line-height: 1.2;
}

/* Larger caption of the product card fields; goes with .field-label. */
.field-label-lg {
    font-size: 1.1rem;
}

/* Rounded dark chip holding a short value (product quantity). */
.value-pill {
    display: inline-block;
    padding: 0.4rem 1.2rem;
    border-radius: 999px;
    background: var(--cart-pill-background);
}

/* Square bottom-bar button: icon above a caption. */
.tile-button {
    height: 100%;
    min-width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    text-transform: none;
}

/* One product-control rule in the bottom bar's rule tile: icon above its name, colored by status. */
.rule-block {
    width: 5.5rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    background: transparent !important;
}

/* The rule to scan now. */
.rule-block-current {
    border-width: 3px !important;
}

/* Business error shown in place of the scan controls. */
.error-plate {
    background-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error-text) !important;
}

html {
    font-size: 22px;
}