/*	-----------------------------------
 *	Styles for CumulusMX Templates
 *	WeatherPortal edition — dark theme, Inter typography
 *	----------------------------------*/

/* Inter — mirrors WeatherPortal.co.uk typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');

/* ── Base typography ─────────────────────────────────────────────── */
html, body, p, h1, h2, h3, h4, h5, h6, li, td, th {
	font-family: 'Inter', sans-serif;
	color: #f8fafc;
}

p {
	font-size: 15px;
	color: #94a3b8;
}

h1, h2, h3 {
	font-weight: 700;
	letter-spacing: -0.02em;
}

h4, h5, h6 {
	font-weight: 600;
}

/* ── Page background ─────────────────────────────────────────────── */
body {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
	background-attachment: fixed;
	min-height: 100vh;
}

/* ── Header ──────────────────────────────────────────────────────── */
#Header {
	border-style: solid;
	border-width: 0 0 2px 0;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.site-width {
	max-width: 1140px;
	margin: auto;
}

.graph-width {
	max-width: 1250px;
	margin: auto;
}

/* ── Footer ──────────────────────────────────────────────────────── */
#Footer {
	border-width: 2px 0 0 0;
	border-style: solid;
}

#Footer p, #Footer p em {
	color: #94a3b8;
	font-size: 0.85rem;
}

/* ── Logo ────────────────────────────────────────────────────────── */
.logo {
	max-width: 250px;
	margin: 5px 0 5px 16px;
}

/* ── Sub-label text ──────────────────────────────────────────────── */
.subText {
	font-size: 80% !important;
	font-weight: 400;
	color: #94a3b8;
}

/* ── Divider pipe in header ──────────────────────────────────────── */
.at-divider {
	margin: 0 5px;
	color: #38bdf8;
}

/* ── Spacer ──────────────────────────────────────────────────────── */
.at-spacer {
	min-height: 2em;
}

/* ── Flex utilities ──────────────────────────────────────────────── */
.at-flex-start         { display: flex; }
.at-flex-end           { display: flex; justify-content: flex-end;    flex-wrap: wrap; }
.at-flex-justify       { display: flex; justify-content: space-around; flex-wrap: wrap; }
.at-flex-between       { display: flex; justify-content: space-between; flex-wrap: wrap; }
.at-flex-bottom,
.at-flex-items-bottom  { align-items: flex-end; }
.at-flex-items-center  { align-items: center; }

/* ── Menu ────────────────────────────────────────────────────────── */
#Main_Menu {
	margin-bottom: 4px;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: rgba(56, 189, 248, 0.2);
	min-height: 32px;
}

.at-slim { padding: 4px 14px !important; }

.at-menu-lable {
	display: block;
	width: 100%;
	font-size: 13px;
	font-style: italic;
	padding-bottom: 2px !important;
	padding-top: 4px !important;
	border-bottom: 1px dotted rgba(56, 189, 248, 0.25) !important;
	color: #94a3b8;
}

.at-menu-bar {
	display: block;
	height: 2px;
	padding: 0 2px !important;
}

.at-indent { padding-left: 40px !important; }

/* ── Cards & panels ──────────────────────────────────────────────── */
.w3-panel {
	border-radius: 12px !important;
	border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.w3-card, .w3-card-2, .w3-card-4 {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
	border-radius: 12px !important;
}

/* ── Tables ──────────────────────────────────────────────────────── */
.w3-table td, .w3-table th {
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	padding: 8px 12px;
}

.w3-hoverable tbody tr:hover {
	background-color: rgba(56, 189, 248, 0.07) !important;
	color: #f8fafc !important;
}

/* ── Links ───────────────────────────────────────────────────────── */
a { color: #38bdf8; }
a:hover { color: #7dd3fc; }

/* ── Credits / small text ────────────────────────────────────────── */
.credits { color: #64748b !important; font-size: 0.8rem !important; }

/* ── Modal ───────────────────────────────────────────────────────── */
.w3-modal-content {
	margin-top: 10%;
	border-radius: 12px;
	background-color: #1e293b;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.w3-modal header { border-radius: 12px 12px 0 0; }
.w3-modal footer { border-radius: 0 0 12px 12px; }
.w3-modal .w3-btn { border-radius: 0 8px; }

/* ── Status panel ────────────────────────────────────────────────── */
.statusPanel h5 {
	margin-bottom: -5px;
}

/* ── LED indicators ──────────────────────────────────────────────── */
.at-led-round,
.at-led-block,
.at-led-brick,
.at-led-oval {
	display: inline-block;
	margin: 0 0.5em -3px 0.5em;
	background-color: #334155;
	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.15), inset -2px -2px 2px rgba(0, 0, 0, 0.5);
}
.at-led-round, .at-led-oval { border-radius: 50%; }
.at-led-round  { height: 1.2em; width: 1.2em; }
.at-led-block  { height: 1.2em; width: 1.2em; }
.at-led-brick  { height: 0.8em; width: 1.6em; }
.at-led-oval   { height: 1em;   width: 2em; }

.at-led-green      { background-color: #34d399; }
.at-led-flash-red  { animation: flashR 1s infinite; }

@keyframes flashR {
	0%, 60%  { background-color: #ef4444; }
	61%, 100% { background-color: #7f1d1d; }
}

/* ── Scrollbar (webkit) ──────────────────────────────────────────── */
::-webkit-scrollbar              { width: 8px; height: 8px; }
::-webkit-scrollbar-track        { background: #0f172a; }
::-webkit-scrollbar-thumb        { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover  { background: #38bdf8; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media screen and (max-width: 780px) {
	#Footer { position: unset; }
	#Content { margin-bottom: 5px !important; }
	.statusPanel { text-align: center !important; margin: auto !important; }
}

@media screen and (max-height: 768px) {
	#Footer { position: unset; }
	#Content { margin-bottom: 5px !important; }
}