/* ============================================================================
   MONEY MAP — DASHBOARD STYLES
   File: css/dashboard.css
   Description: View-specific styles for the financial dashboard. Covers the
   balance hero, summary cards, quick actions, recent transactions, budget
   overview, obligations preview, safe-to-spend indicator, and alerts.
   Load order: tokens → reset → layout → components → dashboard → views
   ============================================================================ */


/* ============================================================================
   1. DASHBOARD HERO — BALANCE DISPLAY
   The large, prominent balance section at the top of the dashboard.
   Shows the user's total available balance and safe-to-spend amount.
   ============================================================================ */

.dashboard-hero {
    background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-hover) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    color: var(--text-inverse);
    margin-bottom: var(--space-lg);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative pattern overlay */
.dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 200px;
    height: 200px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.03);
    pointer-events: none;
}

.dashboard-hero__greeting {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    opacity: 0.85;
    margin-bottom: var(--space-xs);
}

.dashboard-hero__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.75;
    margin-bottom: var(--space-xs);
}

.dashboard-hero__balance {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-extrabold);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-tight);
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

@media (min-width: 640px) {
    .dashboard-hero__balance {
        font-size: var(--font-size-5xl);
    }
}

.dashboard-hero__safe-spend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    backdrop-filter: blur(4px);
}

.dashboard-hero__safe-spend i {
    font-size: var(--font-size-xs);
}

.dashboard-hero__meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.dashboard-hero__meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dashboard-hero__meta-label {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    opacity: 0.7;
}

.dashboard-hero__meta-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
}

/* Data coverage warning on the hero */
.dashboard-hero__warning {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    opacity: 0.9;
}


/* ============================================================================
   2. SUMMARY CARDS ROW
   Income, Expenses, and Net Savings cards displayed in a row below the hero.
   ============================================================================ */

.dashboard-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
    .dashboard-summary {
        grid-template-columns: repeat(3, 1fr);
    }
}

.summary-card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.summary-card__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.summary-card__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.summary-card__icon--income {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.summary-card__icon--expense {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}

.summary-card__icon--savings {
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}

.summary-card__icon--revenue {
    background-color: var(--status-info-bg);
    color: var(--status-info-text);
}

.summary-card__value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    letter-spacing: var(--letter-spacing-tight);
    line-height: var(--line-height-tight);
}

.summary-card__value--income {
    color: var(--text-income);
}

.summary-card__value--expense {
    color: var(--text-expense);
}

.summary-card__value--savings {
    color: var(--brand-primary);
}

.summary-card__value--neutral {
    color: var(--text-primary);
}

.summary-card__change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.summary-card__change--up {
    color: var(--status-success-text);
}

.summary-card__change--down {
    color: var(--status-error-text);
}

.summary-card__change--flat {
    color: var(--text-muted);
}


/* ============================================================================
   3. QUICK ACTIONS
   Prominent action buttons for the most common tasks.
   ============================================================================ */

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
    .dashboard-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

.quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    min-height: 80px;
}

.quick-action:hover {
    border-color: var(--brand-primary);
    background-color: var(--brand-primary-lighter);
    box-shadow: var(--shadow-sm);
}

.quick-action:active {
    transform: scale(0.97);
}

.quick-action__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
}

.quick-action__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    text-align: center;
}


/* ============================================================================
   4. RECENT TRANSACTIONS PREVIEW
   Compact list of the most recent transactions on the dashboard.
   ============================================================================ */

.dashboard-transactions {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.dashboard-transactions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.dashboard-transactions__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.dashboard-transactions__link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-primary);
}

.dashboard-transactions__list {
    padding: 0;
}

.dashboard-transaction {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition-fast);
}

.dashboard-transaction:last-child {
    border-bottom: none;
}

.dashboard-transaction:hover {
    background-color: var(--bg-hover);
}

.dashboard-transaction__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.dashboard-transaction__icon--income {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.dashboard-transaction__icon--expense {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}

.dashboard-transaction__icon--transfer {
    background-color: var(--status-info-bg);
    color: var(--status-info-text);
}

.dashboard-transaction__details {
    flex: 1;
    min-width: 0;
}

.dashboard-transaction__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-transaction__category {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 1px;
}

.dashboard-transaction__right {
    text-align: right;
    flex-shrink: 0;
}

.dashboard-transaction__amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
}

.dashboard-transaction__amount--income {
    color: var(--text-income);
}

.dashboard-transaction__amount--expense {
    color: var(--text-expense);
}

.dashboard-transaction__date {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    margin-top: 1px;
}


/* ============================================================================
   5. BUDGET OVERVIEW WIDGET
   Compact budget progress bars displayed on the dashboard.
   ============================================================================ */

.dashboard-budgets {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.dashboard-budgets__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.dashboard-budgets__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.dashboard-budgets__list {
    padding: var(--space-sm) var(--space-md);
}

.budget-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--border-light);
}

.budget-row:last-child {
    border-bottom: none;
}

.budget-row__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.budget-row__name {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.budget-row__name i {
    color: var(--text-muted);
    width: 16px;
    text-align: center;
    font-size: var(--font-size-xs);
}

.budget-row__amounts {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.budget-row__amounts strong {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.budget-row__bar {
    width: 100%;
    height: 6px;
    background-color: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.budget-row__fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.budget-row__fill--ok {
    background-color: var(--brand-primary);
}

.budget-row__fill--warning {
    background-color: var(--status-warning-icon);
}

.budget-row__fill--over {
    background-color: var(--status-error-icon);
}

.budget-row__percent {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-align: right;
}

.budget-row__percent--ok {
    color: var(--brand-primary);
}

.budget-row__percent--warning {
    color: var(--status-warning-text);
}

.budget-row__percent--over {
    color: var(--status-error-text);
}


/* ============================================================================
   6. UPCOMING OBLIGATIONS PREVIEW
   Shows the next few bills and obligations due.
   ============================================================================ */

.dashboard-obligations {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.dashboard-obligations__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.dashboard-obligations__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.obligation-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

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

.obligation-item__indicator {
    width: 4px;
    height: 32px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.obligation-item__indicator--upcoming {
    background-color: var(--status-info-icon);
}

.obligation-item__indicator--soon {
    background-color: var(--status-warning-icon);
}

.obligation-item__indicator--overdue {
    background-color: var(--status-error-icon);
}

.obligation-item__details {
    flex: 1;
    min-width: 0;
}

.obligation-item__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.obligation-item__due {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 1px;
}

.obligation-item__due--overdue {
    color: var(--status-error-text);
    font-weight: var(--font-weight-medium);
}

.obligation-item__amount {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-mono);
    color: var(--text-primary);
    flex-shrink: 0;
}


/* ============================================================================
   7. GOALS PROGRESS WIDGET
   Compact view of active financial goals on the dashboard.
   ============================================================================ */

.dashboard-goals {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
}

.dashboard-goals__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.dashboard-goals__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.goal-mini {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.goal-mini:last-child {
    border-bottom: none;
}

.goal-mini__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background-color: var(--brand-primary-light);
    color: var(--brand-primary);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.goal-mini__details {
    flex: 1;
    min-width: 0;
}

.goal-mini__name {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.goal-mini__progress-text {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.goal-mini__bar {
    width: 100%;
    height: 4px;
    background-color: var(--bg-input);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-top: var(--space-xs);
}

.goal-mini__fill {
    height: 100%;
    background-color: var(--brand-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}

.goal-mini__percent {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--brand-primary);
    font-family: var(--font-mono);
    flex-shrink: 0;
}


/* ============================================================================
   8. DASHBOARD ALERTS & WARNINGS
   Financial intelligence alerts displayed prominently on the dashboard.
   ============================================================================ */

.dashboard-alerts {
    margin-bottom: var(--space-lg);
}

.dashboard-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    border: 1px solid transparent;
}

.dashboard-alert:last-child {
    margin-bottom: 0;
}

.dashboard-alert__icon {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    margin-top: 1px;
}

.dashboard-alert__content {
    flex: 1;
    min-width: 0;
}

.dashboard-alert__title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.dashboard-alert__message {
    font-size: var(--font-size-xs);
    margin-top: 2px;
    line-height: var(--line-height-relaxed);
}

.dashboard-alert__action {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-top: var(--space-xs);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
}

.dashboard-alert--critical {
    background-color: var(--status-error-bg);
    border-color: var(--status-error-border);
    color: var(--status-error-text);
}

.dashboard-alert--critical .dashboard-alert__action {
    color: var(--status-error-text);
}

.dashboard-alert--warning {
    background-color: var(--status-warning-bg);
    border-color: var(--status-warning-border);
    color: var(--status-warning-text);
}

.dashboard-alert--warning .dashboard-alert__action {
    color: var(--status-warning-text);
}

.dashboard-alert--info {
    background-color: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--status-info-text);
}

.dashboard-alert--info .dashboard-alert__action {
    color: var(--status-info-text);
}


/* ============================================================================
   9. CASH FLOW FORECAST MINI
   Simplified cash flow projection shown on the dashboard.
   ============================================================================ */

.dashboard-forecast {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}

.dashboard-forecast__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.dashboard-forecast__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.dashboard-forecast__disclaimer {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    font-style: italic;
}

.forecast-bar {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
    height: 80px;
    padding-top: var(--space-sm);
}

.forecast-bar__column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
    justify-content: flex-end;
}

.forecast-bar__fill {
    width: 100%;
    max-width: 32px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height var(--transition-slow);
    min-height: 4px;
}

.forecast-bar__fill--actual {
    background-color: var(--brand-primary);
}

.forecast-bar__fill--projected {
    background-color: var(--brand-primary-light);
    border: 1px dashed var(--brand-primary);
}

.forecast-bar__fill--negative {
    background-color: var(--status-error-bg);
    border: 1px dashed var(--status-error-icon);
}

.forecast-bar__label {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-align: center;
}


/* ============================================================================
   10. BUSINESS DASHBOARD VARIANTS
   Additional styles for the business-specific dashboard view.
   ============================================================================ */

.dashboard-business-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

@media (min-width: 640px) {
    .dashboard-business-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .dashboard-business-summary {
        grid-template-columns: repeat(4, 1fr);
    }
}

.business-stat {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--shadow-sm);
}

.business-stat__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.business-stat__value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    font-family: var(--font-mono);
    color: var(--text-primary);
}

.business-stat__sub {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Profit indicator */
.profit-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.profit-indicator--positive {
    background-color: var(--status-success-bg);
    color: var(--status-success-text);
}

.profit-indicator--negative {
    background-color: var(--status-error-bg);
    color: var(--status-error-text);
}

.profit-indicator--break-even {
    background-color: var(--status-warning-bg);
    color: var(--status-warning-text);
}

/* Receivables/Payables ageing */
.ageing-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
}

.ageing-row__label {
    color: var(--text-secondary);
}

.ageing-row__value {
    font-family: var(--font-mono);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.ageing-row__value--overdue {
    color: var(--status-error-text);
    font-weight: var(--font-weight-bold);
}


/* ============================================================================
   11. TWO-COLUMN DASHBOARD LAYOUT
   On desktop, the dashboard splits into a main column and a sidebar column.
   ============================================================================ */

.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

@media (min-width: 1024px) {
    .dashboard-grid {
        grid-template-columns: 1fr 360px;
    }
}

.dashboard-grid__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dashboard-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}


/* ============================================================================
   12. DATA COVERAGE INDICATOR
   Shows how complete the user's financial data is.
   ============================================================================ */

.data-coverage {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--status-info-bg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.data-coverage__icon {
    color: var(--status-info-text);
    font-size: var(--font-size-sm);
}

.data-coverage__text {
    font-size: var(--font-size-xs);
    color: var(--status-info-text);
    flex: 1;
}

.data-coverage__link {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--status-info-text);
    text-decoration: underline;
    cursor: pointer;
    background: none;
    border: none;
}