/*
   Thin layer over MudBlazor, taken from the reference design template (ADR 0008).
   It carries shape, density and the few elements MudBlazor has no counterpart for;
   colour and typography are the theme's business and are never written here as
   literals - they arrive through the --ds-* tokens the host writes onto the body
   (ViridiaTheme.CssVariables) and through the MudBlazor palette variables.

   Loaded after MudBlazor.min.css. The other way round its defaults win silently.

   A few selectors below are deliberately written out in full: MudBlazor has its own
   multi-level rules for the same elements, so a shorter selector stops applying without
   any sign that it did.
*/

:root {
    --ds-radius-sm: 8px;
    --ds-radius: 12px;
    --ds-radius-lg: 16px;
    --ds-radius-pill: 999px;
    --ds-shadow-sm: 0 1px 2px rgba(30, 42, 35, .04);
    --ds-shadow: 0 2px 10px rgba(30, 42, 35, .05);

    /* Numerals, sums and dates. Kept separate from the interface face on purpose. */
    --ds-font-num: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* ── Buttons: 40 px, small radius, no uppercase ── */
.mud-button-root {
    min-height: 40px;
    padding: 0 16px;
    border-radius: var(--ds-radius-sm);
    text-transform: none;
    letter-spacing: 0;
    gap: 8px;
    white-space: nowrap;
}

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

.mud-button-outlined {
    border-color: var(--ds-border);
    background: var(--ds-surface);
    color: var(--ds-text);
    box-shadow: var(--ds-shadow-sm);
}

.mud-button-outlined:hover {
    border-color: var(--ds-border-strong);
    background: var(--ds-surface-alt);
}

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

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--ds-primary-hover);
}

.mud-icon-button {
    border-radius: var(--ds-radius-sm);
    color: var(--ds-text-muted);
}

.mud-icon-button:hover {
    background: var(--ds-neutral-soft);
}

/* ── Cards ── */
.mud-paper {
    border-radius: var(--ds-radius-lg);
}

.mud-paper-outlined {
    border-color: var(--ds-border);
    box-shadow: var(--ds-shadow-sm);
}

.mud-card-header {
    gap: 14px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--ds-border);
}

.mud-card-content {
    padding: 20px;
}

/* The footer of a card carries its actions, separated by a line as in the template. */
.mud-card-actions {
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--ds-border);
}

/* ── Top bar ── */
.mud-appbar {
    border-bottom: 1px solid var(--ds-border);
}

/*
   The app bar measures its height without the border, so the toolbar gives the border back
   its pixel. Without this the bar is 65 px and the drawer no longer lines up with it.
*/
.mud-appbar .mud-toolbar-appbar {
    height: calc(var(--mud-appbar-height) - 1px);
}

.mud-appbar.mud-elevation-0 {
    box-shadow: none;
}

/* ── Navigation ── */
.mud-drawer {
    background: var(--ds-surface-alt);
    border-right: 1px solid var(--ds-border);
}

.mud-navmenu .mud-nav-link {
    margin: 1px 12px;
    padding: 9px 12px;
    min-height: 0;
    gap: 10px;
    border-radius: var(--ds-radius-sm);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ds-text-muted);
}

.mud-navmenu .mud-nav-link .mud-nav-link-icon {
    min-width: 0;
    margin-inline-end: 0;
    color: inherit;
}

.mud-navmenu .mud-nav-link .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.mud-navmenu .mud-nav-link .mud-nav-link-text {
    display: flex;
    align-items: center;
    width: 100%;
}

.mud-navmenu .mud-nav-link:hover {
    background: var(--ds-neutral-soft);
    color: var(--ds-text);
}

/*
   Full specificity: MudBlazor styles the active link through its own longer selector.
   The text is the darker olive: on the tinted background the lighter one would fall under the
   contrast a 13.5px bold label needs (doc:brand.colors).
*/
.mud-navmenu.mud-navmenu-default .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--ds-primary-soft);
    color: var(--ds-primary-hover);
    font-weight: 600;
}

/* The heading of a group is a label, not another destination. */
.mud-navmenu .mud-nav-group > .mud-nav-link {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ds-text-faint);
}

/* ── Tables ── */
.mud-table-root {
    font-size: 13.5px;
}

.mud-table-root .mud-table-head .mud-table-cell {
    padding: 12px 16px;
    color: var(--ds-text-faint);
    background: var(--ds-surface-alt);
    border-bottom: 1px solid var(--ds-border);
    white-space: nowrap;
}

.mud-table-body .mud-table-cell {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ds-border);
}

/*
   Full specificity: a dense table is styled by MudBlazor through .mud-table-dense * .mud-table-row
   .mud-table-cell, which is longer than the rule above and would silently win. The row height of
   the template is the one below, and Dense stays on for everything else it does.
*/
.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 14px 16px;
}

.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: 0;
}

.mud-table-container {
    overflow-x: auto;
}

.mud-table-toolbar {
    height: auto;
    min-height: 0;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ds-border);
    gap: 10px;
    flex-wrap: wrap;
}

.mud-table-toolbar .mud-input-control {
    margin: 0;
}

.mud-table-toolbar .mud-select .mud-input.mud-input-outlined input {
    padding: 8px 12px;
}

/* ── Inputs ── */
.mud-input.mud-input-outlined > .mud-input-outlined-border {
    border-radius: var(--ds-radius-sm);
    border-color: var(--ds-border-strong);
}

.mud-input.mud-input-outlined input,
.mud-input.mud-input-outlined .mud-select-input input {
    padding: 11px 13px;
    font-size: 13.5px;
}

.mud-input-outlined.mud-input-adorned .mud-input-adornment .mud-icon-root {
    width: 17px;
    height: 17px;
    font-size: 17px;
    color: var(--ds-text-faint);
}

.mud-input.mud-input-outlined.mud-focused > .mud-input-outlined-border {
    border-width: 1px;
    box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

/*
   Label above the field, not floating inside it. The floating label is hidden only where
   the field opts in through .ds-field, so a control that still uses Label keeps working
   until the screen is converted.
*/
.ds-field .mud-input-control .mud-input-label-outlined {
    display: none;
}

.ds-field > label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--ds-text);
}

.ds-field .mud-input-helper-text {
    font-size: 12px;
    margin-top: 6px;
}

.ds-field + .ds-field {
    margin-top: 16px;
}

/*
   The sign-in screen and the forced password change render statically, so their fields are plain
   inputs (ADR 0002, point 5). The shape is the template's, the same one the components get.
*/
.ds-field > input {
    display: block;
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 13.5px;
    color: var(--ds-text);
    background: var(--ds-surface);
    border: 1px solid var(--ds-border-strong);
    border-radius: var(--ds-radius-sm);
}

.ds-field > input:focus {
    outline: 0;
    border-color: var(--ds-primary);
    box-shadow: 0 0 0 3px var(--ds-primary-soft);
}

.ds-field .validation-message,
.ds-field-error {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--ds-danger);
}

/* ── Checkbox and switch: the template's sizes, without the ripple surface ── */
.mud-checkbox .mud-button-root {
    min-height: 0;
    padding: 6px;
}

.mud-checkbox .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

/* ── Status chip: a dot as well as the text, never colour alone ── */
.mud-chip.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: auto;
    margin: 0;
    padding: 3px 10px;
    border-radius: var(--ds-radius-pill);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.mud-chip.ds-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/*
   MudBlazor colours a chip through its own variant classes, so the semantic background has to
   win over them; the state is the meaning of the chip and not a decoration to be overridden.
*/
.mud-chip.ds-chip-success {
    background: var(--ds-success-soft) !important;
    color: var(--ds-success) !important;
}

.mud-chip.ds-chip-warning {
    background: var(--ds-warning-soft) !important;
    color: var(--ds-warning) !important;
}

.mud-chip.ds-chip-error {
    background: var(--ds-danger-soft) !important;
    color: var(--ds-danger) !important;
}

.mud-chip.ds-chip-info {
    background: var(--ds-info-soft) !important;
    color: var(--ds-info) !important;
}

.mud-chip.ds-chip-accent {
    background: var(--ds-primary-soft) !important;
    color: var(--ds-primary) !important;
}

.mud-chip.ds-chip-neutral {
    background: var(--ds-neutral-soft) !important;
    color: var(--ds-text-muted) !important;
}

/* ── Segmented switch for a small set of states ── */
.mud-toggle-group.ds-seg {
    background: var(--ds-neutral-soft);
    border: 0;
    border-radius: var(--ds-radius-sm);
    padding: 3px;
    gap: 2px;
}

.mud-toggle-group.ds-seg .mud-toggle-item {
    border: 0 !important;
    border-radius: 6px;
    padding: 5px 11px;
    min-height: 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-muted);
    background: transparent;
}

.mud-toggle-group.ds-seg .mud-toggle-item-selected {
    background: var(--ds-surface) !important;
    color: var(--ds-text) !important;
    box-shadow: var(--ds-shadow-sm);
}

/* ── Alerts: the template's banner, a line of lead-in and the rule below it ── */
.mud-alert {
    border-radius: var(--ds-radius);
    font-size: 13.5px;
}

.mud-alert strong {
    display: block;
    margin-bottom: 2px;
}

/* ── Timeline: the steps of a process, future ones included ── */
.mud-timeline-item .mud-timeline-item-content .mud-typography-body1 {
    font-size: 13.5px;
    font-weight: 500;
}

/* ── Values ── */
.ds-num,
.mud-table-cell .ds-num {
    font-family: var(--ds-font-num);
    font-variant-numeric: tabular-nums;
}

.ds-amount {
    font-family: var(--ds-font-num);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.ds-order-no {
    font-family: var(--ds-font-num);
    font-weight: 600;
    color: var(--ds-primary);
}

.ds-strong {
    font-weight: 500;
}

/* Supplementary information as a second line of the cell, not another column. */
.ds-sub {
    display: block;
    font-size: 12px;
    color: var(--ds-text-faint);
    margin-top: 2px;
}

/* A kind or a rate: a quiet badge, never a status chip. */
.ds-badge-kind {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    background: var(--ds-neutral-soft);
    color: var(--ds-text-muted);
}

.mud-avatar.ds-avatar {
    width: 34px;
    height: 34px;
    font-size: 12px;
    font-weight: 600;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
}

/* A party in a cell: avatar, name and the line below it. */
.ds-party {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Key and value, for data that is read only ── */
.ds-kv {
    display: grid;
    margin: 0;
}

.ds-kv-row {
    display: flex;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ds-border);
    font-size: 13.5px;
}

.ds-kv-row:last-child {
    border-bottom: 0;
}

.ds-kv-row dt {
    min-width: 148px;
    margin: 0;
    color: var(--ds-text-muted);
}

.ds-kv-row dd {
    flex: 1;
    margin: 0;
}

/* ── A breakdown that ends in a total ── */
.ds-sum-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0;
    font-size: 13.5px;
}

.ds-sum-row.ds-sum-total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--ds-border-strong);
    font-size: 16px;
    font-weight: 600;
}

/* ── Shell: the parts MudBlazor has nothing ready for ── */
.mud-main-content {
    background: var(--ds-bg);
    min-height: 100vh;
}

.ds-page {
    padding: 26px 28px 40px;
    max-width: 1360px;
}

/*
   The head of the drawer carries the brand and nothing else. It has no line under it: the menu
   below belongs to the same block, and a divider would read as two lists.
*/
.ds-drawer-head {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    padding: 0 20px;
}

.ds-org-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ds-primary);
}

.ds-nav-section {
    padding: 16px 24px 6px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ds-text-faint);
}

/* The head of the user menu names whose account is open before the actions below it. */
.ds-menu-head {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--ds-border);
}

/* ── Page header ── */
.ds-page-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.ds-page-title {
    margin: 0;
}

/*
   After every navigation FocusOnNavigate (Routes.razor) moves focus to the title of the page so
   that a screen reader announces where the user has arrived. The title is not in the tab order -
   it only ever gets focus this way - so the ring would mark something nobody can act on. The
   announcement stays, the box goes.
*/
.ds-page-title:focus,
.ds-page-title:focus-visible {
    outline: none;
}

.ds-page-sub {
    margin: 5px 0 0;
    font-size: 13.5px;
    color: var(--ds-text-muted);
}

.ds-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-left: auto;
}

.ds-breadcrumb.mud-breadcrumbs {
    padding: 0;
    margin-bottom: 6px;
    font-size: 12px;
}

.ds-breadcrumb.mud-breadcrumbs li,
.ds-breadcrumb.mud-breadcrumbs a,
.ds-breadcrumb.mud-breadcrumbs .mud-breadcrumb-separator {
    font-size: 12px;
    color: var(--ds-text-faint);
}

/* ── Quick filter tiles ── */
.ds-statrow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}

.ds-statmini {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    font: inherit;
    text-align: left;
    text-transform: none;
    background: var(--ds-surface);
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius);
    box-shadow: var(--ds-shadow-sm);
}

.ds-statmini.ds-selected {
    border-color: var(--ds-primary);
    background: var(--ds-primary-soft);
}

.ds-statmini .ds-statmini-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--ds-radius-sm);
}

.ds-statmini .ds-statmini-icon .mud-icon-root {
    width: 18px;
    height: 18px;
    font-size: 18px;
}

.ds-statmini .ds-statmini-value {
    font-family: var(--ds-font-num);
    font-size: 18px;
    font-weight: 600;
    color: var(--ds-text);
}

.ds-statmini .ds-statmini-label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--ds-text-muted);
}

.ds-statmini .ds-statmini-note {
    margin-left: auto;
    font-family: var(--ds-font-num);
    font-size: 12.5px;
    color: var(--ds-text-faint);
}

@media (max-width: 980px) {
    .ds-statrow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── Empty state: an icon, a sentence and the first step ── */
.ds-empty {
    padding: 56px 24px 60px;
    text-align: center;
}

.ds-empty-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--ds-primary-soft);
    color: var(--ds-primary);
}

.ds-empty-icon .mud-icon-root {
    width: 26px;
    height: 26px;
    font-size: 26px;
}