/*
 * AdSanity for MainWP — network dashboard styles.
 *
 * The screens are built from MainWP's Semantic UI vocabulary (ui segment, ui
 * tabular menu, ui statistics, ui table, ui message, ui button), which MainWP's
 * active theme styles for both light and dark automatically. These rules cover
 * only the custom pieces Semantic doesn't provide: the date-range controls and
 * the dependency-free inline SVG chart. Theme-aware colors reuse MainWP's own
 * custom properties (--mainwp-text-secondary, falling back to the legacy
 * --font-color, then a static grey) so muted text tracks the surrounding UI.
 */

/* Tabs sit at the top of the padded content segment; give the panel below a
   little breathing room from the menu's underline. */
.adsanity-mwp-tabs.ui.menu {
	margin-bottom: 1.5em;
}

.adsanity-mwp-stats.ui.cards {
	margin-top: .5em;
	margin-bottom: 1.5em;
}

.adsanity-mwp-range {
	display: flex;
	gap: .5em;
	align-items: flex-end;
	flex-wrap: wrap;
	margin: 0 0 1.5em;
}

.adsanity-mwp-range label {
	display: flex;
	flex-direction: column;
	font-weight: 600;
}

.adsanity-mwp-presets {
	display: inline-flex;
	gap: .25em;
}

.adsanity-mwp-chart svg {
	width: 100%;
	height: auto;
	display: block;
}

.adsanity-mwp-chart-legend {
	display: flex;
	gap: 1.5em;
	margin-top: .5em;
	color: var( --mainwp-text-secondary, var( --font-color, #646970 ) );
	font-size: .9em;
}

.adsanity-mwp-chart-legend .swatch {
	display: inline-block;
	width: .8em;
	height: .8em;
	border-radius: 2px;
	margin-right: .35em;
	vertical-align: middle;
}

.adsanity-mwp-chart-legend .swatch.views {
	background: #2271b1;
}

.adsanity-mwp-chart-legend .swatch.clicks {
	background: #d63638;
}

.adsanity-mwp-meta,
.adsanity-mwp-muted {
	color: var( --mainwp-text-secondary, var( --font-color, #646970 ) );
}

.adsanity-mwp-meta {
	margin-top: 1em;
}