/* Shared stylesheet for all MRTG per-interface graph pages
   (<ip>_<interface>.html), generated by /usr/bin/mrtg. Linked via
   <link rel="stylesheet"> from every page instead of an inline <style>
   block, so layout/font/color edits here apply instantly on next page
   load -- no need to wait for mrtg's regeneration cycle.

   A handful of values are legitimately per-target (background color,
   in/out/peak line colors) since they come from each router's own cfg
   (backgc/rgb1-5). Those stay as CSS custom properties set in a small
   inline <style> block mrtg still prints per page; every other rule
   lives here. */

* { box-sizing: border-box; }

body {
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	max-width: 900px;
	margin: 0 auto;
	padding: 20px 24px 32px;
	background-color: var(--mrtg-bg, #ffffff);
	color: var(--mrtg-fg, #1c2430);
}

h1 {
	font-size: 1.4em;
	font-weight: 700;
	letter-spacing: -.01em;
}

div {
	border-bottom: 1px solid rgba(128,128,128,.35);
	padding-bottom: 14px;
	margin-bottom: 14px;
}

div h2 {
	font-size: 1.1em;
	font-weight: 600;
	margin: 0 0 8px;
}

div.graph {
	border: 1px solid rgba(128,128,128,.25);
	border-radius: 10px;
	padding: 14px 16px;
}

div.graph img {
	margin: 5px 0;
	max-width: 100%;
	border-radius: 4px;
}

div.graph table, div#legend table {
	font-size: .85em;
	border-collapse: collapse;
	width: auto;
}

div.graph table td, div.graph table th {
	padding: 3px 14px 3px 0;
	text-align: right;
}

div.graph table th:first-child, div.graph table td:first-child {
	padding-left: 0;
	text-align: left;
}

div.graph table td:last-child, div.graph table th:last-child {
	padding-right: 0;
}

div table .in th, div table td span.in {
	color: var(--mrtg-rgb1);
}

div table .out th, div table td span.out {
	color: var(--mrtg-rgb2);
}

div table .inpeak th {
	color: var(--mrtg-rgb3);
}

div table .outpeak th {
	color: var(--mrtg-rgb4);
}

div table .relpercent th {
	color: var(--mrtg-rgb5);
}

div#legend {
	border: none;
}

div#legend th {
	text-align: right;
}

div#footer {
	border: none;
	font-size: .8em;
	font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	opacity: .75;
	width: 476px;
	max-width: 100%;
}

div#footer img {
	border: none;
	height: 25px;
}

div#footer address {
	text-align: right;
}

div#footer #version {
	margin: 0;
	padding: 0;
	float: left;
	width: 88px;
	text-align: right;
}