/* ------------------------------------------------------------------ *
 * 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 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 ---------------------------- */

.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);
}