/* www/style.css
   OCEAN THEME + DataTables:
   - farbenie PO STĹPCOCH (modrý/biely)
   - ŽIADNE farbenie po riadkoch
   - riadkovanie cez border-bottom
   - centrovanie
   - hlavička O NIEČO TMAVŠIA
   - zvýraznenie iba na "Zobraziť dáta" (nie na download)
*/

:root {
	--ocean-dark: #0b2d4d;
	--ocean-mid: #0a4f7a;
	--ocean-accent: #0b6ea8;

	--bg-top: #e7f2fb;
	--bg-mid: #d6e9f8;
	--bg-bottom: #e7f2fb;

	--text: rgba(0, 0, 0, 0.85);

	--card-bg: #ffffff;
	--card-border: rgba(11, 45, 77, 0.1);
	--card-shadow: 0 10px 22px rgba(11, 45, 77, 0.1);

	/* tooltip */
	--tip-bg: #ffffff;
	--tip-text: rgba(0, 0, 0, 0.88);
	--tip-border: rgba(11, 110, 168, 0.9);
	--tip-shadow: 0 18px 38px rgba(11, 45, 77, 0.22), 0 6px 14px rgba(11, 45, 77, 0.14);

	/* datatables */
	/* TMAVŠIA hlavička oproti predošlej verzii */
	--dt-header-bg: linear-gradient(90deg, rgba(14, 86, 140, 0.98) 0%, rgba(12, 104, 168, 0.98) 60%, rgba(14, 86, 140, 0.98) 100%);
	--dt-header-text: rgba(255, 255, 255, 0.98);

	/* stĺpcové striping */
	--dt-col-white: rgba(255, 255, 255, 0.98);
	--dt-col-blue: rgba(11, 110, 168, 0.12);

	/* hover */
	--dt-hover-overlay: rgba(11, 110, 168, 0.06);

	/* deliace čiary */
	--dt-grid: rgba(11, 45, 77, 0.22);
	--dt-header-grid: rgba(255, 255, 255, 0.28);
	--dt-border: rgba(11, 45, 77, 0.16);

	--dt-cell-pad-y: 10px;
	--dt-cell-pad-x: 12px;

	/* download button */
	--dl-bg: rgba(11, 110, 168, 0.14);
	--dl-bg-hover: rgba(11, 110, 168, 0.22);
	--dl-border: rgba(11, 110, 168, 0.4);
	--dl-border-hover: rgba(11, 110, 168, 0.55);
	--dl-text: rgba(11, 45, 77, 0.95);
	--dl-shadow: 0 6px 14px rgba(11, 45, 77, 0.1);

	/* hover pre "Zobraziť dáta" */
	--toggle-hover: rgba(11, 110, 168, 0.12);
}

/* =========================
   POZADIE
   ========================= */
html,
body {
	min-height: 100%;
}

html {
	background-color: var(--bg-top);
	background-image: radial-gradient(1200px 720px at 18% 0%, rgba(11, 110, 168, 0.22) 0%, rgba(231, 242, 251, 0) 60%),
		radial-gradient(1100px 720px at 88% 10%, rgba(10, 79, 122, 0.18) 0%, rgba(231, 242, 251, 0) 62%),
		linear-gradient(180deg, var(--bg-top) 0%, var(--bg-mid) 55%, var(--bg-bottom) 100%);
	background-repeat: no-repeat;
	color: var(--text);
}

body {
	background: transparent;
	margin: 0;
	overflow-x: hidden;
}

body,
.tabbable > .nav-tabs > li > a,
.plot-card,
.data-summary,
table.dataTable {
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* =========================
   ZÁLOŽKY
   ========================= */
.tabbable > .nav-tabs {
	border: 0 !important;

	width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	margin-top: 0 !important;
	margin-bottom: 14px !important;

	padding: 0 16px !important;

	background: linear-gradient(90deg, #08243d 0%, #093f63 55%, #08243d 100%) !important;

	border-bottom: 1px solid rgba(255, 255, 255, 0.14) !important;
	box-shadow: 0 10px 22px rgba(8, 36, 61, 0.22);

	display: flex;
	flex-wrap: wrap;
}

.tabbable > .nav-tabs > li {
	margin: 0 !important;
}

.tabbable > .nav-tabs > li > a {
	border: 0 !important;
	margin: 0 !important;

	padding: 14px 18px !important;
	border-radius: 0 !important;

	color: rgba(255, 255, 255, 0.95) !important;
	background: transparent !important;

	font-weight: 600;
	letter-spacing: 0.2px;

	transition: background 120ms ease, color 120ms ease;
}

.tabbable > .nav-tabs > li > a:hover {
	background: rgba(255, 255, 255, 0.18) !important;
	color: rgba(255, 255, 255, 0.99) !important;
}

.tabbable > .nav-tabs > li.active > a,
.tabbable > .nav-tabs > li.active > a:hover,
.tabbable > .nav-tabs > li.active > a:focus {
	background: rgba(255, 255, 255, 0.2) !important;
	color: rgba(255, 255, 255, 0.99) !important;
	position: relative;
}

.tabbable > .nav-tabs > li.active > a::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.95);
}

/* =========================
   KARTY
   ========================= */
.plot-card {
	background: var(--card-bg);
	border: 1px solid var(--card-border);
	border-radius: 14px;

	padding: 12px;
	margin-bottom: 14px;

	box-shadow: var(--card-shadow);

	position: relative;
}

.plot-card--main {
	padding: 14px;
}

.plot-card--small {
	padding: 10px;
}

/* =========================
   “Zobraziť dáta” + Download (zvýrazní sa len toggle)
   ========================= */
.data-details {
	margin-top: 2px;
}

details.data-details > summary.data-summary {
	user-select: none;
	-webkit-user-select: none;

	font-size: 1rem;
	opacity: 0.95;

	padding: 0;
	border-radius: 10px;

	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

/* Toggle blok (len tento sa zvýrazňuje) */
.data-summary__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	padding: 6px 10px;
	border-radius: 10px;

	cursor: pointer;
	background: var(--dl-bg);
	border: 1px solid var(--dl-border);
	box-shadow: var(--dl-shadow);
	color: var(--dl-text);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	transition: background 120ms ease, border-color 120ms ease;
	margin-right: auto;
}

.data-summary__toggle:hover {
	background: var(--dl-bg-hover);
	border-color: var(--dl-border-hover);
}

.data-summary__text {
	font-weight: 700;
}

/* caret sa prepína podľa open stavu details */
.data-summary__caret::before {
	content: "▸";
}

details.data-details[open] > summary.data-summary .data-summary__caret::before {
	content: "▾";
}

.data-details .dataTables_wrapper {
	margin-top: 8px;
}

.data-details .data-note {
	margin-top: 6px;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.6);
}

/* downloadButton je <a> */
.data-details .data-download {
	cursor: pointer !important;
	text-decoration: none !important;

	padding: 6px 10px !important;
	border-radius: 10px !important;

	background: var(--dl-bg) !important;
	border: 1px solid var(--dl-border) !important;

	color: var(--dl-text) !important;
	font-weight: 700 !important;
	font-size: 12px !important;

	line-height: 1 !important;
	box-shadow: var(--dl-shadow) !important;

	pointer-events: auto;
}

.data-details .data-download:hover {
	background: var(--dl-bg-hover) !important;
	border-color: var(--dl-border-hover) !important;
}

.data-details .data-download:focus {
	outline: none !important;
}

/* =========================
   INFO TOOLTIP
   ========================= */
.plot-card--with-info {
	position: relative;
}

.info-hover {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 60;
	display: inline-block;
}

.info-hover__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border-radius: 999px;
	border: 2px solid rgba(11, 45, 77, 0.5);

	font-weight: 700;
	font-family: Arial, sans-serif;
	font-size: 18px;

	cursor: help;
	user-select: none;

	background: linear-gradient(180deg, rgba(245, 251, 255, 1) 0%, rgba(218, 236, 249, 1) 100%);
	color: rgba(8, 36, 61, 0.96);

	box-shadow: 0 8px 16px rgba(11, 45, 77, 0.16);
}

.info-hover__bubble {
	display: none;
	position: absolute;

	top: -2px;
	left: calc(100% + 6px);

	width: 340px;
	max-width: min(70vw, 420px);

	padding: 10px 12px;
	border-radius: 12px;

	background: var(--tip-bg);
	color: var(--tip-text);

	border: 1px solid var(--tip-border);
	box-shadow: var(--tip-shadow);

	z-index: 70;
}

.info-hover__bubble::after {
	content: "";
	position: absolute;
	top: 12px;
	left: -8px;

	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-right: 8px solid var(--tip-bg);
}

.info-hover__bubble::before {
	content: "";
	position: absolute;
	top: 12px;
	left: -9px;

	width: 0;
	height: 0;
	border-top: 9px solid transparent;
	border-bottom: 9px solid transparent;
	border-right: 9px solid var(--tip-border);
}

.info-hover:hover .info-hover__bubble {
	display: block;
}

@media (max-width: 520px) {
	.info-hover__bubble {
		width: 82vw;
		max-width: 82vw;
	}
}

/* =========================
   DATATABLES – vynútené odstránenie “row stripe” + stĺpcové farby
   ========================= */
.dataTables_wrapper *,
.dataTables_wrapper *::before,
.dataTables_wrapper *::after {
	box-sizing: border-box;
}

.dataTables_wrapper .dataTables_scroll {
	border: 1px solid var(--dt-border);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 8px 18px rgba(11, 45, 77, 0.1);
}

.dataTables_wrapper .dataTables_scrollHeadInner,
.dataTables_wrapper .dataTables_scrollHeadInner table,
.dataTables_wrapper .dataTables_scrollBody table {
	margin: 0 !important;
}

table.dataTable {
	border-collapse: collapse !important;
	border-spacing: 0 !important;
	background: #fff;
}

/* zruš riadkové stripovanie na TR */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even {
	background: transparent !important;
}

table.dataTable tbody tr {
	background: transparent !important;
}

/* HLAVIČKA */
table.dataTable thead th,
table.dataTable thead td {
	background: var(--dt-header-bg);
	color: var(--dt-header-text);

	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.25px;

	padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x) !important;

	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.22) !important;

	white-space: nowrap;

	text-align: center !important;
	vertical-align: middle !important;

	box-shadow: inset -1px 0 0 var(--dt-header-grid);
}

table.dataTable thead th:last-child,
table.dataTable thead td:last-child {
	box-shadow: none;
}

/* TELO */
table.dataTable tbody td {
	padding: var(--dt-cell-pad-y) var(--dt-cell-pad-x) !important;
	font-size: 12px;
	color: var(--text);

	border: 0 !important;
	border-bottom: 1px solid var(--dt-grid) !important;

	white-space: nowrap;

	text-align: center !important;
	vertical-align: middle !important;

	box-shadow: inset -1px 0 0 var(--dt-grid);

	background: var(--dt-col-white) !important;
}

table.dataTable tbody td:nth-child(even) {
	background: var(--dt-col-blue) !important;
}

table.dataTable tbody td:first-child {
	font-weight: 700;
	color: rgba(11, 45, 77, 0.95);
	background: var(--dt-col-white) !important;
}

table.dataTable tbody td:last-child {
	box-shadow: none;
}

table.dataTable tbody tr:hover td {
	box-shadow: inset -1px 0 0 var(--dt-grid), inset 0 0 0 9999px var(--dt-hover-overlay);
}
table.dataTable tbody tr:hover td:last-child {
	box-shadow: inset 0 0 0 9999px var(--dt-hover-overlay);
}

table.dataTable :focus {
	outline: none !important;
}

/* scrollbar */
.dataTables_scrollBody::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}
.dataTables_scrollBody::-webkit-scrollbar-track {
	background: rgba(11, 45, 77, 0.1);
	border-radius: 999px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb {
	background: rgba(11, 110, 168, 0.48);
	border-radius: 999px;
}
.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
	background: rgba(11, 110, 168, 0.64);
}

/* =========================
   PÄTA
   ========================= */
.app-footer {
	margin-top: 18px;

	background: linear-gradient(90deg, var(--ocean-dark) 0%, var(--ocean-mid) 55%, var(--ocean-dark) 100%) !important;
	color: rgba(255, 255, 255, 0.95);

	border-top: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1);

	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	padding: 8px 16px;

	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	column-gap: 12px;

	font-size: 1.1rem;
	line-height: 1.15;
}

.app-footer__left {
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.footer-logo {
	height: 24px;
	width: auto;
	display: block;
}

.footer-agency-name {
	font-size: 8px;
	line-height: 1.1;
	letter-spacing: 0.2px;
	opacity: 0.95;
}

.footer-agency-name span {
	display: block;
}

.app-footer__center {
	justify-self: center;
	text-align: center;

	font-size: 14px;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	max-width: 60vw;
}

/* RIGHT – upravené po vzore LEFT */
.app-footer__right {
	justify-self: end;

	display: flex;
	align-items: center;
	gap: 8px;

	white-space: nowrap;

	/* aby to držalo vpravo aj pri menších šírkach */
	justify-content: flex-end;
}

/* text vpravo (lebo vpravo je blok s viac riadkami) */
.app-footer__right .footer-agency-name {
	text-align: right;
}

.container-fluid {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.container-fluid > .tabbable {
	flex: 1 1 auto;
}

.app-footer {
	margin-top: auto !important;
}

.about-page .plot-card {
	max-width: none;
	margin: 0;
	padding: 26px 28px;
	border-radius: 18px;
	box-shadow: 0 14px 30px rgba(11, 45, 77, 0.12);
}

.about-page .plot-card p {
	max-width: 78ch;
	margin: 0 0 12px 0;
	line-height: 1.65;
	font-size: 15px;
}

.about-page .plot-card h3 {
	text-align: left;
	margin: 0 0 12px 0;
	font-size: 18px;
}

.about-page {
	max-width: 1500px;
	margin: 0 auto;
	padding: 16px 12px 32px 12px;
	display: grid;
	grid-template-columns: 1fr;
	gap: 26px;
}

.about-page .about-block,
.about-page .about-top-card,
.about-page .about-image-card {
	position: relative;
	overflow: hidden;
	padding: 28px 30px;
	background: #ffffff;
	border: 1px solid rgba(11, 45, 77, 0.12);
	margin-bottom: 0;
	min-width: 0;
	align-self: stretch;
}

.about-page .about-hero__title {
	margin: 0 0 8px 0;
	font-size: 32px;
	line-height: 1.2;
	color: rgba(8, 36, 61, 0.98);
}

.about-page .about-hero__lead {
	margin: 0 0 14px 0;
	font-size: 17px;
	color: rgba(0, 0, 0, 0.74);
}

.about-page .about-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.about-page .about-chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(11, 110, 168, 0.12);
	border: 1px solid rgba(11, 110, 168, 0.28);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.2px;
	color: rgba(8, 36, 61, 0.92);
}

.about-page .about-hero__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 8px 16px;
}

.about-page .about-meta__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
	color: rgba(0, 0, 0, 0.7);
}

.about-page .about-meta__label {
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 11px;
	color: rgba(0, 0, 0, 0.5);
}

.about-page .about-image__img {
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
	border: 1px solid rgba(11, 45, 77, 0.12);
	box-shadow: 0 12px 26px rgba(11, 45, 77, 0.14);
}

.about-page .about-top-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 40px;
	align-items: stretch;
}

.about-page .about-top__quickstart {
	justify-self: center;
	width: min(520px, 100%);
	align-self: start;
}

@media (max-width: 720px) {
	.about-page {
		grid-template-columns: 1fr;
	}

	.about-page .about-hero__title {
		font-size: 26px;
	}

	.about-page .about-image__img {
		width: 100%;
	}

	.about-page .about-top-grid {
		grid-template-columns: 1fr;
	}
}