﻿/*==================================================
 * NoAccess.css - obvestilo, da aplikacija ne obstaja ali ni dosegljiva (gisapp/NoAccess.aspx)
 *
 * Samostojen slog v videzu prijavnih oken (bela kartica na sivi podlagi); barve teme so tukaj, da stran ni odvisna
 * od drugih datotek: razred na-theme-<tema> na <html>.
 *
 *   na-wrap, na-card      postavitev: kartica na sredini
 *   na-top                glava kartice: logotip portala, izbira jezika
 *   na-body               ikona, naslov, besedilo, stik s podporo (na-support, na-contacts), naslov IP (na-ip)
 *   na-foot               noga pod kartico
 * ===============================================*/
html {
	--na-primary: #c0392b;
	--na-primary-light: #e74c3c;
	--na-primary-soft: #f7e7e6;
	--na-text: #2c3e50;
	--na-muted: #7f8c8d;
	--na-border: #e3e6e8;
	--na-bg: #f4f6f7;
}
html.na-theme-ikomunala {
	--na-primary: #2980b9;
	--na-primary-light: #3498db;
	--na-primary-soft: #e5f0f7;
}
html.na-theme-islovenija {
	--na-primary: #27ae60;
	--na-primary-light: #2ecc71;
	--na-primary-soft: #e5f5ec;
}
html.na-theme-iregija {
	--na-primary: #562e19;
	--na-primary-light: #865200;
	--na-primary-soft: #ebe6e3;
}
html.na-theme-ienergetika {
	--na-primary: #d35400;
	--na-primary-light: #e67e22;
	--na-primary-soft: #faeae0;
}

html,
body.na-page {
	margin: 0;
	padding: 0;
}
body.na-page {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.55;
	color: var(--na-text);
	background-color: var(--na-bg);
}
.na-wrap {
	box-sizing: border-box;
	max-width: 540px;
	margin: 0 auto;
	padding: 28px 12px 30px 12px;
}
.na-card {
	background-color: #ffffff;
	border: 1px solid var(--na-border);
	border-top: 3px solid var(--na-primary);
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(44, 62, 80, 0.08);
}

/* glava kartice */
.na-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--na-border);
}
.na-logo {
	display: flex;
	align-items: center;
	color: var(--na-primary);
}
.na-logo .logo {
	font-size: 34px;
	line-height: 1;
}
.na-lang {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 6px;
	color: var(--na-muted);
}
.na-lang > i {
	font-size: 18px;
}
.na-lang-select {
	height: 30px;
	padding: 0 6px;
	font-family: inherit;
	font-size: 13px;
	color: var(--na-text);
	background-color: #ffffff;
	border: 1px solid var(--na-border);
	border-radius: 6px;
}
.na-lang-select:focus {
	border-color: var(--na-primary);
	outline: none;
}

/* vsebina */
.na-body {
	padding: 22px 26px 24px 26px;
}
.na-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 12px auto;
	font-size: 34px;
	color: var(--na-primary);
	background-color: var(--na-primary-soft);
	border-radius: 50%;
}
.na-title {
	margin: 0 0 16px 0;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
	color: var(--na-text);
}
.na-greeting {
	margin: 0 0 6px 0;
	font-weight: bold;
}
.na-text {
	margin: 0 0 18px 0;
}
.na-support {
	padding: 14px 16px;
	background-color: var(--na-bg);
	border-radius: 6px;
}
.na-support p {
	margin: 0 0 8px 0;
}
.na-contacts {
	margin: 0;
	padding: 0;
	list-style: none;
}
.na-contacts li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 3px 0;
	font-weight: bold;
}
.na-contacts i {
	flex: 0 0 18px;
	font-size: 16px;
	text-align: center;
	color: var(--na-primary);
}
.na-contacts a {
	color: var(--na-primary);
	text-decoration: none;
	overflow-wrap: anywhere;
}
.na-contacts a:hover,
.na-contacts a:focus-visible {
	text-decoration: underline;
}
.na-ip {
	margin: 14px 0 0 0;
	font-size: 12px;
	color: var(--na-muted);
}
.na-ip span {
	font-family: Consolas, "Courier New", monospace;
	color: var(--na-text);
}

/* noga */
.na-foot {
	margin-top: 14px;
	font-size: 12px;
	text-align: center;
	color: var(--na-muted);
}
.na-foot a {
	color: var(--na-muted);
}

@media (max-width: 480px) {
	.na-wrap {
		padding-top: 12px;
	}
	.na-body {
		padding: 18px 16px 20px 16px;
	}
}
