/* While the app starts (look.js): only the last look's background and a thin loading bar, never a white flash. */
html { background-color: var(--ts-boot-bg, transparent); }
html.ts-booting body { background-color: var(--ts-boot-bg) !important; }
html.ts-booting body > * { visibility: hidden; }
html.ts-booting body::after {
    content: ""; position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 30%;
    background: #C9A227; animation: ts-booting 1.2s ease-in-out infinite;
}
@keyframes ts-booting { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { html.ts-booting body::after { animation: none; width: 100%; opacity: .6; } }

/* The themes' fonts, served with the app (no font service sees who uses it); a browser loads only those a page uses.
   SIL Open Font License: fonts/OFL-*.txt. IBM Plex for Ledger: */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }
/* Plus Jakarta Sans and Noto Kufi Arabic for Oasis: */
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plus-jakarta-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/noto-kufi-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/noto-kufi-arabic-arabic-600-normal.woff2") format("woff2"); }
/* Geist and Noto Sans Arabic for Graphite: */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/geist-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/geist-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/geist-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/geist-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/noto-sans-arabic-arabic-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/noto-sans-arabic-arabic-600-normal.woff2") format("woff2"); }

/* Atkinson Hyperlegible for High Contrast: */
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }

/* Phones: the top bar keeps only icons (the shield, language, light/dark, help, notifications, account); the name,
   the language's label and the sign-out button would push the light/dark switch off the screen. */
.ts-app-name { white-space: nowrap; }
@media (max-width: 599.98px) { .ts-hide-xs { display: none !important; } }
@media (min-width: 600px) { .ts-show-xs { display: none !important; } }

/* Every theme: headings wrap evenly, numbers in tables line up, and the keyboard focus is always visible. */
h1, h2, h3, h4, h5, h6, .mud-typography-h4, .mud-typography-h5, .mud-typography-h6 { text-wrap: balance; }
.mud-typography-body1, .mud-typography-body2 { text-wrap: pretty; }
.mud-table-cell, .mud-chip { font-variant-numeric: tabular-nums; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:where(a, button, [role="button"], [tabindex]):focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* Every theme: a button always looks like one. Text and icon buttons get a border in their own colour, as outlined ones
   have; icons inside a field or a chip stay bare, being part of it. */
.mud-button-root.mud-button-text { border: 1px solid color-mix(in srgb, currentColor 45%, transparent); padding: 5px 11px; }
.mud-button-root.mud-button-text.mud-button-text-size-small { padding: 3px 9px; }
.mud-button-root.mud-button-text.mud-button-text-size-large { padding: 7px 15px; }
.mud-icon-button:not(.mud-input-adornment *):not(.mud-chip *):not(.mud-snackbar *) { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); }
.ts-theme-contrast .mud-button-root.mud-button-text, .ts-theme-contrast .mud-icon-button:not(.mud-input-adornment *):not(.mud-chip *):not(.mud-snackbar *) { border: 2px solid currentColor; }

/* Ledger: what its palette cannot say. The drawer is navy in both modes, so its links are light and the open page is
   marked in brass; quoted tender text is set in a serif, so a citation reads as the document's own words. */
.ts-theme-ledger .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ts-theme-ledger .mud-drawer { border-inline-end: 0; }
.ts-theme-ledger .mud-drawer .mud-nav-link { border-radius: 6px; margin: 1px 8px; width: calc(100% - 16px); }
.ts-theme-ledger .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .06); color: #FFFFFF; }
.ts-theme-ledger .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .08); color: #FFFFFF; box-shadow: inset 3px 0 0 #C9A227; }
.ts-theme-ledger .mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: #C9A227; }
.ts-theme-ledger .mud-drawer .mud-typography-overline { color: #9FB0C6; }
.ts-theme-ledger .mud-drawer .mud-divider { border-color: rgba(255, 255, 255, .12); }
.ts-theme-ledger .mud-paper-outlined, .ts-theme-ledger .mud-table-outlined { border-radius: 8px; }
.ts-theme-ledger .ts-quote { font-family: "IBM Plex Serif", Georgia, serif; font-size: .95rem; line-height: 1.55; }
[dir="rtl"] .ts-theme-ledger .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { box-shadow: inset -3px 0 0 #C9A227; }

/* Oasis: a light menu of rounded pills, the open page in soft teal; buttons are pills too. */
.ts-theme-oasis .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ts-theme-oasis .mud-drawer { border-inline-end: 1px solid var(--mud-palette-lines-default); }
.ts-theme-oasis .mud-drawer .mud-nav-link { border-radius: 20px; margin: 2px 10px; width: calc(100% - 20px); font-weight: 600; }
.ts-theme-oasis .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: var(--mud-palette-background-gray); }
.ts-theme-oasis .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-primary); }
.ts-theme-oasis .mud-button-root.mud-button { border-radius: 22px; }
.ts-theme-oasis .mud-paper-outlined, .ts-theme-oasis .mud-table-outlined { border-radius: 16px; }
.ts-theme-oasis .ts-quote { font-style: italic; line-height: 1.6; }

/* Graphite: a compact grey menu with the open page in cobalt, dense tables, monospace for quoted text. */
.ts-theme-graphite .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ts-theme-graphite .mud-drawer { border-inline-end: 1px solid var(--mud-palette-lines-default); }
.ts-theme-graphite .mud-drawer .mud-nav-link { border-radius: 4px; margin: 1px 8px; width: calc(100% - 16px); padding-top: 6px; padding-bottom: 6px; font-size: .8125rem; }
.ts-theme-graphite .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: var(--mud-palette-table-hover); }
.ts-theme-graphite .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(var(--mud-palette-primary-rgb), .12); color: var(--mud-palette-primary); font-weight: 500; }
.ts-theme-graphite .mud-table-dense .mud-table-cell, .ts-theme-graphite .mud-table-cell { padding-top: 8px; padding-bottom: 8px; }
.ts-theme-graphite .ts-quote { font-family: "Geist Mono", ui-monospace, monospace; font-size: .8125rem; line-height: 1.6; }

h1:focus {
    outline: none;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* Blueprint: square drafting look, a faint drawing grid behind the page, monospaced headings, navy menu with cyan marker. */
.ts-theme-blueprint .mud-main-content {
    background-image: linear-gradient(rgba(var(--mud-palette-primary-rgb), .06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--mud-palette-primary-rgb), .06) 1px, transparent 1px);
    background-size: 24px 24px;
}
.ts-theme-blueprint .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ts-theme-blueprint .mud-drawer .mud-nav-link { border-radius: 2px; margin: 1px 8px; width: calc(100% - 16px); }
.ts-theme-blueprint .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .06); color: #FFFFFF; }
.ts-theme-blueprint .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .08); color: #FFFFFF; box-shadow: inset 3px 0 0 #22D3EE; }
.ts-theme-blueprint .mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: #22D3EE; }
.ts-theme-blueprint .mud-drawer .mud-typography-overline { color: #9DBCF0; }
.ts-theme-blueprint .ts-quote { font-family: "Geist Mono", ui-monospace, monospace; font-size: .8125rem; line-height: 1.6; }

/* Sand: charcoal menu with a copper marker on warm sand pages. */
.ts-theme-sand .mud-appbar { border-bottom: 1px solid var(--mud-palette-lines-default); }
.ts-theme-sand .mud-drawer .mud-nav-link { border-radius: 6px; margin: 1px 8px; width: calc(100% - 16px); }
.ts-theme-sand .mud-drawer .mud-nav-link:hover:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .06); color: #FFFFFF; }
.ts-theme-sand .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: rgba(255, 255, 255, .08); color: #FFFFFF; box-shadow: inset 3px 0 0 #D08A55; }
.ts-theme-sand .mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: #D08A55; }
.ts-theme-sand .mud-drawer .mud-typography-overline { color: #C9BFAF; }
.ts-theme-sand .ts-quote { font-family: "IBM Plex Serif", Georgia, serif; font-size: .95rem; line-height: 1.55; }

/* High Contrast: thick borders, underlined links, the open page inverted, a focus ring that cannot be missed. */
.ts-theme-contrast .mud-paper-outlined, .ts-theme-contrast .mud-table-outlined, .ts-theme-contrast .mud-input-outlined-border { border-width: 2px !important; }
.ts-theme-contrast .mud-appbar { border-bottom: 2px solid var(--mud-palette-lines-default); }
.ts-theme-contrast .mud-drawer { border-inline-end: 2px solid var(--mud-palette-lines-default); }
.ts-theme-contrast .mud-main-content a:not(.mud-button-root):not(.mud-nav-link) { text-decoration: underline; text-underline-offset: 3px; }
.ts-theme-contrast .mud-drawer .mud-nav-link { margin: 2px 8px; width: calc(100% - 16px); border-radius: 4px; font-weight: 700; }
.ts-theme-contrast .mud-drawer .mud-nav-link.active:not(.mud-nav-link-disabled) { background-color: var(--mud-palette-text-primary); color: var(--mud-palette-background); }
.ts-theme-contrast .mud-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--mud-palette-background); }
.ts-theme-contrast :where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible { outline: 3px solid var(--mud-palette-primary); outline-offset: 3px; box-shadow: 0 0 0 6px var(--mud-palette-background); }
.ts-theme-contrast .mud-chip { border: 1px solid currentColor; }
.ts-theme-contrast .ts-quote { font-size: 1rem; line-height: 1.6; }

/* Settings: a card per theme, with its colours. */
.ts-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.ts-theme-card {
    display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: start; padding: 16px; cursor: pointer; font: inherit;
    color: var(--mud-palette-text-primary); background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default); border-radius: var(--mud-default-borderradius);
}
.ts-theme-card:hover:not(:disabled) { border-color: var(--mud-palette-primary); }
.ts-theme-card:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }
.ts-theme-card:disabled { cursor: default; }
.ts-theme-card-selected { border: 2px solid var(--mud-palette-primary); padding: 15px; }
.ts-theme-swatches { display: flex; width: 100%; height: 28px; border-radius: 4px; overflow: hidden; border: 1px solid var(--mud-palette-lines-default); }
.ts-theme-swatches > span { flex: 1; }

/* Tender discovery: a radar that sweeps while portals are being read, portal status dots, found-tender cards. */
.ts-discover-hero { padding: 20px; border-radius: 12px; border: 1px solid var(--mud-palette-lines-default);
    background: linear-gradient(135deg, rgba(var(--mud-palette-primary-rgb), .10), transparent 60%); }
.ts-radar { position: relative; width: 72px; height: 72px; flex: 0 0 72px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; color: var(--mud-palette-primary); background: rgba(var(--mud-palette-primary-rgb), .08); }
.ts-radar span { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(var(--mud-palette-primary-rgb), .45); opacity: 0; }
.ts-radar-on span { animation: ts-ping 2.4s ease-out infinite; }
.ts-radar-on span:nth-child(2) { animation-delay: .8s; }
.ts-radar-on span:nth-child(3) { animation-delay: 1.6s; }
@keyframes ts-ping { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-radar-on span { animation: none; opacity: .5; } }
.ts-portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ts-portal { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--mud-palette-lines-default); min-width: 0; }
.ts-portal-off { opacity: .55; }
.ts-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; background: var(--mud-palette-lines-default); }
.ts-dot-Ok { background: var(--mud-palette-success); }
.ts-dot-Reading { background: var(--mud-palette-primary); animation: ts-blink 1s ease-in-out infinite; }
.ts-dot-Problem { background: var(--mud-palette-warning); }
.ts-dot-Paused { background: var(--mud-palette-text-disabled); }
@keyframes ts-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .ts-dot-Reading { animation: none; } }
.ts-found { transition: box-shadow .15s ease, transform .15s ease; }
.ts-found:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .12); transform: translateY(-1px); }

/* Dashboard charts. Six series colours, by what they stand for (won, lost, awaiting, open, not bid, cancelled), checked
   for colour-blind separation on the light and the dark surface; dark mode has its own steps. Text stays in ink colours. */
.mud-layout { --ts-chart-1: #2a78d6; --ts-chart-2: #eb6834; --ts-chart-3: #1baf7a; --ts-chart-4: #eda100; --ts-chart-5: #e87ba4; --ts-chart-6: #008300;
              --ts-chart-grid: rgba(0, 0, 0, .08); --ts-chart-muted: rgba(0, 0, 0, .45); }
.mud-layout.ts-dark { --ts-chart-1: #3987e5; --ts-chart-2: #d95926; --ts-chart-3: #199e70; --ts-chart-4: #c98500; --ts-chart-5: #d55181; --ts-chart-6: #008300;
                      --ts-chart-grid: rgba(255, 255, 255, .1); --ts-chart-muted: rgba(255, 255, 255, .5); }
.ts-chart svg { display: block; overflow: visible; direction: ltr; }
.ts-chart-axis { fill: var(--mud-palette-text-secondary); color: var(--mud-palette-text-secondary); font-size: 12px; }
.ts-chart-value { color: var(--mud-palette-text-primary); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ts-chart-value-svg { fill: var(--mud-palette-text-primary); font-size: 12px; font-weight: 600; }
.ts-chart-big { fill: var(--mud-palette-text-primary); font-size: 26px; font-weight: 700; }
.ts-chart-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 10px; margin-inline-end: 6px; }
.ts-chart-legend-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--mud-palette-text-secondary); }
.ts-chart-legend-row > span { display: inline-flex; align-items: center; }
.ts-chart-track { flex: 1 1 auto; height: 12px; border-radius: 4px; background: var(--ts-chart-grid); position: relative; overflow: hidden; }
.ts-chart-track-bare { background: transparent; }
.ts-chart-bar { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 4px; }
.ts-dash-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.ts-dash-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); }
.ts-dash-2 { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ts-dash-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ts-dash-kpis { display: grid; gap: 12px; margin-bottom: 16px; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.ts-dash-kpi .ts-dash-kpi-value { font-size: 1.45rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ts-dash-card { padding: 16px; min-width: 0; }
@media (max-width: 1400px) { .ts-dash-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ts-dash-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .ts-dash-3, .ts-dash-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .ts-dash-kpis, .ts-dash-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ts-dash-kpi .ts-dash-kpi-value { font-size: 1.15rem; } }