/* ----------------------------------------------------------------------------------------
 * custom-theme.css — the app's look on top of MudBlazor.
 *
 * The palette and type scale live in Helpers/AppTheme.cs, so MudBlazor can derive its hover,
 * lighten, darken and -rgb variables from them. This file holds what a MudTheme can't express:
 * surfaces, borders, shadows and the shape of a few components. Its tokens follow the marketing
 * site's (marketing-website/css/site.css), so the app and the site read as one product.
 * ---------------------------------------------------------------------------------------- */

:root {
    --ag-ink-900: #0a1220;
    --ag-ink-700: #1f2a3c;
    --ag-ink-600: #334155;
    --ag-ink-500: #4a5768;
    --ag-ink-400: #667585;
    --ag-ink-300: #94a3b8;
    --ag-brand-50: #eff5ff;
    --ag-brand-100: #dbe7fe;
    --ag-brand-600: #2563eb;
    --ag-brand-700: #1d4ed8;
    --ag-line: #e3e8ef;
    --ag-line-soft: #eef2f7;
    --ag-surface-2: #f7f9fc;
    --ag-surface-3: #eef3f9;
    --ag-radius: 12px;
    --ag-shadow-sm: 0 1px 2px rgba(11, 22, 38, 0.05);
    --ag-shadow-md: 0 2px 4px rgba(11, 22, 38, 0.04), 0 6px 16px rgba(11, 22, 38, 0.06);
    --ag-shadow-lg: 0 4px 8px rgba(11, 22, 38, 0.04), 0 16px 40px rgba(11, 22, 38, 0.09);
    --ag-ease: cubic-bezier(.4, 0, .2, 1);
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---- Surfaces --------------------------------------------------------------------------- */

/* Cards and panels: white on the cool grey page, a hairline border and a soft shadow. Elevation
   still means something, but in the marketing site's restrained steps rather than Material's. */
.mud-paper:not(.mud-popover):not(.mud-appbar):not(.mud-drawer):not(.mud-dialog):not(.mud-snackbar) {
    border: 1px solid var(--ag-line);
}

.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3 {
    box-shadow: var(--ag-shadow-sm);
}

.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-5,
.mud-paper.mud-elevation-6 {
    box-shadow: var(--ag-shadow-md);
}

.mud-paper:not(.mud-paper-square):not(.mud-popover):not(.mud-appbar):not(.mud-drawer),
.mud-card {
    border-radius: var(--ag-radius);
}

.mud-card {
    border: 1px solid var(--ag-line);
    box-shadow: var(--ag-shadow-sm);
}

/* Popovers (menus, selects, autocompletes) float above the page. */
.mud-popover {
    border: 1px solid var(--ag-line);
    border-radius: 10px;
    box-shadow: var(--ag-shadow-lg) !important;
}

/* Tooltips are popovers too, but they read as small dark labels, not floating panels: the theme's
   ink with MudBlazor's white text, no border. The colour is set through the variable MudBlazor's
   tooltip (and its arrow) takes its background from, so the arrow matches the bubble. */
.mud-popover.mud-tooltip {
    --mud-palette-gray-darker: var(--ag-ink-700);
    border: 0;
    border-radius: 6px;
    box-shadow: var(--ag-shadow-md) !important;
}

.mud-dialog {
    border-radius: 16px;
    box-shadow: var(--ag-shadow-lg);
}

.mud-dialog .mud-dialog-title {
    font-family: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* Phones: dialogs use nearly the whole screen instead of losing 64px to margins. */
@media (max-width: 599.98px) {
    .mud-dialog-container .mud-dialog {
        margin: 8px;
        max-width: calc(100vw - 16px) !important;
        max-height: calc(100% - 16px);
    }

    .mud-dialog-container .mud-dialog.mud-dialog-width-full {
        width: calc(100vw - 16px);
    }

    .mud-dialog .mud-dialog-title,
    .mud-dialog .mud-dialog-content,
    .mud-dialog .mud-dialog-actions {
        padding-left: 16px;
        padding-right: 16px;
    }

    .mud-dialog .mud-dialog-actions {
        flex-wrap: wrap;
        gap: 8px;
    }
}

.mud-overlay .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(10, 18, 32, 0.45);
}

/* Forms shown in a dimmed MudOverlay (FormShell, CustomerDialog and the pages' own add/edit
   overlays) asked for z-index 1000, or nothing (5), so the app bar (1300), the menu (1100) and the
   feedback button sat on top of them: on a phone the app bar hid the title and the button covered
   Save. They go just under MudBlazor's own dialogs instead, and while one is open the dropdowns its
   selects open (popovers, 1200) are lifted above it. The menu's own dimmed backdrop is left alone:
   lifted, it covered the menu and the whole screen went grey. */
.mud-overlay:not(.mud-drawer-overlay):has(> .mud-overlay-scrim.mud-overlay-dark) {
    z-index: calc(var(--mud-zindex-dialog) - 1) !important;
}

body:has(.mud-overlay:not(.mud-drawer-overlay) > .mud-overlay-scrim.mud-overlay-dark) .mud-popover.mud-popover-open {
    z-index: calc(var(--mud-zindex-dialog) + 10) !important;
}

/* ---- App bar and drawer ------------------------------------------------------------------ */

.mud-appbar {
    border-bottom: 1px solid var(--ag-line);
    box-shadow: none !important;
}

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

.mud-drawer.mud-drawer--open.mud-drawer-temporary,
.mud-drawer.mud-drawer--open.mud-drawer-responsive.mud-drawer-mini,
.mud-drawer-overlay ~ .mud-drawer {
    box-shadow: var(--ag-shadow-lg) !important;
}

/* Navigation: rounded items inset from the edges, the current page in a soft blue pill. */
.mud-drawer .mud-drawer-content > .mud-navmenu {
    padding: 8px 0 24px;
}

.mud-drawer .mud-nav-link {
    margin: 1px 10px;
    width: calc(100% - 20px);
    border-radius: 8px;
    padding: 7px 12px;
    color: var(--ag-ink-600);
    font-weight: 500;
    font-size: 0.875rem;
    transition: background-color .12s var(--ag-ease), color .12s var(--ag-ease);
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--ag-ink-400);
    font-size: 1.25rem;
}

.mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background-color: var(--ag-surface-3);
    color: var(--ag-ink-900);
}

.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled),
.mud-drawer .mud-nav-link.mud-nav-link-active {
    background-color: var(--ag-brand-50);
    color: var(--ag-brand-700);
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon,
.mud-drawer .mud-nav-link.mud-nav-link-active .mud-nav-link-icon {
    color: var(--ag-brand-600);
}

/* Group headings read as section labels; their children sit under them without a second indent. */
.mud-drawer .mud-nav-group > .mud-nav-link {
    margin-top: 10px;
    color: var(--ag-ink-700);
    font-weight: 600;
}

.mud-drawer .mud-navmenu .mud-nav-group * .mud-nav-item .mud-nav-link {
    padding-left: 44px;
}

.mud-drawer .mud-divider {
    margin: 10px 16px;
    border-color: var(--ag-line-soft);
}

/* ---- Buttons ------------------------------------------------------------------------------ */

.mud-button-root.mud-button {
    border-radius: 8px;
}

.mud-button-filled {
    box-shadow: var(--ag-shadow-sm);
}

.mud-button-filled:hover {
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.mud-button-outlined {
    border-color: var(--ag-line);
}

.mud-button-outlined.mud-button-outlined-default {
    color: var(--ag-ink-600);
}

/* ---- Inputs ------------------------------------------------------------------------------ */

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--ag-ink-300);
}

.mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border,
.mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: var(--mud-palette-primary);
}

/* ---- Tables ------------------------------------------------------------------------------ */

.mud-table {
    border-radius: 10px;
}

.mud-table .mud-table-head .mud-table-cell {
    background-color: var(--ag-surface-2);
    color: var(--ag-ink-500);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--ag-line);
    white-space: nowrap;
}

/* Sortable headings match the plain ones. */
.mud-table .mud-table-head .mud-table-sort-label,
.mud-table .mud-table-head .mud-table-sort-label * {
    font: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.mud-table .mud-table-body .mud-table-cell {
    border-bottom-color: var(--ag-line-soft);
}

.mud-table:not(.mud-table-dense) .mud-table-cell {
    padding: 12px 14px;
}

/* Reference numbers and the like read as one token; let the table scroll rather than break them. */
.mud-table-cell.nowrap,
.nowrap {
    white-space: nowrap;
}

.mud-table-hover .mud-table-container .mud-table-root .mud-table-body .mud-table-row:hover {
    background-color: var(--mud-palette-table-hover);
}

/* A table inside a panel sits flush in it: no second border, shadow or rounded box. */
.mud-paper .mud-table:not(.mud-table-outlined) {
    border: none;
    box-shadow: none;
}

/* On narrow screens MudTable stacks each row (below its Breakpoint: xs 600px, sm 960px, md
   1280px). Each row becomes a small card, grey labels on the left and values on the right (a
   cell's lines stacked under each other), and the cards flow into as many columns as fit: one
   on a phone, two on a tablet. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-root {
        display: block;
    }

    .mud-xs-table .mud-table-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        gap: 12px;
        border-top: none;
    }

    .mud-xs-table .mud-table-body .mud-table-row {
        display: block;
        margin: 0;
        padding: 6px 0;
        border: 1px solid var(--ag-line);
        border-radius: 10px;
        background-color: var(--mud-palette-surface) !important;
    }

    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        justify-items: end;
        min-height: 0;
        padding: 7px 14px;
        border: none;
        text-align: end !important;
        overflow-wrap: anywhere;
    }

    .mud-xs-table .mud-table-body .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 12;
        justify-self: start;
        max-width: 40vw;
        padding-right: 0;
        padding-inline-end: 0;
        text-align: start;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ag-ink-400);
        overflow-wrap: normal;
    }

    .mud-xs-table .mud-table-body .mud-table-cell > * {
        grid-column: 2;
        max-width: 100%;
    }

    .mud-xs-table .mud-table-body .mud-table-cell:not([data-label])::before,
    .mud-xs-table .mud-table-body .mud-table-cell[data-label=""]::before {
        content: none;
    }

    /* Rows that span the table (expanded details, group headings) use the card's full width,
       and a full row of the card grid rather than one column of it. */
    .mud-xs-table .mud-table-body .mud-table-row:has(> .mud-table-cell[colspan]) {
        grid-column: 1 / -1;
    }

    .mud-xs-table .mud-table-body .mud-table-cell[colspan]:not([data-label]) {
        justify-items: stretch;
        text-align: start !important;
    }

    /* Action buttons sit in a row, not one per line. */
    .mud-xs-table .mud-table-body .mud-table-cell[data-label="Actions"],
    .mud-xs-table .mud-table-body .mud-table-cell[data-label="Action"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px 4px;
    }

    .mud-xs-table .mud-table-body .mud-table-cell[data-label="Actions"]::before,
    .mud-xs-table .mud-table-body .mud-table-cell[data-label="Action"]::before {
        margin-right: auto;
    }
}

@media (max-width: 960px) {
    .mud-sm-table .mud-table-root {
        display: block;
    }

    .mud-sm-table .mud-table-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        gap: 12px;
        border-top: none;
    }

    .mud-sm-table .mud-table-body .mud-table-row {
        display: block;
        margin: 0;
        padding: 6px 0;
        border: 1px solid var(--ag-line);
        border-radius: 10px;
        background-color: var(--mud-palette-surface) !important;
    }

    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        justify-items: end;
        min-height: 0;
        padding: 7px 14px;
        border: none;
        text-align: end !important;
        overflow-wrap: anywhere;
    }

    .mud-sm-table .mud-table-body .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 12;
        justify-self: start;
        max-width: 40vw;
        padding-right: 0;
        padding-inline-end: 0;
        text-align: start;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ag-ink-400);
        overflow-wrap: normal;
    }

    .mud-sm-table .mud-table-body .mud-table-cell > * {
        grid-column: 2;
        max-width: 100%;
    }

    .mud-sm-table .mud-table-body .mud-table-cell:not([data-label])::before,
    .mud-sm-table .mud-table-body .mud-table-cell[data-label=""]::before {
        content: none;
    }

    /* Rows that span the table (expanded details, group headings) use the card's full width,
       and a full row of the card grid rather than one column of it. */
    .mud-sm-table .mud-table-body .mud-table-row:has(> .mud-table-cell[colspan]) {
        grid-column: 1 / -1;
    }

    .mud-sm-table .mud-table-body .mud-table-cell[colspan]:not([data-label]) {
        justify-items: stretch;
        text-align: start !important;
    }

    /* Action buttons sit in a row, not one per line. */
    .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"],
    .mud-sm-table .mud-table-body .mud-table-cell[data-label="Action"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px 4px;
    }

    .mud-sm-table .mud-table-body .mud-table-cell[data-label="Actions"]::before,
    .mud-sm-table .mud-table-body .mud-table-cell[data-label="Action"]::before {
        margin-right: auto;
    }
}

@media (max-width: 1280px) {
    .mud-md-table .mud-table-root {
        display: block;
    }

    .mud-md-table .mud-table-body {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
        gap: 12px;
        border-top: none;
    }

    .mud-md-table .mud-table-body .mud-table-row {
        display: block;
        margin: 0;
        padding: 6px 0;
        border: 1px solid var(--ag-line);
        border-radius: 10px;
        background-color: var(--mud-palette-surface) !important;
    }

    .mud-md-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-md-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        display: grid;
        grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
        column-gap: 16px;
        align-items: center;
        justify-items: end;
        min-height: 0;
        padding: 7px 14px;
        border: none;
        text-align: end !important;
        overflow-wrap: anywhere;
    }

    .mud-md-table .mud-table-body .mud-table-cell::before {
        grid-column: 1;
        grid-row: 1 / span 12;
        justify-self: start;
        max-width: 40vw;
        padding-right: 0;
        padding-inline-end: 0;
        text-align: start;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--ag-ink-400);
        overflow-wrap: normal;
    }

    .mud-md-table .mud-table-body .mud-table-cell > * {
        grid-column: 2;
        max-width: 100%;
    }

    .mud-md-table .mud-table-body .mud-table-cell:not([data-label])::before,
    .mud-md-table .mud-table-body .mud-table-cell[data-label=""]::before {
        content: none;
    }

    /* Rows that span the table (expanded details, group headings) use the card's full width,
       and a full row of the card grid rather than one column of it. */
    .mud-md-table .mud-table-body .mud-table-row:has(> .mud-table-cell[colspan]) {
        grid-column: 1 / -1;
    }

    .mud-md-table .mud-table-body .mud-table-cell[colspan]:not([data-label]) {
        justify-items: stretch;
        text-align: start !important;
    }

    /* Action buttons sit in a row, not one per line. */
    .mud-md-table .mud-table-body .mud-table-cell[data-label="Actions"],
    .mud-md-table .mud-table-body .mud-table-cell[data-label="Action"] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px 4px;
    }

    .mud-md-table .mud-table-body .mud-table-cell[data-label="Actions"]::before,
    .mud-md-table .mud-table-body .mud-table-cell[data-label="Action"]::before {
        margin-right: auto;
    }
}

/* ---- Chips, tabs, misc --------------------------------------------------------------------- */

.mud-chip {
    font-weight: 500;
}

.mud-chip.mud-chip-size-small {
    font-size: 0.75rem;
}

.mud-tabs-tabbar {
    border-bottom: 1px solid var(--ag-line);
}

.mud-tab {
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0;
}

.mud-alert {
    border-radius: 10px;
}

.mud-divider {
    border-color: var(--ag-line);
}

/* ---- Scrollbars ----------------------------------------------------------------------------- */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
    background-clip: padding-box;
}