/* The invoice drawer's toolbar: the green bar with the title block on the left, the page's actions and the
   drawer's utilities on the right. The main action is the only filled button (white on the green); the
   rest sits in a menu. Everything else on the bar is white. */
.drawer-toolbar.mud-toolbar {
    min-height: 56px;
    height: auto;
    gap: 16px;
    padding: 6px 12px 6px 20px;
}

.drawer-title {
    min-width: 0;
    line-height: 1.25;
}

.drawer-title-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-invoice-no {
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Status in the list's chip colour (inline background), white text. */
.drawer-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    white-space: nowrap;
}

.drawer-meta {
    margin-top: 2px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    white-space: nowrap;
}

.drawer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.drawer-actions .mud-button-root.mud-button {
    white-space: nowrap;
}

/* Main action (Process task, Open in …): a white pill with green text and a soft shadow, in sentence case instead
   of MudBlazor's capitals. Hover only tints it light green; it doesn't move. */
.drawer-toolbar .mud-button-filled.mud-button-filled-primary {
    height: 32px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background-color: #fff;
    color: var(--mud-palette-primary);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.10);
    transition: background-color 150ms;
}

.drawer-toolbar .mud-button-filled.mud-button-filled-primary:hover {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, #fff);
}

.drawer-toolbar .mud-button-filled.mud-button-filled-primary .mud-button-icon-start {
    margin-right: 6px;
}

.drawer-toolbar .mud-button-filled.mud-button-filled-primary .mud-button-icon-start .mud-icon-root {
    font-size: 1.15rem;
}

/* Icon buttons (undo, save, more, utilities) are white; disabled ones fade instead of turning grey. */
.drawer-toolbar .mud-icon-button {
    color: #fff;
}

.drawer-toolbar .mud-button-root:disabled,
.drawer-toolbar .mud-button-root.mud-disabled {
    color: rgba(255, 255, 255, 0.45) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.drawer-readonly {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 12px 0 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    background-color: rgba(255, 255, 255, 0.18);
    white-space: nowrap;
}

.drawer-readonly .mud-icon-root {
    font-size: 1.1rem;
}

/* Attachment, notes and close, set apart from the actions by a little space. The open notes callout
   gets a light circle behind its icon. */
.drawer-utilities {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: 8px;
}

.drawer-utilities .mud-icon-button.drawer-utility-active {
    background-color: rgba(255, 255, 255, 0.2);
}

/* The ⋯ actions menu hangs from the bottom edge of the green bar with a white arrow pointing up at the
   button. The button is 26px wide with its right edge on the menu's, so the arrow sits 13px in from the
   right; the button's bottom is 17px above the bar's edge. A drop shadow follows the arrow too. It sits
   above the drawer's floating callouts (note, lines), which start at z-index 1400. */
.mud-popover.drawer-menu-popover {
    margin-top: 17px;
    overflow: visible;
    border-radius: 8px;
    box-shadow: none;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.16)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.10));
    z-index: 1450 !important;
    min-width: 240px;
}

.drawer-menu-popover::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 5px;
    width: 16px;
    height: 16px;
    background-color: var(--mud-palette-surface);
    border-top-left-radius: 3px;
    transform: rotate(45deg);
}

.drawer-menu-popover .mud-menu-list-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--mud-palette-surface);
}

.drawer-menu.mud-list {
    padding: 6px;
    overflow: hidden;
}

.drawer-menu .mud-menu-item {
    gap: 12px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: 6px;
}

.drawer-menu .mud-menu-item .mud-menu-item-icon {
    margin: 0;
    font-size: 1.25rem;
    color: var(--mud-palette-text-secondary);
}

.drawer-menu .mud-menu-item .mud-menu-item-text {
    font-size: 0.875rem;
    flex: 1;
}

.drawer-menu .mud-menu-item:hover:not([aria-disabled="true"]) {
    background-color: var(--index-field-bg-hover);
}

.drawer-menu .mud-menu-item:hover:not([aria-disabled="true"]) .mud-menu-item-icon {
    color: var(--mud-palette-primary);
}

.drawer-menu .mud-divider {
    width: auto;
    margin: 6px 4px !important;
}

/* Shortcut as a small key cap on the right of an item. */
.drawer-menu-shortcut {
    margin-left: auto;
    padding: 1px 6px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    background-color: var(--mud-palette-background-gray);
    font-size: 0.7rem;
    line-height: 16px;
    color: var(--mud-palette-text-secondary);
}

.drawer-menu-row {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

/* Invoice drawer -> History window: a vertical timeline, oldest first, grouped by day. */
.history-body {
    max-height: 65vh;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.history-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.history-day {
    margin: 4px 0 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.history-day:not(:first-child) {
    margin-top: 12px;
}

/* Each item: the dot on the left, a line down to the next item, the content beside it. */
.history-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
}

.history-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 16px;
    bottom: 0;
    width: 2px;
    background-color: var(--mud-palette-lines-default);
}

.history-item:last-child::before,
.history-item:has(+ .history-day)::before {
    display: none;
}

/* A plain bullet per step, level with the action. */
.history-dot {
    flex: none;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    border-radius: 50%;
    background-color: var(--mud-palette-primary);
}

.history-content {
    flex: 1;
    min-width: 0;
}

.history-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.history-action {
    flex: 1;
    font-weight: 600;
    font-size: 0.875rem;
}

.history-time {
    flex: none;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.history-user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.history-user .mud-icon-root {
    font-size: 0.95rem;
}

.history-comments {
    margin-top: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    background-color: var(--mud-palette-background-gray);
}

/* Modal dialogs: a slim title bar, like the drawer windows' headers. (Positioned, so the close button centres on it.) */
.mud-dialog .mud-dialog-title {
    position: relative;
    padding: 10px 24px 6px;
}

.mud-dialog .mud-dialog-title .mud-typography-h6 {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
}

/* The close button, centred on the slim title bar (MudBlazor pins it 8px from the top of a taller bar). */
.mud-dialog .mud-dialog-title .mud-button-close {
    top: 50%;
    transform: translateY(-50%);
    padding: 6px;
}

/* Accounting window, read-only (approval without accounting): says why nothing can be changed. */
.accounting-readonly-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

.accounting-readonly-note .mud-icon-root {
    font-size: 1rem;
}

/* Lookup picker (LookupPickerDialog): pick one item from a long list — accounting lookups, custom field lookups. */
/* Above the drawer's windows (z-index 1400), e.g. the accounting window it's opened from. */
.mud-dialog-container:has(.lookup-picker) {
    z-index: 1500;
}

.lookup-picker .mud-dialog-title {
    padding-bottom: 8px;
}

.lookup-picker-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 32px; /* room for the close button */
}

.lookup-picker-title .mud-icon-root {
    color: var(--mud-palette-primary);
}

.lookup-picker-title-text {
    font-size: 1rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-picker .mud-dialog-content {
    padding-top: 10px;
}

.lookup-picker .lookup-picker-search {
    margin: 0 0 14px 0 !important;
}

.lookup-picker-list {
    height: min(55vh, 440px);
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 4px;
}

.lookup-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 40px;
    padding: 0 10px;
    border: none;
    border-radius: 6px;
    background: none;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.lookup-picker-item:hover,
.lookup-picker-item:focus-visible {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    outline: none;
}

/* What Enter picks while searching. */
.lookup-picker-item.first {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mud-palette-primary) 40%, transparent);
}

.lookup-picker-item.selected {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-surface));
    font-weight: 500;
}

.lookup-picker-code {
    flex: none;
    min-width: 72px;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-secondary);
}

.lookup-picker-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-picker-check {
    flex: none;
    color: var(--mud-palette-primary);
}

.lookup-picker-enter {
    flex: none;
    font-size: 0.6875rem;
    color: var(--mud-palette-text-secondary);
}

.lookup-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 100%;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.lookup-picker-summary {
    padding-left: 8px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}