/* ---------- RavenAPPs Design System 1.4 (as in Raven CUT): industrial graphite, cold metal, restrained cyan ----------
   Tokens of src/RavenCut.WinUI/Resources/ThemeResources.xaml and DesignTokens.xaml. MudBlazor keeps the palette
   (Components/Layout/AppTheme.cs); the tokens it does not have live here, switched by html[data-theme]. */
:root {
    --rv-font-text: "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rv-font-display: "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --rv-radius-input: 8px;
    --rv-radius-control: 9px;
    --rv-radius-table: 10px;
    --rv-radius-card: 12px;
    --rv-radius-panel: 16px;
    --rv-statusbar-height: 30px;

    --rv-bg: #EDF2F5;
    --rv-bg-deep: #E3E9ED;
    --rv-surface: #FFFFFF;
    --rv-surface-2: #F7FAFB;
    --rv-glass: rgba(255, 255, 255, .86);
    --rv-text: #111A21;
    --rv-text-2: #2F3F49;
    --rv-muted: #52636E;
    --rv-line: #CBD5DB;
    --rv-line-strong: #AEBDC6;
    --rv-accent: #006F9C;
    --rv-bright: #00BDF2;
    --rv-accent-soft: rgba(0, 146, 197, .11);
    --rv-success: #087754;
    --rv-warning: #925500;
    --rv-danger: #BD2937;
    --rv-danger-soft: rgba(189, 41, 55, .08);
    /* Errors of punches and timesheet cells to check on the screen (the exports keep ExportRenderer.Colors.Issue). */
    --tg-issue: #C62828;
    --rv-primary-bg: linear-gradient(180deg, #26D0F5 0%, #08A5DC 100%);
    --rv-primary-fg: #00151D;
    --rv-primary-border: #078BB9;
    --rv-primary-glow: 0 3px 12px rgba(8, 165, 220, .22);
    --rv-hero: linear-gradient(135deg, #FFFFFF 0%, #F7FAFB 72%, #EAF7FB 100%);
    --rv-shadow-overlay: 0 18px 48px rgba(17, 26, 33, .18);
}

html[data-theme="dark"] {
    --rv-bg: #060B0F;
    --rv-bg-deep: #030609;
    --rv-surface: #0C151B;
    --rv-surface-2: #101C23;
    --rv-glass: rgba(8, 15, 20, .90);
    --rv-text: #EFF6F8;
    --rv-text-2: #C8D5DB;
    --rv-muted: #9AADB7;
    --rv-line: #263842;
    --rv-line-strong: #3A5361;
    --rv-accent: #45D1FF;
    --rv-bright: #00BDF2;
    --rv-accent-soft: rgba(0, 188, 242, .12);
    --rv-success: #48D8A3;
    --rv-warning: #FFC164;
    --rv-danger: #FF7B85;
    --rv-danger-soft: rgba(255, 123, 133, .10);
    --tg-issue: #FF7B85;
    --rv-primary-glow: 0 3px 16px rgba(0, 189, 242, .28);
    --rv-hero: linear-gradient(135deg, #0C151B 0%, #0A151B 72%, #08242F 100%);
    --rv-shadow-overlay: 0 22px 60px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

/* ---------- base ---------- */
html, body {
    font-family: var(--rv-font-text);
    background: var(--rv-bg);
    color: var(--rv-text);
}

.tg-center-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.tg-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.tg-page-header h1 {
    margin: 0;
}

/* Page title and subtitle (PageHeader.razor): display font, extra bold, tight. */
.rv-page-title {
    font-family: var(--rv-font-display);
    font-size: 25px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 30px;
    color: var(--mud-palette-text-primary);
    overflow-wrap: anywhere;
}

.rv-page-subtitle {
    margin-top: 2px;
    font-size: 13px;
    line-height: 18px;
    color: var(--mud-palette-text-secondary);
}

/* Small capitals in the accent colour above a block («RAVEN CUT · ПРОЕКТ»). */
.rv-eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--rv-accent);
}

.tg-muted {
    color: var(--mud-palette-text-secondary);
}

.tg-mono {
    font-family: Consolas, "Cascadia Mono", monospace;
}

.tg-nowrap {
    white-space: nowrap;
}

.tg-clickable {
    cursor: pointer;
}

/* Name of an employee that opens their short card (Components/Shared/PersonLink.razor). */
a.tg-person-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    cursor: pointer;
}

a.tg-person-link:hover {
    text-decoration: underline;
}

.tg-stat-value {
    font-family: var(--rv-font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

/* KPI tile (StatCard.razor): as the KPI pills of Raven CUT. */
.mud-paper.rv-kpi {
    padding: 9px 11px 10px;
    background: var(--rv-surface-2);
    border-radius: var(--rv-radius-table);
}

.rv-kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.rv-kpi-head .mud-icon-root {
    flex: none;
}

/* A long caption («ПО ГРАФИКУ СЕГОДНЯ») goes onto a second line instead of being cut. */
.rv-kpi-label {
    min-width: 0;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .045em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    overflow-wrap: break-word;
}

.rv-kpi-value {
    margin-top: 4px;
    font-family: var(--rv-font-display);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--rv-accent);
}

.rv-kpi-sub {
    margin-top: 2px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

/* Column chart (dashboard) */
.tg-chart {
    position: relative;
}

.tg-chart svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.tg-chart .grid {
    stroke: var(--mud-palette-lines-default);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

.tg-chart .bar {
    fill: var(--mud-palette-primary);
}

.tg-chart .bar.dim {
    opacity: .45;
}

.tg-chart text {
    fill: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.tg-chart text.value {
    fill: var(--mud-palette-text-primary);
    font-weight: 600;
}

.tg-chart-tip {
    position: absolute;
    transform: translate(-50%, -100%);
    pointer-events: none;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    padding: 4px 8px;
    font-size: 12px;
    white-space: nowrap;
}

.tg-num {
    font-variant-numeric: tabular-nums;
}

.tg-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex: none;
}

.tg-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: middle;
    border: 1px solid rgba(0, 0, 0, .15);
}

/* Live event feed */
.tg-feed-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tg-feed-item:last-child {
    border-bottom: none;
}

.tg-feed-new {
    animation: tg-flash 1.6s ease-out;
}

@keyframes tg-flash {
    from { background: rgba(56, 189, 248, .25); }
    to { background: transparent; }
}

/* Attendance matrix / timesheet grid */
.tg-grid-wrap {
    overflow: auto;
    max-width: 100%;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--rv-radius-table);
    background: var(--mud-palette-surface);
}

table.tg-grid {
    border-collapse: separate;
    border-spacing: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

table.tg-grid th, table.tg-grid td {
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 3px 4px;
    text-align: center;
    white-space: nowrap;
    background: var(--mud-palette-surface);
}

table.tg-grid th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--mud-palette-background-gray);
    font-weight: 700;
    color: var(--rv-text-2);
}

table.tg-grid .tg-sticky {
    position: sticky;
    left: 0;
    z-index: 1;
    text-align: left;
    min-width: 200px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.tg-grid th.tg-sticky {
    z-index: 3;
}

table.tg-grid td.tg-weekend, table.tg-grid th.tg-weekend {
    background: var(--mud-palette-background-gray);
}

table.tg-grid td.tg-cell {
    min-width: 44px;
    line-height: 1.25;
}

table.tg-grid td.tg-cell:hover {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Cells selected with the mouse (wwwroot/js/grid-select.js, default classes): tinted, with a frame around the rectangle. */
table.tg-grid {
    --tg-sel-fill: color-mix(in srgb, var(--mud-palette-primary) 30%, transparent);
}

table.tg-grid td.tg-sel {
    background-image: linear-gradient(var(--tg-sel-fill), var(--tg-sel-fill));
    box-shadow: inset 0 var(--tg-sel-t, 0px) 0 var(--mud-palette-primary),
                inset 0 calc(-1 * var(--tg-sel-b, 0px)) 0 var(--mud-palette-primary),
                inset var(--tg-sel-l, 0px) 0 0 var(--mud-palette-primary),
                inset calc(-1 * var(--tg-sel-r, 0px)) 0 0 var(--mud-palette-primary);
}

table.tg-grid td.tg-sel-t {
    --tg-sel-t: 2px;
}

table.tg-grid td.tg-sel-b {
    --tg-sel-b: 2px;
}

table.tg-grid td.tg-sel-l {
    --tg-sel-l: 2px;
}

table.tg-grid td.tg-sel-r {
    --tg-sel-r: 2px;
}

/* While dragging: no text selection, a cell cursor. */
table.tg-selecting {
    user-select: none;
    cursor: cell;
}

table.tg-selecting td.tg-cell {
    cursor: cell;
}

.tg-code {
    font-weight: 700;
}

/* ---------- account pages (server-rendered, no MudBlazor runtime): the same design system ---------- */
.auth-body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(0, 189, 242, .16), transparent 60%),
        radial-gradient(700px 480px at -10% 110%, rgba(0, 111, 156, .14), transparent 60%),
        var(--rv-bg-deep);
    padding: 16px;
    box-sizing: border-box;
    font-family: var(--rv-font-text);
    color: var(--rv-text);
}

.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--rv-hero);
    border: 1px solid var(--rv-line-strong);
    border-radius: var(--rv-radius-panel);
    box-shadow: var(--rv-shadow-overlay);
    padding: 28px 26px;
    box-sizing: border-box;
    color: var(--rv-text);
}

.auth-card.wide {
    max-width: 520px;
}

.auth-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.auth-logo img {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    border: 1px solid var(--rv-line);
    background: var(--rv-accent-soft);
}

/* The icon of the theme in use. */
.rv-logo-dark,
html[data-theme="dark"] .rv-logo-light {
    display: none;
}

html[data-theme="dark"] .rv-logo-dark {
    display: block;
}

.auth-logo .name {
    font-family: var(--rv-font-display);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.auth-logo .sub {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--rv-accent);
}

.auth-card h1 {
    font-family: var(--rv-font-display);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.015em;
    margin: 0 0 6px;
}

.auth-card p.lead {
    margin: 0 0 20px;
    color: var(--rv-muted);
    font-size: 13px;
    line-height: 18px;
}

.auth-field {
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--rv-text-2);
}

.auth-field input, .auth-field select {
    width: 100%;
    box-sizing: border-box;
    min-height: 36px;
    padding: 8px 11px;
    font-size: 14px;
    font-family: inherit;
    border: 1px solid var(--rv-line);
    border-bottom-color: var(--rv-line-strong);
    border-radius: var(--rv-radius-input);
    outline: none;
    background: var(--rv-surface-2);
    color: var(--rv-text);
}

.auth-field input:focus, .auth-field select:focus {
    border-color: var(--rv-accent);
    box-shadow: 0 0 0 3px var(--rv-accent-soft);
}

.auth-btn {
    width: 100%;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--rv-radius-control);
    border: 1px solid var(--rv-primary-border);
    cursor: pointer;
    background: var(--rv-primary-bg);
    color: var(--rv-primary-fg);
    box-shadow: var(--rv-primary-glow);
}

.auth-btn:hover {
    filter: brightness(1.07);
}

/* A link that looks like the button (sign-in through the site). */
.auth-btn.as-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-sizing: border-box;
}

.auth-btn.google {
    background: var(--rv-surface);
    color: var(--rv-text);
    border: 1px solid var(--rv-line-strong);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    box-sizing: border-box;
}

.auth-btn.google:hover {
    filter: none;
    background: var(--rv-surface-2);
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--rv-muted);
    font-size: 12px;
    margin: 18px 0;
}

.auth-divider::before, .auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rv-line);
}

.auth-error {
    background: var(--rv-danger-soft);
    color: var(--rv-danger);
    border: 1px solid var(--rv-danger);
    border-radius: var(--rv-radius-input);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-info {
    background: var(--rv-accent-soft);
    color: var(--rv-text);
    border: 1px solid var(--rv-accent);
    border-radius: var(--rv-radius-input);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}

.auth-links {
    margin-top: 16px;
    font-size: 13px;
    text-align: center;
    color: var(--rv-muted);
}

.auth-links a {
    color: var(--rv-accent);
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

.auth-check input {
    accent-color: var(--rv-bright);
}

/* ---------- RavenAPPs design system: MudBlazor components ---------- */

/* Title bar: glass with a hairline, the brand in an icon tile (MainLayout.razor). */
.mud-appbar.tg-appbar {
    background: var(--rv-glass);
    color: var(--mud-palette-appbar-text);
    border-bottom: 1px solid var(--rv-line);
    box-shadow: none;
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    backdrop-filter: saturate(150%) blur(12px);
}

.rv-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.rv-icon-tile {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    padding: 2px;
    box-sizing: border-box;
    border-radius: 8px;
    background: var(--rv-accent-soft);
    border: 1px solid var(--rv-line);
}

.rv-icon-tile img {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.rv-brand-name {
    font-family: var(--rv-font-display);
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
}

/* Pill chip in the accent colour (В«DESKTOPВ» in Raven CUT, В«WEBВ» here, the role in the status bar). */
.rv-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid var(--rv-accent);
    background: var(--rv-accent-soft);
    color: var(--rv-accent);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    line-height: 14px;
    white-space: nowrap;
}

.rv-chip.rv-chip-status {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    padding: 1px 8px;
}

/* Status bar at the bottom of the window. Above the docked navigation pane, below everything that pops up — lists,
   menus, dialogs, notifications (MudBlazor: drawer 1100, popover 1200, app bar 1300, dialog 1400, snackbar 1500). */
.rv-statusbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--mud-zindex-drawer, 1100) + 1);
    height: var(--rv-statusbar-height);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    box-sizing: border-box;
    background: var(--rv-glass);
    border-top: 1px solid var(--rv-line);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-size: 12px;
    color: var(--rv-text-2);
}

.rv-statusbar .rv-status-icon {
    color: var(--mud-palette-text-secondary);
    font-size: 16px;
}

.rv-status-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rv-status-spacer {
    flex: 1;
}

.rv-status-muted {
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* Nothing goes under the status bar: the page scrolls to above it, the docked navigation pane ends above it (its last
   items and its scroll bar went under it), notifications rise above it. On a narrow screen the pane slides over
   everything, and on a phone there is no status bar. */
@media (min-width: 960px) {
    .mud-drawer.mud-drawer-fixed.mud-drawer-responsive.tg-drawer {
        height: calc(100% - var(--mud-appbar-height) - var(--rv-statusbar-height));
    }
}

.mud-snackbar-location-bottom-right,
.mud-snackbar-location-bottom-center,
.mud-snackbar-location-bottom-left {
    bottom: calc(24px + var(--rv-statusbar-height));
}

@media (max-width: 599.98px) {
    :root {
        --rv-statusbar-height: 0px;
    }

    .rv-statusbar {
        display: none;
    }
}

/* Navigation pane: flat items, the current one on a pill with a cyan bar; groups as small capitals. */
.mud-drawer.tg-drawer {
    background: var(--rv-bg);
    border-right: 1px solid var(--rv-line);
}

.tg-drawer .mud-navmenu .mud-nav-link {
    position: relative;
    min-height: 34px;
    margin: 1px 4px;
    padding: 6px 10px;
    border-radius: var(--rv-radius-control);
    font-size: 13px;
    color: var(--rv-text);
}

.tg-drawer .mud-navmenu .mud-nav-link .mud-nav-link-icon {
    font-size: 19px;
    color: var(--mud-palette-drawer-icon);
}

.tg-drawer .mud-navmenu .mud-nav-link:hover:not(.mud-nav-link-disabled) {
    background: var(--rv-surface-2);
}

.tg-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: var(--rv-surface-2);
    color: var(--rv-text);
    font-weight: 600;
}

.tg-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: var(--rv-bright);
}

.tg-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--rv-accent);
}

.tg-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
    min-height: 30px;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.tg-drawer .mud-navmenu .mud-nav-group > .mud-nav-link .mud-nav-link-icon {
    font-size: 17px;
}

/* Surfaces: cards with a hairline and 12 px corners. */
.mud-paper.mud-paper-outlined {
    border-color: var(--rv-line);
    border-radius: var(--rv-radius-card);
}

.mud-popover.mud-paper,
.mud-popover .mud-paper,
.mud-menu-list {
    border-radius: var(--rv-radius-table);
}

.mud-popover.mud-paper {
    border: 1px solid var(--rv-line);
    box-shadow: var(--rv-shadow-overlay);
}

.mud-dialog {
    border: 1px solid var(--rv-line-strong);
    border-radius: var(--rv-radius-card);
    box-shadow: var(--rv-shadow-overlay);
}

.mud-dialog .mud-dialog-title .mud-typography-h6 {
    font-family: var(--rv-font-display);
    font-weight: 800;
}

.mud-alert {
    border-radius: var(--rv-radius-table);
}

.mud-snackbar {
    border-radius: var(--rv-radius-table);
}

.mud-chip {
    border-radius: 999px;
}

/* Tab headers in sentence case, as everywhere in Raven, and a little narrower: in capitals the six tabs of the employee
   card did not fit next to the navigation pane. */
.mud-tab {
    padding-left: 10px;
    padding-right: 10px;
    text-transform: none;
    letter-spacing: normal;
}

/* Counters of tab headers («Ручные отметки 60»): a pill after the text. MudBlazor hangs the badge over the corner, and
   the tab cuts it off (every tab has overflow: hidden for the ripple). */
.mud-tab .mud-tab-badge {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin-left: 8px;
}

.mud-tab .mud-tab-badge .mud-badge-wrapper {
    position: static;
    width: auto;
    height: auto;
}

.mud-tab .mud-tab-badge .mud-badge {
    position: static;
    inset: auto;
}

/* Buttons: 34 px, bold; the primary one with the cyan gradient and dark text, the others neutral. */
.mud-button-root.mud-button {
    border-radius: var(--rv-radius-control);
    font-weight: 700;
}

.mud-button-root.mud-button-filled.mud-button-filled-primary {
    background: var(--rv-primary-bg);
    color: var(--rv-primary-fg);
    border: 1px solid var(--rv-primary-border);
    box-shadow: var(--rv-primary-glow);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:hover {
    filter: brightness(1.07);
    box-shadow: var(--rv-primary-glow);
}

.mud-button-root.mud-button-filled.mud-button-filled-primary:disabled,
.mud-button-root.mud-button-filled.mud-button-filled-primary.mud-button-disabled {
    background: var(--rv-surface-2);
    color: var(--mud-palette-text-disabled);
    border-color: var(--rv-line);
    box-shadow: none;
    filter: none;
}

.mud-button-root.mud-button-outlined.mud-button-outlined-default,
.mud-button-root.mud-button-outlined.mud-button-outlined-primary,
.mud-button-root.mud-button-outlined.mud-button-outlined-success,
.mud-button-root.mud-button-outlined.mud-button-outlined-secondary,
.mud-button-root.mud-button-outlined.mud-button-outlined-info {
    background: var(--rv-surface);
    border-color: var(--rv-line-strong);
    color: var(--rv-text);
}

.mud-button-root.mud-button-outlined:hover:not(:disabled) {
    border-color: var(--rv-accent);
}

.mud-button-group-root.mud-button-group-outlined .mud-button-root {
    border-color: var(--rv-line-strong);
}

/* A field captioned above it, like the switches next to it (ExportDialog): MudBlazor's own label stays for screen
   readers but is not drawn on the frame, the frame has no gap for it and the field no margin above. */
.mud-input-control.tg-field-captioned,
.mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label.tg-field-captioned {
    margin-top: 0;
    margin-bottom: 0;
}

.mud-input-control.tg-field-captioned .mud-input-label,
.mud-input-control.tg-field-captioned .mud-input-outlined-border legend {
    display: none;
}

/* Segmented switches (MudToggleGroup: the filter of the event log, PDF/Excel, «Текст / Цвет»…). Their items are
   buttons, but inside the group they get neither the corners, nor the frames, nor the glow of the buttons above —
   those drew arcs and pieces of frames between the items. One frame around the group, thin delimiters inside. */
.mud-toggle-group.mud-toggle-group-outlined {
    border-color: var(--rv-line-strong);
    border-radius: var(--rv-radius-control);
    background: var(--rv-surface);
}

.mud-toggle-group > .mud-toggle-item.mud-button-root.mud-button {
    border-radius: 0;
    border-color: var(--rv-line);
    box-shadow: none;
    filter: none;
}

.mud-toggle-group > .mud-toggle-item.mud-button-outlined {
    background: transparent;
    color: var(--rv-text);
}

.mud-toggle-group > .mud-toggle-item.mud-button-outlined:hover:not(:disabled) {
    border-color: var(--rv-line);
    background: var(--mud-palette-action-default-hover);
}

.mud-icon-button.mud-button-outlined {
    border-radius: var(--rv-radius-control);
    border-color: var(--rv-line-strong);
    background: var(--rv-surface);
}

/* Inputs: 8 px corners, a hairline that turns cyan in focus. */
.mud-input.mud-input-outlined,
.mud-input-control .mud-input-outlined-border {
    border-radius: var(--rv-radius-input);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--rv-line);
}

.mud-input.mud-input-outlined:hover:not(.mud-disabled) .mud-input-outlined-border {
    border-color: var(--rv-line-strong);
}

/* Tables: header in small capitals on the second surface, hairlines. */
.mud-table-root .mud-table-head .mud-table-cell,
.mud-simple-table table thead th {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--rv-text-2);
    background: var(--rv-surface-2);
}

.mud-table-root .mud-table-head .mud-table-cell .mud-table-sort-label {
    font-weight: 800;
}

.mud-table.mud-table-outlined,
.mud-table.mud-paper-outlined {
    border-radius: var(--rv-radius-table);
}

.mud-table-container {
    border-radius: inherit;
}

.mud-table-root .mud-table-body .mud-table-cell,
.mud-simple-table table tbody td {
    border-bottom-color: var(--rv-line);
}

/* Thin scrollbars on the dark theme, as in the desktop apps. */
html[data-theme="dark"] * {
    scrollbar-color: var(--rv-line-strong) transparent;
    scrollbar-width: thin;
}

/* Strips that scroll sideways under a finger show no bar on any theme. */
html .tg-chip-strip,
html .tg-hscroll {
    scrollbar-width: none;
}

.tg-hscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tg-hscroll::-webkit-scrollbar {
    display: none;
}

/* A strip of filter chips with counters that scrolls sideways (the groups of «Кто на месте» on a phone). Each chip
   carries its colour in --chip-color. */
.tg-chip-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tg-chip-strip::-webkit-scrollbar {
    display: none;
}

.tg-strip-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--rv-line-strong);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tg-strip-chip .mud-icon-root {
    color: var(--chip-color, var(--rv-accent));
    font-size: 18px;
}

.tg-strip-chip b {
    color: var(--chip-color, var(--rv-accent));
}

.tg-strip-chip.tg-strip-chip-on {
    border-color: var(--chip-color, var(--rv-accent));
    box-shadow: inset 0 0 0 1px var(--chip-color, var(--rv-accent));
    background: color-mix(in srgb, var(--chip-color, var(--rv-accent)) 12%, var(--mud-palette-surface));
}

/* Saving at the bottom of a phone's screen (PersonEditPage, AccessGroupEditPage, settings): a bar above the bottom
   navigation, always within reach of the thumb; the spacer keeps the end of the page clear of it. */
.tg-savebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--tg-bottomnav-height);
    z-index: calc(var(--mud-zindex-drawer, 1100) - 1);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    box-sizing: border-box;
    background: var(--rv-glass);
    border-top: 1px solid var(--rv-line);
    -webkit-backdrop-filter: saturate(150%) blur(14px);
    backdrop-filter: saturate(150%) blur(14px);
}

.tg-savebar-text {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.tg-savebar-text.tg-savebar-dirty {
    color: var(--mud-palette-warning);
    font-weight: 600;
}

.tg-savebar-spacer {
    height: 64px;
}

/* The floating button of the marks by face (MainLayout): above the status bar; the notifications and the end of the
   page keep clear of it. On a phone the middle of the bottom bar does its work. */
.tg-fab {
    position: fixed;
    right: 24px;
    bottom: calc(20px + var(--rv-statusbar-height));
    z-index: calc(var(--mud-zindex-drawer, 1100) - 2);
}

.tg-fab .mud-fab {
    width: 56px;
    height: 56px;
    background: var(--rv-primary-bg);
    color: var(--rv-primary-fg);
    border: 1px solid var(--rv-primary-border);
    box-shadow: var(--rv-primary-glow), var(--rv-shadow-overlay);
}

.tg-fab .mud-fab:hover {
    filter: brightness(1.07);
}

.tg-fab .mud-fab .mud-icon-root {
    font-size: 28px;
}

@media (min-width: 600px) {
    body:has(.tg-fab) .mud-main-content {
        padding-bottom: calc(var(--rv-statusbar-height) + 84px);
    }

    body:has(.tg-fab) .mud-snackbar-location-bottom-right {
        bottom: calc(96px + var(--rv-statusbar-height));
    }
}

/* Hints and controls for one kind of pointer: a mouse (drag, hover) or a finger (taps). */
@media (hover: hover) and (pointer: fine) {
    .tg-touch-only {
        display: none !important;
    }
}

@media (pointer: coarse) {
    .tg-mouse-only {
        display: none !important;
    }
}

/* ---------- phones (below 600 px) ----------
   Not a squeezed desktop: the main sections are on a bottom bar within reach of the thumb, dialogs take the whole
   screen with their buttons at the bottom, table rows become cards, fields do not make iOS zoom in, and everything
   that is tapped is at least 40 px. Pages with their own phone layout read the В«PhoneВ» cascade (MainLayout). */
:root {
    --tg-bottomnav-height: 0px;
}

.tg-bottomnav {
    display: none;
}

.mud-main-content {
    padding-bottom: calc(var(--rv-statusbar-height) + var(--tg-bottomnav-height));
}

@media (max-width: 599.98px) {
    :root {
        --tg-bottomnav-height: calc(58px + env(safe-area-inset-bottom, 0px));
    }

    /* Bottom navigation (MobileNav.razor): above the navigation pane that slides over the page, below the lists,
       menus and dialogs. */
    .tg-bottomnav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--mud-zindex-drawer, 1100) + 2);
        display: flex;
        align-items: stretch;
        height: var(--tg-bottomnav-height);
        padding: 0 4px env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--rv-glass);
        border-top: 1px solid var(--rv-line);
        -webkit-backdrop-filter: saturate(150%) blur(14px);
        backdrop-filter: saturate(150%) blur(14px);
    }

    .tg-bn-item {
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        color: var(--mud-palette-text-secondary);
        text-decoration: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tg-bn-icon {
        position: relative;
        display: grid;
        place-items: center;
        width: 54px;
        height: 30px;
        border-radius: 999px;
        transition: background-color .15s;
    }

    .tg-bn-icon .mud-icon-root {
        font-size: 22px;
    }

    .tg-bn-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }

    .tg-bn-item.active {
        color: var(--rv-accent);
    }

    .tg-bn-item.active .tg-bn-icon {
        background: var(--rv-accent-soft);
    }

    /* The raised button of the marks by face in the middle of the bar. */
    .tg-bn-center {
        gap: 2px;
    }

    .tg-bn-fab {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        margin-top: -22px;
        border-radius: 50%;
        border: 1px solid var(--rv-primary-border);
        background: var(--rv-primary-bg);
        color: var(--rv-primary-fg);
        box-shadow: var(--rv-primary-glow), 0 0 0 4px var(--rv-bg);
    }

    .tg-bn-fab .mud-icon-root {
        font-size: 28px;
    }

    .tg-bn-center.active .tg-bn-fab {
        box-shadow: var(--rv-primary-glow), 0 0 0 4px var(--rv-bg), 0 0 0 6px var(--rv-bright);
    }

    .tg-fab {
        display: none;
    }

    .tg-bn-badge {
        position: absolute;
        top: -2px;
        left: 32px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        box-sizing: border-box;
        border-radius: 9px;
        background: var(--mud-palette-secondary);
        color: var(--mud-palette-secondary-text);
        font-size: 10px;
        font-weight: 800;
        line-height: 18px;
        text-align: center;
    }

    /* The menu button of the title bar is on the bottom bar. */
    .tg-appbar .tg-appbar-menu {
        display: none;
    }

    /* The navigation pane slides over the page and ends above the bottom bar, which stays usable over its shade:
       «Меню» closes it again, the other items go straight to their page. */
    .mud-drawer.mud-drawer-fixed.mud-drawer-responsive.tg-drawer {
        height: calc(100% - var(--mud-appbar-height) - var(--tg-bottomnav-height));
    }

    .tg-bottomnav.tg-bottomnav-over {
        z-index: calc(var(--mud-zindex-appbar, 1300) + 3);
    }

    .mud-snackbar-location-bottom-right,
    .mud-snackbar-location-bottom-center,
    .mud-snackbar-location-bottom-left {
        left: 8px;
        right: 8px;
        bottom: calc(8px + var(--tg-bottomnav-height));
        transform: none;
    }

    .mud-snackbar {
        min-width: 0;
        width: 100%;
    }

    /* Page title: smaller; the explanation under it in two lines at most. */
    .tg-page-header {
        margin-bottom: 12px;
        gap: 10px;
    }

    .rv-page-title {
        font-size: 21px;
        line-height: 26px;
    }

    .rv-page-subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .rv-kpi-value {
        font-size: 21px;
    }

    /* Dialogs on the whole screen, the buttons along the bottom edge; a question (MaxWidth.ExtraSmall) stays a window. */
    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs) {
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: none;
        margin: 0;
        border: none;
        border-radius: 0;
        overflow: hidden;
        inset: 0;
    }

    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs) .mud-dialog-title {
        padding: 12px 56px 12px 16px;
        border-bottom: 1px solid var(--rv-line);
    }

    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs) .mud-dialog-content {
        padding: 12px 16px;
    }

    .mud-dialog-container .mud-dialog:not(.mud-dialog-width-xs) .mud-dialog-actions {
        flex-wrap: wrap;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--rv-line);
        background: var(--mud-palette-surface);
    }

    .mud-dialog-container .mud-dialog.mud-dialog-width-xs {
        width: calc(100% - 32px);
        max-width: 444px;
    }

    /* 16 px in fields: smaller text makes Safari on the iPhone zoom the page into the field. */
    .mud-input,
    .mud-input .mud-input-root,
    .mud-input .mud-input-slot,
    .auth-field input,
    .auth-field select {
        font-size: 16px;
    }

    /* Rows of tables that stack on a phone (MudTable / MudDataGrid, Breakpoint.Xs or Sm) as separate cards. */
    .mud-xs-table .mud-table-root,
    .mud-sm-table .mud-table-root,
    .mud-xs-table .mud-table-root .mud-table-body,
    .mud-sm-table .mud-table-root .mud-table-body {
        display: block;
    }

    .mud-xs-table .mud-table-body,
    .mud-sm-table .mud-table-body {
        border-top: none;
        padding: 4px 0;
    }

    .mud-xs-table .mud-table-body .mud-table-row,
    .mud-sm-table .mud-table-body .mud-table-row {
        display: flex;
        flex-direction: column;
        margin: 8px;
        border: 1px solid var(--rv-line);
        border-radius: var(--rv-radius-table);
        background: var(--mud-palette-surface);
        overflow: hidden;
    }

    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell,
    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell {
        gap: 12px;
        min-height: 34px;
        border-bottom: 1px solid var(--rv-line);
        text-align: end !important;
        overflow-wrap: anywhere;
    }

    .mud-xs-table .mud-table-body .mud-table-row .mud-table-cell:last-child,
    .mud-sm-table .mud-table-body .mud-table-row .mud-table-cell:last-child {
        border-bottom: none;
    }

    .mud-xs-table .mud-table-body .mud-table-cell:before,
    .mud-sm-table .mud-table-body .mud-table-cell:before {
        flex: none;
        max-width: 45%;
        font-size: 12px;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        text-align: start;
    }

    /* A cell without a caption (name, actions) uses the whole line. */
    .mud-xs-table .mud-table-body .mud-table-cell:not([data-label]):before,
    .mud-sm-table .mud-table-body .mud-table-cell:not([data-label]):before,
    .mud-xs-table .mud-table-body .mud-table-cell[data-label=""]:before,
    .mud-sm-table .mud-table-body .mud-table-cell[data-label=""]:before {
        content: none;
    }

    .mud-xs-table .mud-table-body .mud-table-cell:not([data-label]),
    .mud-sm-table .mud-table-body .mud-table-cell:not([data-label]),
    .mud-xs-table .mud-table-body .mud-table-cell[data-label=""],
    .mud-sm-table .mud-table-body .mud-table-cell[data-label=""] {
        justify-content: flex-start;
        text-align: start !important;
    }

    /* The name of a row heads its card wherever its column stands (class tg-card-head on the cell). */
    .mud-xs-table .mud-table-body .mud-table-cell.tg-card-head,
    .mud-sm-table .mud-table-body .mud-table-cell.tg-card-head {
        order: -1;
        font-weight: 600;
    }

    /* MudBlazor's В«sort byВ» list above the cards has no caption: the order of the desktop table is kept. */
    .mud-xs-table .mud-table-smalldevices-sortselect,
    .mud-sm-table .mud-table-smalldevices-sortselect {
        display: none;
    }

    .mud-xs-table .mud-table-pagination .mud-table-pagination-toolbar,
    .mud-sm-table .mud-table-pagination .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        height: auto;
        padding: 4px 8px;
    }

    /* Tables that keep their columns scroll sideways inside their card instead of widening the page. */
    .mud-simple-table .mud-table-container,
    .mud-table .mud-table-container {
        overflow-x: auto;
    }

    /* Segmented switches scroll sideways instead of sticking out of the screen. */
    html .mud-toggle-group {
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    /* Matrix and timesheet: a narrower fixed column of names leaves room for the days. */
    table.tg-grid .tg-sticky {
        min-width: 112px;
        max-width: 132px;
        white-space: normal;
        line-height: 1.25;
    }

    .mud-tabs .mud-tabs-tabbar .mud-tab {
        min-height: 44px;
    }
}

/* Fingers instead of a mouse (phones, tablets, touch screens): bigger targets. */
@media (pointer: coarse) {
    .tg-drawer .mud-navmenu .mud-nav-link {
        min-height: 44px;
        font-size: 14px;
    }

    .tg-drawer .mud-navmenu .mud-nav-group > .mud-nav-link {
        min-height: 38px;
    }

    .mud-menu-item,
    .mud-list-item-clickable {
        min-height: 44px;
    }

    .mud-icon-button.mud-icon-button-size-small {
        min-width: 36px;
        min-height: 36px;
    }

    .mud-button-root.mud-button.mud-button-size-small {
        min-height: 34px;
    }

    .mud-button-root.mud-button.mud-button-size-medium {
        min-height: 40px;
    }

    /* Tab headers scroll under the finger (swipe) instead of the arrows: MudBlazor shifts the strip with a transform,
       here it is an ordinary scroll box; app.js brings the chosen tab into view. */
    .mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-scroll-button {
        display: none;
    }

    html .mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-content {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-content::-webkit-scrollbar {
        display: none;
    }

    .mud-tabs-tabbar:not(.mud-tabs-vertical) .mud-tabs-tabbar-wrapper {
        transform: none !important;
    }

    .mud-xs-table .mud-table-pagination-actions .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ---------- print ---------- */
@media print {
    .mud-appbar, .mud-drawer, .tg-no-print, .mud-snackbar-provider {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .tg-grid-wrap {
        overflow: visible;
        border: none;
    }

    table.tg-grid th {
        position: static;
    }

    table.tg-grid .tg-sticky {
        position: static;
    }

    body {
        background: #fff !important;
    }
}

/* Default Blazor error UI */
#blazor-error-ui {
    background: #FFF7ED;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
    color: #7C2D12;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}