/* ============================================================
   brafa Systems — Dashboard (stats, alerts, trend, key-value grid)
   Part of the brafa shell. Loaded after brafa-shell.css (which holds
   the layout shell + .brafa-screen primitives). Split out of the former
   monolithic brafa-shell.css so per-area page work stops colliding.
   ============================================================ */

/* ============================================================
   DASHBOARD
   ============================================================ */
.brafa-dash-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    margin-top: 24px;
}
@media (max-width: 991.98px) { .brafa-dash-row { grid-template-columns: 1fr; } }

.brafa-alerts { padding: 6px 0; }
.brafa-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--border);
}
.brafa-alert:last-child { border-bottom: none; }
.brafa-alert__icon {
    width: 28px; height: 28px;
    border-radius: 999px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
}
.brafa-alert__icon--danger { background: var(--brafa-red-soft);   color: var(--brafa-red); }
.brafa-alert__icon--amber  { background: var(--brafa-amber-soft); color: #8C5F1B; }
.brafa-alert__icon--green  { background: var(--brafa-green-soft); color: var(--brafa-green-deep); }
.brafa-alert__icon--ink    { background: var(--bg-sunken);        color: var(--fg-muted); }
.brafa-alert__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.35;
    min-width: 0;
}
.brafa-alert__title { font-weight: 500; font-size: 13.5px; color: var(--fg); }
.brafa-alert__text  { color: var(--fg-subtle); font-size: 12px; }

/* ============================================================
   KEY-VALUE GRID (Ajax hub details, generic detail blocks)
   ============================================================ */
.brafa-screen .brafa-kv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 24px;
}
@media (max-width: 767.98px) { .brafa-screen .brafa-kv-grid { grid-template-columns: repeat(2, 1fr); } }
.brafa-screen .brafa-kv-grid > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13.5px;
    color: var(--fg);
}

/* ============================================================
   DASHBOARD — 7-day arrivals trend
   ============================================================ */
.brafa-screen .brafa-trend {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    align-items: end;
}
.brafa-screen .brafa-trend__col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.brafa-screen .brafa-trend__count {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--fg-muted);
}
.brafa-screen .brafa-trend__bar-wrap {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.brafa-screen .brafa-trend__bar {
    width: 100%;
    max-width: 44px;
    background: var(--brafa-graphite);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    transition: height var(--dur-base) var(--ease);
    min-height: 2px;
}
.brafa-screen .brafa-trend__bar.is-today { background: var(--brafa-green-deep); }
.brafa-screen .brafa-trend__label {
    font-family: var(--font-wide);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg);
}
.brafa-screen .brafa-trend__date {
    font-size: 10.5px;
    color: var(--fg-subtle);
}