/* The invoice index panel in the drawer: summary header, collapsible sections, read-only values. */

/* Summary header: supplier, invoice number and total, with attention chips. */
.index-summary {
    flex-shrink: 0;
    padding: 10px 14px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The drawer's index fields, below the summary header: they scroll on their own so the header stays in view. */
.index-panel-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.index-summary-top {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 30px;
}

/* Left of the line/accounting buttons: the accounting difference, when there is one. */
.index-summary-top-status {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.index-summary-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-top: 2px;
}

.index-summary-supplier {
    min-width: 0;
}

.index-summary-supplier .name {
    font-weight: 500;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.index-summary-supplier .sub,
.index-summary-total .sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.index-summary-total {
    text-align: right;
    flex-shrink: 0;
}

.index-summary-total .amount {
    font-size: 1.15rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.index-summary-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.index-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    border: 1px solid transparent;
}

.index-chip.clickable {
    cursor: pointer;
}

.index-chip.clickable:hover {
    filter: brightness(0.95);
}

.index-chip .mud-icon-root {
    font-size: 1rem;
}

.index-chip.warning {
    background-color: rgba(255, 152, 0, 0.12);
    color: var(--index-warning-text);
}

.index-chip.danger {
    background-color: rgba(244, 67, 54, 0.10);
    color: #b3261e;
}

.index-chip.neutral {
    background-color: var(--mud-palette-surface);
    border-color: var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

/* Collapsible sections. */
.index-section {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.index-section-head {
    display: flex;
    align-items: center;
    /* Buttons centre their content by default; section titles start at the left. */
    justify-content: flex-start;
    gap: 6px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background-color: var(--index-section-head-bg);
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    text-align: left;
}

.index-section-head:hover {
    background-color: var(--index-section-head-bg-hover);
}

.index-section-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 14px 10px;
}

/* Two short fields side by side; a single field takes the full width. */
.index-row {
    display: flex;
    gap: 10px;
}

.index-row:empty {
    display: none;
}

.index-row > * {
    flex: 1 1 0;
    min-width: 0;
}

/* Read-only value: label + text instead of a disabled input. */
.index-value-label {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.index-value-text {
    font-size: 0.875rem;
    padding-top: 2px;
    overflow-wrap: anywhere;
    white-space: pre-line; /* keeps the line breaks of multiline text */
}

.index-value.numeric .index-value-text,
.index-value.numeric .index-value-label {
    text-align: right;
}

.index-value.numeric .index-value-text {
    font-variant-numeric: tabular-nums;
}

/* Supplier payment terms under the supplier field. */
.supplier-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.supplier-term {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.supplier-term .mud-icon-root {
    font-size: 0.95rem;
}

/* Index fields: MudBlazor's Text-variant inputs restyled for the panel. The label sits above as a small
   caption and the value in a soft rounded box without lines; focus lifts the box with a primary ring.
   Scoped to the section bodies, loose fields in the drawer dialogs (.index-fields) and the dialog tables
   (.index-grid), so other forms (Smart Capture, pickers) keep the standard look.
   The tokens live on :root because the dropdowns and calendars render outside the panel. */
:root {
    --index-field-bg: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
    --index-field-bg-hover: color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    --index-selected-bg: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    --index-popover-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.08);
    --index-warning-text: #a35f00;
    /* Section headers: white like the panel (also used by the layout designer). */
    --index-section-head-bg: var(--mud-palette-surface);
    --index-section-head-bg-hover: var(--mud-palette-action-default-hover);
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input-control.mud-input-control-margin-dense {
    margin-top: 0;
    margin-bottom: 0;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input-control > .mud-input-control-input-container > .mud-input-label-text {
    transform: none !important;
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--mud-palette-text-secondary);
    left: 2px;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input-control > .mud-input-control-input-container > .mud-input-label-text.mud-input-error {
    color: var(--mud-palette-error);
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text {
    margin-top: 18px !important;
    padding: 0 8px;
    border-radius: 6px;
    background-color: var(--index-field-bg) !important;
    font-size: 0.875rem;
    transition: background-color 150ms, box-shadow 150ms;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text::before,
:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text::after {
    display: none;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text:hover {
    background-color: var(--index-field-bg-hover) !important;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text:focus-within {
    background-color: var(--mud-palette-surface) !important;
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text.mud-input-error {
    box-shadow: inset 0 0 0 1px var(--mud-palette-error);
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text > input.mud-input-root,
:is(.index-section-body, .index-fields, .index-grid) .mud-input.mud-input-text > div.mud-input-slot {
    padding-top: 6px;
    padding-bottom: 6px;
    height: auto;
    line-height: 20px;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input-helper-text {
    margin-top: 2px;
}

:is(.index-section-body, .index-fields, .index-grid) .mud-input-adornment .mud-icon-root {
    font-size: 1.1rem;
}

/* MudBlazor pulls end icon buttons out by their normal 12px padding; with the smaller padding that would
   put them on the box edge, so they line up with the dropdown arrows instead. */
:is(.index-section-body, .index-fields, .index-grid) .mud-input-adornment .mud-icon-button {
    padding: 2px;
    margin-right: -2px;
}

/* A field that differs from Therefore: orange left edge on the box. */
:is(.index-section-body, .index-fields, .index-grid) .field-changed .mud-input.mud-input-text {
    background-color: rgba(255, 152, 0, 0.08) !important;
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
}

:is(.index-section-body, .index-fields, .index-grid) .field-changed .mud-input.mud-input-text:focus-within {
    box-shadow: inset 3px 0 0 var(--mud-palette-warning), inset 0 0 0 1px var(--mud-palette-primary);
}

/* Read-only values: the same caption and box as the inputs, without hover or focus. Labels stay on the
   left like the inputs' labels; amounts are right-aligned inside their box. */
.index-section-body .index-value {
    padding-top: 0;
}

.index-section-body .index-value-label,
.index-section-body .index-value.numeric .index-value-label {
    line-height: 16px;
    padding-left: 2px;
    text-align: left;
}

.index-section-body .index-value-text {
    margin-top: 2px;
    min-height: 32px;
    padding: 6px 8px;
    line-height: 20px;
    border-radius: 6px;
    background-color: var(--index-field-bg);
}

/* Dropdown lists opened from the index panel (PopoverClass = IndexPanelStyles.Popover): rounded card with
   a soft shadow, compact rows with rounded hover, and the selected row tinted instead of filled. */
.mud-popover.index-popover {
    margin-top: 4px;
    border-radius: 8px;
    box-shadow: var(--index-popover-shadow);
}

.index-popover .mud-list {
    padding: 4px;
}

.index-popover .mud-list-item {
    min-height: 32px;
    padding: 4px 8px;
    border-radius: 6px;
}

.index-popover .mud-list-item .mud-typography {
    font-size: 0.875rem;
}

.index-popover .mud-list-item:hover,
.index-popover .mud-list-item:focus-visible {
    background-color: var(--index-field-bg-hover);
}

.index-popover .mud-list-item.mud-selected-item {
    background-color: var(--index-selected-bg);
    font-weight: 500;
}

/* Calendars opened from the index panel. Date pickers have no PopoverClass, so the calendar is found by
   the class its day buttons get (IndexPanelStyles.DayClass). No toolbar; compact rounded day cells. */
.mud-picker-popover:has(.index-day) {
    margin-top: 4px;
    border-radius: 8px;
    box-shadow: var(--index-popover-shadow);
    overflow: hidden;
}

.mud-picker-popover:has(.index-day) .mud-picker-popover-paper {
    box-shadow: none;
    border-radius: 8px;
}

.mud-picker-popover:has(.index-day) .mud-picker-calendar-header-switch .mud-typography {
    font-size: 0.875rem;
    font-weight: 500;
}

.mud-picker-popover:has(.index-day) .mud-day-label {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.mud-picker-popover:has(.index-day) .mud-day {
    font-size: 0.8125rem;
}

.mud-picker-popover:has(.index-day) .mud-day:not(.mud-selected):hover {
    background-color: var(--index-field-bg-hover);
}

/* Line-item, order-line, purchase-line and accounting tables in the drawer dialogs: no grid lines,
   caption-style column headers like the section titles, and the index panel's soft boxed inputs in
   the cells (without the caption space, the column header is the label). */
.index-grid.mud-table,
.index-grid .mud-table-container {
    background-color: transparent;
}

.index-grid .mud-table-head .mud-table-cell {
    padding: 4px 4px 6px !important;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary);
    background-color: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.index-grid .mud-table-body .mud-table-cell {
    padding: 3px 4px !important;
    border-bottom: none;
}

.index-grid .mud-table-body .mud-table-row:first-child .mud-table-cell {
    padding-top: 8px !important;
}

.index-grid .mud-input.mud-input-text {
    margin-top: 0 !important;
}

/* Row delete buttons stay quiet until hovered. */
.index-grid .mud-icon-button.mud-error-text {
    color: var(--mud-palette-text-secondary) !important;
}

.index-grid .mud-icon-button.mud-error-text:hover {
    color: var(--mud-palette-error) !important;
}

/* Accounting dialog header: template select with the balance next to it. The figures use the field
   caption and a soft box on the same 32px line as the select box; the difference box is tinted. */
.accounting-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 32px;
}

.accounting-template {
    width: 320px;
    max-width: 100%;
}

.accounting-balance {
    display: flex;
    gap: 24px;
}

.accounting-stat-label {
    font-size: 0.75rem;
    line-height: 16px;
    color: var(--mud-palette-text-secondary);
    padding-left: 2px;
    margin-bottom: 2px;
}

.accounting-stat-value {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 6px;
    background-color: var(--index-field-bg);
    font-size: 0.875rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.accounting-diff {
    padding-left: 8px;
}

.accounting-diff .mud-icon-root {
    font-size: 1.1rem;
}

.accounting-diff.balanced {
    background-color: color-mix(in srgb, var(--mud-palette-success) 12%, transparent);
    color: var(--mud-palette-success-darken);
}

.accounting-diff.unbalanced {
    background-color: rgba(255, 152, 0, 0.12);
    color: var(--index-warning-text);
}

/* Amounts line up on the right, in the panel, the dialog fields and the dialog tables. */
:is(.index-section-body, .index-fields, .index-grid) .mud-input-number-control input {
    text-align: right;
}

/* Checkbox and switch fields: vertically centred in the same height as each other (a dense checkbox is 32px,
   a switch 38px), and pulled left by their own padding so the box and the track start at the column edge. The
   offset sits on the inner label: a negative margin on the row item itself would change the row's split. */
.index-section-body .custom-field-toggle {
    min-height: 38px;
    justify-content: center;
}

.index-section-body .custom-field-toggle .mud-checkbox {
    margin-left: -7px;
}

.index-section-body .custom-field-toggle .mud-switch {
    margin-left: -12px;
}

/* A changed checkbox or switch (no box to mark): the changed-field tint and orange edge on its row, with the
   control moved clear of the edge. */
.index-section-body .custom-field-toggle.field-changed {
    border-radius: 6px;
    background-color: rgba(255, 152, 0, 0.08);
    box-shadow: inset 3px 0 0 var(--mud-palette-warning);
    padding-left: 8px;
}

/* MudBlazor sizes checkboxes and switches to their content (flex: none); in a row they take their half. */
.index-row > .mud-input-control.custom-field-toggle {
    flex: 1 1 0;
    min-width: 0;
}

.index-section-body .custom-field-toggle .mud-typography {
    font-size: 0.875rem;
}

/* Under the approval template: the first approver (pre-registration) or the next one (approval). */
.approver-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 2px 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.approver-hint .mud-icon-root {
    font-size: 1rem;
}

/* A button next to a field (e.g. choose the ad-hoc approvers): a soft box like the field itself, as high as the
   field's box and level with it (below the caption). */
.index-section-body .mud-icon-button.field-side-button {
    flex: none;
    width: 32px;
    height: 32px;
    margin-top: 18px;
    padding: 0;
    border-radius: 6px;
    background-color: var(--index-field-bg);
    transition: background-color 150ms;
}

.index-section-body .mud-icon-button.field-side-button:hover {
    background-color: var(--index-selected-bg);
}

.index-section-body .mud-icon-button.field-side-button .mud-icon-root {
    font-size: 1.15rem;
}

/* A value calculated by an automation (e.g. a purchase line total): not typed, so shown without the input box. */
.index-grid .calculated-cell .mud-input.mud-input-text {
    background-color: transparent !important;
    font-weight: 500;
}

.index-grid .calculated-icon {
    font-size: 0.95rem;
    vertical-align: text-bottom;
    margin-right: 2px;
    color: var(--mud-palette-primary);
}

/* Line tables (invoice, order and purchase lines): the total row, its amount right-aligned like the line totals above it. */
.index-grid .mud-table-foot .mud-table-cell {
    border-top: 1px solid var(--mud-palette-lines-default);
    border-bottom: none;
    font-weight: 600;
}

.index-grid .lines-total-label {
    text-align: right;
}

.index-grid .mud-table-foot .lines-total-value {
    text-align: right;
    padding-right: 12px !important; /* the cell padding plus the input's inset, so the digits line up with the line totals */
    font-variant-numeric: tabular-nums;
}