/*
 * InterneXt telefonie - vzhled aplikace.
 *
 * Tokeny (barvy, písma) jsou na :root pro světlý vzhled a přepisují se pro
 * [data-bs-theme="dark"] (nastavuje js/theme-init.js). Bootstrap a datagrid se
 * napojují přes své --bs-* proměnné, aby tabulka hovorů ladila s aplikací.
 * Písma jsou hostovaná lokálně (www/fonts, SIL OFL) - CSP nepovoluje cizí zdroje písem
 * kromě cdn.jsdelivr.net.
 */

@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Bricolage Grotesque";
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	src: url(../fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url(../fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	src: url(../fonts/instrument-sans-latin-wght-normal.woff2) format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-bs-theme="light"] {
	--paper: #EEF1F4;      /* pozadí stránky */
	--surface: #FFFFFF;    /* plochy (panely, tabulka) */
	--ink: #182E45;        /* text - tmavá modrá značky InterneXt */
	--muted: #56657F;      /* vedlejší text (kontrast >= 4.5:1 na paper i surface) */
	--rule: #D5DCE5;       /* linky a okraje */
	--brand: #0054A6;      /* modrá z loga InterneXt - odkazy, tlačítka, fokus */
	--brand-red: #E20613;  /* červené "X" z loga - nejdražší den, růst ceny */
	--line: #0B8574;       /* "linka" - datové prvky (vlna, grafy), ladí s ilustracemi */
	--line-soft: #9ED8CE;  /* víkendy ve vlně, slabé plochy */
	--line-wash: #E0F2EF;  /* pozadí zvýrazněných řádků */
	--danger: #B42318;
	--art: #112241;        /* barva pozadí ilustrace přihlášení */

	--font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
	--font-text: "Instrument Sans", "Segoe UI", system-ui, sans-serif;

	--bs-body-bg: var(--paper);
	--bs-body-color: var(--ink);
	--bs-body-font-family: var(--font-text);
	--bs-border-color: var(--rule);
	--bs-link-color: var(--brand);
	--bs-link-color-rgb: 0, 84, 166;
	--bs-link-hover-color: var(--ink);
	--bs-secondary-color: var(--muted);
	--bs-tertiary-bg: var(--paper);
	--bs-primary: var(--brand);
	--bs-primary-rgb: 0, 84, 166;
	--bs-focus-ring-color: rgba(0, 84, 166, .3);
}

[data-bs-theme="dark"] {
	--paper: #0D1830;
	--surface: #14213D;
	--ink: #E7ECF4;
	--muted: #A3B0C6;
	--rule: #2A3A5C;
	--brand: #7AB3F0;      /* zesvětlená modrá značky - kontrast na tmavém pozadí */
	--brand-red: #FF4D57;
	--line: #3CC8B4;
	--line-soft: #2B6F68;
	--line-wash: #173A47;
	--danger: #FF8A80;

	--bs-body-bg: var(--paper);
	--bs-body-color: var(--ink);
	--bs-border-color: var(--rule);
	--bs-link-color: var(--brand);
	--bs-link-color-rgb: 122, 179, 240;
	--bs-link-hover-color: var(--ink);
	--bs-secondary-color: var(--muted);
	--bs-tertiary-bg: var(--paper);
	--bs-primary: var(--brand);
	--bs-primary-rgb: 122, 179, 240;
	--bs-focus-ring-color: rgba(122, 179, 240, .4);
}

/* ---------- základ ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-text);
	font-size: 1rem;
	line-height: 1.5;
	font-feature-settings: "tnum" 1;  /* čísla stejně široká - sloupce částek a časů */
}

h1, h2, h3 {
	font-family: var(--font-display);
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;  /* bez osamocených slov na posledním řádku */
}

.nowrap { white-space: nowrap; }

a { color: var(--brand); text-underline-offset: .2em; }
a:hover { color: var(--ink); }

:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
	position: absolute; left: 1rem; top: -3rem;
	background: var(--ink); color: var(--paper);
	padding: .5rem .75rem; border-radius: 6px; z-index: 10;
}
.skip-link:focus { top: .75rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- značka ---------- */

/* oficiální logo InterneXt (barevné / bílé) + název služby */
.brand {
	display: inline-flex; align-items: center; gap: .55rem;
	color: var(--ink); text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-logo { display: block; height: 1.9rem; width: auto; }
.brand-logo-white { display: none; }
[data-bs-theme="dark"] .brand-logo-colour, .brand-on-dark .brand-logo-colour { display: none; }
[data-bs-theme="dark"] .brand-logo-white, .brand-on-dark .brand-logo-white { display: block; }
.brand-service {
	font-family: var(--font-display);
	font-size: 1.15rem; font-weight: 500; letter-spacing: -0.01em;
	color: var(--muted);
	padding-left: .55rem; border-left: 1px solid var(--rule);
	line-height: 1.5rem;
}

/* ---------- tlačítka ---------- */

.btn-quiet, .icon-btn {
	display: inline-flex; align-items: center; gap: .45rem;
	font: inherit; font-weight: 550; font-size: .95rem;
	color: var(--ink); background: transparent;
	border: 1px solid var(--rule); border-radius: 999px;
	padding: .4rem .9rem; text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.btn-quiet:hover, .icon-btn:hover { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.icon-btn { padding: 0; width: 2.25rem; height: 2.25rem; justify-content: center; }

.btn-primary-app {
	display: block; width: 100%;
	font: inherit; font-weight: 650; font-size: 1.05rem;
	color: #fff; background: var(--ink);
	border: 0; border-radius: 10px; padding: .85rem 1rem; cursor: pointer;
	transition: background-color .15s;
}
.btn-primary-app:hover { background: var(--brand); }
[data-bs-theme="dark"] .btn-primary-app { background: var(--brand); color: #0D1830; }
[data-bs-theme="dark"] .btn-primary-app:hover { background: #A9CFF7; }

.link-btn {
	font: inherit; font-size: .875rem; color: var(--brand);
	background: none; border: 0; padding: 0; cursor: pointer;
	text-decoration: underline; text-underline-offset: .2em;
}

/* ---------- hlášky ---------- */

.flashes { max-width: 72rem; margin: 1rem auto 0; padding: 0 1rem; }
.flash {
	border-left: 4px solid var(--line);
	background: var(--surface); color: var(--ink);
	padding: .7rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: .75rem;
}
.flash-error { border-left-color: var(--danger); }

/* ---------- hlavička ---------- */

.topbar {
	background: var(--surface);
	border-bottom: 1px solid var(--rule);
}
.topbar-inner {
	max-width: 72rem; margin: 0 auto; padding: .7rem 1rem;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-number { font-weight: 600; color: var(--muted); margin-right: .4rem; white-space: nowrap; }
@media (max-width: 40rem) {
	.topbar-number { display: none; }
	.topbar .brand-service { display: none; }
}

/* ---------- stránka ---------- */

.page { max-width: 72rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.contract {
	display: flex; flex-wrap: wrap; gap: .4rem 2rem;
	margin: 0 0 1.25rem; font-size: .9rem;
}
.contract div { display: flex; gap: .45rem; }
.contract dt { font-weight: 400; color: var(--muted); }
.contract dd { margin: 0; font-weight: 600; }

/* ---------- výpis (hlavní blok) ---------- */

.statement {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 18px;
	padding: clamp(1.25rem, 3vw, 2.25rem);
}

.statement-head {
	display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem;
}
.statement-title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	font-variation-settings: "wdth" 100;
}
.statement-period { margin: .35rem 0 0; color: var(--muted); }

.periods {
	display: inline-flex; padding: 3px; gap: 2px;
	background: var(--paper); border-radius: 999px;
}
.period {
	padding: .4rem .95rem; border-radius: 999px;
	color: var(--muted); text-decoration: none; font-weight: 550; white-space: nowrap;
}
.period:hover { color: var(--ink); }
.period.is-current { background: var(--ink); color: var(--paper); }
.period span { font-weight: 400; opacity: .75; }
@media (max-width: 40rem) { .period span { display: none; } }

.statement-body {
	display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 1.5rem 3rem; align-items: start;
	margin-top: 1.75rem;
}
@media (max-width: 52rem) { .statement-body { grid-template-columns: 1fr; } }

.total-label { margin: 0; color: var(--muted); }
.total-amount {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 750;
	font-size: clamp(3rem, 9vw, 5.5rem);
	line-height: .95;
	letter-spacing: -0.035em;
	white-space: nowrap;
}
.total-unit {
	font-size: .38em; font-weight: 500; letter-spacing: 0;
	margin-left: .25em; color: var(--muted);
}
.delta { margin: .6rem 0 0; font-weight: 550; color: var(--muted); }
.delta.is-up::before, .delta.is-down::before {
	content: ""; display: inline-block; width: .55em; height: .55em;
	border-radius: 50%; margin-right: .45em; vertical-align: .05em;
}
.delta.is-up::before { background: var(--brand-red); }
.delta.is-down::before { background: var(--line); }

.facts {
	/* 6 údajů: vyvážený rastr 3x2, na mobilu 2x3 */
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem 1.5rem; margin: 0;
	border-left: 1px solid var(--rule); padding-left: 1.75rem;
}
@media (max-width: 52rem) { .facts { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; } }
@media (max-width: 30rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts dt { font-weight: 400; color: var(--muted); font-size: .875rem; }
.facts dd {
	margin: .1rem 0 0;
	font-family: var(--font-display); font-weight: 650; font-size: 1.5rem; letter-spacing: -0.015em;
}

/* vlna měsíce */
.wave { margin: 2rem 0 0; }
.wave svg { display: block; width: 100%; height: clamp(7rem, 14vw, 10rem); overflow: visible; }
.wave-axis { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wave-hit { fill: transparent; }
.wave-bar { fill: var(--line); transition: fill .12s; }
.wave-day.is-weekend .wave-bar { fill: var(--line-soft); }
.wave-day.is-silent .wave-bar { fill: var(--rule); }
.wave-day:hover .wave-bar, a:focus-visible .wave-bar { fill: var(--ink); }
.wave a { cursor: pointer; outline: none; }
.wave-peak { fill: var(--brand-red); }
.wave-days {
	display: grid; grid-template-columns: repeat(var(--days), minmax(0, 1fr));
	margin-top: .4rem; font-size: .75rem; color: var(--muted); text-align: center;
}
.wave-days span { visibility: hidden; }
.wave-days span:first-child, .wave-days span.is-monday { visibility: visible; }
.wave figcaption { margin-top: .75rem; font-size: .85rem; color: var(--muted); max-width: 60ch; }

.statement-actions {
	display: flex; flex-wrap: wrap; gap: .6rem;
	margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}

/* ---------- přehledy ---------- */

.insights {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem; margin-top: 1.25rem;
}
@media (max-width: 52rem) { .insights { grid-template-columns: 1fr; } }

.panel {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: 1.25rem 1.4rem 1.4rem;
	min-width: 0;
}
.panel-wide { grid-column: 1 / -1; }
.panel h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.panel-note { margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }

/* destinace */
.dest { list-style: none; margin: 0; padding: 0; }
.dest-row {
	display: grid; grid-template-columns: minmax(0, 1fr) auto;
	gap: .1rem 1rem; padding: .6rem .5rem; margin: 0 -.5rem;
	border-radius: 8px; color: var(--ink); text-decoration: none;
}
.dest-row:hover { background: var(--line-wash); color: var(--ink); }
.dest-name { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dest-cost { font-weight: 650; text-align: right; white-space: nowrap; }
.dest-bar {
	grid-column: 1 / -1; height: 6px; border-radius: 3px;
	background: linear-gradient(var(--line), var(--line)) no-repeat 0 0 / var(--w) 100%, var(--paper);
}
.dest-meta { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }

/* tepelná mapa */
.heat-scroll { overflow-x: auto; }
.heat { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .75rem; }
.heat th { color: var(--muted); font-weight: 500; text-align: center; padding: 0; }
.heat tbody th { text-align: left; padding-right: .4rem; font-size: .8rem; }
.heat td {
	height: 1.65rem; min-width: 1.1rem; border-radius: 4px;
	background: var(--paper);
	position: relative;
}
.heat td.has-calls::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit;
	background: var(--line); opacity: var(--a);
}

/* nejčastější čísla */
.numbers { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.numbers li { counter-increment: rank; border-top: 1px solid var(--rule); }
.numbers li:first-child { border-top: 0; }
.number-row {
	display: grid;
	grid-template-columns: 2rem minmax(10rem, 1.2fr) minmax(0, 1.5fr) 6rem 7rem 7rem;
	align-items: baseline; gap: 1rem;
	padding: .7rem .5rem; margin: 0 -.5rem; border-radius: 8px;
	color: var(--ink); text-decoration: none;
}
.number-row::before { content: counter(rank) "."; color: var(--muted); }
.number-row:hover { background: var(--line-wash); color: var(--ink); }
.number-value { font-weight: 650; white-space: nowrap; }
.number-dest { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.number-calls, .number-time, .number-cost { text-align: right; white-space: nowrap; }
.number-cost { font-weight: 600; }
@media (max-width: 52rem) {
	.number-row { grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: .15rem .75rem; }
	.number-dest { grid-column: 2 / -1; grid-row: 2; }
	.number-calls { grid-column: 2; grid-row: 3; text-align: left; color: var(--muted); }
	.number-time { display: none; }
	.number-cost { grid-column: 3; grid-row: 1; }
}

/* ---------- tabulka hovorů (datagrid) ---------- */

.calls { margin-top: 2.5rem; scroll-margin-top: 1rem; }
.calls h2 { font-size: 1.6rem; }
.calls-head {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: .75rem 1rem; margin-bottom: 1rem;
}

/* filtr dne datagridu ovládá kalendář nad tabulkou - samotný select se nezobrazuje */
.calls select[name="filter[call_time_start]"] { display: none; }

/* ---------- kalendář výběru dne ---------- */

.daypick { position: relative; }
.daypick.is-filtered .daypick-toggle { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.daypick-caret { font-size: .7em; opacity: .7; }
.daypick-panel {
	position: absolute; right: 0; top: calc(100% + .5rem); z-index: 20;
	width: 20.5rem; max-width: calc(100vw - 2rem);
	background: var(--surface); color: var(--ink);
	border: 1px solid var(--rule); border-radius: 14px;
	box-shadow: 0 18px 40px -12px rgba(20, 33, 61, .35);
	padding: 1rem;
}
.daypick-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; }
.daypick-month { margin: 0; font-family: var(--font-display); font-weight: 650; font-size: 1.15rem; }
.daypick-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.daypick-wd { text-align: center; font-size: .75rem; color: var(--muted); padding-bottom: .2rem; }
.daypick-day {
	position: relative; aspect-ratio: 1; min-width: 0;
	display: flex; align-items: center; justify-content: center;
	font: inherit; font-weight: 600; font-size: .95rem; color: var(--ink);
	background: var(--paper); border: 0; border-radius: 8px; cursor: pointer;
	isolation: isolate;
}
/* podbarvení podle počtu hovorů (--a 0..1), text zůstává čitelný nad vrstvou */
.daypick-day::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
	background: var(--line); opacity: calc(var(--a) * .55);
}
.daypick-day.is-weekend .daypick-num { color: var(--muted); }
.daypick-day:hover:not([disabled]) { outline: 2px solid var(--ink); outline-offset: -2px; }
.daypick-day[disabled] { cursor: default; color: var(--muted); opacity: .45; background: transparent; }
.daypick-day[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.daypick-day[aria-pressed="true"]::before { opacity: 0; }
.daypick-day[aria-pressed="true"] .daypick-num { color: var(--paper); }
.daypick-count {
	position: absolute; top: 3px; right: 5px;
	font-size: .62rem; font-weight: 600; line-height: 1; opacity: .75;
}
.daypick-note { margin: .75rem 0 0; font-size: .78rem; color: var(--muted); }
@media (max-width: 40rem) {
	.daypick { width: 100%; }
	.daypick-toggle { width: 100%; justify-content: center; }
	.daypick-panel { left: 0; right: auto; width: 100%; max-width: none; }
}

.calls .datagrid {
	background: var(--surface);
	border: 1px solid var(--rule);
	border-radius: 14px;
	padding: .5rem;
}
/* vodorovné posouvání jen na úzkých displejích - overflow ořezává i rozbalovací prvky filtrů */
@media (max-width: 64rem) { .calls .datagrid { overflow-x: auto; } }
.calls .table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--ink);
	--bs-table-border-color: var(--rule);
	--bs-table-striped-bg: transparent;
	--bs-table-hover-bg: var(--line-wash);
	margin-bottom: 0;
	font-size: .95rem;
}
.calls .table > thead th {
	font-weight: 600; color: var(--muted); font-size: .85rem;
	border-bottom-width: 1px; white-space: nowrap; vertical-align: bottom;
}
.calls .table > thead th a { color: var(--muted); text-decoration: none; }
.calls .table > thead th a:hover { color: var(--ink); }
.calls .table td { vertical-align: middle; }
/* datagrid 7.1 dává zarovnání třídou text-right z Bootstrapu 4, kterou Bootstrap 5 nezná */
.calls .table .text-right { text-align: right; }
/* bez svislých čar - tabulka je už v kartě, svislé linky dělaly dvojitý rám */
.calls .table-bordered > :not(caption) > * > * { border-left-width: 0; border-right-width: 0; }
.calls .table-bordered > :not(caption) > * { border-width: 0; }
/* číselné sloupce jen tak široké, jak je potřeba */
.calls .table .col-call_length_sec, .calls .table .col-cost { width: 1%; white-space: nowrap; padding-left: 1.5rem; }
.calls .form-control, .calls .form-select {
	background-color: var(--paper); border-color: var(--rule); color: var(--ink);
	font-size: .875rem; border-radius: 8px;
}
.calls .btn {
	--bs-btn-border-radius: 999px;
	--bs-btn-font-weight: 550;
}
.calls .btn-primary, .calls .btn-secondary, .calls .btn-outline-secondary {
	--bs-btn-bg: var(--surface);
	--bs-btn-color: var(--ink);
	--bs-btn-border-color: var(--rule);
	--bs-btn-hover-bg: var(--ink);
	--bs-btn-hover-color: var(--paper);
	--bs-btn-hover-border-color: var(--ink);
	--bs-btn-active-bg: var(--ink);
	--bs-btn-active-color: var(--paper);
}
.calls .pagination {
	--bs-pagination-bg: var(--surface);
	--bs-pagination-color: var(--ink);
	--bs-pagination-border-color: var(--rule);
	--bs-pagination-hover-bg: var(--line-wash);
	--bs-pagination-hover-color: var(--ink);
	--bs-pagination-active-bg: var(--ink);
	--bs-pagination-active-border-color: var(--ink);
	--bs-pagination-active-color: var(--paper);
	--bs-pagination-disabled-bg: var(--surface);
	--bs-pagination-disabled-color: var(--muted);
	--bs-pagination-border-radius: 8px;
}

/* ---------- prázdný stav ---------- */

.empty {
	text-align: center; padding: 2.5rem 1rem 3rem;
	background: var(--surface); border: 1px solid var(--rule); border-radius: 18px;
}
.empty img { max-width: min(100%, 32rem); height: auto; }
.empty h1, .empty h2 { font-size: 1.6rem; margin-top: 1rem; }
.empty p { color: var(--muted); max-width: 46ch; margin: .6rem auto 0; }
[data-bs-theme="dark"] .empty img { filter: invert(1) hue-rotate(180deg) brightness(1.1); }

/* ---------- patička ---------- */

.site-footer {
	border-top: 1px solid var(--rule);
	margin-top: 1rem;
	color: var(--muted); font-size: .9rem;
}
.footer-grid {
	max-width: 72rem; margin: 0 auto; padding: 2rem 1rem 1rem;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem;
}
@media (max-width: 52rem) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h2 { font-size: 1rem; color: var(--ink); margin-bottom: .5rem; }
.site-footer p { margin: 0 0 .4rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .3rem; }
.site-footer a { color: var(--ink); }
.site-footer a:hover { color: var(--brand); }
.footer-muted { font-size: .85rem; }
.footer-legal {
	max-width: 72rem; margin: 0 auto !important; padding: 1rem 1rem 2.5rem;
	font-size: .8rem;
}

/* ---------- přihlášení ---------- */

body.sign {
	min-height: 100vh;
	display: grid; grid-template-columns: minmax(18rem, 5fr) 7fr;
}
.sign-art {
	position: relative;
	/* horní okraj ztmavený, aby logo nekolidovalo s koncem šňůry v ilustraci */
	background:
		linear-gradient(180deg, var(--art) 0, var(--art) 4.5rem, rgba(17, 34, 65, 0) 11rem),
		var(--art) url(../img/login-art.jpg) center 35% / cover no-repeat;
	color: #E7ECF4;
	padding: 2rem 2.25rem;
	display: flex; flex-direction: column; justify-content: space-between;
}
.brand-on-dark { color: #fff; }
.brand-on-dark .brand-service { color: #C9D3E3; border-left-color: rgba(255, 255, 255, .3); }
.sign-art-claim {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	font-weight: 600; line-height: 1.2; letter-spacing: -0.015em;
	max-width: 17ch; margin: 0;
	text-wrap: balance;
}
.sign-main {
	display: flex; align-items: center; justify-content: center;
	padding: 2.5rem 1.25rem;
}
.sign-panel { width: 100%; max-width: 25rem; }
.sign-title { font-size: clamp(1.6rem, 3vw, 2rem); }
.sign-lead { color: var(--muted); margin: .6rem 0 1.75rem; }
.sign-form .field { margin-bottom: 1.1rem; }
.sign-form label { display: block; font-weight: 600; margin-bottom: .35rem; }
.password-wrap { position: relative; }
.sign-form .password-wrap input { padding-right: 5.5rem; }
.reveal-btn {
	position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
	padding: .35rem .5rem; border-radius: 6px;
}
.sign-form input[type="text"], .sign-form input[type="password"] {
	width: 100%;
	font: inherit; font-size: 1.05rem; color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule); border-radius: 10px;
	padding: .75rem .9rem;
	transition: border-color .15s, box-shadow .15s;
}
.sign-form input:focus {
	outline: none; border-color: var(--brand);
	box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
.sign-form .btn-primary-app { margin-top: 1.5rem; }
.form-error {
	border-left: 4px solid var(--danger); background: var(--surface);
	padding: .6rem .9rem; border-radius: 0 8px 8px 0; margin-bottom: 1.25rem;
}
.form-error p { margin: 0; }
.sign-help { margin-top: 2rem; font-size: .9rem; color: var(--muted); }
.sign .flash { margin-bottom: 1.25rem; }

@media (max-width: 52rem) {
	body.sign { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
	.sign-art {
		min-height: 13rem; gap: 1.5rem; padding: 1.25rem 1rem;
		/* text přes ilustraci: ztmavení zleva kvůli čitelnosti */
		background-image: linear-gradient(90deg, rgba(17, 34, 65, .92) 40%, rgba(17, 34, 65, .2)), url(../img/login-art.jpg);
		background-position: center, center 40%;
	}
	.sign-art-claim { font-size: 1.35rem; }
	.sign-main { align-items: flex-start; padding-top: 2rem; }
}

/* ---------- chybové stránky ---------- */

.error-page { max-width: 40rem; margin: 0 auto; padding: 4rem 1rem; }
.error-page h1 { font-size: clamp(2rem, 5vw, 3rem); }
.error-page p { color: var(--muted); font-size: 1.1rem; }

/* ---------- tisk ---------- */

@media print {
	:root, [data-bs-theme] {
		--paper: #fff; --surface: #fff; --ink: #000; --muted: #444; --rule: #bbb;
		--line: #0B8574; --line-soft: #9ED8CE;
	}
	.topbar-actions, .statement-actions, .periods, .skip-link, .site-footer,
	.calls, .wave figcaption, .number-row::before { display: none !important; }
	.statement, .panel { border: 0; padding: 0; }
	.insights { grid-template-columns: 1fr 1fr; }
	.panel { break-inside: avoid; }
	a { color: inherit; text-decoration: none; }
	body { font-size: 11pt; }
}

/* úzké displeje: tabulka hovorů se neláme do vysokých řádků, ale posouvá se vodorovně */
@media (max-width: 52rem) {
	.calls .table td, .calls .table th { white-space: nowrap; }
}
.error-page .error-code { font-size: .85rem; margin-top: 2rem; }

/* patička datagridu (počet hovorů, stránkování): datagrid.css má pevně světlé pozadí a #ddd okraj */
.calls [data-datagrid-name] .row-grid-bottom {
	background: transparent;
	border: 0; border-top: 1px solid var(--rule);
	color: var(--muted);
}
.calls [data-datagrid-name] .row-grid-bottom .col-items { color: var(--muted); }
/* pole s chybou (nastavuje klientská validace v telefonie.js) */
.sign-form input[aria-invalid="true"] { border-color: var(--danger); }