/* ============================================================================
   Прикладные стили MoneyHub PWA.
   Дизайн-токены, стеклянные примитивы, каркас и тема грида живут в RCL
   (_content/MoneyHubClient.UI/css/*). Здесь — только то, что специфично
   для этого хоста: загрузчик Blazor, панель ошибок, валидация форм.
   ============================================================================ */

h1:focus,
h2:focus,
h3:focus {
    outline: none;
}

a {
    color: var(--mh-accent-soft);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

code {
    font-family: var(--mh-font-mono);
    font-size: .92em;
}

/* --------------------------------------------------------- Валидация форм */
.valid.modified:not([type=checkbox]) {
    border-color: var(--mh-ok);
}

.invalid {
    border-color: var(--mh-danger) !important;
}

.validation-message {
    color: var(--mh-danger);
    font-size: var(--mh-fs-xs);
}

/* ----------------------------------------------- Аварийная панель Blazor */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    padding: 10px 18px;
    font-size: var(--mh-fs-sm);
    color: #2b1c00;
    background: linear-gradient(150deg, #fbbf24, #e09a06);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .4);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 14px;
    top: 8px;
    cursor: pointer;
}

#blazor-error-ui .reload {
    color: #2b1c00;
    text-decoration: underline;
    font-weight: 600;
}

/* ------------------------------------------- Прогресс загрузки WASM */
.loading-progress-text {
    font-size: var(--mh-fs-sm);
    color: var(--mh-text-3);
    font-family: var(--mh-font-mono);
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Загрузка…");
}

/* --------------------------------------------------- Мелкие вспомогалки */

/* Плитки карт/ордеров на дашборде трейдера */
.mh-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--mh-s-3);
}

@media (max-width: 640px) {
    .mh-cards {
        grid-template-columns: 1fr;
    }
}

/* Строка «ключ — значение» в деталях ордера */
.mh-kv {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr;
    gap: 4px var(--mh-s-3);
    font-size: var(--mh-fs-sm);
}

.mh-kv dt {
    color: var(--mh-text-3);
    margin: 0;
}

.mh-kv dd {
    margin: 0;
    color: var(--mh-text);
    word-break: break-word;
}

.mh-kv dd.mh-mono {
    font-family: var(--mh-font-mono);
    font-variant-numeric: tabular-nums;
}

/* Контейнер графика ApexCharts на стекле */
.mh-chart {
    min-height: 260px;
    width: 100%;
}

.mh-chart .apexcharts-tooltip {
    background: rgba(10, 22, 42, .96) !important;
    border: 1px solid var(--mh-glass-brd) !important;
    color: var(--mh-text) !important;
    box-shadow: var(--mh-sh-2) !important;
}

.mh-chart .apexcharts-tooltip-title {
    background: rgba(255, 255, 255, .06) !important;
    border-bottom: 1px solid var(--mh-glass-brd) !important;
}

.mh-chart .apexcharts-menu {
    background: rgba(10, 22, 42, .96) !important;
    border: 1px solid var(--mh-glass-brd) !important;
}

.mh-chart .apexcharts-menu-item:hover {
    background: rgba(76, 141, 255, .22) !important;
}