/* OverviewKit (assets/js/overview-kit.js) - shared module overview layout. */
.ov { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
.ov-head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.ov-periods { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; background: var(--surface); }
.ov-period { border: 0; background: transparent; color: var(--text-muted); padding: .4rem .85rem; font-size: .9rem; }
.ov-period + .ov-period { border-left: 1px solid var(--border-color); }
.ov-period:hover { color: var(--text-main); background: var(--surface-muted); }
.ov-period.active { background: var(--brand-primary); color: #fff; }
.ov-period:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

.ov-summary { margin: 0; padding: .7rem 1rem; border-radius: 8px; background: var(--brand-soft); color: var(--text-main); }
.ov-summary .bi { color: var(--brand-primary); margin-right: .35rem; }

.ov-attention { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ov-attention-title { font-weight: 600; color: var(--text-main); margin-right: .25rem; }
.ov-attention-item { display: inline-flex; gap: .35rem; align-items: center; padding: .35rem .75rem; border-radius: 999px; border: 1px solid var(--border-color); background: var(--surface); color: var(--text-main); text-decoration: none; font-size: .9rem; }
.ov-attention-item:hover { border-color: var(--brand-primary); color: var(--text-main); }
.ov-attention-item.warning { border-color: #d97706; background: rgba(217, 119, 6, .08); }
.ov-attention-item.critical { border-color: #dc2626; background: rgba(220, 38, 38, .08); }
.ov-attention-item .bi-chevron-right { font-size: .75rem; color: var(--text-muted); }

.ov-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.ov-tile { display: flex; flex-direction: column; gap: .25rem; padding: .9rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); color: var(--text-main); text-decoration: none; }
a.ov-tile:hover { border-color: var(--brand-primary); color: var(--text-main); }
.ov-tile-label { font-size: .85rem; color: var(--text-muted); }
.ov-tile-label .bi { font-size: .8rem; cursor: help; }
.ov-tile-value { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.ov-change { font-size: .8rem; font-weight: 600; }
.ov-change.good { color: #15803d; }
.ov-change.bad { color: #dc2626; }
.ov-change-vs { font-weight: 400; color: var(--text-muted); }
[data-bs-theme="dark"] .ov-change.good { color: #4ade80; }
[data-bs-theme="dark"] .ov-change.bad { color: #f87171; }

.ov-charts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: .75rem; }
.ov-chart { padding: .9rem 1rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface); min-width: 0; }
.ov-chart.wide { grid-column: 1 / -1; }
.ov-chart-title { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; margin-bottom: .5rem; color: var(--text-main); }
.ov-chart-link { font-size: .85rem; font-weight: 400; color: var(--brand-primary); }
.ov-chart-body { min-height: 240px; }
.ov .recharts-text, .ov .recharts-legend-item-text { fill: var(--text-muted); }
.ov .recharts-legend-item-text { color: var(--text-muted) !important; }
.ov .recharts-default-tooltip { background: var(--surface) !important; border-color: var(--border-color) !important; color: var(--text-main); }

.ov-empty, .ov-loading { margin: 0; padding: 1rem 0; color: var(--text-muted); }
.ov-chart-body .ov-empty { display: flex; align-items: center; justify-content: center; min-height: 240px; }
.ov-upsell { padding: .7rem 1rem; border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-muted); }
.ov-upsell .bi { color: var(--brand-primary); margin-right: .35rem; }
.ov-quick-title { font-size: 1rem; font-weight: 600; margin: .5rem 0 .75rem; color: var(--text-main); }

@media (max-width: 575px) {
  .ov-head { justify-content: stretch; }
  .ov-periods { width: 100%; }
  .ov-period { flex: 1; padding: .45rem .3rem; }
  .ov-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-tile-value { font-size: 1.2rem; }
  .ov-charts { grid-template-columns: 1fr; }
}