/* ------------------------------------------------------------------ *
 * Aktsiaraamat - "Uus FE (variant A)" design system.
 *
 * Colours come from the --va-* custom properties MainLayout emits for the
 * active theme (see WebApp/Design/AppTheme.cs); nothing here hard-codes a
 * palette value, so the light/dark switch needs no extra rules.
 * ------------------------------------------------------------------ */

html, body {
    font-family: 'IBM Plex Sans', Roboto, Helvetica, Arial, sans-serif;
}

.va-mono {
    font-family: var(--va-mono);
}

.va-muted {
    color: var(--va-t2);
}

.va-up {
    color: var(--va-acc);
}

.va-down {
    color: var(--va-down);
}

/* ----------------------------- shell ----------------------------- */

.va-appbar.mud-appbar {
    background-color: var(--va-chrome);
    border-bottom: 1px solid var(--va-line);
    box-shadow: none;
}

.va-appbar .mud-toolbar {
    gap: 8px;
    padding: 0 20px 0 12px;
}

.va-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.va-brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--va-acc);
    color: var(--va-on-acc);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--va-mono);
    font-weight: 700;
    font-size: 14px;
}

.va-brand-name {
    font-size: 17px;
    font-weight: 500;
    color: var(--va-t1);
}

.va-icon-btn.mud-icon-button {
    color: var(--va-t2);
    border-radius: 50%;
    padding: 8px;
}

.va-icon-btn.mud-icon-button:hover {
    background-color: var(--va-hover);
}

.va-search {
    position: relative;
    width: 320px;
    flex-shrink: 1;
    min-width: 160px;
}

.va-search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px 5px 14px;
    border: 1px solid var(--va-line);
    border-radius: 999px;
    background: var(--va-bg);
    color: var(--va-t2);
    cursor: text;
}

.va-search-pill:hover,
.va-search-pill:focus-within {
    border-color: var(--va-acc);
}

/* While results are showing, the pill and the panel read as one surface. */
.va-search-pill-open {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.va-search-pill .mud-icon-root {
    font-size: 19px;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.va-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    color: var(--va-t1);
}

.va-search-input::placeholder {
    color: var(--va-t2);
    opacity: 1;
}

/* The browser's own clear affordance would sit on top of ours. */
.va-search-input::-webkit-search-cancel-button {
    display: none;
}

.va-search-spinner.mud-progress-circular {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.va-search-clear.mud-icon-button {
    padding: 2px;
    color: var(--va-t2);
    flex-shrink: 0;
}

.va-search-clear.mud-icon-button .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.va-kbd {
    flex-shrink: 0;
    font-family: var(--va-mono);
    font-size: 11px;
    line-height: 16px;
    border: 1px solid var(--va-line);
    border-radius: 4px;
    padding: 1px 5px;
    white-space: nowrap;
}

.va-search-results {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
    padding: 6px;
    background: var(--va-surface);
    border: 1px solid var(--va-line);
    border-radius: 12px;
    box-shadow: var(--va-shadow);
}

.va-search-group {
    padding: 6px 10px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--va-t2);
}

.va-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.va-search-row-active {
    background: var(--va-acc-soft);
}

.va-search-lines {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.va-search-label {
    font-size: 13px;
    color: var(--va-t1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.va-search-sub {
    font-size: 11.5px;
    color: var(--va-t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.va-search-go.mud-icon-root {
    margin-left: auto;
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--va-t2);
    opacity: 0;
    flex-shrink: 0;
}

.va-search-row-active .va-search-go.mud-icon-root {
    opacity: 1;
    color: var(--va-acc);
}

.va-search-empty {
    padding: 14px 10px;
    font-size: 12.5px;
    color: var(--va-t2);
}

/* The phone's back arrow inside the pill; a desktop never shows it. */
.va-search-back {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--va-t2);
    flex-shrink: 0;
    cursor: pointer;
}

.va-search-back .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

/* The results panel hangs out of the toolbar, so nothing above may clip it. */
.va-appbar .mud-toolbar {
    overflow: visible;
}

@media (max-width: 900px) {
    .va-search {
        width: 200px;
    }

    .va-search .va-kbd {
        display: none;
    }
}

.va-drawer.mud-drawer {
    background-color: var(--va-chrome);
    border-right: 1px solid var(--va-line);
    box-shadow: none;
}

.va-drawer .mud-drawer-content {
    display: flex;
    flex-direction: column;
    padding: 12px 10px;
}

.va-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.va-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--va-t2);
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

.va-nav-item:hover {
    background: var(--va-acc-soft);
    text-decoration: none;
}

.va-nav-item.va-nav-active {
    background: var(--va-acc-soft);
    color: var(--va-acc);
    font-weight: 600;
}

.va-nav-item .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.va-drawer-footer {
    margin-top: auto;
    padding: 8px 0;
    text-align: center;
    font-size: 12px;
    color: var(--va-t2);
    white-space: nowrap;
}

/* Collapsed mini state: an icon rail — labels and footer hide, icons center,
   the active highlight stays as a full-width pill. */
.va-drawer.mud-drawer-mini.mud-drawer--closed .va-nav-item {
    justify-content: center;
    gap: 0;
    padding: 0;
}

.va-drawer.mud-drawer-mini.mud-drawer--closed .va-nav-item span {
    display: none;
}

/* display, not visibility: a merely invisible footer keeps its nowrap width, which is
   wider than the rail and would summon a horizontal scrollbar. */
.va-drawer.mud-drawer-mini.mud-drawer--closed .va-drawer-footer {
    display: none;
}

/* Nothing may scroll the drawer sideways, least of all mid-transition. */
.va-drawer .mud-drawer-content {
    overflow-x: hidden;
}

.va-main .va-content {
    padding: 20px;
}

/* -------------------------- page header -------------------------- */

.va-page-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.va-page-title {
    font-size: 21px;
    font-weight: 500;
    color: var(--va-t1);
}

.va-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--va-t2);
}

.va-breadcrumb a {
    color: var(--va-acc);
    text-decoration: none;
}

.va-breadcrumb a:hover {
    text-decoration: underline;
}

.va-breadcrumb .mud-icon-root {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ---------------------------- filters ---------------------------- */

/* The filters of a page header travel as one group: on a desktop the wrapper is
   invisible (it wraps and spaces exactly as the header does), on a phone it is the
   row that drops below the title. */
.va-page-filters {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.va-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--va-line);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--va-t2);
    cursor: pointer;
    user-select: none;
    background: transparent;
    white-space: nowrap;
}

.va-filter-btn:hover {
    background: var(--va-hover);
}

.va-filter-btn .mud-icon-root {
    font-size: 17px;
    width: 17px;
    height: 17px;
}

.va-filter-btn .va-filter-caret.mud-icon-root {
    font-size: 18px;
    width: 18px;
    height: 18px;
    margin-left: auto;
}

.va-filter-value {
    color: var(--va-t1);
    font-weight: 500;
}

.va-filter-wide .va-filter-btn {
    min-width: 220px;
}

.va-filter-xwide .va-filter-btn {
    min-width: 280px;
}

.va-filter-popover .mud-list {
    background: var(--va-surface);
    border: 1px solid var(--va-line);
    border-radius: 10px;
    box-shadow: var(--va-shadow);
    padding: 6px;
    min-width: 170px;
}

.va-filter-popover .mud-list-item {
    border-radius: 7px;
    padding: 8px 10px;
    min-height: 0;
    font-size: 13px;
    color: var(--va-t1);
}

.va-filter-popover .mud-list-item:hover {
    background: var(--va-hover);
}

.va-filter-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.va-filter-item .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--va-acc);
    /* Hidden rather than removed so every label keeps the same indent. */
    visibility: hidden;
}

.va-filter-popover .mud-list-item.va-filter-selected {
    color: var(--va-acc);
    font-weight: 600;
}

.va-filter-selected .va-filter-item .mud-icon-root {
    visibility: visible;
}

.va-date-popover .mud-list {
    background: var(--va-surface);
    border: 1px solid var(--va-line);
    border-radius: 10px;
    box-shadow: var(--va-shadow);
    padding: 0;
}

.va-date-popover .mud-list-item {
    padding: 0;
    background: transparent;
}

.va-date-popover .mud-picker-static,
.va-date-popover .mud-picker-container {
    box-shadow: none;
    background: transparent;
}

/* ----------------------------- cards ----------------------------- */

.va-card {
    background: var(--va-surface);
    border: 1px solid var(--va-line);
    border-radius: 12px;
    overflow: hidden;
}

.va-card-pad {
    padding: 18px;
}

.va-card-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--va-t1);
}

.va-card-sub {
    font-size: 12px;
    color: var(--va-t2);
}

.va-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--va-t1);
}

.va-card-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    flex-wrap: wrap;
}

.va-detail-card {
    padding: 20px;
    margin-bottom: 16px;
}

.va-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.va-detail-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 19px;
    font-weight: 600;
    color: var(--va-t1);
}

.va-detail-meta {
    font-size: 12.5px;
    color: var(--va-t2);
}

.va-detail-meta.va-mono {
    font-family: var(--va-mono);
}

.va-detail-link {
    font-size: 12.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--va-acc);
    text-decoration: none;
}

.va-detail-link .mud-icon-root {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.va-logo-lg {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    flex-shrink: 0;
}

.va-logo-md {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: block;
}

.va-logo-sm {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: block;
    flex-shrink: 0;
}

/* KPI mini cards used in the two detail headers. */
.va-stat-row {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.va-stat-row-5 {
    grid-template-columns: repeat(5, 1fr);
}

.va-stat-inline {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.va-stat {
    border: 1px solid var(--va-line);
    border-radius: 10px;
    padding: 12px 14px;
}

.va-stat-inline .va-stat {
    padding: 12px 18px;
}

.va-stat-label {
    font-size: 11.5px;
    color: var(--va-t2);
}

.va-stat-value {
    font-family: var(--va-mono);
    font-size: 16px;
    font-weight: 600;
    margin-top: 3px;
    color: var(--va-t1);
}

/* KPI cards with a tinted icon, used on the notifications page. */
.va-kpi-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 16px;
}

.va-kpi {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
}

.va-kpi-icon.mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
    box-sizing: content-box;
    border-radius: 10px;
    padding: 9px;
    flex-shrink: 0;
}

.va-kpi-icon-acc {
    color: var(--va-acc);
    background: var(--va-acc-soft);
}

.va-kpi-icon-down {
    color: var(--va-down);
    background: var(--va-down-soft);
}

.va-kpi-icon-amber {
    color: var(--va-amber);
    background: var(--va-amber-soft);
}

.va-kpi-body {
    min-width: 0;
}

.va-kpi-label {
    font-size: 11.5px;
    color: var(--va-t2);
}

.va-kpi-value {
    font-size: 17px;
    font-weight: 600;
    font-family: var(--va-mono);
    white-space: nowrap;
    color: var(--va-t1);
}

.va-kpi-sub {
    font-size: 11px;
    color: var(--va-t2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------ chips and badges ----------------------- */

.va-chip {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.va-chip-acc {
    background: var(--va-acc-soft);
    color: var(--va-acc);
}

.va-chip-amber {
    background: var(--va-amber-soft);
    color: var(--va-amber);
}

.va-chip-down {
    background: var(--va-down-soft);
    color: var(--va-down);
}

/* Kinds that are neither an acquisition nor a disposal (pledges, loans, transfers). */
.va-chip-muted {
    background: var(--va-hover);
    color: var(--va-t2);
}

.va-count-chip {
    background: var(--va-acc-soft);
    color: var(--va-acc);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Discrete list marker used in the issuer detail header. */
.va-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--va-line);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: .3px;
    color: var(--va-t2);
}

.va-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--va-acc);
}

/* Issuer-related marker: an icon beside the name, never its own column. */
.va-rel-icon.mud-icon-root {
    font-size: 15px;
    width: 15px;
    height: 15px;
    box-sizing: content-box;
    color: var(--va-acc);
    background: var(--va-acc-soft);
    border-radius: 50%;
    padding: 3px;
    flex-shrink: 0;
}

.va-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
}

/* --------------------------- data grid --------------------------- */

.va-grid.mud-table {
    background: var(--va-surface);
    border: 1px solid var(--va-line);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: none;
}

.va-grid .mud-table-cell {
    padding: 8px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--va-line);
    color: var(--va-t1);
}

.va-grid .mud-table-head .mud-table-cell {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--va-t2);
    padding: 11px 14px;
    background: var(--va-surface);
}

.va-grid .mud-table-head .mud-table-cell .sortable-column-header {
    cursor: pointer;
}

.va-grid .mud-table-head .mud-table-cell .sortable-column-header:hover {
    color: var(--va-acc);
}

/* The active sort column is the only one whose arrow is opaque. */
.va-grid .mud-table-head .mud-table-cell:has(.mud-direction-asc),
.va-grid .mud-table-head .mud-table-cell:has(.mud-direction-desc) {
    color: var(--va-acc);
}

.va-grid .mud-table-head .mud-table-cell .sort-direction-icon {
    font-size: 15px;
}

.va-grid .mud-table-body .mud-table-row:hover {
    background-color: var(--va-hover);
}

.va-grid-clickable .mud-table-body .mud-table-row {
    cursor: pointer;
}

.va-grid .mud-table-cell.va-num,
.va-grid .mud-table-cell.va-th-right {
    text-align: right;
}

.va-grid .mud-table-cell.va-num {
    font-family: var(--va-mono);
    white-space: nowrap;
}

.va-grid .mud-table-head .mud-table-cell.va-th-right .sortable-column-header {
    text-align: right;
}

.va-grid .mud-table-cell.va-cell-mono {
    font-family: var(--va-mono);
    font-size: 12.5px;
}

.va-grid .mud-table-cell.va-cell-dim {
    color: var(--va-t2);
}

.va-grid .mud-table-cell.va-cell-strong {
    font-weight: 600;
}

.va-grid .mud-table-cell.va-cell-logo {
    width: 52px;
    padding: 8px 14px;
}

.va-grid .mud-table-cell.va-cell-rank {
    width: 64px;
    font-family: var(--va-mono);
    color: var(--va-t2);
}

.va-grid .mud-table-cell.va-cell-go {
    width: 90px;
    text-align: right;
    color: var(--va-t2);
}

.va-grid .mud-table-cell.va-cell-go .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* The expander column of the notification register. It is a HierarchyColumn, which
   accepts no class of its own, so it is reached by position. */
.insider-transactions-grid th:first-child,
.insider-transactions-grid .mud-table-cell:first-child {
    width: 40px;
    padding: 6px 0 6px 12px;
}

.va-grid .mud-table-cell.va-cell-type {
    font-size: 12.5px;
}

.va-grid .mud-table-cell.va-cell-published {
    font-family: var(--va-mono);
    font-size: 12px;
    white-space: nowrap;
}

.va-grid .mud-table-cell.va-cell-delay {
    text-align: right;
}

.va-grid .mud-table-toolbar {
    padding: 0;
    min-height: 0;
    height: auto;
}

.va-grid .mud-table-toolbar .va-card-toolbar {
    flex: 1;
}

.va-grid .mud-table-pagination {
    border-top: none;
    color: var(--va-t2);
    font-size: 12.5px;
}

.va-grid .mud-table-pagination .mud-table-pagination-toolbar {
    padding: 10px 16px;
    min-height: 0;
    height: auto;
}

.va-grid .mud-table-pagination .mud-select-input .mud-input-slot {
    font-size: 12.5px;
    color: var(--va-t2);
}

.va-grid .mud-table-pagination .mud-icon-button {
    color: var(--va-t2);
}

.va-grid a {
    color: var(--va-acc);
    text-decoration: none;
}

.va-grid a:hover {
    text-decoration: underline;
}

/* The hierarchy chevron doubles as the expand affordance for detail rows. */
.va-grid .mud-table-cell .mud-button-root.mud-icon-button.mud-table-row-expander {
    color: var(--va-t2);
}

.va-grid-empty {
    padding: 24px 16px;
    font-size: 13px;
    color: var(--va-t2);
}

/* --------------------- expandable detail panel -------------------- */

.va-tx-detail {
    background: var(--va-bg);
    padding: 16px 20px 18px 52px;
}

.va-field-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 24px;
    max-width: 900px;
}

.va-field-label {
    font-size: 11px;
    color: var(--va-t2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.va-field-value {
    font-size: 13px;
    margin-top: 2px;
    color: var(--va-t1);
}

.va-lines {
    margin-top: 16px;
    border: 1px solid var(--va-line);
    border-radius: 10px;
    overflow: hidden;
    max-width: 680px;
}

.va-lines table {
    width: 100%;
    border-collapse: collapse;
}

.va-lines th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--va-t2);
    background: var(--va-surface);
    border-bottom: 1px solid var(--va-line);
    padding: 8px 12px;
    text-align: left;
}

.va-lines td {
    font-size: 12.5px;
    padding: 7px 12px;
    border-bottom: 1px solid var(--va-line);
    color: var(--va-t1);
}

.va-lines tfoot td {
    font-weight: 600;
    background: var(--va-surface);
    border-bottom: none;
}

.va-lines .va-num {
    text-align: right;
    font-family: var(--va-mono);
    white-space: nowrap;
}

.va-lines .va-seq {
    width: 60px;
    font-family: var(--va-mono);
    color: var(--va-t2);
}

/* ----------------- grouped share register (hodler) ---------------- */

.va-group-head {
    display: grid;
    grid-template-columns: 2fr 1.1fr .9fr 1fr;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--va-t2);
    border-top: 1px solid var(--va-line);
    border-bottom: 1px solid var(--va-line);
}

.va-group-head > div {
    padding: 11px 16px;
}

.va-group-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--va-line);
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
}

.va-group-row:hover,
.va-group-row.va-group-open {
    background: var(--va-hover);
}

.va-group-row .va-chevron.mud-icon-root {
    font-size: 19px;
    width: 19px;
    height: 19px;
    color: var(--va-t2);
}

.va-group-name {
    font-size: 13.5px;
    font-weight: 600;
}

.va-group-latest {
    margin-left: auto;
    font-family: var(--va-mono);
    font-size: 12.5px;
    color: var(--va-t2);
}

.va-group-insider.mud-icon-root {
    font-size: 17px;
    width: 17px;
    height: 17px;
    color: var(--va-amber);
}

.va-sub-row {
    display: grid;
    grid-template-columns: 2fr 1.1fr .9fr 1fr;
    align-items: center;
    border-bottom: 1px solid var(--va-line);
    font-size: 13px;
}

.va-sub-row:hover {
    background: var(--va-hover);
}

.va-sub-date {
    padding: 7px 16px 7px 62px;
    display: flex;
    align-items: center;
}

.va-sub-dash {
    width: 14px;
    height: 1px;
    background: var(--va-line);
    margin-right: 8px;
}

.va-sub-row > div:not(.va-sub-date) {
    padding: 7px 16px;
    text-align: right;
    font-family: var(--va-mono);
    white-space: nowrap;
}

.va-sub-row .va-sub-delta {
    font-size: 12.5px;
}

.va-sub-day {
    font-size: 12px;
}

.va-align-right {
    text-align: right;
}

.va-card-gap {
    margin-bottom: 16px;
}

/* Insider notifications listed on a shareholder's page. */
.va-tx-head,
.va-tx-row {
    display: grid;
    grid-template-columns: .9fr 1.2fr 1fr .8fr .7fr 1.1fr;
    align-items: center;
    border-bottom: 1px solid var(--va-line);
}

.va-tx-head {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--va-t2);
    border-top: 1px solid var(--va-line);
}

.va-tx-head > div {
    padding: 11px 14px;
}

.va-tx-row {
    font-size: 13.5px;
}

.va-tx-row > div {
    padding: 9px 14px;
    white-space: nowrap;
}

.va-tx-row:hover {
    background: var(--va-hover);
}

.va-tx-link {
    cursor: pointer;
}

/* The row the register was asked to reveal (?teavitus=id). */
.va-grid .mud-table-row.va-tx-focus {
    background: var(--va-acc-soft);
    box-shadow: inset 2px 0 0 var(--va-acc);
}

.va-tx-row a {
    color: var(--va-acc);
    text-decoration: none;
}

.va-tx-row a:hover {
    text-decoration: underline;
}

.va-tx-date {
    font-size: 12.5px;
}

.va-tx-published {
    font-size: 12px;
}

/* ---------------------------- charts ----------------------------- */

.va-stats-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
}

.va-span-4 { grid-column: span 4; }
.va-span-5 { grid-column: span 5; }
.va-span-6 { grid-column: span 6; }
.va-span-7 { grid-column: span 7; }
.va-span-8 { grid-column: span 8; }

@media (max-width: 1100px) {
    .va-span-4, .va-span-5, .va-span-6, .va-span-7, .va-span-8 {
        grid-column: span 12;
    }

    .va-kpi-row,
    .va-stat-row-5 {
        grid-template-columns: repeat(2, 1fr);
    }

    .va-field-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.va-chart {
    width: 100%;
    display: block;
}

/* The strokes keep their designed thickness whatever size the SVG renders at; only the
   geometry scales. */
.va-chart line,
.va-chart polyline,
.va-chart path {
    vector-effect: non-scaling-stroke;
}

/* The line chart scales its glyphs with its width against the 1280-unit viewBox, so the
   rendered width is clamped from both ends: past the maximum the chart stops growing and
   centers, keeping the text near its design size on a wide monitor, and below the minimum
   it stops shrinking and pans inside its card instead. */
.va-chart-scroll {
    overflow-x: auto;
}

.va-chart-scroll .va-chart {
    min-width: 880px;
    max-width: 1440px;
    margin-inline: auto;
}

/* The line chart's hover readout is pure CSS on server-rendered SVG: each month slot
   owns an invisible hit rect, and :hover on it reveals the slot's pre-rendered guide,
   dots and value box. No JS interop and no circuit roundtrips are involved. */
.va-chart .va-hover-hit {
    pointer-events: all;
}

.va-chart .va-hover-layer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 80ms ease;
}

.va-chart .va-hover-slot:hover .va-hover-layer {
    opacity: 1;
}

/* While a legend chip is hovered, every other line steps back. */
.va-chart .va-series {
    transition: opacity 120ms ease;
}

.va-chart .va-series-dim {
    opacity: 0.15;
}

.va-chart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.va-chart-sub {
    margin-bottom: 8px;
}

.va-donut-card {
    display: flex;
    flex-direction: column;
}

.va-legend {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--va-t2);
    flex-wrap: wrap;
}

.va-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.va-legend-line {
    width: 10px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
    background: var(--va-series, var(--va-line));
}

/* The investor chart's legend doubles as the on/off switch for each issuer line. */
.va-legend-toggles {
    margin-top: 10px;
    gap: 8px;
}

.va-legend-toggles .va-legend-item {
    border: 1px solid var(--va-line);
    border-radius: 999px;
    padding: 3px 10px;
    background: transparent;
    color: var(--va-t2);
    font-family: inherit;
    font-size: 11.5px;
    cursor: pointer;
}

.va-legend-toggles .va-legend-item:hover {
    background: var(--va-hover);
}

/* Off is a hollow chip with a grey rule; on lights up in the series' own colour. */
.va-legend-toggles .va-legend-item .va-legend-line {
    background: var(--va-line);
}

.va-legend-toggles .va-legend-on {
    color: var(--va-t1);
    border-color: var(--va-series);
}

.va-legend-toggles .va-legend-on .va-legend-line {
    background: var(--va-series);
}

.va-legend-action.mud-button-root {
    min-width: 0;
    padding: 2px 8px;
    font-size: 11.5px;
    color: var(--va-acc);
}

.va-legend-square {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}

.va-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 12.5px;
    color: var(--va-t2);
}

.va-donut-legend b {
    color: var(--va-t1);
}

.va-donut-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    flex-wrap: wrap;
}

.va-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 160px;
    padding-top: 10px;
}

.va-bar-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    height: 100%;
    justify-content: flex-end;
    min-width: 0;
}

/* MudTooltip wraps each bar in a div of its own. Without a height here that wrapper is
   auto-sized, and the bar's percentage height would resolve to nothing. */
.va-bar-col .mud-tooltip-root {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    min-height: 0;
}

.va-bar {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--va-acc-soft);
}

.va-bar-last {
    background: var(--va-acc);
}

.va-bar-label {
    font-size: 9.5px;
    color: var(--va-t2);
    font-family: var(--va-mono);
}

.va-mover {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--va-line);
}

.va-mover:last-child {
    border-bottom: none;
}

.va-mover-name {
    font-size: 13px;
    font-weight: 500;
}

.va-mover-ticker {
    font-size: 11px;
    color: var(--va-t2);
    font-family: var(--va-mono);
}

.va-mover-delta {
    margin-left: auto;
    font-family: var(--va-mono);
    font-size: 13px;
    font-weight: 500;
}

/* Every active issuer gets a row, so the list scrolls inside the card instead of
   stretching the grid row it shares with the movers card. */
.va-conc-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 296px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--va-line) transparent;
}

.va-conc-legend {
    margin-bottom: 12px;
    font-size: 11.5px;
}

.va-conc-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.va-conc-ticker {
    width: 52px;
    flex-shrink: 0;
    font-family: var(--va-mono);
    font-size: 12px;
    color: var(--va-t2);
}

/* The stacked bar: the grey track is the register, the coloured segments its most
   concentrated blocks. The flex gap doubles as the 2px separator between segments,
   and the track's rounding clips the outermost segment corners. */
.va-conc-track {
    flex: 1;
    display: flex;
    gap: 2px;
    height: 12px;
    border-radius: 6px;
    background: var(--va-line);
    overflow: hidden;
}

.va-conc-seg {
    height: 100%;
}

.va-conc-c1 {
    background: var(--va-teal);
}

.va-conc-c2 {
    background: var(--va-blue);
}

.va-conc-c3 {
    background: var(--va-amber);
}

.va-conc-value {
    width: 52px;
    flex-shrink: 0;
    text-align: right;
    font-family: var(--va-mono);
    font-size: 12.5px;
    font-weight: 600;
}

/* ------------------------ buttons and forms ----------------------- */

.va-primary-btn.mud-button-root {
    background: var(--va-acc);
    color: var(--va-on-acc);
    font-weight: 600;
    font-size: 12.5px;
    text-transform: none;
    border-radius: 8px;
    padding: 7px 16px;
    box-shadow: none;
}

.va-primary-btn.mud-button-root:hover {
    background: var(--va-acc);
    filter: brightness(1.08);
    box-shadow: none;
}

.va-primary-btn .mud-icon-root {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.va-info-card {
    width: 760px;
    max-width: 100%;
    margin: 24px auto 0;
}

.va-info-tabs .mud-tabs-header {
    border-bottom: 1px solid var(--va-line);
    background: transparent;
}

.va-info-tabs .mud-tab {
    text-transform: none;
    font-size: 13.5px;
    color: var(--va-t2);
    min-height: 52px;
}

.va-info-tabs .mud-tab.mud-tab-active {
    color: var(--va-acc);
    font-weight: 600;
}

.va-info-tabs .mud-tab-slider {
    background-color: var(--va-acc);
    height: 2px;
}

/* Each panel brings its own padding through .va-info-body; MudTabs takes no PanelClass
   in v9, so its default padding is cleared here instead of being doubled up. */
.va-info-tabs .mud-tabs-panels {
    padding: 0;
}

/* MudBlazor hides non-active panels only via a stylesheet rule; this guard keeps them
   hidden even if another stylesheet in the cascade overrides that rule. */
.va-info-tabs .mud-tabs-panels .mud-tab-panel:not(.mud-tab):not(.mud-tab-panel-active) {
    display: none !important;
}

.va-info-body {
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--va-t1);
}

.va-info-body a {
    color: var(--va-acc);
    text-decoration: none;
}

.va-info-body a:hover {
    text-decoration: underline;
}

.va-hint {
    display: flex;
    gap: 12px;
    background: var(--va-acc-soft);
    border: 1px solid var(--va-acc);
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--va-t1);
    font-size: 13.5px;
    line-height: 1.6;
}

.va-hint .mud-icon-root {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--va-acc);
    flex-shrink: 0;
}

.va-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.va-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.va-field label {
    font-size: 12px;
    color: var(--va-t2);
}

.va-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--va-line);
    border-radius: 8px;
}

/* The fill lives on the wrapper: painting the slot alone leaves the outlined fieldset's
   label strip unpainted, which shows as a lighter band across multiline fields. */
.va-field .mud-input-outlined {
    background: var(--va-bg);
    border-radius: 8px;
}

.va-field .mud-input-outlined .mud-input-slot {
    font-size: 13.5px;
}

.va-field .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--va-acc);
    border-width: 1px;
}

.va-form-submit.mud-button-root {
    align-self: flex-start;
    font-size: 13px;
    padding: 9px 22px;
}

.notification-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* -------------------------- login pages --------------------------- */

.login-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.centered-form {
    width: 100%;
    max-width: 800px;
}

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

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

.validation-message {
    color: var(--va-down);
}

/* ============================== phone ============================== *
 * Everything at 600px and below - the width at which MudBlazor's data grid switches
 * to its stacked layout (mud-xs-table). The desktop rules above stay exactly as they
 * are; these only add on top of them. Every row of a data grid becomes a small card:
 * the grid keeps its data, paging and row clicks, and the cells are laid out with a
 * CSS grid instead of being listed label-by-label.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {

    /* ------------------------------ shell ------------------------------ */

    .va-main .va-content {
        padding: 12px;
    }

    .va-appbar .mud-toolbar {
        gap: 4px;
        padding: 0 8px 0 12px;
    }

    .va-brand {
        gap: 8px;
        min-width: 0;
    }

    .va-brand-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Overlay drawer: roomier rows for a thumb. */
    .va-nav-item {
        height: 44px;
        font-size: 14px;
    }

    /* --------------------------- search pill --------------------------- */

    /* Folded: a bare icon between the brand and the buttons. The input lies invisibly
       over the icon, so a tap focuses it natively - keyboard and all - and :focus-within
       unfolds the pill across the whole toolbar. */
    .va-search {
        width: 40px;
        height: 40px;
        min-width: 0;
        flex-shrink: 0;
    }

    .va-search-pill {
        position: absolute;
        inset: 0;
        padding: 0;
        justify-content: center;
        border-color: transparent;
        border-radius: 50%;
        background: transparent;
    }

    .va-search-pill:hover {
        border-color: transparent;
        background: var(--va-hover);
    }

    .va-search-pill .va-search-icon.mud-icon-root {
        font-size: 22px;
        width: 22px;
        height: 22px;
    }

    /* 16px: below that iOS zooms the page in when the field gets focus. */
    .va-search-input {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        font-size: 16px;
    }

    .va-search .va-kbd,
    .va-search-clear.mud-icon-button,
    .va-search-spinner.mud-progress-circular {
        display: none;
    }

    /* Unfolded: the pill takes the toolbar over, brand and buttons included. */
    .va-search:focus-within {
        position: absolute;
        left: 4px;
        right: 4px;
        top: 50%;
        width: auto;
        transform: translateY(-50%);
        z-index: 3;
    }

    .va-search:focus-within .va-search-pill {
        position: relative;
        inset: auto;
        height: 40px;
        padding: 0 6px 0 4px;
        justify-content: flex-start;
        border-color: var(--va-acc);
        border-radius: 999px;
        background: var(--va-bg);
    }

    .va-search:focus-within .va-search-input {
        position: static;
        width: auto;
        height: auto;
        opacity: 1;
    }

    .va-search:focus-within .va-search-icon {
        display: none;
    }

    .va-search:focus-within .va-search-back {
        display: inline-flex;
    }

    .va-search:focus-within .va-search-clear.mud-icon-button {
        display: inline-flex;
    }

    .va-search:focus-within .va-search-spinner.mud-progress-circular {
        display: inline-block;
    }

    /* --------------------------- page header --------------------------- */

    .va-page-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .va-page-title {
        font-size: 19px;
    }

    .va-page-header > .flex-grow-1 {
        display: none;
    }

    /* The filters fill the width in as many rows as they need; a long issuer picker
       gets a row of its own. */
    .va-page-filters {
        flex: 1 1 100%;
        gap: 8px;
    }

    .va-page-filters > * {
        flex: 1 1 auto;
        min-width: 0;
    }

    .va-page-filters .va-filter-btn,
    .va-card-toolbar .va-filter-btn {
        width: 100%;
    }

    .va-filter-wide .va-filter-btn,
    .va-filter-xwide .va-filter-btn {
        min-width: 0;
    }

    .va-breadcrumb {
        margin-bottom: 10px;
    }

    /* --------------------------- card toolbars -------------------------- */

    .va-card-toolbar {
        gap: 8px;
        padding: 12px;
    }

    .va-card-toolbar > .flex-grow-1 {
        display: none;
    }

    .va-card-toolbar > .va-section-title,
    .va-card-toolbar > .va-primary-btn.mud-button-root,
    .va-card-toolbar > .va-card-sub {
        flex: 1 1 100%;
    }

    .va-card-toolbar > .mud-menu {
        flex: 1 1 auto;
        min-width: 0;
    }

    .va-page-filters > .mud-menu.va-filter-wide,
    .va-card-toolbar > .mud-menu.va-filter-xwide {
        flex-basis: 100%;
    }

    /* ----------------------------- cards ------------------------------ */

    .va-card-pad,
    .va-detail-card {
        padding: 14px;
    }

    .va-detail-card {
        margin-bottom: 12px;
    }

    .va-card-gap {
        margin-bottom: 12px;
    }

    .va-detail-head {
        gap: 12px;
    }

    .va-detail-name {
        font-size: 17px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .va-logo-lg {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .va-stat-row {
        gap: 8px;
        margin-top: 14px;
    }

    .va-stat {
        padding: 10px 12px;
    }

    .va-stat-value {
        font-size: 15px;
    }

    .va-stat-inline {
        flex: 1 1 100%;
        gap: 8px;
    }

    .va-stat-inline .va-stat {
        flex: 1 1 auto;
        padding: 10px 12px;
    }

    .va-kpi-row {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 12px;
    }

    .va-kpi {
        padding: 10px 14px;
    }

    .va-stats-grid {
        gap: 12px;
    }

    .va-chart-head {
        flex-wrap: wrap;
    }

    .va-chart-scroll .va-chart {
        min-width: 720px;
    }

    .va-donut-wrap {
        gap: 16px;
    }

    /* --------------------------- data grids --------------------------- */

    /* Out of table layout altogether: the body is a stack of grid-laid rows. The
       selectors carry .mud-table-body so they outrank MudBlazor's own xs rules. */
    .va-grid.mud-xs-table .mud-table-root,
    .va-grid.mud-xs-table .mud-table-body {
        display: block;
    }

    .va-grid.mud-xs-table .mud-table-root .mud-table-head {
        display: none;
    }

    .va-grid.mud-xs-table .mud-table-body {
        border-top: none;
    }

    .va-grid.mud-xs-table .mud-table-body .mud-table-row {
        display: grid;
        position: relative;
        align-items: center;
        column-gap: 10px;
        row-gap: 5px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--va-line);
    }

    .va-grid.mud-xs-table .mud-table-body .mud-table-cell {
        display: block;
        min-width: 0;
        padding: 0;
        border: none;
        font-size: 13.5px;
    }

    .va-grid.mud-xs-table .mud-table-body .mud-table-cell::before {
        content: none;
    }

    .va-grid.mud-xs-table .mud-table-body .va-cell-go,
    .va-grid.mud-xs-table .mud-table-body .va-cell-rank,
    .va-grid.mud-xs-table .mud-table-body .va-cell-logo {
        width: auto;
    }

    /* The expanded notification keeps its single full-width cell. */
    .va-grid.mud-xs-table .mud-table-body .mud-table-row:has(> .mud-table-child-content) {
        display: block;
        padding: 0;
    }

    .va-grid.mud-xs-table .mud-table-body .mud-table-child-content {
        display: block;
        width: auto;
        padding: 0;
    }

    /* Cell roles. The row's grid-template-areas below say where each one goes. */
    .va-grid.mud-xs-table .mud-table-body .va-m-title {
        font-size: 14px;
        font-weight: 600;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-sub {
        font-size: 12.5px;
        color: var(--va-t2);
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-tag {
        justify-self: end;
        font-size: 11.5px;
        color: var(--va-t2);
        white-space: nowrap;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-lead {
        justify-self: end;
        font-family: var(--va-mono);
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-chip {
        justify-self: end;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-hide {
        display: none;
    }

    /* "Alates 29.05.2023": the column title in front of the value, on one line. */
    .va-grid.mud-xs-table .mud-table-body .va-m-inline {
        font-family: var(--va-mono);
        font-size: 12px;
        color: var(--va-t2);
        white-space: nowrap;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-inline::before {
        content: attr(data-label);
        margin-right: 5px;
        font-family: 'IBM Plex Sans', Roboto, Helvetica, Arial, sans-serif;
    }

    /* A figure with its column title above it, worded like the KPI cards' labels
       rather than like a table header - mixed case is narrower. The label is contained
       so it never widens the column: a long title is cut short before a figure is. */
    .va-grid.mud-xs-table .mud-table-body .va-m-stat {
        font-family: var(--va-mono);
        font-size: 12.5px;
        white-space: nowrap;
    }

    .va-grid.mud-xs-table .mud-table-body .va-m-stat::before {
        content: attr(data-label);
        display: block;
        contain: inline-size;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1px;
        font-family: 'IBM Plex Sans', Roboto, Helvetica, Arial, sans-serif;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--va-t2);
    }

    /* Aktsionärid: name, then the since date, the arrow beside both. */
    .va-grid-owners.mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "name  go"
            "since go";
        row-gap: 3px;
    }

    .va-grid-owners.mud-xs-table .mud-table-body .mud-table-cell:nth-child(1) { grid-area: name; }
    .va-grid-owners.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: since; }
    .va-grid-owners.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: go; }

    /* Emitendid: logo in the margin; the name, the ticker with the list opposite it,
       then the three figures. */
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: repeat(3, minmax(min-content, 1fr)) auto;
        grid-template-areas:
            "name   name  name go"
            "ticker list  list go"
            "active mcap  asof go";
        padding-left: 62px;
    }

    .va-grid-companies.mud-xs-table .mud-table-body .va-cell-logo {
        position: absolute;
        left: 14px;
        top: 11px;
    }

    .va-grid-companies.mud-xs-table .mud-table-body .va-logo-md {
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }

    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: name; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: ticker; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { grid-area: list; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: active; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: mcap; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) { grid-area: asof; }
    .va-grid-companies.mud-xs-table .mud-table-body .mud-table-cell:nth-child(8) { grid-area: go; }

    /* Emitendi aktsiaraamat: rank in the margin, owner with the holding beside it,
       then the two percentages. */
    .va-grid-holdings.mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) auto;
        grid-template-areas:
            "name name sec"
            "pct  calc calc";
        padding-left: 46px;
    }

    .va-grid-holdings.mud-xs-table .mud-table-body .va-cell-rank,
    .va-grid-fluctuation.mud-xs-table .mud-table-body .va-cell-rank {
        position: absolute;
        left: 14px;
        top: 12px;
        font-size: 12px;
    }

    .va-grid-holdings.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: name; }
    .va-grid-holdings.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: sec; }
    .va-grid-holdings.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { grid-area: pct; }
    .va-grid-holdings.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: calc; }

    /* Analüüs: rank in the margin, owner with the signed difference beside it, then
       start, end and volume. The absolute difference is only there for sorting. */
    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) auto;
        grid-template-areas:
            "owner owner diff"
            "start end   total";
        padding-left: 46px;
    }

    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: owner; }
    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: start; }
    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { grid-area: end; }
    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: diff; }
    .va-grid-fluctuation.mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) { grid-area: total; }

    /* Tehinguteavitused: the expander in the margin; issuer and delay chip, person and
       kind, the two dates, then the three sums. */
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-row {
        grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(min-content, 1fr) auto;
        grid-template-areas:
            "issuer issuer    issuer    delay"
            "person person    kind      kind"
            "date   published published published"
            "volume price     amount    amount";
        padding-left: 46px;
    }

    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:first-child:not(.mud-table-child-content) {
        position: absolute;
        left: 6px;
        top: 7px;
        width: auto;
        padding: 0;
    }

    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(2) { grid-area: date; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(3) { grid-area: issuer; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(4) { grid-area: person; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(5) { grid-area: kind; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(6) { grid-area: volume; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(7) { grid-area: price; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(8) { grid-area: amount; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(9) { grid-area: published; }
    .insider-transactions-grid.mud-xs-table .mud-table-body .mud-table-cell:nth-child(10) { grid-area: delay; }

    /* The expanded notification. */
    .va-tx-detail {
        padding: 12px 14px 14px;
    }

    .va-field-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px 14px;
    }

    .va-field-grid > div {
        min-width: 0;
    }

    .va-field-value {
        overflow-wrap: anywhere;
    }

    /* A LEI is twenty characters: at 12px it fits a half-width column in one piece. */
    .va-field-value.va-mono {
        font-size: 12px;
    }

    .va-lines {
        overflow-x: auto;
    }

    .va-lines th,
    .va-lines td {
        padding: 6px 6px;
        font-size: 12px;
    }

    /* The sequence column stays (the total row spans it) but gives up its room. */
    .va-lines .va-seq {
        width: 20px;
        padding-right: 0;
    }

    /* Pager: centred, and the rows-per-page picker goes - the page count is enough. */
    .va-grid .mud-table-pagination .mud-table-pagination-toolbar {
        padding: 6px 8px;
        justify-content: center;
    }

    .va-grid .mud-table-pagination .mud-table-pagination-spacer,
    .va-grid .mud-table-pagination .mud-table-pagination-caption:first-of-type,
    .va-grid .mud-table-pagination .mud-table-pagination-select {
        display: none;
    }

    .va-grid .mud-table-pagination .mud-table-pagination-actions {
        margin: 0;
    }

    /* ------------------ grouped share register (hodler) ---------------- */

    .va-group-head,
    .va-tx-head {
        display: none;
    }

    .va-group-row {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 10px 12px;
    }

    .va-group-name {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* The latest date drops under the name, aligned with it. */
    .va-group-latest {
        flex: 1 1 100%;
        margin-left: 0;
        padding-left: 65px;
        font-size: 12px;
    }

    .va-sub-row {
        grid-template-columns: repeat(3, minmax(min-content, 1fr));
        grid-template-areas:
            "date date date"
            "sec  pct  delta";
        column-gap: 10px;
        row-gap: 4px;
        padding: 8px 12px 10px 41px;
    }

    .va-sub-date {
        grid-area: date;
        padding: 0;
    }

    .va-sub-row > div:not(.va-sub-date) {
        padding: 0;
        text-align: left;
        font-size: 12.5px;
    }

    .va-sub-row > div:nth-child(2) { grid-area: sec; }
    .va-sub-row > div:nth-child(3) { grid-area: pct; }
    .va-sub-row > div:nth-child(4) { grid-area: delta; }

    .va-sub-row > div[data-label]::before,
    .va-tx-row > div[data-label]::before {
        content: attr(data-label);
        display: block;
        contain: inline-size;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 1px;
        font-family: 'IBM Plex Sans', Roboto, Helvetica, Arial, sans-serif;
        font-size: 10.5px;
        font-weight: 500;
        color: var(--va-t2);
    }

    /* A shareholder's notifications: issuer and kind, the three figures, the
       publication stamp. */
    /* The third column starts from zero, not from its content: that is where the kind
       chip sits, and only a column that may shrink can cut the chip short. */
    .va-tx-row {
        grid-template-columns: minmax(min-content, 1fr) minmax(min-content, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "issuer    issuer    kind"
            "date      volume    price"
            "published published published";
        column-gap: 10px;
        row-gap: 5px;
        padding: 11px 14px;
    }

    .va-tx-row > div {
        padding: 0;
        text-align: left;
    }

    .va-tx-issuer {
        grid-area: issuer;
        font-size: 14px;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* The kind is free text from the register and can run long: it is cut short
       rather than allowed to push the issuer aside. */
    .va-tx-kind {
        grid-area: kind;
        justify-self: end;
        min-width: 0;
        max-width: 100%;
    }

    .va-tx-kind .va-chip {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .va-tx-row > .va-tx-date {
        grid-area: date;
        font-family: var(--va-mono);
        font-size: 12.5px;
    }

    .va-tx-row > div:nth-child(4) { grid-area: volume; }
    .va-tx-row > div:nth-child(5) { grid-area: price; }

    .va-tx-row > .va-tx-published {
        grid-area: published;
        font-size: 12.5px;
    }

    /* ------------------------------ info ------------------------------ */

    .va-info-card {
        margin-top: 0;
    }

    /* The three tabs fit the width once their icons go and the 160px minimum MudTabs
       writes inline is lifted. Its scroll arrows would still claim the room they need
       to decide whether they are needed, so they are dropped for good; the bar itself
       swipes sideways on a screen that is narrower still. */
    .va-info-tabs .mud-tab {
        min-width: 0 !important;
        padding: 0 8px;
        font-size: 13px;
    }

    .va-info-tabs .mud-tab .mud-icon-root {
        display: none;
    }

    .va-info-tabs .mud-tabs-scroll-button {
        display: none;
    }

    .va-info-tabs .mud-tabs-tabbar-content {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .va-info-tabs .mud-tabs-tabbar-wrapper {
        transform: none !important;
    }

    .va-info-body {
        padding: 18px 16px;
        font-size: 13.5px;
    }
}