/* MudBlazor provides the component styling; this covers only what sits outside it. */
html, body { margin: 0; font-family: Roboto, system-ui, sans-serif; }

#blazor-error-ui {
    background: #b00020;
    color: #fff;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.8rem 1.2rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: 0.75rem; }
#blazor-error-ui a { color: #fff; text-decoration: underline; }

/* Long product titles must not force the grid to scroll sideways. */
.mud-table-cell { word-break: break-word; }

/* ---------------------------------------------------------------- portal chrome */

/* Long supplier values (descriptions, image URLs, tag lists) must wrap inside a table cell
   rather than stretching the column past the viewport. */
.wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* The run banner sits above the page content and should read as a status strip, not as
   another card competing with the data below it. */
.run-banner {
    border-left: 4px solid var(--mud-palette-primary);
}

.stat-card-clickable {
    transition: border-color 120ms ease, transform 120ms ease;
}

.stat-card-clickable:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
}

/* MudTable's dense rows are tight for a screen people scan for a long time. */
.mud-table-dense .mud-table-cell {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* The sign-in screen renders outside MudLayout, so it centres itself. */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--mud-palette-background-gray, #f7f8f7);
}

/* MudTabs stopped taking a panel class parameter; the padding belongs here anyway. */
.settings-tabs .mud-tabs-panels {
    padding: 20px;
}


/* ==========================================================================
   Shopify design language, transactional track.

   Cream canvas, Inter, black pill buttons, green only for connection state.
   A deliberate reading of that language rather than a copy of Shopify's admin:
   this is a third-party tool writing to a merchant's store, so it sits beside
   Shopify without wearing its logo.
   ========================================================================== */

:root {
    --commerce-green: #008060;
    --aloe: #e3f5ec;
    --cream: #fbfbf5;
    --hairline: #e4e4e0;
    --pill: 999px;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

/* ---- the boot screen, before Blazor has started ---- */

.boot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    gap: 6px;
    background: var(--cream);
    font-family: Inter, system-ui, sans-serif;
    color: #000;
}

.boot-mark {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #000;
    position: relative;
    margin-bottom: 10px;
}

/* The bag handle: a commerce mark that is ours, not a borrowed logo. */
.boot-mark::after {
    content: "";
    position: absolute;
    inset: 7px 10px auto 10px;
    height: 9px;
    border: 2px solid var(--commerce-green);
    border-bottom: none;
    border-radius: 7px 7px 0 0;
}

.boot-name { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.boot-sub  { font-size: 12px; color: #71717a; }

/* ---- pill buttons, the transactional track's button vocabulary ---- */

.mud-button-root {
    border-radius: var(--pill) !important;
    padding-left: 18px;
    padding-right: 18px;
}

.mud-button-root.mud-button-filled {
    box-shadow: none !important;
}

.mud-button-root.mud-button-filled:hover {
    box-shadow: none !important;
    opacity: .88;
}

/* Icon and menu buttons stay round rather than becoming lozenges. */
.mud-icon-button {
    border-radius: 50% !important;
    padding-left: 8px;
    padding-right: 8px;
}

/* ---- surfaces: hairline borders, no drop shadows ---- */

.mud-paper-outlined {
    border-color: var(--hairline) !important;
}

.mud-appbar {
    box-shadow: none !important;
    border-bottom: 1px solid #1a1a1a;
}

.mud-drawer {
    border-right: 1px solid var(--hairline) !important;
    box-shadow: none !important;
}

.mud-nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    font-size: .875rem;
}

.mud-nav-link.active {
    background-color: var(--aloe) !important;
    color: #000 !important;
    font-weight: 600;
}

.mud-nav-link.active .mud-icon-root {
    color: var(--commerce-green) !important;
}

/* ---- the store identity strip in the app bar ---- */

.shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 12px 4px 10px;
    border-radius: var(--pill);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    font-size: 12px;
    line-height: 1;
    color: #fff;
    white-space: nowrap;
}

.shop-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--commerce-green);
    box-shadow: 0 0 0 3px rgba(0, 128, 96, .25);
    flex: none;
}

.shop-dot.is-unknown { background: #a1a1aa; box-shadow: none; }
.shop-dot.is-down    { background: #f2645a; box-shadow: 0 0 0 3px rgba(242, 100, 90, .25); }

/* The brand mark in the app bar, same construction as the boot mark. */
.brand-mark {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #fff;
    position: relative;
    flex: none;
}

.brand-mark::after {
    content: "";
    position: absolute;
    inset: 5px 7px auto 7px;
    height: 7px;
    border: 2px solid var(--commerce-green);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
}

/* ---- tables read for long stretches ---- */

.mud-table-head .mud-table-cell {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #71717a;
}

/* ---- chips as Shopify-style status badges ---- */

.mud-chip.mud-chip-size-small {
    height: 22px;
    font-size: .75rem;
    font-weight: 500;
    border-radius: var(--pill);
}

/* ---- the sign-in screen sits on the cream canvas ---- */

.login-page {
    background: var(--cream);
}

.login-mark {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: #000;
    position: relative;
    flex: none;
}

.login-mark::after {
    content: "";
    position: absolute;
    inset: 9px 11px auto 11px;
    height: 11px;
    border: 2.5px solid var(--commerce-green);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
}

@media (prefers-color-scheme: dark) {
    .boot { background: #0a0a0a; color: #fafafa; }
    .boot-mark { background: #fff; }
}

/* Making Secondary the commerce green turned every muted caption green, because MudBlazor
   maps Color.Secondary on text to the brand colour rather than to secondary text. Green on
   this screen has one meaning — the store connection — so text keeps the muted ink instead.
   Buttons and chips are untouched: they colour from the palette, not from this class. */
.mud-typography.mud-secondary-text,
.mud-icon-root.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}


/* ==========================================================================
   Compact density.

   Shopify's admin packs more rows and shorter fields into a screen than
   MudBlazor's defaults do. This is read all day while reconciling thousands of
   rows, so the aim is more visible at once without crowding the hit targets.
   ========================================================================== */

/* Inputs: shorter, with labels that do not reserve a whole line. */
.mud-input-control .mud-input.mud-input-outlined input,
.mud-input-control .mud-input.mud-input-outlined .mud-input-slot {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mud-input-control-margin-dense .mud-input.mud-input-outlined input {
    padding-top: 6.5px;
    padding-bottom: 6.5px;
    font-size: .8125rem;
}

.mud-input-control-margin-dense .mud-input-label {
    font-size: .8125rem;
}

.mud-input-helper-text {
    font-size: .6875rem;
    margin-top: 3px;
    line-height: 1.35;
}

/* Tables: tighter rows, and a header that does not shout. */
.mud-table-dense .mud-table-cell {
    padding: 5px 10px;
    font-size: .8125rem;
}

.mud-table-dense .mud-table-head .mud-table-cell {
    padding-top: 8px;
    padding-bottom: 8px;
}

.mud-table-row .mud-table-cell code {
    font-size: .75rem;
    background: var(--mud-palette-background-grey, #f4f4ec);
    padding: 1px 5px;
    border-radius: 4px;
}

.mud-table-pager {
    font-size: .8125rem;
}

/* Buttons: smaller by default, still comfortable to hit. */
.mud-button-root.mud-button {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: .8125rem;
}

.mud-button-root.mud-button-size-small {
    padding-top: 3px;
    padding-bottom: 3px;
    font-size: .75rem;
}

/* Cards and panels: less internal air. */
.mud-paper.pa-4 { padding: 14px !important; }
.mud-paper.pa-3 { padding: 10px !important; }
.mud-expand-panel-text { padding: 10px 14px; }

/* Switches and checkboxes sit closer to their labels. */
.mud-switch { margin-left: 0; }
.mud-checkbox .mud-button-root { padding: 5px; }

/* Dialogs. */
.mud-dialog-content { padding: 16px 20px; }
.mud-dialog-actions { padding: 8px 16px; }

/* Alerts inside forms are notes, not announcements. */
.mud-alert-dense { padding: 5px 10px; font-size: .8125rem; }

/* Chip sets used as filters read as one control rather than scattered pills. */
.mud-chipset .mud-chip.mud-chip-size-small {
    margin: 2px 3px;
}

/* The list item rows in dialogs. */
.mud-list-item-dense { padding-top: 6px; padding-bottom: 6px; }

/* Catalogue thumbnails. Small enough that fifty of them do not turn the list into a gallery,
   large enough to tell one oak from another at a glance. */
.catalogue-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--hairline);
    background: var(--cream);
    display: block;
}

.catalogue-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-disabled, #a1a1aa);
}

/* SKUs and supplier codes are identifiers. Broken across two lines they stop being
   recognisable at a glance, which is the only reason the column exists. */
.mud-table-cell code {
    white-space: nowrap;
}