html, body {
    font-family: Inter, Helvetica, Arial, sans-serif;
    /* The theme's background (light or dark, per person); the plain color only before the theme loads (login page). */
    background: var(--mud-palette-background, #F7F8FA);
    margin: 0;
}

.money {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

/* Login (plain HTML form, no live connection): the welcome art on the left, the sign-in card on the right. */
.login-page {
    min-height: 100vh;
    display: flex;
    background: linear-gradient(180deg, #00223a 0%, #022a4a 55%, #04496f 100%);
    color: #e8f7fb;
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}
.login-hero {
    flex: 0 0 58%;
    background: url("/img/login-hero.webp") right center / cover no-repeat;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 85%, transparent 100%);
}
.login-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    box-sizing: border-box;
}
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; box-sizing: border-box; }
.login-card {
    width: 100%;
    max-width: 440px;
    background: #fff;
    color: #0b2540;
    border-radius: 22px;
    padding: 34px 34px 30px;
    box-shadow: 0 18px 50px rgba(0, 16, 32, .45);
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-sizing: border-box;
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 12px; }
.login-brand img { width: 64px; height: 64px; }
.login-brand h1 { margin: 0; font-size: 2.3rem; font-weight: 700; letter-spacing: -.01em; color: #0b2540; }
.login-brand h1 span { color: #0f7f8c; }
.login-card .sub { margin: 4px 0 14px; text-align: center; color: #0f3a5f; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.login-secure { display: flex; align-items: center; gap: 10px; color: #33414b; font-size: .9rem; margin-bottom: 6px; }
.login-secure::before, .login-secure::after { content: ""; flex: 1; height: 1px; background: #dfe5ea; }
.login-card label { font-size: .92rem; font-weight: 600; color: #0b2540; margin-top: 8px; }
.login-card input[type=text], .login-card input[type=password], .login-card input:not([type]) {
    font: inherit;
    padding: 12px 14px;
    border: 1px solid #cfd6dc;
    border-radius: 10px;
    width: 100%;
    box-sizing: border-box;
}
.login-card input:focus { outline: 2px solid #4fd1e855; border-color: #0f7f8c; }
.login-pw { position: relative; }
.login-pw button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: #0b2540; margin: 0; }
.login-row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: .9rem; }
.login-row label { font-weight: 400; margin: 0; display: flex; align-items: center; gap: 8px; cursor: pointer; }
.login-row input { width: 18px; height: 18px; accent-color: #0f7f8c; }
.login-row details summary { color: #0f7f8c; text-decoration: underline; cursor: pointer; list-style: none; }
.login-row details summary::-webkit-details-marker { display: none; }
.login-row details p { margin: 6px 0 0; color: #5b6770; font-size: .82rem; max-width: 220px; }
.login-card .go {
    margin-top: 18px;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 600;
    padding: 13px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(90deg, #0d6b70, #0b3f52);
    color: #fff;
    cursor: pointer;
}
.login-card .go:hover { filter: brightness(1.1); }
.login-card .err { color: #b3261e; font-size: .9rem; margin: 0; }
@media (max-width: 900px) {
    .login-page { flex-direction: column; }
    .login-hero { flex: 0 0 34vh; background-position: 30% 30%; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }
    .login-side { align-items: flex-start; margin-top: -40px; }
    .login-brand h1 { font-size: 1.9rem; }
    .login-card { padding: 26px 22px; }
}

/* Telerik screens follow CamSharp's own theme (light or dark): the Telerik theme's color variables are pointed at
   MudBlazor's, which change with the dark-mode switch. Loaded after the Telerik stylesheet, so these win. */
:root {
    --kendo-color-app-surface: var(--mud-palette-background);
    --kendo-color-on-app-surface: var(--mud-palette-text-primary);
    --kendo-color-surface: var(--mud-palette-surface);
    --kendo-color-surface-alt: var(--mud-palette-surface);
    --kendo-color-on-surface: var(--mud-palette-text-primary);
    --kendo-color-subtle: var(--mud-palette-text-secondary);
    --kendo-color-base: var(--mud-palette-background-gray);
    --kendo-color-base-subtle: var(--mud-palette-background-gray);
    --kendo-color-base-hover: var(--mud-palette-action-default-hover);
    --kendo-color-base-active: var(--mud-palette-action-default-hover);
    --kendo-color-base-emphasis: var(--mud-palette-lines-default);
    --kendo-color-base-on-subtle: var(--mud-palette-text-primary);
    --kendo-color-on-base: var(--mud-palette-text-primary);
    --kendo-color-border: var(--mud-palette-lines-default);
    --kendo-color-border-alt: var(--mud-palette-lines-inputs);
    --kendo-color-primary: var(--mud-palette-primary);
    --kendo-color-primary-hover: var(--mud-palette-primary-darken);
    --kendo-color-primary-active: var(--mud-palette-primary-darken);
    --kendo-color-primary-emphasis: var(--mud-palette-primary-lighten);
    --kendo-color-primary-subtle: var(--mud-palette-action-default-hover);
    --kendo-color-primary-on-subtle: var(--mud-palette-primary);
    --kendo-color-on-primary: var(--mud-palette-primary-text);
    --kendo-color-series-a: var(--mud-palette-primary);
}
/* Charts draw on a transparent background so they sit on the page's own surface. */
.k-chart, .k-chart svg > rect:first-of-type { background: transparent; }
.k-chart text { fill: var(--mud-palette-text-primary); }

/* The main menu's 3D icons (CamSharp Core icons) read a little bigger than the flat ones. */
.mud-nav-link .mud-nav-link-icon, .mud-nav-group .mud-nav-link-icon { width: 28px; height: 28px; }

/* Picture icons on Telerik tab headers (CAM-270), matching the MudBlazor tabs. */
.cs-tab-head{display:inline-flex;align-items:center;gap:6px}
.cs-tab-head img{width:22px;height:22px;object-fit:contain}

/* Bill steps: Approved → Posted → Paid → Cleared (BillStageStrip). */
.cs-stages{display:inline-flex;flex-wrap:nowrap;gap:4px;align-items:center}
.cs-st{font-size:.72rem;padding:1px 7px;border-radius:999px;border:1px solid var(--mud-palette-lines-default);color:var(--mud-palette-text-secondary);white-space:nowrap}
.cs-st-done{border-color:var(--mud-palette-success);color:var(--mud-palette-success);font-weight:600}
.cs-st-wait{border-color:var(--mud-palette-warning);color:var(--mud-palette-warning);font-weight:600}

/* The top bar on a phone: everything has to fit in one row, so the name of the program and "pin this page" step aside
   and the buttons that have an icon show the icon alone. Sign out keeps its words. */
@media (max-width: 640px) {
    .cs-appbar .cs-appbar-brand, .cs-appbar .cs-appbar-wide { display: none; }
    .cs-appbar .cs-appbar-icononly .mud-button-label, .cs-appbar .cs-appbar-icononly.mud-button-root .mud-button-label { font-size: 0; }
    .cs-appbar .cs-appbar-icononly .mud-button-icon-start { margin-right: 0; margin-left: 0; }
    .cs-appbar .cs-appbar-icononly .mud-button-root, .cs-appbar .cs-appbar-icononly.mud-button-root { min-width: 36px; padding-left: 6px; padding-right: 6px; margin-right: 0 !important; }
    .cs-appbar .mud-icon-button.mr-2 { margin-right: 0 !important; }
    .cs-appbar .mud-toolbar { padding-left: 8px; padding-right: 8px; }
    .cs-appbar form .mud-button-root { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
}
/* A phone never scrolls the whole page sideways: a wide table or row of chips scrolls inside the page instead. */
@media (max-width: 640px) {
    .mud-main-content > .mud-container { overflow-x: auto; }
}

/* The company-or-association picker: a long name ends in "…" instead of being cut mid-letter. */
.cs-place .mud-select-input span.d-flex { display: block !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-place .mud-select-input span.d-flex .mud-icon-root { vertical-align: text-bottom; margin-right: 4px; }