html, body { background: var(--mud-palette-background); font-family: var(--mud-typography-default-family, "Clear Sans", Helvetica, Arial, sans-serif); }

/* Every hover tint (buttons, menu/list items, nav) uses the brand colour; html:root outranks MudThemeProvider's :root. */
html:root { --mud-palette-action-default-hover: var(--mud-palette-primary-hover); }

/* Shown before the theme loads, so it repeats the theme's Body1 size and palette colours (OmniCloudTheme.cs). */
.loading { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 0.8125rem; line-height: 1.5; color: #5F5E5A; background: #F6F5F1; }
@media (prefers-color-scheme: dark) { .loading { color: #B4B2A9; background: #2A2926; } }

#blazor-error-ui {
    background: #fff3cd; color: #0B0B0B; bottom: 0; display: none; left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }

/* MudBlazor has no TextLink palette entry; links use the Info accent. */
.mud-main-content a:not(.mud-button-root):not(.mud-nav-link) { color: var(--mud-palette-info); }

/* Flat bars: hairline border instead of shadow. */
.mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); box-shadow: none; }
.mud-drawer { border-right: 1px solid var(--mud-palette-lines-default); box-shadow: none; }

/* Fixed-width fields in a flex row (the Connections filters, the Billing page size); MudBlazor inputs otherwise stretch and add label margin. */
.oc-field { flex: none; width: 150px; }
.mud-select:has(> .oc-field) { flex: none; }
.oc-field.oc-field-wide { width: 200px; }

/* The menu button's icon sits over the nav icons at every width (MudBlazor's gutters and edge margin change with the breakpoint). */
.mud-appbar .mud-toolbar { padding-inline: 16px; }
.mud-icon-button.oc-menu-button { margin-inline-start: -12px; }

/* Nav items as rounded pills with a brand-tinted active state. */
.mud-nav-link { border-radius: var(--mud-default-borderradius); margin: 2px 8px; width: calc(100% - 16px); padding: 8px; }
.mud-navmenu.mud-navmenu-primary .mud-nav-link.active:not(.mud-nav-link-disabled) { color: var(--mud-palette-text-primary); background-color: rgba(var(--mud-palette-primary-rgb), 0.16); }

/* Collapsed menu: the text is only for screen readers. */
.mud-drawer--closed.mud-drawer-mini .mud-nav-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* One border radius everywhere; MudBlazor hard-codes 12px on small chips. */
.mud-chip.mud-chip-size-small { border-radius: var(--mud-default-borderradius); }

/* Avatar as in the mockup: brand tint with brand-toned initials. */
.oc-avatar.mud-avatar { width: 32px; height: 32px; margin-inline: 8px; font-size: 0.75rem; font-weight: 500;
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
    color: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-primary)); }

/* Dialog buttons line up with the title and content: MudBlazor pads them 8px against 24px. */
.mud-dialog-actions { padding: 8px 24px 16px !important; }

/* Dashboard cards: a long amount wraps instead of widening the page. */
.oc-kpi-value { overflow-wrap: anywhere; }

/* Cost bars: name, bar and amount share a row; in a narrow card the bar drops below the name and amount. */
.oc-bars { container-type: inline-size; }
.oc-bar-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) 8.5rem; align-items: center; column-gap: 16px; row-gap: 2px; padding: 4px 0; }
.oc-bar-name { min-width: 0; overflow-wrap: anywhere; }
.oc-bar-amount { text-align: right; white-space: nowrap; }
@container (max-width: 34rem) {
    .oc-bar-row { grid-template-columns: minmax(0, 1fr) auto; }
    .oc-bar-track { grid-column: 1 / -1; order: 3; }
}

/* Billing table: long names and resource IDs wrap; the skipped line is grey; amounts line up on the right. */
.oc-cost-name { overflow-wrap: anywhere; }
.oc-row-skipped td { color: var(--mud-palette-text-secondary); }
.oc-amount { text-align: right; white-space: nowrap; }
/* MudBlazor's simple table sets text-align: start on every cell with a more specific selector, so this one matches it. */
.mud-simple-table table * tr > .oc-amount { text-align: right; }

/* Billing rows stand out: accounts stronger, their months lighter. The brand tint reads on both themes. */
.oc-account-row td { background-color: rgba(var(--mud-palette-primary-rgb), 0.12); }
.oc-month-row td { background-color: rgba(var(--mud-palette-primary-rgb), 0.05); }
/* The copy button next to a resource or account name: a small icon that does not make the row taller. */
.oc-copy { padding: 2px; margin-left: 2px; }
.oc-copy .mud-icon-root { font-size: 0.9rem; }

/* The filter field only opens its list: clicking it must not select its text. */
.oc-filter-select, .oc-filter-select input { cursor: pointer; user-select: none; }

/* One row of a filter's list: highlights on hover like a MudSelect item. */
.oc-filter-option { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: pointer; user-select: none; }
.oc-filter-option:hover { background-color: var(--mud-palette-action-default-hover); }

/* Chat panel: a drawer on the right (its hairline is on the left), a header, a body that opens at the newest message, and a footer. */
.mud-drawer.oc-chat-drawer { border-right: 0; border-left: 1px solid var(--mud-palette-lines-default); }
.oc-chat { display: flex; flex-direction: column; height: 100%; }
.oc-chat-header { display: flex; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--mud-palette-lines-default); }
.oc-chat-header { min-width: 0; }
.oc-chat-title { text-transform: none; font-weight: 500; min-width: 0; max-width: 100%; }
.oc-chat-title .mud-button-label { min-width: 0; }
.oc-chat-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-chat-header > .mud-menu { min-width: 0; flex: 0 1 auto; }
.oc-chat-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; gap: 12px; padding: 12px; }
.oc-chat-footer { padding: 8px 12px 12px; border-top: 1px solid var(--mud-palette-lines-default); }
.oc-msg { max-width: 100%; overflow-wrap: anywhere; font-size: 0.875rem; }
.oc-msg-user { align-self: flex-end; max-width: 85%; padding: 8px 12px; white-space: pre-wrap; border-radius: var(--mud-default-borderradius);
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16); }
.oc-msg-assistant p { margin: 0 0 8px; }
.oc-msg-assistant table { border-collapse: collapse; display: block; overflow-x: auto; font-size: 0.8125rem; }
.oc-msg-assistant th, .oc-msg-assistant td { border: 1px solid var(--mud-palette-lines-default); padding: 4px 8px; text-align: left; }
.oc-dot { width: 8px; height: 8px; border-radius: 50%; background: #00ABCB; flex: none; }

/* The assistant's lists keep their bullets and numbers (MudBlazor resets list padding). */
.oc-msg-assistant ul, .oc-msg-assistant ol { margin: 0 0 8px; padding-inline-start: 1.5rem; }
.oc-msg-assistant ul { list-style: disc; }
.oc-msg-assistant ol { list-style: decimal; }

/* The drag handle on the panel's left edge; nothing is selected while dragging. */
.oc-chat { position: relative; }
.oc-chat-resize { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; cursor: col-resize; z-index: 1; }
.oc-chat-resize:hover { background: rgba(var(--mud-palette-primary-rgb), 0.4); }
body.oc-resizing { user-select: none; cursor: col-resize; }

/* The "thinking" spinner is small, like a line of text. */
.oc-spinner.mud-progress-circular { width: 14px; height: 14px; }

/* The message box's placeholder stays on one line, so it never makes the empty box taller. */
.oc-chat-footer textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Assistant text: room around headings, tables and code, and headings sized for a narrow panel. */
.oc-msg-assistant > :first-child { margin-top: 0; }
.oc-msg-assistant > :last-child { margin-bottom: 0; }
.oc-msg-assistant h1, .oc-msg-assistant h2, .oc-msg-assistant h3, .oc-msg-assistant h4 { margin: 16px 0 6px; line-height: 1.3; font-weight: 600; }
.oc-msg-assistant h1 { font-size: 1.15rem; }
.oc-msg-assistant h2 { font-size: 1.05rem; }
.oc-msg-assistant h3, .oc-msg-assistant h4 { font-size: 0.95rem; }
.oc-msg-assistant table { margin: 8px 0 12px; }
.oc-msg-assistant ul, .oc-msg-assistant ol { margin: 4px 0 10px; }
.oc-msg-assistant li { margin-bottom: 2px; }
.oc-msg-assistant pre { margin: 8px 0 12px; padding: 8px 12px; overflow-x: auto; border-radius: var(--mud-default-borderradius); background: rgba(128, 128, 128, 0.12); }
.oc-msg-assistant code { font-size: 0.8125rem; }
.oc-msg-assistant hr { margin: 12px 0; border: 0; border-top: 1px solid var(--mud-palette-lines-default); }
.oc-msg-assistant p { margin: 0 0 10px; }