/* =====================================================================================================================
   i9dashboard.css — dashboard de vendas/compras (Pages/Home) e os componentes que a servem:
   I9Segmented, I9SeriesChart, I9RankBars, I9StackedBar, I9DashCard, I9DashAlerts, I9DashFeeds, I9DashBalanceCard.
   Carrega depois de i9core.css e i9syncfusion.css; usa só os tokens --i9-* (claro e escuro).
   ===================================================================================================================== */

:root {
    /* Séries do gráfico principal: azul (vendas) vs laranja (compras) — par seguro para daltonismo. */
    --i9-chart-sales: #2563eb;
    --i9-chart-purchases: #ea8a1a;
    /* Antiguidade de saldos: do neutro (a vencer) ao vermelho escuro (+90 dias). */
    --i9-aging-not-due: #94a3b8;
    --i9-aging-0-30: #f2b53c;
    --i9-aging-31-60: #ee8a2b;
    --i9-aging-61-90: #e4533f;
    --i9-aging-90-plus: #a61f17;
}

html[data-theme="dark"] {
    --i9-chart-sales: #6aa0ff;
    --i9-chart-purchases: #fbb04f;
    --i9-aging-not-due: #64748b;
    --i9-aging-0-30: #f5c453;
    --i9-aging-31-60: #f59a45;
    --i9-aging-61-90: #f2705c;
    --i9-aging-90-plus: #dc4438;
}

/* ---------- I9Segmented ---------- */
.i9-seg { display: inline-flex; gap: 2px; padding: 3px; background: var(--i9-surface-3); border-radius: 10px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.i9-seg::-webkit-scrollbar { display: none; }
.i9-seg__btn {
    border: 0; background: transparent; color: var(--i9-text-2nd); font: inherit; font-size: .82rem; font-weight: 550;
    height: 28px; padding: 0 .85rem; border-radius: 7px; cursor: pointer; white-space: nowrap; transition: background .14s, color .14s;
}
.i9-seg__btn:hover { color: var(--i9-text); }
.i9-seg__btn.is-active { background: var(--i9-surface); color: var(--i9-primary-700); box-shadow: var(--i9-shadow-xs); font-weight: 650; }
html[data-theme="dark"] .i9-seg__btn.is-active { color: var(--i9-tone-info); background: var(--i9-surface-2); }
.i9-seg__btn:focus-visible { outline: none; box-shadow: var(--i9-ring); }
.i9-seg--sm .i9-seg__btn { height: 24px; font-size: .76rem; padding: 0 .6rem; }

/* ---------- Estrutura da página ---------- */
.i9-dash { container-type: inline-size; container-name: dash; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.i9-dash .i9-card2 { margin-bottom: 0; }
.i9-dash__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1.25rem; flex-wrap: wrap; }
.i9-dash__title { margin: 0; font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; }
.i9-dash__sub { margin: .15rem 0 0; color: var(--i9-text-2nd); font-size: .88rem; }
.i9-dash__sub strong { color: var(--i9-text); font-weight: 600; }
.i9-dash__tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.i9-dash__refresh {
    display: inline-flex; align-items: center; gap: .45rem; height: 34px; padding: 0 .85rem; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--i9-border); background: var(--i9-surface); color: var(--i9-text-2nd); font: inherit; font-size: .8rem;
    font-variant-numeric: tabular-nums; transition: border-color .14s, color .14s;
}
.i9-dash__refresh:hover:not(:disabled) { border-color: var(--i9-primary-300); color: var(--i9-text); }
.i9-dash__refresh:disabled { cursor: progress; }
.i9-dash__refresh .is-spinning { animation: i9-dash-spin 1s linear infinite; }
@keyframes i9-dash-spin { to { transform: rotate(360deg); } }

.i9-dash__periodrow { display: flex; align-items: center; gap: .75rem 1.25rem; flex-wrap: wrap; margin-top: -.35rem; }
.i9-dash__period { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; color: var(--i9-text-2nd); font-size: .84rem; }
.i9-dash__period strong { color: var(--i9-text); font-weight: 600; }
.i9-dash__cmp { color: var(--i9-text-2nd); font-size: .8rem; }
.i9-dash__custom { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.i9-dash__custom label { font-size: .8rem; font-weight: 550; color: var(--i9-text-2nd); }
.i9-dash__custom .i9-field-box { width: 150px; }

.i9-dash__row { display: grid; gap: 1rem; align-items: stretch; min-width: 0; }
.i9-dash__row > * { min-width: 0; }
.i9-dash__row--main { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
.i9-dash__row--products { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.i9-dash__row--balances { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.i9-dash__row--stock { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); }
.i9-dash__row--stock:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.i9-dash__row--kpis { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@container dash (max-width: 1000px) {
    .i9-dash__row--main, .i9-dash__row--products, .i9-dash__row--balances, .i9-dash__row--stock { grid-template-columns: minmax(0, 1fr); }
}

.i9-dash__subtitle { margin: 1rem 0 .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--i9-text-2nd); }
.i9-dash__subtitle:first-child { margin-top: 0; }
.i9-dash__sectiontitle { margin: .5rem 0 .75rem; font-size: 1rem; font-weight: 650; }
.i9-dash__summaryline { margin: 0 0 .5rem; font-size: .86rem; color: var(--i9-text-regular); }
.i9-dash__summaryline .is-warning { color: var(--i9-tone-warning); font-weight: 650; }
.i9-dash__more { margin: .4rem 0 0; font-size: .78rem; color: var(--i9-text-2nd); }
.i9-dash__ok { display: flex; align-items: center; gap: .45rem; margin: .25rem 0; font-size: .86rem; color: var(--i9-tone-success); }
.i9-dash__stockgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@container dash (max-width: 1300px) { .i9-dash__stockgrid { grid-template-columns: minmax(0, 1fr); } }
.i9-dash__feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.i9-dash__kpivalue { font-size: 1.8rem; font-weight: 650; letter-spacing: -.02em; }

/* ---------- Cartões ---------- */
.i9-dcard { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.i9-dcard > .i9-card2__head { padding: .75rem 1rem; }
.i9-dcard > .i9-card2__body { flex: 1; padding: .9rem 1rem 1rem; min-width: 0; position: relative; }
.i9-dcard > .i9-card2__foot { justify-content: flex-start; padding: .55rem 1rem; font-size: .82rem; }
.i9-dcard .i9-card2__title { font-size: .92rem; }
.i9-dcard__progress { position: absolute; left: 0; right: 0; top: 0; height: 2px; overflow: hidden; background: var(--i9-border-2); }
.i9-dcard__progress::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--i9-primary); animation: i9-dash-bar 1.1s ease-in-out infinite; }
@keyframes i9-dash-bar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.i9-dcard__stale { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; padding: .4rem .6rem; border-radius: 8px; font-size: .78rem; color: var(--i9-tone-warning); background: var(--i9-warning-bg); }
.i9-dcard__error { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .25rem; padding: 1.4rem 1rem; }
.i9-dcard__erroricon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--i9-tone-danger); background: var(--i9-danger-bg); margin-bottom: .25rem; }
.i9-dcard__errortitle { margin: 0; font-weight: 600; font-size: .9rem; }
.i9-dcard__errormsg { margin: 0 0 .5rem; font-size: .78rem; color: var(--i9-text-2nd); max-width: 44ch; }

/* ---------- Esqueletos ---------- */
.i9-dskel { display: flex; flex-direction: column; gap: .75rem; padding: .25rem 0; }
.i9-dskel__line, .i9-dskel__block {
    display: block; border-radius: 6px;
    background: linear-gradient(90deg, var(--i9-surface-3) 25%, var(--i9-border-2) 37%, var(--i9-surface-3) 63%);
    background-size: 400% 100%; animation: i9-shimmer 1.4s ease infinite;
}
.i9-dskel__line { height: 12px; }
.i9-dskel__line--value { height: 26px; width: 55%; }
.i9-dskel__block { height: var(--i9-dskel-h, 240px); border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .i9-dskel__line, .i9-dskel__block, .i9-dash__refresh .is-spinning, .i9-dcard__progress::after { animation: none; } }

/* ---------- KPIs ---------- */
.i9-dash__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .8rem; }
.i9-dash .i9-stat2 { padding: .85rem .95rem; gap: .35rem; min-width: 0; }
.i9-dash .i9-stat2__value { font-size: 1.5rem; }
.i9-dash .i9-stat2__icon { width: 30px; height: 30px; }
.i9-dash .i9-stat2__spark { width: 56px; }
.i9-dash .i9-stat2__bottom { min-height: 22px; gap: .35rem; }
.i9-dash .i9-stat2__extra {
    display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; margin-top: .25rem; padding-top: .55rem;
    border-top: 1px solid var(--i9-border-2); min-height: 20px;
}
.i9-kpi--placeholder { gap: .6rem; }
.i9-kpi--placeholder.is-error { border-color: color-mix(in srgb, var(--i9-tone-danger) 35%, var(--i9-border)); }
.i9-kpi__errmsg { margin: 0; font-size: .82rem; color: var(--i9-tone-danger); }
.i9-kpi__cmp { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .76rem; color: var(--i9-text-2nd); font-variant-numeric: tabular-nums; }
.i9-kpi__cmp b { font-weight: 650; }
.i9-kpi__cmp.is-good b { color: var(--i9-tone-success); }
.i9-kpi__cmp.is-bad b { color: var(--i9-tone-danger); }
.i9-kpi__cmp.is-flat b, .i9-kpi__cmp.is-none b { color: var(--i9-text-2nd); }
.i9-kpi__note { font-size: .74rem; color: var(--i9-text-2nd); }
.i9-kpi__chip {
    display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .12rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--i9-surface));
}
.i9-kpi__chip.is-danger { --tone: var(--i9-tone-danger); }
.i9-kpi__chip.is-warning { --tone: var(--i9-tone-warning); }
.i9-kpi__chip.is-success { --tone: var(--i9-tone-success); }
.i9-kpi__chip.is-info { --tone: var(--i9-tone-info); }

/* ---------- Gráfico principal ---------- */
.i9-dash__chartcard .i9-chart { min-height: 300px; }
.i9-chart--series .e-chart, .i9-chart--series svg { max-width: 100%; }

/* ---------- Ranking em barras (I9RankBars) ---------- */
.i9-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; --tone: var(--i9-tone-info); }
.i9-rank__row { display: flex; flex-direction: column; gap: .32rem; padding: .45rem .55rem; border-radius: 8px; color: inherit; text-decoration: none; }
a.i9-rank__row { transition: background .12s; }
a.i9-rank__row:hover, a.i9-rank__row:focus-visible { background: var(--i9-surface-2); outline: none; }
.i9-rank__top { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.i9-rank__idx { flex: 0 0 1.1rem; font-size: .74rem; font-weight: 600; color: var(--i9-text-2nd); font-variant-numeric: tabular-nums; }
.i9-rank__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; font-weight: 550; color: var(--i9-text); }
.i9-rank__sub { margin-left: .45rem; font-size: .74rem; font-weight: 400; color: var(--i9-text-2nd); }
.i9-rank__val { flex: 0 0 auto; font-size: .86rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--i9-text); }
.i9-rank__bar { display: flex; align-items: center; gap: .6rem; }
.i9-rank__track { flex: 1; height: 6px; border-radius: 999px; background: var(--i9-surface-3); overflow: hidden; }
.i9-rank__fill { display: block; height: 100%; border-radius: 999px; background: var(--tone); transition: width .4s ease; }
.i9-rank__meta {
    flex: 0 0 auto; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums;
    color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--i9-surface));
}
.i9-rank__empty { margin: .25rem 0 .5rem; font-size: .84rem; color: var(--i9-text-2nd); }

/* ---------- Barra empilhada (I9StackedBar) ---------- */
.i9-stacked__bar { display: flex; gap: 2px; height: 14px; border-radius: 7px; overflow: hidden; background: var(--i9-surface-3); }
.i9-stacked__seg { display: block; height: 100%; min-width: 4px; }
.i9-stacked__legend { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: .55rem .9rem; }
.i9-stacked__legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .4rem; align-items: center; font-size: .78rem; min-width: 0; }
.i9-stacked__legend li.is-zero { opacity: .55; }
.i9-stacked__swatch { width: 10px; height: 10px; border-radius: 3px; }
.i9-stacked__label { color: var(--i9-text-2nd); white-space: nowrap; }
.i9-stacked__val { grid-column: 2; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--i9-text); }
.i9-stacked__sub { grid-column: 2; font-size: .72rem; color: var(--i9-text-2nd); }

/* ---------- Saldos ---------- */
.i9-balance__flag { display: flex; margin-bottom: .75rem; }
.i9-balance__totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--i9-border-2); }
.i9-balance__totals > div { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.i9-balance__totals span { font-size: .74rem; color: var(--i9-text-2nd); }
.i9-balance__totals strong { font-size: 1.1rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.i9-balance__totals .is-danger strong { color: var(--i9-tone-danger); }

/* ---------- Alertas (I9DashAlerts) ---------- */
.i9-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.i9-alert {
    --tone: var(--i9-tone-info); border: 1px solid color-mix(in srgb, var(--tone) 26%, var(--i9-border)); border-radius: 10px; overflow: hidden;
    background: color-mix(in srgb, var(--tone) 6%, var(--i9-surface));
}
.i9-alert__main { display: flex; align-items: center; gap: .65rem; padding: .6rem .75rem; color: inherit; text-decoration: none; }
.i9-alert__main:hover .i9-alert__go { transform: translateX(2px); }
.i9-alert__icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: var(--tone); background: color-mix(in srgb, var(--tone) 15%, var(--i9-surface)); }
.i9-alert__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.i9-alert__text strong { font-size: .86rem; font-weight: 600; color: var(--i9-text); }
.i9-alert__text small { font-size: .76rem; color: var(--i9-text-2nd); font-variant-numeric: tabular-nums; }
.i9-alert__go { color: var(--i9-text-2nd); transition: transform .14s; flex: 0 0 auto; }
.i9-alert__items { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .75rem .6rem 3.15rem; }
.i9-alert__items a, .i9-alert__more {
    display: inline-block; max-width: 100%; padding: .08rem .5rem; border-radius: 999px; font-size: .73rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--i9-text-regular); background: var(--i9-surface); border: 1px solid var(--i9-border);
}
.i9-alert__items a:hover { border-color: var(--tone); color: var(--tone); }
.i9-alert__more { border-style: dashed; color: var(--i9-text-2nd); }

/* ---------- Atividade (I9DashFeeds) ---------- */
.i9-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.i9-feed__row { display: flex; align-items: center; gap: .65rem; padding: .5rem .45rem; border-radius: 8px; color: inherit; text-decoration: none; }
.i9-feed__row:hover, .i9-feed__row:focus-visible { background: var(--i9-surface-2); outline: none; }
.i9-feed li + li .i9-feed__row { border-top: 1px solid var(--i9-border-2); border-top-left-radius: 0; border-top-right-radius: 0; }
.i9-feed__icon { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, var(--i9-surface)); }
.i9-feed__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.i9-feed__title { display: flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; color: var(--i9-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i9-feed__sub { font-size: .74rem; color: var(--i9-text-2nd); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.i9-feed__end { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .15rem; }
.i9-feed__amount { font-size: .84rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--i9-text); }
.i9-feed__amount.is-in { color: var(--i9-tone-success); }
.i9-feed__amount.is-out { color: var(--i9-tone-danger); }