/* assets/css/dashboard.css: page-specific rules for dashboard.html only */

.db-head { display: flex; flex-direction: column; gap: 6px; }
.db-section { display: flex; flex-direction: column; gap: var(--eb-space-3); }
.db-error { padding: var(--eb-space-4) var(--eb-space-5); color: var(--eb-negative-fg); }
.db-error[hidden] { display: none; }

/* Needs attention */
.db-attn { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.db-attn:empty { display: none; }
.db-attn__card {
    padding: 18px; display: flex; flex-direction: column; gap: 10px;
    color: var(--eb-ink);
}
.db-attn__card:hover { text-decoration: none; color: var(--eb-ink); border-color: var(--eb-line-hover); }
.db-attn__card .eb-pill { align-self: flex-start; }
.db-attn__value { font-size: var(--eb-text-xl); font-weight: 600; }
.db-attn__action { font-size: var(--eb-text-md); font-weight: 600; color: var(--eb-link); }
.db-attn__action::after { content: " →"; }
.db-clear { display: flex; align-items: center; gap: var(--eb-space-4); padding: var(--eb-space-5); }
.db-clear[hidden] { display: none; }
.db-clear svg { width: 24px; height: 24px; color: var(--eb-positive-fg); flex: none; }

/* KPI tiles */
.db-tile-link { color: inherit; }
.db-tile-link:hover { text-decoration: none; color: inherit; border-color: var(--eb-line-hover); }
.db-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.db-bars__row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; gap: 8px; align-items: center; }
.db-bars__row > :last-child { text-align: right; }
.db-bar--expense { background: var(--eb-chart-2); }

/* Two-column area */
.db-grid { display: flex; flex-wrap: wrap; gap: var(--eb-space-5); align-items: flex-start; }
.db-col { flex: 2 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--eb-space-5); }
.db-activity { flex: 1 1 300px; min-width: 0; }
.db-card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--eb-space-3); margin-bottom: var(--eb-space-4); }
.db-more { font-size: var(--eb-text-md); font-weight: 600; }

/* Cash chart */
.db-chart { display: flex; gap: 10px; }
.db-chart[hidden] { display: none; }
.db-chart__y {
    width: 52px; height: 220px; padding: 12px 0 14px; flex: none;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
    font-size: var(--eb-text-xs); color: var(--eb-ink-2); font-variant-numeric: tabular-nums;
}
.db-chart__plot { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.db-chart__plot svg { width: 100%; height: 220px; display: block; }
.db-chart__x { display: flex; justify-content: space-between; font-size: var(--eb-text-xs); color: var(--eb-ink-2); }

/* AR aging */
.db-aging { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--eb-line-soft); }
.db-aging__seg { flex: 0 0 auto; }
[data-bucket="current"]      { background: var(--eb-chart-1); }
[data-bucket="days_1_30"]    { background: var(--eb-chart-2); }
[data-bucket="days_31_60"]   { background: var(--eb-chart-3); }
[data-bucket="days_61_90"]   { background: var(--eb-chart-4); }
[data-bucket="days_over_90"] { background: var(--eb-negative-fg); }
.db-aging__legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; margin: var(--eb-space-4) 0 0; }
.db-aging__legend dt { font-size: var(--eb-text-sm); color: var(--eb-ink-2); display: flex; align-items: center; gap: 6px; }
.db-aging__legend dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.db-swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* Activity */
.db-activity__list { list-style: none; margin: 0; padding: 0; }
.db-act { border-bottom: 1px solid var(--eb-line-soft); }
.db-act:last-child { border-bottom: 0; }
.db-act__link { display: flex; align-items: center; gap: 12px; padding: 12px 0; color: var(--eb-ink); }
.db-act__link:hover { text-decoration: none; color: var(--eb-ink); background: var(--eb-surface-hover); }
.db-act__icon { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--eb-neutral-dot); }
.db-act__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.db-act__title { font-size: var(--eb-text-md); font-weight: 500; }
.db-act__text .eb-caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-act__amount { font-size: var(--eb-text-md); font-weight: 500; white-space: nowrap; }
.db-act.is-in  .db-act__icon { background: var(--eb-positive-dot); }
.db-act.is-in  .db-act__amount { color: var(--eb-positive-fg); }
.db-act.is-out .db-act__icon { background: var(--eb-warning-dot); }
.db-act.is-void { opacity: .75; }
.db-act.is-void .db-act__title, .db-act.is-void .db-act__amount { color: var(--eb-ink-2); }
.db-act.is-void .db-act__icon { background: transparent; border: 1.5px dashed var(--eb-ink-3); }

@media (max-width: 720px) {
    .eb-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; margin: 0 -16px; padding: 0 16px 4px; }
    .eb-tiles > * { flex: 0 0 78%; scroll-snap-align: start; }
    .db-chart__y { width: 40px; }
}