/* ==========================================================================
   DASHBOARD  -  layout and components for #view-dashboard
   Loaded after premium.css; uses the shared tokens, adds only dash-* classes.
   ========================================================================== */

/* The router sets inline display on views, so spacing is done with margins rather than flex gap. */
#view-dashboard > * + * { margin-top: 20px; }

/* ------------------------------------------------------------ install strip */
.dash-install {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 16%, transparent), transparent);
}
.dash-install > i { color: var(--color-primary); font-size: 20px; }
.dash-install-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dash-install-text strong { font-size: 13.5px; }
.dash-install-text span { font-size: 12px; color: var(--text-muted); }
.dash-install-close { background: none; border: 0; color: var(--text-muted); cursor: pointer; padding: 6px; border-radius: 8px; }
.dash-install-close:hover { background: var(--bg-surface-active); color: var(--text-primary); }

/* ------------------------------------------------------------ hero */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-hero-title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.dash-hero-sub { margin: 4px 0 0; color: var(--text-muted); font-size: 13px; }
.dash-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ needs attention */
.dash-attention { display: flex; flex-wrap: wrap; gap: 10px; }
.dash-attention:empty { display: none; }
.dash-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-primary);
    cursor: pointer; transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.dash-chip:hover { transform: translateY(-1px); border-color: var(--border-color-strong); }
.dash-chip b { font-variant-numeric: tabular-nums; min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 999px; background: var(--bg-surface-active); }
.dash-chip.is-warn { border-color: color-mix(in srgb, var(--color-warning) 45%, transparent); background: color-mix(in srgb, var(--color-warning) 10%, var(--bg-surface)); }
.dash-chip.is-warn b { background: color-mix(in srgb, var(--color-warning) 28%, transparent); color: var(--color-warning); }
.dash-chip.is-danger { border-color: color-mix(in srgb, var(--color-danger) 50%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, var(--bg-surface)); }
.dash-chip.is-danger b { background: color-mix(in srgb, var(--color-danger) 30%, transparent); color: var(--color-danger); }
.dash-all-clear { color: var(--color-accent); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }

/* ------------------------------------------------------------ grouped KPIs */
.dash-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.dash-group {
    position: relative; padding: 18px; border-radius: var(--radius-lg); cursor: pointer;
    border: var(--hairline); background: var(--bg-surface); background-image: var(--surface-raise);
    box-shadow: var(--shadow-card);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
}
.dash-group:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); border-color: var(--border-color-strong); }
.dash-group header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dash-group header h3 { margin: 0; font-size: 12px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
.dash-group .stat-icon { width: 34px; height: 34px; font-size: 14px; }
.dash-big { font-size: 38px; line-height: 1; font-weight: 750; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.dash-big-label { margin: 4px 0 14px; font-size: 12.5px; color: var(--text-muted); }

.dash-mini { list-style: none; margin: 0; padding: 0; }
.dash-mini li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-color); font-size: 13px; }
.dash-mini li span { color: var(--text-secondary); }
.dash-mini li strong { font-variant-numeric: tabular-nums; }
.dash-mini-lg li { font-size: 15px; padding: 14px 0; }
.dash-mini-lg li:first-child { border-top: 0; }
.dash-mini li.is-total strong { color: var(--color-primary); font-size: 1.15em; }

/* ------------------------------------------------------------ rows & panels */
.dash-row { display: grid; gap: 16px; }
.dash-row-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dash-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dash-panel {
    padding: 18px; border-radius: var(--radius-lg); min-width: 0;
    border: var(--hairline); background: var(--bg-surface); background-image: var(--surface-raise); box-shadow: var(--shadow-card);
}
.dash-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-panel-head h3 { margin: 0; font-size: 15px; font-weight: 650; }
.dash-panel-note { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.dash-panel-foot { margin: 12px 0 0; font-size: 11.5px; color: var(--text-muted); }
.dash-panel .chart-container { position: relative; height: 240px; }

/* horizontal bars (sources, order statuses) */
.dash-bars { display: flex; flex-direction: column; gap: 12px; }
.dash-bar-row { display: grid; grid-template-columns: minmax(90px, 130px) 1fr auto; align-items: center; gap: 12px; font-size: 13px; }
.dash-bar-label { color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-bar-track { height: 8px; border-radius: 999px; background: var(--bg-surface-active); overflow: hidden; }
.dash-bar-fill { height: 100%; border-radius: inherit; background: var(--color-primary); min-width: 2px; transition: width 0.6s var(--ease-out); }
.dash-bar-fill.s-pending, .dash-bar-fill.s-on-hold { background: var(--color-warning); }
.dash-bar-fill.s-processing { background: var(--color-info); }
.dash-bar-fill.s-completed { background: var(--color-accent); }
.dash-bar-fill.s-cancelled, .dash-bar-fill.s-refunded, .dash-bar-fill.s-failed { background: var(--color-danger); }
.dash-bar-value { font-weight: 650; font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }

/* lists (recent orders, meetings, ad platforms) */
.dash-list { display: flex; flex-direction: column; }
.dash-list .empty-state { padding: 22px 8px; }
.dash-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-top: 1px solid var(--border-color); font-size: 13px; }
.dash-item:first-child { border-top: 0; }
.dash-item-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-item-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-item-main span { color: var(--text-muted); font-size: 12px; }
.dash-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.dash-item.is-link { cursor: pointer; border-radius: 8px; }
.dash-item.is-link:hover { background: var(--bg-surface-active); }

.dash-platform-stats { display: flex; gap: 8px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-platform-stats .ok { color: var(--color-accent); }
.dash-platform-stats .bad { color: var(--color-danger); }
.dash-platform-stats .mute { color: var(--text-muted); }

/* ------------------------------------------------------------ secondary */
.dash-more > summary { cursor: pointer; list-style: none; font-size: 13px; font-weight: 650; color: var(--text-secondary); padding: 6px 2px; display: inline-flex; align-items: center; gap: 8px; }
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more > summary i { font-size: 11px; transition: transform var(--transition-normal); }
.dash-more[open] > summary i { transform: rotate(90deg); }
.dash-more .dash-row { margin-top: 12px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1200px) {
    .dash-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-row-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dash-row-3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .dash-row-2-1, .dash-row-2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
    #view-dashboard > * + * { margin-top: 16px; }
    .dash-hero { align-items: flex-start; }
    .dash-hero-title { font-size: 20px; }
    .dash-hero-actions { width: 100%; }
    .dash-hero-actions .btn { flex: 1; }
    .dash-groups { gap: 10px; }
    .dash-group { padding: 14px; }
    .dash-big { font-size: 30px; }
    .dash-mini li { font-size: 12.5px; }
    .dash-row-3 { grid-template-columns: minmax(0, 1fr); }
    .dash-panel { padding: 14px; }
    .dash-panel .chart-container { height: 210px; }
    .dash-bar-row { grid-template-columns: minmax(80px, 110px) 1fr auto; gap: 8px; }
    .dash-attention { flex-wrap: nowrap; overflow-x: auto; margin: 0 -2px; padding-bottom: 4px; scrollbar-width: none; }
    .dash-attention::-webkit-scrollbar { display: none; }
    .dash-chip { flex-shrink: 0; }
}
@media (max-width: 420px) {
    .dash-groups { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .dash-group, .dash-chip, .dash-bar-fill { transition: none; }
}

/* an empty bar stays empty */
.dash-bar-fill[style*="width:0%"] { min-width: 0; }