/* public/css/pages/dashboard.css */

/* ── Summary row: фінансовий підсумок + статистика об'єктів ── */
.dash-summary-row {
    align-items: stretch;
    margin-bottom: 20px;
}

/* ── Billing Cards ── */
.dash-billing-cards {
    flex: 1;
    margin-bottom: 20px;
}

.dash-billing-card {
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 280px;
    position: relative;
    overflow: hidden;
    gap: 0;
}

/* Background images — full cover */
.dash-billing-card--bg-properties {
    background-image: url(/images/dashboard/card-bg-properties.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.dash-billing-card--bg-balance {
    background-image: url(/images/dashboard/card-bg-balance.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Filled (blue) card — «Наступне списання» */
.dash-billing-card--filled {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--button-primary-text);
}

.dash-billing-card--filled .dash-billing-card__label,
.dash-billing-card--filled .dash-billing-card__value {
    color: var(--button-primary-text);
}

/* Действие — кнопка .btn-bg-white (белый фон) на синей карте: текст ТЁМНЫЙ (как задаёт
   сам .btn-bg-white), а не белый — иначе белый-на-белом невидим. Остальной текст карты
   (label/value/header) остаётся белым на синем фоне. */
.dash-billing-card--filled .dash-billing-card__action {
    color: var(--color-text);
    opacity: 0.9;
}

.dash-billing-card--filled .dash-billing-card__action:hover {
    opacity: 1;
    text-decoration: none;
}

/* Icon for filled card — semi-transparent white bg */
.dash-billing-card__icon--filled {
    background: var(--color-white-25, rgba(255, 255, 255, 0.25));
    color: var(--button-primary-text);
}

/* Header link: иконка + текст в одну строку */
.dash-billing-card__header-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-decoration: none;
    font-family: Inter, var(--font-family-base, sans-serif);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    margin-bottom: 16px;
    flex-shrink: 0;
    text-align: left;
}

.dash-billing-card__header-link:hover {
    text-decoration: none;
    color: var(--color-primary);
}

.dash-billing-card--filled .dash-billing-card__header-link {
    color: var(--button-primary-text);
}

.dash-billing-card--filled .dash-billing-card__header-link:hover {
    color: var(--button-primary-text);
    opacity: 0.85;
}

.dash-billing-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-sm);
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-white, #fff);
}

.dash-billing-card__icon--1 { background: var(--dash-icon-blue, #4F7CF7); }
.dash-billing-card__icon--2 { background: var(--dash-icon-green, #34A853); }
.dash-billing-card__icon--3 { background: var(--dash-icon-orange, #DA600A); }
.dash-billing-card__icon--4 { background: var(--color-white, #FFFFFF); color: var(--dash-icon-blue, #4F7CF7); }

.dash-billing-card__label {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    font-family: Inter, var(--font-family-base, sans-serif);
    color: var(--color-text);
    line-height: var(--line-height-normal);
}

.dash-billing-card__value {
    font-family: Inter, var(--font-family-base, sans-serif);
    font-size: var(--font-size-9xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: 1;
    letter-spacing: -0.03em;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.dash-billing-card__value--date {
    font-family: Inter, var(--font-family-base, sans-serif);
    font-size: var(--font-size-7xl);
    font-weight: var(--font-weight-bold);
    text-align: center;
    letter-spacing: -0.03em;
}

.dash-billing-card__value--accent { color: var(--color-primary); }
.dash-billing-card__value--warning { color: var(--color-warning); }
.dash-billing-card__value--success { color: var(--color-success); }

.dash-billing-card__icon--blue   { background: var(--color-primary-bg, rgba(52, 152, 219, 0.12)); color: var(--color-primary); }
.dash-billing-card__icon--green  { background: var(--color-success-bg, rgba(39, 174, 96, 0.12)); color: var(--color-success); }
.dash-billing-card__icon--orange { background: var(--color-warning-bg, rgba(243, 156, 18, 0.12)); color: var(--color-warning); }
.dash-billing-card__icon--purple { background: var(--color-purple-bg, rgba(155, 89, 182, 0.12)); color: var(--color-purple, #9b59b6); }

.dash-metric-card__value--muted   { font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); color: var(--color-text-muted); }

.dash-metric-card__delta { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }
.dash-metric-card__delta--positive { color: var(--color-success, #27ae60); }
.dash-metric-card__delta--negative { color: var(--color-error, #e74c3c); }

.dash-chart-legend__dot--blue   { background: var(--color-chart-income, #4F7CF7); }
.dash-chart-legend__dot--orange { background: var(--color-chart-expenses, #F97316); }
.dash-chart-legend__dot--green  { background: var(--color-success, #34A853); }

.dash-billing-card__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-top: auto;
    font-family: Inter, var(--font-family-base, sans-serif);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    position: relative;
    z-index: var(--z-card-content);
}

.dash-billing-card__action:hover {
    text-decoration: none;
}

/* Skeleton for activity section */
.dash-skeleton--activity { height: 280px; margin-bottom: 20px; }

/* ── Billing Cards — responsive ── */
@media (max-width: 767px) {
    .dash-billing-card {
        min-height: 200px;
        padding: 14px;
    }
    .dash-billing-card__value {
        font-size: var(--font-size-8xl);
    }
    .dash-billing-card__value--date {
        font-size: var(--font-size-6xl);
    }
    .dash-billing-card__label {
        font-size: var(--font-size-base);
        word-break: break-word;
    }
    .dash-billing-card__header-link {
        font-size: var(--font-size-base);
        gap: var(--spacing-sm);
        margin-bottom: 12px;
        min-width: 0;
        width: 100%;
    }
    .dash-billing-card__header-link .dash-billing-card__label {
        min-width: 0;
        flex: 1 1 0;
        overflow-wrap: anywhere;
    }
    .dash-billing-card__icon {
        width: 40px;
        height: 40px;
        padding: var(--spacing-sm);
    }
    .dash-billing-card__icon svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 575px) {
    .dash-billing-card {
        min-height: auto;
        padding: 16px;
    }
    .dash-billing-card__value {
        font-size: var(--font-size-7xl);
    }
    .dash-billing-card__value--date {
        font-size: var(--font-size-5xl);
    }
    .dash-billing-card--bg-properties,
    .dash-billing-card--bg-balance {
        background-size: contain;
        background-position: right center;
    }
}

/* ── Financial Summary — white bordered card ── */
.dash-financial-summary {
    min-width: 0;
    background: var(--color-card-background);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 20px;
}

.dash-financial-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.dash-title {
    font-family: Inter, var(--font-family-base, sans-serif);
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text);
    margin: 0 0 var(--spacing-sm);
}

.dash-subtitle {
    font-family: Inter, var(--font-family-base, sans-serif);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    letter-spacing: 0;
    color: var(--color-text-muted);
    margin: 0;
}

/* TASK-000517: .dash-month-form/.dash-month-select удалены — фильтр периода
   рендерится централизованным ui_dropdown (как переключатель языка), а прокрутка
   длинного меню — канон-модификатор .dropdown-menu--scrollable (components.css),
   а не page-scoped правило. Собственного CSS у фильтра больше нет. */

.dash-financial-metrics {
    --grid-gap: 16px;
}

.dash-metric-card {
    border-radius: 20px;
    border: 1px solid transparent;
    padding: 16px 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.dash-metric-card__icon {
    width: 52px;
    height: 52px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-metric-card__icon--green   { background: var(--color-success-icon-bg, rgba(0, 159, 19, 0.2));    color: var(--color-success, #27ae60); }
.dash-metric-card__icon--red     { background: var(--color-error-icon-bg, rgba(231, 76, 60, 0.18));  color: var(--color-error, #e74c3c); }
.dash-metric-card__icon--orange  { background: var(--color-warning-icon-bg, rgba(243, 156, 18, 0.18)); color: var(--color-warning, #f39c12); }
.dash-metric-card__icon--blue    { background: var(--color-primary-icon-bg, rgba(52, 152, 219, 0.18)); color: var(--color-primary, #3498db); }
.dash-metric-card__icon--pending { background: var(--color-pending-icon-bg, rgba(255, 217, 5, 0.35));  color: var(--color-accent-pending, #FFD905); }

/* Тональный фон, рамка і колір sub-підписи визначаються через :has() —
   без правки шаблону, тільки за класом іконки всередині картки */
.dash-metric-card:has(.dash-metric-card__icon--green) {
    background: var(--color-success-tonal-bg, rgba(163, 221, 170, 0.2));
    border-color: var(--color-success-tonal-border, rgba(0, 159, 19, 0.2));
}

.dash-metric-card:has(.dash-metric-card__icon--green) .dash-metric-card__sub {
    color: var(--color-success-strong, #009F13);
}

.dash-metric-card:has(.dash-metric-card__icon--red) {
    background: var(--color-error-tonal-bg, rgba(244, 199, 199, 0.25));
    border-color: var(--color-error-tonal-border, rgba(231, 76, 60, 0.2));
}

.dash-metric-card:has(.dash-metric-card__icon--red) .dash-metric-card__sub {
    color: var(--color-error, #e74c3c);
}

.dash-metric-card:has(.dash-metric-card__icon--pending) {
    background: var(--color-pending-tonal-bg, rgba(255, 232, 130, 0.3));
    border-color: var(--color-pending-tonal-border, rgba(255, 217, 5, 0.35));
}

.dash-metric-card:has(.dash-metric-card__icon--pending) .dash-metric-card__sub {
    color: var(--color-warning-strong, #D4A400);
}

.dash-metric-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-metric-card__body > .dash-metric-card__sub {
    margin-top: 24px;
}

.dash-metric-card__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-metric-card__value {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
}

.dash-metric-card__currency {
    color: inherit;
}

.dash-metric-card__sub {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}

/* ── Skeleton animation ── */
.dash-skeleton {
    border-radius: 20px;
    background: linear-gradient(
        90deg,
        var(--color-border) 25%,
        var(--color-card-background) 50%,
        var(--color-border) 75%
    );
    background-size: 200% 100%;
    animation: dash-skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes dash-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.dash-skeleton--summary { height: 360px; margin-bottom: 20px; }
.dash-skeleton--chart   { height: 320px; margin-bottom: 20px; }
.dash-skeleton--cards   { height: 380px; }

/* ── Chart Section ── */
.dash-chart-section {
    align-items: start;
    margin-bottom: 20px;
}

.dash-chart-card {
    background: var(--color-card-background, #FFFFFF);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 20px;
    padding: 40px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.dash-chart-card__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
    margin: 0;
}

.dash-chart-card .dash-chart-canvas {
    flex: 1 1 auto;
    min-height: 0;
}


.dash-chart-legend {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-chart-legend > span {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.dash-chart-legend__dot {
    width: 24px;
    height: 24px;
    border-radius: 0;
    display: inline-block;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .dash-chart-legend {
        flex-wrap: wrap;
        gap: 12px;
        font-size: var(--font-size-base);
    }
}

/* Responsive container for the Chart.js canvas (maintainAspectRatio: false) */
.dash-chart-canvas {
    position: relative;
    height: 280px;
}

.dash-stats-card {
    background: var(--color-card-background, #FFFFFF);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
}

.dash-stats-card__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
    margin: 0;
}

.dash-stats-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px 16px;
    background: var(--color-surface-subtle, #F5F8FF);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-stat-row--overdue,
.dash-stat-row--overdue .dash-stat-row__label,
.dash-stat-row--overdue .dash-stat-row__value {
    color: var(--color-danger-strong, #C30A41);
}

.dash-stat-row__label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

.dash-stat-row__label::before {
    content: "•";
    font-size: var(--font-size-lg);
    line-height: 1;
    color: currentColor;
}

.dash-stat-row__value {
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}

/* ── Properties Section — white bordered card wrapping the entire block ── */
.dash-properties-section-card {
    background: var(--color-card-background, #FFFFFF);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* ── Properties Header — title + filters + add button ── */
.dash-properties-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap;
}

.dash-properties-header__titles {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    flex: 0 0 auto;
    max-width: 280px;
}

.dash-properties-card__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
    margin: 0;
}

.dash-properties-card__subtitle {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-muted, #898E97);
    margin: 0;
}

.dash-properties-filters {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    flex: 1;
    flex-wrap: wrap;
}

.dash-filter-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 200px;
}

.dash-filter-field__label {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-filter-field__select {
    height: 52px;
    padding: 10px 20px;
    border: 1px solid var(--color-input-border, #898E97);
    border-radius: var(--border-radius-sm);
    background: var(--color-card-background, #FFFFFF);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-text, #141C30);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23141C30' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 24px;
    padding-right: var(--spacing-3xl);
}

.dash-properties-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 40px;
    height: 72px;
    background: var(--color-accent-orange, #F97316);
    color: var(--color-white, #FFFFFF);
    border-radius: 16px;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 22px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.dash-properties-add:hover {
    background: var(--color-accent-orange-dark, #E55F00);
    color: var(--color-white, #FFFFFF);
    text-decoration: none;
}

@media (max-width: 1199px) {
    .dash-properties-header {
        gap: 20px;
    }
    .dash-properties-add {
        width: 100%;
        height: 52px;
        padding: 10px 24px;
        font-size: var(--font-size-base);
    }
}

@media (max-width: 767px) {
    .dash-properties-filters {
        flex-direction: column;
        width: 100%;
        align-items: stretch;
        gap: 12px;
    }
    .dash-properties-add {
        width: 100%;
    }
    .dash-filter-field {
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }
}

.dash-properties-grid {
    margin-bottom: 20px;
}

/* ── Pagination ── */
.dash-pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-top: var(--spacing-sm);
    flex-wrap: wrap;
}

.dash-page-btn {
    height: 72px;
    min-width: 88px;
    padding: 10px 24px;
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 16px;
    background: var(--color-card-background, #FFFFFF);
    color: var(--color-text, #141C30);
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.dash-page-btn:hover {
    border-color: var(--dash-icon-blue, #4F7CF7);
    color: var(--dash-icon-blue, #4F7CF7);
}

.dash-page-btn--active,
.dash-page-btn--active:hover {
    background: var(--dash-icon-blue, #4F7CF7);
    color: var(--color-white, #FFFFFF);
    border-color: var(--dash-icon-blue, #4F7CF7);
}

.dash-page-btn--arrow {
    width: 72px;
    min-width: 72px;
    padding: 10px;
}

.dash-page-btn--arrow svg {
    width: 24px;
    height: 24px;
    color: var(--color-text-icon, #323232);
}

.dash-page-btn--disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

@media (max-width: 767px) {
    .dash-page-btn {
        height: 52px;
        min-width: 52px;
        padding: 10px 16px;
        font-size: var(--font-size-base);
    }
    .dash-page-btn--arrow {
        width: 52px;
        min-width: 52px;
    }
}

/* ── Activity Section (Events + Messages) ── */
.dash-activity-section {
    align-items: start;
    margin-bottom: 20px;
}

/* Messages card — Figma spec */
.dash-messages-card {
    background: var(--color-card-background, #FFFFFF);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
}

.dash-messages-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.dash-messages-card__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
    margin: 0;
}

.dash-messages-card__badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--color-accent-orange, #F97316);
    color: var(--color-white, #FFFFFF);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.03em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -10px;
}

.dash-messages-card__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.dash-messages-card__link {
    color: var(--dash-icon-blue, #4F7CF7);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dash-messages-card__link:hover {
    text-decoration: underline;
}

/* Events card — Figma spec */
.dash-events-card {
    background: var(--color-primary-surface, #E9EBFD);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 100%;
}


/* Reset flex: 1 1 auto applied by .row--stretch > [class*="col-"] > * on all children.
   Use higher-specificity selector to override the grid rule. */
.row--stretch > [class*="col-"].dash-messages-card > *,
.row--stretch > [class*="col-"].dash-events-card > * {
    flex: 0 0 auto;
}

/* Empty state text — grows to fill remaining space between header and footer */
.dash-activity-empty {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
    padding: 20px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Override flex: 0 0 auto from .row--stretch > [class*="col-"].dash-messages-card > *
   Specificity 0,4,0 wins over 0,3,0 of the reset rule above. */
.row--stretch > [class*="col-"].dash-messages-card > .dash-activity-empty,
.row--stretch > [class*="col-"].dash-events-card > .dash-activity-empty {
    flex: 1 1 auto;
}

/* ── Events card title — Figma spec ── */
.dash-events-card__title {
    font-size: var(--font-size-6xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text, #141C30);
    margin: 0;
}

/* ── Event rows — Figma spec ── */
.dash-event-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    min-height: 80px;
}

.dash-event-chip {
    width: 80px;
    height: 80px;
    background: var(--color-card-background, #FFFFFF);
    border: 1px solid var(--color-border-card, #D7DFF2);
    border-radius: var(--border-radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
}

.dash-event-chip__day {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-event-chip__month {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text, #141C30);
    text-transform: lowercase;
}

.dash-event-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-event-row__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
}

.dash-event-row__property {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-muted, #898E97);
}

.dash-event-row__amount {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
    text-align: right;
    flex-shrink: 0;
}

/* ── Message rows ── */
.dash-message-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dash-message-row {
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 80px;
    text-decoration: none;
    color: inherit;
}

.dash-message-row:hover {
    text-decoration: none;
    color: inherit;
}

/* Avatar — used for both preview_picture output and fallback span */
.dash-message-row__avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dash-message-row__avatar--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-surface, #E9EBFD);
    color: var(--dash-icon-blue, #4F7CF7);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
}

.dash-message-row__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.dash-message-row__name {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-normal);
    color: var(--color-text, #141C30);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-message-row__preview {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-normal);
    line-height: 1;
    color: var(--color-text-muted, #898E97);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Avatar — relative positioning for unread dot indicator ── */
.dash-message-row__avatar {
    position: relative;
}

/* ── Unread message row — bold name, dark preview, orange dot on avatar ── */
.dash-message-row--unread .dash-message-row__name {
    font-weight: var(--font-weight-bold);
    color: var(--color-text, #141C30);
}

.dash-message-row--unread .dash-message-row__preview {
    color: var(--color-text, #141C30);
}

.dash-message-row--unread .dash-message-row__avatar::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 14px;
    height: 14px;
    background: var(--color-accent-orange, #F97316);
    border: 2px solid var(--color-white, #FFFFFF);
    border-radius: 50%;
}

/* Footer link — events card (Figma spec) */
.dash-events-card__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
}

.dash-events-card__link {
    color: var(--dash-icon-blue, #4F7CF7);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dash-events-card__link:hover {
    text-decoration: underline;
}

/* ── Bug fix: messages card badge overflow на ≤575px ── */
@media (max-width: 575px) {
    .dash-messages-card__header {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    .dash-messages-card__badge {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-sm);
        flex-shrink: 0;
    }
}