/* App-level styles: a thin layer over MudBlazor tuned to the Gaia design language used by
 * the Business NXT chrome. All colours/spacing/radii here intentionally match the Gaia
 * design tokens (see @vsn-ux/gaia-styles/dist/design-tokens.css):
 *
 *   --ga-color-primary           cyan-80   #1f4e66
 *   --ga-color-primary-90        cyan-90   #133445   (text-body / text-headings)
 *   --ga-color-primary-70        cyan-70   #2a6480   (text-body-secondary)
 *   --ga-color-surface-page      neutral-10 #f2f3f5
 *   --ga-color-surface-primary   white     #ffffff
 *   --ga-color-border-tertiary   neutral-30 #cccfd7
 *   --ga-color-border-primary    neutral-60 #6f7687
 *
 * Gaia tokens are duplicated here as CSS custom properties so the markup can reference
 * them directly without importing the Gaia CSS bundle (which carries an aggressive reset
 * that would fight MudBlazor's defaults).
 */

:root {
    /* Colour tokens (mirror of @vsn-ux/gaia-styles design-tokens.css) */
    --bnxt-color-primary: #1f4e66;
    --bnxt-color-primary-hover: #133445;
    --bnxt-color-primary-active: #0e2632;
    /* Gaia secondary scale (orange-20) — used by the BNXT chrome as the hover/selected
       tint for transparent and outlined buttons (verified against `.ga-button--transparent`
       on the live `business.visma.net` page). */
    --bnxt-color-secondary-20: #fae0ce;
    --bnxt-color-text-body: #133445;
    --bnxt-color-text-secondary: #2a6480;
    --bnxt-color-text-disabled: #b9b9b9;
    --bnxt-color-surface-page: #f2f3f5;
    --bnxt-color-surface-card: #ffffff;
    --bnxt-color-surface-container: #e2e4e9;
    --bnxt-color-surface-information: #edf4fe;
    --bnxt-color-surface-error: #fcf1ee;
    --bnxt-color-surface-success: #eef5ee;
    --bnxt-color-border-tertiary: #cccfd7;
    --bnxt-color-border-primary: #6f7687;
    --bnxt-color-border-information: #366af6;
    --bnxt-color-information: #366af6;
    --bnxt-color-success: #448548;
    --bnxt-color-warning: #bb5822;
    --bnxt-color-error: #cc453e;
    /* Typography (text-md as base; text-xl desktop = 1.25rem; text-2xl = 1.5rem) */
    --bnxt-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bnxt-font-size-xs: 0.6875rem;
    --bnxt-font-size-sm: 0.75rem;
    --bnxt-font-size-md: 0.875rem;
    --bnxt-font-size-lg: 1rem;
    --bnxt-font-size-xl: 1.25rem;
    --bnxt-font-size-2xl: 1.5rem;
    --bnxt-radius: 4px;
    --bnxt-radius-pill: 999px;
    --bnxt-shadow-card: 0 1px 2px rgb(15 33 50 / 0.04);
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
         url('../fonts/InterVariable.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations'),
         url('../fonts/InterVariable-Italic.woff2') format('woff2');
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bnxt-color-surface-page);
    color: var(--bnxt-color-text-body);
    font-family: var(--bnxt-font-family);
    font-size: var(--bnxt-font-size-md);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Page shell ---------------------------------------------------------- */

.bnxt-app-shell {
    min-height: 100vh;
    background: var(--bnxt-color-surface-page);
}

.bnxt-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.bnxt-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--bnxt-color-border-tertiary);
}

.bnxt-page-header__title {
    margin: 0;
    color: var(--bnxt-color-text-body);
    font-family: var(--bnxt-font-family);
    font-size: var(--bnxt-font-size-2xl);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
}

/* <FocusOnNavigate Selector="h1"> in Routes.razor programmatically focuses the
   page heading after navigation/refresh so screen readers announce it. Blazor
   adds tabindex="-1" to make it focusable, which causes browsers to paint the
   default focus ring. Since the heading is not in the natural tab order
   (tabindex="-1"), suppress the ring unconditionally — focus still moves for
   assistive tech but no visual outline is drawn. */
.bnxt-page-header__title:focus,
.bnxt-page-header__title:focus-visible {
    outline: none;
}

.bnxt-page-header__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bnxt-hint {
    color: var(--bnxt-color-text-secondary);
    font-size: var(--bnxt-font-size-sm);
    line-height: 1.4;
}

/* ---- Customer card ------------------------------------------------------- */

.bnxt-card {
    background: var(--bnxt-color-surface-card);
    border: 1px solid var(--bnxt-color-border-tertiary);
    border-radius: var(--bnxt-radius);
    padding: 1rem 1.25rem 1.25rem;
    box-shadow: var(--bnxt-shadow-card);
}

.bnxt-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bnxt-color-border-tertiary);
}

.bnxt-card__title {
    margin: 0;
    color: var(--bnxt-color-text-body);
    font-family: var(--bnxt-font-family);
    font-size: var(--bnxt-font-size-lg);
    font-weight: 600;
    line-height: 1.4;
}

.bnxt-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--bnxt-color-surface-container);
    color: var(--bnxt-color-text-body);
    font-size: var(--bnxt-font-size-sm);
    font-weight: 500;
    border-radius: var(--bnxt-radius-pill);
    white-space: nowrap;
}

.bnxt-dl {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) 1fr;
    column-gap: 1.25rem;
    row-gap: 0.45rem;
    margin: 0;
}

.bnxt-dl dt {
    color: var(--bnxt-color-text-secondary);
    font-weight: 500;
    font-size: var(--bnxt-font-size-md);
}

.bnxt-dl dd {
    margin: 0;
    color: var(--bnxt-color-text-body);
    word-break: break-word;
    font-size: var(--bnxt-font-size-md);
}

.bnxt-dl dd.is-empty {
    color: var(--bnxt-color-text-disabled);
}

.bnxt-link {
    color: var(--bnxt-color-primary);
    text-decoration: none;
}

.bnxt-link:hover {
    color: var(--bnxt-color-primary-hover);
    text-decoration: underline;
}

/* ---- MudBlazor overrides ------------------------------------------------- */

/* MudPaper / MudCard with Outlined uses --mud-palette-lines-default, which we already
   set in PaletteLight. These rules only refine spacing/radius to match Gaia. */
.mud-paper-outlined,
.mud-card.mud-elevation-0 {
    border-radius: var(--bnxt-radius);
}

/* MudAlert: Gaia notifications are softer — left accent border + light tinted background. */
.mud-alert {
    border-radius: var(--bnxt-radius);
    padding: 0.625rem 0.875rem;
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-info {
    background: var(--bnxt-color-surface-information);
    border-color: var(--bnxt-color-border-information);
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-error {
    background: var(--bnxt-color-surface-error);
}

.mud-alert.mud-alert-outlined.mud-alert-outlined-success {
    background: var(--bnxt-color-surface-success);
}

/* MudButton — Gaia uses slim, rectangular buttons (no uppercase, no shadow). */
.mud-button-root {
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none !important;
    min-height: 32px;
    padding: 4px 14px;
}

.mud-button-root.mud-button-outlined {
    border-width: 1px;
}

/* MudBlazor's `Size.Small` variant scales the theme's button font down to ~11 px which
   reads as tiny next to the BNXT chrome (Gaia action buttons are 14 px / 500). Pin
   small buttons to 14 px so embedded actions visually match the host. The literal
   px here is intentional: the `--bnxt-font-size-*` tokens are rem-based against the
   14 px html root, so a token would resolve to 12.25 px and miss Gaia by a touch. */
.mud-button-root[class*="-size-small"] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

/* Outlined-button hover — match the Gaia "transparent" button used in the BNXT chrome:
   orange-20 tint background with primary-90 text, keeping the primary border. The
   MudBlazor default is a ~6 % primary tint which is almost invisible against the
   neutral-10 page surface. */
.mud-button-root.mud-button-outlined-primary:hover,
.mud-button-root.mud-button-outlined-primary:focus-visible {
    background-color: var(--bnxt-color-secondary-20);
    color: var(--bnxt-color-primary-hover);
    border-color: var(--bnxt-color-primary);
}

/* MudChip — match the inline tag look used in the page header. */
.mud-chip {
    border-radius: var(--bnxt-radius-pill);
    font-weight: 500;
}

/* ---- BNXT data table ----------------------------------------------------- */

/* Compact MudTable variant tuned to the BNXT vbc-table-view (ag-theme-vud)
 * used in the Ordrelinje grid. Values mirror the live ag-theme-vud CSS variables
 * extracted from the running BNXT chrome:
 *   --ag-font-size: 13px              --ag-row-height: 26px
 *   --ag-font-family: Inter           --ag-header-height: 36px
 *   --ag-foreground-color: #133445    --ag-cell-horizontal-padding: 5px
 *   --ag-header-background-color: #FFFFFF  (no tint)
 *   --ag-row-border-color: #F2F2F2
 *   --ag-odd-row-background-color: #fcfcfc
 *   --ag-row-hover-color: #FAE0CE     (orange-20 = secondary-20)
 *   --ag-selected-row-background-color: #E2E4E9
 * Header is sentence-case Semi-Bold (NOT uppercase), same colour as body, on a
 * plain white background — a clean line under the header is the only separator.
 * Apply via Class="bnxt-data-table" on MudTable. */

.bnxt-data-table.mud-table {
    font-family: var(--bnxt-font-family);
    font-size: 13px;
    line-height: 1.4;
    color: var(--bnxt-color-text-body);
    background: #ffffff;
    border-radius: var(--bnxt-radius);
}

.bnxt-data-table .mud-table-container {
    border-radius: var(--bnxt-radius);
    background: #ffffff;
}

.bnxt-data-table .mud-table-head .mud-table-cell {
    height: 36px;
    padding: 0 5px;
    background: #ffffff;
    color: var(--bnxt-color-text-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    border-bottom: 1px solid #f2f2f2;
}

.bnxt-data-table .mud-table-head .mud-table-sort-label {
    color: var(--bnxt-color-text-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
}

.bnxt-data-table .mud-table-body .mud-table-cell {
    height: 26px;
    padding: 0 5px;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid #f2f2f2;
}

/* Faint zebra striping — only visible against the white surface and almost
 * imperceptible, matching --ag-odd-row-background-color. */
.bnxt-data-table .mud-table-body .mud-table-row:nth-of-type(odd) {
    background-color: #fcfcfc;
}

.bnxt-data-table .mud-table-body .mud-table-row {
    transition: background-color 60ms ease-in;
}

/* Hover = orange-20 (--bnxt-color-secondary-20) per the ag-theme-vud spec. */
.bnxt-data-table .mud-table-body .mud-table-row:hover {
    background-color: var(--bnxt-color-secondary-20) !important;
}

/* Footer / totals row: no tint, just a slightly heavier weight + top border
 * so the totals stay legible without breaking the minimal data-grid look. */
.bnxt-data-table .mud-table-foot .mud-table-cell {
    height: 32px;
    padding: 0 5px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 600;
    border-top: 1px solid #f2f2f2;
}

/* Row-edit cells: bring inline editor controls in line with the compact row
 * height. MudTextField / MudNumericField / MudAutocomplete in dense mode still
 * allocate ~40 px input height, which would double the row when editing. */
.bnxt-data-table .mud-table-body .mud-table-row.mud-table-row-editing .mud-input-control {
    margin-top: 0;
}

.bnxt-data-table .mud-table-body .mud-table-row.mud-table-row-editing .mud-input-slot {
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 13px;
}

.bnxt-data-table .mud-table-body .mud-table-row.mud-table-row-editing .mud-input-label {
    display: none;
}

/* Action icons: smaller hit-area, no extra inline padding so the cell stays slim. */
.bnxt-data-table .mud-table-cell .mud-icon-button {
    height: 22px;
    width: 22px;
    padding: 2px;
    min-width: 22px;
}

.bnxt-data-table .mud-table-cell .mud-icon-button .mud-icon-root {
    font-size: 16px;
    height: 16px;
    width: 16px;
}

/* ---- Blazor error UI (server reconnect banner) --------------------------- */

#blazor-error-ui {
    background: var(--bnxt-color-surface-error);
    border-top: 1px solid var(--bnxt-color-error);
    bottom: 0;
    box-shadow: 0 -1px 2px rgb(0 0 0 / 0.2);
    color: var(--bnxt-color-text-body);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}