/* Výchozí styly - světlé schéma */
:root {
	--background-color: #d6d6d6;
	--bg-color: #fff;
	--theme-color: #2d8c26;
	--theme-overflow: #236e1d;
	--light-color: white;
	--success-light: #cceac2;
	--success-dark: #005523;
	--headline-color: #ffc555;
	--shadow-color: #8afa00;
	--conversion-color: #268c55;
	--danger-light: #cfbebe;
	--danger-color: #ac0000;
	--danger-dark: #810000;
	--warning-light: #ecd6ab;
	--warning-color: orange;
	--warning-dark: #a36b00;
	--info-light: #59e1ff;
	--info-color: #0061cd;
	--info-dark: #004497;
	--active-color: #ddff00;
	--hover-color: #ececec;
	--inverse-color: white;
	--dark-color: silver;
	--superdark-color: #5c5c5c;
	--text-color: black;
	--nav-color: white;
	--navhover-color: #ffc555;
}

/* Gird settings */
.col-1 {width: 8.33% !important;}
.col-2 {width: 16.66% !important;}
.col-3 {width: 25% !important;}
.col-4 {width: 33.33% !important;}
.col-5 {width: 41.66% !important;}
.col-6 {width: 50% !important;}
.col-7 {width: 58.33% !important;}
.col-8 {width: 66.66% !important;}
.col-9 {width: 75% !important;}
.col-10 {width: 83.33% !important;}
.col-11 {width: 91.66% !important;}
.col-12 {width: 100% !important;}

.wrapper {
	display: block;
	align-content: center;
	margin: 0;
	padding: 0;
	clear: both
}
.container {
	display: block;
	margin: .6rem 1rem;
	padding: 1rem;
}

/* typo */
@font-face {
	font-family: 'Open Sans Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans Regular'), url('../font/OpenSans-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans SemiBold';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans SemiBold'), url('../font/OpenSans-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans Bold'), url('../font/OpenSans-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans Italic'), url('../font/OpenSans-Italic.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Light';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans Light'), url('../font/OpenSans-Light.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans Light Italic';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans Light Italic'), url('../font/OpenSans-LightItalic.woff') format('woff');
}

.text-end {
	text-align: end;
}
.text-center {
	text-align: center;
}
.text-start {
	text-align: start;
}
.text-smaller {
	font-size: smaller;
}

.text-success {
	color: var(--success-dark);
}
.text-info {
	color: var(--info-dark);
}
.text-danger {
	color: var(--danger-dark);
}
.text-semibold {
	font-family: "Open Sans SemiBold", sans-serif !important;
	font-weight: normal;
}
.text-bold, strong {
	font-family: 'Open Sans Bold', sans-serif !important;
	font-weight: normal;
}

h1, h2, h3, h4, h5, h6, strong {
	font-family: 'Open Sans Bold', sans-serif;
	font-weight: normal;
	margin: 0;
	padding: 0;
}
h2 {
	margin: 0 0 1.8rem 0;
}
h1 > span, h2 > span, h3 > span, h4 > span, h5 > span, h6 > span {
	font-family: 'Open Sans Light', sans-serif;
	font-weight: normal;
	font-size: smaller;
}

slot {
	font-size: smaller;
	display: inline-flex;
	margin: 0;
	padding: .2rem .4rem;
	border: 0;
	border-radius: 6px;
	color: var(--inverse-color);
}
slot.outline {
	border: var(--theme-color) 1px solid;
	color: var(--text-color);
}
slot.success {
	background-color: var(--theme-color);
}
slot.danger {
	background-color: var(--danger-color);
}
slot.warning {
	background-color: var(--warning-color);
}
slot.info {
	background-color: var(--info-color);
}
slot.outline.danger {
	border-color: var(--danger-color);
	background-color: transparent;
	color: var(--danger-color);
}

/* defaults */
body {
	font-family: "Open Sans Regular", sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
	margin: 0;
	padding: 0;
}
/* tables */
table {
	width: 100%;
	margin: .6rem auto;
	padding: 0;
	border: var(--text-color) 1px solid;
	border-spacing: 0;
	background-color: var(--bg-color);
}
table > thead > tr {
	background-color: var(--info-light);
	color: var(--info-color);
}
table > tbody > tr {
	background-color: var(--bg-color);
}
table.hover > tbody > tr:hover {
	background-color: var(--hover-color);
}
table > tfoot > tr {
	background-color: var(--dark-color);
}
table > tfoot > tr > td {
	font-size: smaller;
}
thead > tr > th {
	font-family: 'Open Sans Bold', sans-serif;
	font-weight: normal;
}
td, th {
	padding: .1rem .4rem;
}

/* forms */
form {
	display: block;
}
form > table > tbody > tr > th, form > table > tbody > tr > td  {
	text-align: start;
	align-content: start;
	font-family: "Open Sans Light", sans-serif;
	font-weight: normal;
}
label {
	font-family: "Open Sans Regular", sans-serif;
	font-weight: normal;
}
label.required {
	font-family: 'Open Sans SemiBold', sans-serif;
	font-weight: normal;
}
input[type="text"],
input[type="password"] {
	width: 100%;
	font-family: "Open Sans Regular", sans-serif;
	font-weight: normal;
	font-size: 1rem;
}
input[type="checkbox"] {
	margin: 0 1rem 0 0;
}
input[type=submit] {
	display: flex;
	height: fit-content;
	border: none;
	border-radius: .4rem;
	background-color: var(--theme-color);
	font-family: "Open Sans SemiBold", sans-serif;
	font-weight: normal;
	color: var(--light-color);
	font-size: 1.4rem;
	line-height: 1rem;
	text-decoration: none;
	margin: 1rem 0 0 0;
	padding: 1rem 1.8rem;
}
input[type=submit]:hover {
	background-color: var(--theme-overflow);
	color: var(--headline-color);
}

input[readonly],
textarea[readonly],
select[disabled] {
	background-color: var(--danger-light);
	border: 1px solid var(--danger-color);
	color: var(--superdark-color);
	cursor: not-allowed;
}
input[type="checkbox"][disabled],
input[type="radio"][disabled] {
	background-color: var(--danger-light);
	cursor: not-allowed;
}
select[disabled] {
	background-color: var(--danger-light);
	border: 1px solid var(--danger-color);
	color: var(--superdark-color);
	cursor: not-allowed;
}

div.formControls {
	display: block;
	margin: 0;
	padding: 5px;
	width: 100%;
}
div.formGroup {
	display: block;
	margin: 0 0 5px 0;
	padding: 10px 5px 0 5px;
	width: 100%;
	font-family: 'Open Sans Bold', sans-serif;
	font-weight: normal;
	border: 1px solid var(--theme-color);
	background-color: var(--hover-color);
}
div.formPair {
	display: flex;
	margin: 0;
	padding: 5px;
	width: 99%;
	border: 0;
	border-top: 1px solid var(--background-color);
}
div.formLabel {
	display: inline-flex;
	margin: 0;
	width: 300px;
}
div.formControl {
	display: inline-flex;
	margin: 0;
	width: 100%;
}
div.formControl > select,
div.formControl > input[type="text"],
div.formControl > textarea,
div.formControl > input[type="number"],
div.formControl > input[type="date"],
div.formControl > input[type="datetime-local"] {
	width: 250px;
	height: 18px;
	font-family: "Open Sans Regular", sans-serif;
	font-weight: normal;
	font-size: 14px;
	border: 0;
	border-radius: 4px;
	padding: 5px;
	margin: 0;
}
div.formControl > textarea {
	height: 140px;
}
div.formControl > label > input[type="radio"] {
	margin: 0 5px 0 0;
}
div.formControl > label {
	display: inline-block;
	margin: 0 10px 0 0;
}
div.formControl > select {
	width: 265px;
	height: 24px;
}
div.formControl > span {
	font-family: "Open Sans Light", sans-serif;
	font-weight: normal;
	font-size: 14px;
	display: inline-block;
	margin: 0 0 0 24px;
}

/* buttons and links */
.btn {
	display: flex;
	height: fit-content;
	border: none;
	border-radius: .4rem;
	background-color: var(--conversion-color);
	color: var(--inverse-color);
	font-size: 1rem;
	line-height: 1rem;
	text-decoration: none;
	padding: 0.4rem 1rem;
}
.btn:hover {
	color: var(--conversion-color);
}
.btn.ico {
	display: inline-block;
	margin: 0;
	padding: .3rem;
	max-width: 20px;
}
.btn.info {
	background-color: var(--info-color);
	color: var(--info-light);
}
.btn.info:hover {
	color: var(--nav-color);
	background-color: var(--info-dark);
}
.btn.warning {
	background-color: var(--warning-color);
	color: var(--warning-light);
}
.btn.warning:hover {
	color: var(--nav-color);
	background-color: var(--warning-dark);
}
.btn.danger {
	background-color: var(--danger-color);
	color: var(--danger-light);
}
.btn.danger:hover {
	color: var(--nav-color);
	background-color: var(--danger-dark);
}
.btn.solitare {
	display: block;
	float: right;
	background-color: var(--theme-color);
	padding: 1rem 2rem;
	margin: .4rem 0 .4rem .4rem;
}
.btn.solitare:hover {
	color: var(--navhover-color);
}

.icon {
	width: 30px;
	height: 30px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0) saturate(100%) invert(1); /* Bílá barva */
	transition: filter 0.3s;
}
.icon.small {
	width: 18px;
	height: 18px;
	filter: brightness(1) invert(1) sepia(0) saturate(10000%) hue-rotate(180deg) brightness(100%) contrast(100%);
}
.icon:hover {
	filter: brightness(1) invert(1) sepia(1) saturate(10000%) hue-rotate(310deg) brightness(100%) contrast(100%); /* Převod černé barvy na #ffc555 (barva jako --headline-color) */
}
.icon.small:hover {
	filter: brightness(0) saturate(100%) invert(1);
}

.ico-delete {
	background-image: url("../img/icons/trash-can.svg");
}
.ico-edit {
	background-image: url("../img/icons/pen-to-square.svg");
}
.ico-eye {
	background-image: url("../img/icons/eye.svg");
}
.ico-eyeSlash {
	background-image: url("../img/icons/eye-slash.svg");
}
.ico-exit {
	background-image: url('../img/icons/arrow-right-to-bracket.svg');
}
.ico-moon {
	background-image: url("../img/icons/moon.svg");
}
.ico-plus {
	background-image: url('../img/icons/plus.svg');
}
.ico-send {
	background-image: url("../img/icons/paper-plane.svg");
}
.ico-user {
	background-image: url("../img/icons/user.svg");
}

a {
	color: var(--info-color);
}
a:hover {
	color: var(--text-color);
}
a.active {
	color: var(--theme-color);
}

/* Tmavé schéma */
@media (prefers-color-scheme: dark) {
	:root {
		--background-color: black;
		--bg-color: #3e3e3e;
		--success-light: #536c33;
		--success-dark: #d0ff00;
		--shadow-color: #447702;
		--conversion-color: #856b00;
		--danger-light: #6c2823;
		--danger-dark: #bd0000;
		--warning-light: #6c562b;
		--info-light: #0f4560;
		--info-color: #0079ff;
		--info-dark: #0079ff;
		--inverse-color: #000000;
		--dark-color: #505050;
		--superdark-color: #989898;
		--hover-color: #353535;
		--text-color: #c6c6c6;
		--nav-color: black;
		--navhover-color: white;
	}

	.icon {
		filter: brightness(0) saturate(100%) invert(0); /* Bílá barva */
	}
	.icon:hover {
		filter: brightness(0) invert(1) sepia(0) saturate(10000%) hue-rotate(0deg) brightness(100%) contrast(100%);
	}
}

/* fakturace */
.inline-form {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	flex-wrap: wrap;
}
.inline-form input[type="search"],
.inline-form input[type="date"] {
	width: 260px;
	padding: 3px 5px;
	font-size: 14px;
}
.inline-form input[type=submit] {
	margin: 0;
	padding: .3rem .8rem;
	font-size: 14px;
}
ul.error {
	color: var(--danger-color);
}
.invoice-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .6rem 0;
}
.invoice-paid {
	margin: .6rem 0;
	padding: .4rem .6rem;
	background-color: var(--success-light);
}
.invoice-preview {
	margin: 1rem 0;
	padding: 1.5rem;
	border: 1px solid var(--dark-color);
	background-color: var(--bg-color);
	max-width: 900px;
}
table.invoice-items input,
table.invoice-items select {
	width: 100%;
	box-sizing: border-box;
	padding: 3px 5px;
	font-size: 14px;
}
table.invoice-items .item-description {
	width: 45%;
}
table.invoice-items .item-quantity,
table.invoice-items .item-price {
	width: 12%;
}
table.invoice-items .item-unit,
table.invoice-items .item-vat {
	width: 8%;
}
table.invoice-items .item-quantity input,
table.invoice-items .item-price input {
	text-align: right;
}
table.invoice-items .item-total {
	white-space: nowrap;
}

/* přehled (dashboard) a společné komponenty sekcí */
:root {
	--card-color: #fff;
	--card-border: rgba(11, 11, 11, .10);
	--muted-color: #6b6a66;
	--series-paid: #2d8c26;
	--series-unpaid: #eda100;
	--meter-track: #dcebd9;
	--chart-ink: #0b0b0b;
	--chart-muted: #6b6a66;
	--chart-grid: #e8e7e1;
	--chart-axis: #c3c2b7;
	--chart-hover: rgba(45, 140, 38, .07);
	--segment-bg: #efeeea;
	--row-hover: #f7f7f4;
	--input-bg: #fff;
	--input-border: rgba(11, 11, 11, .18);
	--focus-ring: rgba(45, 140, 38, .30);
}
.dashboard, .page {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 1280px;
	margin: 1rem auto;
}
.dashboard h3, .page h3 {
	font-size: 1.05rem;
}
.tabular {
	font-variant-numeric: tabular-nums;
}
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
	gap: 1rem;
}
.tile, .panel {
	background-color: var(--card-color);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.tile {
	display: flex;
	flex-direction: column;
	gap: .3rem;
	padding: 1rem 1.2rem;
	color: var(--text-color);
	text-decoration: none;
}
a.tile-link:hover {
	color: var(--text-color);
	border-color: var(--theme-color);
}
.tile-label {
	display: flex;
	align-items: center;
	color: var(--muted-color);
	font-size: .9rem;
}
.tile-value {
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: 1.6rem;
	line-height: 1.2;
}
.tile-value.hero {
	font-family: 'Open Sans Bold', sans-serif;
	font-size: 2.2rem;
	color: var(--theme-color);
}
.tile-value small {
	font-family: 'Open Sans Regular', sans-serif;
	font-size: .55em;
	color: var(--muted-color);
}
.tile-note {
	color: var(--muted-color);
	font-size: .85rem;
}
.tile-note.text-danger {
	color: var(--danger-dark);
}
.status-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	margin-right: .2rem;
	border-radius: 50%;
	background-color: var(--danger-dark);
	color: #fff;
	font-family: 'Open Sans Bold', sans-serif;
	font-size: .7rem;
}
.panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
	gap: 1rem;
}
.panel {
	padding: 1.2rem 1.4rem;
}
.panel-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 1rem;
}
.panel-note {
	color: var(--muted-color);
	font-size: .85rem;
}
.panel-link {
	color: var(--theme-color);
	text-decoration: none;
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .9rem;
}
.panel-link:hover {
	color: var(--theme-overflow);
	text-decoration: underline;
}
.legend {
	display: flex;
	gap: 1rem;
	color: var(--muted-color);
	font-size: .85rem;
}
.legend span {
	display: inline-flex;
	align-items: center;
}
.swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: .4rem;
	border-radius: 2px;
}
.swatch.paid {
	background-color: var(--series-paid);
}
.swatch.unpaid {
	background-color: var(--series-unpaid);
}

/* graf */
.chart {
	position: relative;
	width: 100%;
	min-height: 260px;
	overflow: hidden;
}
.chart svg {
	display: block;
	font-family: 'Open Sans Regular', sans-serif;
}
.chart-tooltip {
	position: absolute;
	min-width: 220px;
	padding: .6rem .8rem;
	background-color: var(--card-color);
	border: 1px solid var(--card-border);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
	font-size: .85rem;
	pointer-events: none;
}
.chart-tooltip strong {
	display: block;
	margin-bottom: .3rem;
	text-transform: capitalize;
}
.chart-tooltip-row {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}
.chart-tooltip-row > span:first-child {
	display: inline-flex;
	align-items: center;
	color: var(--muted-color);
}
.chart-tooltip-row.total {
	margin-top: .3rem;
	padding-top: .3rem;
	border-top: 1px solid var(--card-border);
	font-family: 'Open Sans SemiBold', sans-serif;
}
.chart-table {
	margin-top: .6rem;
	color: var(--muted-color);
	font-size: .85rem;
}
.chart-table summary {
	cursor: pointer;
}

/* tabulky a pásma v kartách */
.panel table {
	margin: 0;
	border: 0;
	background-color: transparent;
}
.panel table > thead > tr {
	background-color: transparent;
	color: var(--muted-color);
}
.panel table th {
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .85rem;
	border-bottom: 1px solid var(--card-border);
}
.panel table td, .panel table th {
	padding: .45rem .4rem;
}
.panel table > tbody > tr {
	background-color: transparent;
}
.panel table > tbody > tr + tr > td {
	border-top: 1px solid var(--card-border);
}
.band + .band {
	margin-top: 1.2rem;
}
.band-head, .band-values {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}
.band-values {
	margin-top: .5rem;
}
.band-values > div {
	display: flex;
	flex-direction: column;
}
.band-values > div + div {
	text-align: end;
}
.meter {
	height: 10px;
	margin-top: .4rem;
	border-radius: 5px;
	background-color: var(--meter-track);
	overflow: hidden;
}
.meter-fill {
	height: 100%;
	border-radius: 5px;
	background-color: var(--series-paid);
}
.meter.warning {
	background-color: var(--warning-light);
}
.meter.warning .meter-fill {
	background-color: var(--warning-dark);
}
.meter.danger {
	background-color: var(--danger-light);
}
.meter.danger .meter-fill {
	background-color: var(--danger-color);
}

@media (prefers-color-scheme: dark) {
	:root {
		--card-color: #262626;
		--card-border: rgba(255, 255, 255, .10);
		--muted-color: #a3a29c;
		--series-paid: #228220;
		--series-unpaid: #bd8700;
		--meter-track: #2f3b2e;
		--chart-ink: #f0efec;
		--chart-muted: #a3a29c;
		--chart-grid: #333331;
		--chart-axis: #4a4a47;
		--chart-hover: rgba(255, 255, 255, .05);
		--segment-bg: #1b1b1b;
		--row-hover: #2d2d2d;
		--input-bg: #1e1e1e;
		--input-border: rgba(255, 255, 255, .16);
		--focus-ring: rgba(63, 178, 54, .35);
	}
	.tile-value.hero {
		color: #3fb236;
	}
}

/* sekce (faktury, výdaje, adresář) - hlavička stránky */
.page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}
.page-header h2 {
	margin: 0;
	font-size: 1.6rem;
	line-height: 1.25;
}
.page-header h2 .badge {
	vertical-align: middle;
	margin-left: .4rem;
}
.page-subtitle {
	font-family: 'Open Sans Light', sans-serif;
	color: var(--muted-color);
}
.crumbs {
	margin-bottom: .2rem;
	font-size: .85rem;
	color: var(--muted-color);
}
.crumbs a {
	color: var(--muted-color);
	text-decoration: none;
}
.crumbs a:hover {
	color: var(--theme-color);
	text-decoration: underline;
}
.page-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

/* tlačítka */
.button, .page input[type=submit] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 0;
	padding: .55rem 1rem;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	background-color: var(--card-color);
	color: var(--text-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .9rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.button:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}
.button.primary, .page input[type=submit] {
	border-color: var(--theme-color);
	background-color: var(--theme-color);
	color: #fff;
}
.button.primary:hover, .page input[type=submit]:hover {
	border-color: var(--theme-overflow);
	background-color: var(--theme-overflow);
	color: #fff;
}
.button.warning {
	color: var(--warning-dark);
}
.button.warning:hover {
	border-color: var(--warning-dark);
	background-color: var(--warning-dark);
	color: #fff;
}
.button.danger {
	color: var(--danger-color);
}
.button.danger:hover {
	border-color: var(--danger-color);
	background-color: var(--danger-color);
	color: #fff;
}
.page input[type=submit].secondary {
	border-color: var(--card-border);
	background-color: var(--card-color);
	color: var(--text-color);
}
.page input[type=submit].secondary:hover {
	border-color: var(--theme-color);
	color: var(--theme-color);
}
.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}
.button-group .spacer {
	flex: 1;
}

/* ikonová tlačítka v řádcích tabulek - ikona maskou, barví se přes currentColor */
.row-actions {
	display: inline-flex;
	gap: 2px;
	justify-content: flex-end;
}
.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 6px;
	color: var(--muted-color);
}
.icon-btn::before {
	content: '';
	width: 15px;
	height: 15px;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.icon-btn:hover {
	background-color: var(--segment-bg);
	color: var(--theme-color);
}
.icon-btn.danger:hover {
	color: var(--danger-color);
}
.icon-btn.accent {
	color: var(--theme-color);
}
.i-edit { --icon: url("../img/icons/pen-to-square.svg"); }
.i-delete { --icon: url("../img/icons/trash-can.svg"); }
.i-eye { --icon: url("../img/icons/eye.svg"); }
.i-send { --icon: url("../img/icons/paper-plane.svg"); }
.i-plus { --icon: url("../img/icons/plus.svg"); }
.i-download { --icon: url("../img/icons/download.svg"); }
.i-eye-slash { --icon: url("../img/icons/eye-slash.svg"); }

/* filtry a hledání */
.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .8rem;
	margin-bottom: 1rem;
}
.toolbar-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}
.segmented {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 2px;
	padding: 3px;
	border-radius: 8px;
	background-color: var(--segment-bg);
}
.segmented a {
	padding: .3rem .7rem;
	border-radius: 6px;
	color: var(--muted-color);
	font-size: .85rem;
	text-decoration: none;
	white-space: nowrap;
}
.segmented a:hover {
	color: var(--text-color);
}
.segmented a.active {
	background-color: var(--card-color);
	color: var(--theme-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.search {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4rem;
}
.search input[type=search], .search input[type=text] {
	width: 280px;
	max-width: 100%;
	box-sizing: border-box;
}
.search input[type=submit] {
	padding: .5rem .9rem;
}
.search a {
	font-size: .85rem;
	color: var(--muted-color);
}
.filter-chip {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .25rem .4rem .25rem .7rem;
	border-radius: 999px;
	background-color: var(--segment-bg);
	font-size: .85rem;
}
.filter-chip a {
	color: var(--muted-color);
	text-decoration: none;
	padding: 0 .3rem;
}
.filter-chip a:hover {
	color: var(--danger-color);
}

/* datové tabulky */
.table-scroll {
	overflow-x: auto;
	margin: 0 -.4rem;
}
.panel table.data {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}
.panel table.data th {
	color: var(--muted-color);
	font-size: .8rem;
	white-space: nowrap;
	padding: .6rem .6rem;
}
.panel table.data td {
	padding: .55rem .6rem;
	vertical-align: middle;
}
.panel table.data > tbody > tr:hover {
	background-color: var(--row-hover);
}
.panel table.data > tbody > tr + tr > td {
	border-top: 1px solid var(--card-border);
}
.panel table.data > tfoot > tr {
	background-color: transparent;
}
.panel table.data > tfoot > tr > td {
	padding-top: .8rem;
	border-top: 1px solid var(--card-border);
	color: var(--muted-color);
}
table.data td.empty {
	padding: 2.5rem 1rem;
	color: var(--muted-color);
	text-align: center;
}
table.data .nowrap {
	white-space: nowrap;
}
table.data a.strong-link, .band a.strong-link {
	color: var(--text-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	text-decoration: none;
}
table.data a.strong-link:hover, .band a.strong-link:hover {
	color: var(--theme-color);
	text-decoration: underline;
}
.cell-sub {
	display: block;
	color: var(--muted-color);
	font-size: .8rem;
}
.muted {
	color: var(--muted-color);
}
.amount {
	font-family: 'Open Sans SemiBold', sans-serif;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.table-footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: .8rem;
	padding-top: .8rem;
	border-top: 1px solid var(--card-border);
	color: var(--muted-color);
	font-size: .8rem;
}

/* štítky stavů (vždy s textem, barva jen doplňuje) */
.badge {
	display: inline-flex;
	align-items: center;
	padding: .15rem .55rem;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--segment-bg);
	color: var(--text-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .75rem;
	line-height: 1.4;
	white-space: nowrap;
}
.badge.outline {
	border-color: var(--card-border);
	background-color: transparent;
	color: var(--muted-color);
}
.badge.success {
	background-color: #e3f2e1;
	color: #1f6b1a;
}
.badge.info {
	background-color: #e2ecfa;
	color: #1c5cab;
}
.badge.warning {
	background-color: #fbefd5;
	color: #8a5a00;
}
.badge.danger {
	background-color: #f9e0e0;
	color: #a32020;
}
.badge.violet {
	background-color: #ebe8fa;
	color: #4a3aa7;
}

/* upozornění */
.callout {
	padding: .8rem 1rem;
	border-radius: 8px;
	border-left: 4px solid var(--info-color);
	background-color: var(--segment-bg);
	font-size: .9rem;
}
.callout.danger {
	border-left-color: var(--danger-color);
}
.callout.warning {
	border-left-color: var(--warning-dark);
}
.callout.success {
	border-left-color: var(--theme-color);
}

/* definiční seznam údajů (detail dokladu) */
.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem 1.4rem;
	margin: 0;
}
.facts dt {
	color: var(--muted-color);
	font-size: .8rem;
}
.facts dd {
	margin: .15rem 0 0;
	font-family: 'Open Sans SemiBold', sans-serif;
}

/* formuláře v kartě - Nette výchozí renderer (tabulka) i ruční formPair */
.page input[type=text], .page input[type=search], .page input[type=email], .page input[type=number],
.page input[type=date], .page input[type=time], .page input[type=password], .page input[type=tel], .page input[type=url],
.page select, .page textarea,
.page div.formControl > select, .page div.formControl > input[type=text], .page div.formControl > textarea,
.page div.formControl > input[type=number], .page div.formControl > input[type=date] {
	height: auto;
	box-sizing: border-box;
	padding: .5rem .7rem;
	border: 1px solid var(--input-border);
	border-radius: 8px;
	background-color: var(--input-bg);
	color: var(--text-color);
	font-family: 'Open Sans Regular', sans-serif;
	font-size: .95rem;
}
.page input:focus, .page select:focus, .page textarea:focus {
	outline: 3px solid var(--focus-ring);
	outline-offset: 0;
	border-color: var(--theme-color);
}
.page input[readonly], .page textarea[readonly], .page select[disabled] {
	background-color: var(--segment-bg);
	border-color: var(--input-border);
	color: var(--muted-color);
}
.form-card form > table, .form-card fieldset > table {
	width: 100%;
	margin: 0;
	border: 0;
	background-color: transparent;
}
.form-card table > tbody > tr {
	background-color: transparent;
}
.form-card form > table > tbody > tr > th, .form-card fieldset > table > tbody > tr > th {
	width: 230px;
	padding: 1.05rem 1.2rem .4rem 0;
	vertical-align: top;
	text-align: start;
	color: var(--muted-color);
	font-size: .9rem;
}
.form-card form > table > tbody > tr > td, .form-card fieldset > table > tbody > tr > td {
	padding: .4rem 0;
}
.form-card form > table input[type=text], .form-card form > table input[type=email], .form-card form > table input[type=number],
.form-card form > table input[type=date], .form-card form > table input[type=password], .form-card form > table select,
.form-card fieldset input[type=text], .form-card fieldset input[type=email], .form-card fieldset input[type=number],
.form-card fieldset input[type=date], .form-card fieldset select {
	width: 100%;
	max-width: 440px;
}
.form-card textarea {
	width: 100%;
	max-width: 640px;
	min-height: 96px;
}
.form-card td > small, .form-card .formControl > small {
	display: block;
	margin-top: .3rem;
	color: var(--muted-color);
	font-size: .8rem;
}
.form-card fieldset {
	margin: 0 0 1.4rem;
	padding: 0 0 1rem;
	border: 0;
	border-bottom: 1px solid var(--card-border);
}
.form-card fieldset:last-of-type {
	border-bottom: 0;
}
.form-card legend {
	padding: 0 0 .4rem;
	font-family: 'Open Sans Bold', sans-serif;
	font-size: 1.05rem;
}
.form-card input[type=submit] {
	margin: .6rem .4rem 0 0;
	padding: .65rem 1.4rem;
	font-size: .95rem;
}
.form-card ul.error {
	margin: 0 0 1rem;
	padding: .8rem 1rem .8rem 2rem;
	border-radius: 8px;
	background-color: var(--segment-bg);
	border-left: 4px solid var(--danger-color);
}
.form-card div.formPair {
	align-items: center;
	width: auto;
	padding: .4rem 0;
	border: 0;
}
.form-card div.formLabel {
	flex-shrink: 0;
	width: 230px;
	color: var(--muted-color);
	font-size: .9rem;
}
.form-card div.formControl {
	align-items: center;
	flex-wrap: wrap;
	gap: .6rem;
}
.form-card div.formControl > select, .form-card div.formControl > input[type=text], .form-card div.formControl > input[type=date] {
	width: 100%;
	max-width: 440px;
}
.form-card div.formControl > input.narrow {
	width: 90px;
}
.form-card div.formControl > textarea {
	width: 100%;
	max-width: 640px;
	height: auto;
	min-height: 70px;
}
.form-section {
	margin: 1.4rem 0 .6rem;
	font-family: 'Open Sans Bold', sans-serif;
	font-size: 1.05rem;
}
@media (max-width: 700px) {
	.form-card form > table > tbody > tr > th, .form-card fieldset > table > tbody > tr > th,
	.form-card form > table > tbody > tr > td, .form-card fieldset > table > tbody > tr > td {
		display: block;
		width: auto;
		padding: .3rem 0;
	}
	.form-card div.formPair {
		flex-direction: column;
		align-items: stretch;
	}
}

/* položky dokladu ve formuláři */
.panel table.invoice-items td {
	padding: .35rem .3rem;
}
.panel table.invoice-items input, .panel table.invoice-items select {
	padding: .4rem .55rem;
	font-size: .9rem;
}
.panel table.invoice-items > tfoot > tr > td {
	padding-top: .8rem;
	border-top: 1px solid var(--card-border);
	color: var(--text-color);
}
.invoice-sum {
	font-size: 1.1rem;
}

/* náhled dokladu - vždy jako papír */
.page .invoice-preview {
	max-width: 900px;
	margin: 0;
	padding: 2rem;
	border: 1px solid var(--card-border);
	border-radius: 10px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}
.detail-grid {
	display: grid;
	grid-template-columns: minmax(0, 900px) minmax(260px, 1fr);
	gap: 1rem;
	align-items: start;
}
.detail-grid > aside {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
@media (max-width: 1100px) {
	.detail-grid {
		grid-template-columns: 1fr;
	}
}
.paid-form {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
}
.paid-form label {
	color: var(--muted-color);
	font-size: .9rem;
}

/* potvrzení smazání */
.confirm {
	max-width: 720px;
}
.confirm p {
	margin: 0 0 1rem;
}

@media (prefers-color-scheme: dark) {
	.badge.success {
		background-color: rgba(63, 178, 54, .18);
		color: #8ad883;
	}
	.badge.info {
		background-color: rgba(57, 135, 229, .20);
		color: #9cc3f3;
	}
	.badge.warning {
		background-color: rgba(237, 161, 0, .18);
		color: #f0c463;
	}
	.badge.danger {
		background-color: rgba(230, 103, 103, .20);
		color: #f29b9b;
	}
	.badge.violet {
		background-color: rgba(144, 133, 233, .22);
		color: #c0b8f5;
	}
	.button.danger {
		color: #f08080;
	}
	.button.warning {
		color: #f0c463;
	}
}
.panel table > tfoot > tr {
	background-color: transparent;
}
.page form > .panel + .panel {
	margin-top: 1rem;
}
table.data td a:not(.icon-btn):not(.button):not(.badge) {
	color: var(--theme-color);
	text-decoration: none;
}
table.data td a:not(.icon-btn):not(.button):not(.badge):hover {
	text-decoration: underline;
}
table.data a.strong-link {
	color: var(--text-color) !important;
}
a.badge {
	text-decoration: none;
}
a.badge:hover {
	border-color: var(--theme-color);
}
.panel.form-card table > tbody > tr + tr > td, .panel.form-card table > tbody > tr + tr > th {
	border-top: 0;
}
.panel.form-card form > table th, .panel.form-card fieldset > table th {
	border-bottom: 0;
}
.panel-header.chart-subheader {
	margin: 1.4rem 0 .4rem;
	padding-top: 1rem;
	border-top: 1px solid var(--card-border);
}

/* průběžný výpočet odvodů na přehledu */
.panel-stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.tax-results {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1rem;
	margin-bottom: .6rem;
}
.tax-result {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}
.tax-result strong {
	font-size: 1.35rem;
}
.tax-result-note {
	color: var(--muted-color);
	font-size: .8rem;
}
.tax-basis {
	margin: .8rem 0 0;
	color: var(--muted-color);
	font-size: .8rem;
	line-height: 1.5;
}
.panel details.chart-table + .callout {
	margin-top: 1rem;
	font-size: .8rem;
}
.band-values strong.limit-value {
	font-size: 1.35rem;
}

/* přílohy dokladu */
ul.attachments {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}
ul.attachments li {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem 0;
	border-bottom: 1px solid var(--card-border);
}
ul.attachments li:last-child {
	border-bottom: 0;
}
ul.attachments li > a:first-child {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--theme-color);
	text-decoration: none;
}
ul.attachments li > a:first-child:hover {
	text-decoration: underline;
}
.form-card input[type=file] {
	padding: .4rem 0;
	font-size: .9rem;
}

/* datum za štítkem stavu na stejném řádku */
.inline-date {
	margin-left: .35rem;
	color: var(--muted-color);
	font-size: .8rem;
	white-space: nowrap;
}
.button.small {
	padding: .3rem .75rem;
	font-size: .8rem;
}
.button.warning.filled {
	border-color: #8a5a00;
	background-color: #8a5a00;
	color: #fff;
}
.button.warning.filled:hover {
	border-color: #6e4800;
	background-color: #6e4800;
	color: #fff;
}
@media (prefers-color-scheme: dark) {
	.button.warning.filled {
		border-color: #d49a1a;
		background-color: #d49a1a;
		color: #0b0b0b;
	}
	.button.warning.filled:hover {
		border-color: #f0b63a;
		background-color: #f0b63a;
		color: #0b0b0b;
	}
}
.form-card div.formControl > small {
	flex-basis: 100%;
	margin-top: 0;
}

/* tabulka výdajů na přehledu - hustší řádky, aby se vešlo víc měsíců */
.expenses-table {
	margin-top: .6rem;
}
.panel table.data.compact th, .panel table.data.compact td {
	padding: .3rem .6rem;
	font-size: .85rem;
}
.panel[data-fit-height] > p:last-of-type {
	margin-bottom: 0;
}
@media (prefers-color-scheme: dark) {
	/* tmavě červená z globální palety je na tmavých kartách nečitelná */
	.dashboard .text-danger, .page .text-danger {
		color: #f07a7a;
	}
}

/* výkaz práce - týdenní kalendář */
.calendar {
	--hour-height: 44px;
	--label-width: 52px;
	border: 1px solid var(--card-border);
	border-radius: 8px;
	overflow-x: auto;
}
.calendar-head, .calendar-allday, .calendar-body {
	display: grid;
	grid-template-columns: var(--label-width) repeat(7, minmax(110px, 1fr));
	min-width: calc(var(--label-width) + 7 * 110px);
}
.calendar-head {
	border-bottom: 1px solid var(--card-border);
}
.calendar-day-head {
	display: flex;
	flex-direction: column;
	padding: .5rem .6rem;
	border-left: 1px solid var(--card-border);
	font-size: .85rem;
}
.calendar-day-name {
	color: var(--muted-color);
	text-transform: capitalize;
}
.calendar-day-date {
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: 1.05rem;
}
.calendar-day-total {
	min-height: 1.2em;
	color: var(--muted-color);
}
.calendar-day-head.today .calendar-day-date, .calendar-day-head.today .calendar-day-name {
	color: var(--theme-color);
}
.calendar-corner {
	padding: .4rem;
	font-size: .75rem;
}
.calendar-allday {
	border-bottom: 1px solid var(--card-border);
}
.calendar-allday-cell {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 3px;
	border-left: 1px solid var(--card-border);
}
.calendar-hours {
	display: grid;
	grid-template-rows: repeat(var(--hours), var(--hour-height));
}
.calendar-hour-label {
	padding: 0 .4rem;
	color: var(--muted-color);
	font-size: .75rem;
	text-align: end;
	transform: translateY(-.5em);
}
.calendar-hour-label:first-child {
	transform: none;
}
.calendar-column {
	position: relative;
	display: grid;
	grid-template-rows: repeat(var(--hours), var(--hour-height));
	border-left: 1px solid var(--card-border);
}
.calendar-column.today {
	background-color: var(--chart-hover);
}
.calendar-slot {
	border-top: 1px solid var(--chart-grid);
}
a.calendar-slot:hover {
	background-color: var(--row-hover);
	box-shadow: inset 0 0 0 1px var(--theme-color);
}
.calendar-entry {
	position: absolute;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 20px;
	padding: 2px 6px;
	overflow: hidden;
	border-left: 4px solid var(--project-color);
	border-radius: 5px;
	background-color: color-mix(in srgb, var(--project-color) 16%, var(--card-color));
	color: var(--text-color);
	font-size: .75rem;
	line-height: 1.3;
	text-decoration: none;
	z-index: 1;
}
.calendar-entry.allday {
	position: static;
}
.calendar-entry.internal {
	background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127, 127, 127, .10) 6px 12px);
}
a.calendar-entry:hover {
	color: var(--text-color);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	z-index: 2;
}
.calendar-entry-time {
	color: var(--muted-color);
	white-space: nowrap;
}
.calendar-entry-title {
	font-family: 'Open Sans SemiBold', sans-serif;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.calendar-entry-desc {
	color: var(--muted-color);
	overflow: hidden;
	text-overflow: ellipsis;
}
.project-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: .4rem;
	border-radius: 50%;
	background-color: var(--project-color);
}

/* výkaz práce - filtr přehledu, přiložení k dokladu, formulář záznamu */
.report-filter, .attach-form {
	display: flex;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: .6rem 1rem;
}
.report-filter label {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	color: var(--muted-color);
	font-size: .85rem;
}
.report-filter select {
	max-width: 260px;
}
.attach-form {
	align-items: center;
	margin-top: 1rem;
}
.attach-form select {
	max-width: 420px;
}
.attach-form input[type=submit] {
	margin: 0;
}
.timesheet-form input[type=time] {
	width: 120px;
}
.timesheet-form input[name=duration][readonly] {
	width: 90px;
}

/* výkaz práce - import z Clockify */
.panel table.import-map select {
	max-width: 300px;
}
.panel table.import-map input.rate {
	width: 110px;
}
.import-confirm {
	margin: 1rem 0 .4rem;
}

/* výkaz práce - změna času záznamu potažením okraje */
.calendar-resize {
	position: absolute;
	left: 0;
	right: 0;
	z-index: 1;
	height: 7px;
	cursor: ns-resize;
	touch-action: none;
}
.calendar-resize.start {
	top: 0;
}
.calendar-resize.end {
	bottom: 0;
}
.calendar-resize::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 2px;
	width: 22px;
	height: 3px;
	margin-left: -11px;
	border-radius: 2px;
	background-color: var(--project-color);
	opacity: 0;
	transition: opacity .15s;
}
.calendar-entry:hover .calendar-resize::after, .calendar-entry.resizing .calendar-resize::after {
	opacity: .7;
}
.calendar-entry.resizing {
	z-index: 4;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: ns-resize;
	user-select: none;
}
.calendar-entry.saving {
	opacity: .6;
	pointer-events: none;
}
@media (pointer: coarse) {
	.calendar-resize {
		height: 12px;
	}
	.calendar-resize::after {
		top: 4px;
		opacity: .5;
	}
}
/* výkaz práce - čárka aktuálního času v kalendáři */
.calendar-now {
	position: absolute;
	left: 0;
	right: 0;
	height: 2px;
	margin-top: -1px;
	background-color: #e5322d;
	pointer-events: none;
	z-index: 3;
}
.calendar-now::before {
	content: '';
	position: absolute;
	left: -5px;
	top: -4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #e5322d;
}
.calendar-now[hidden] {
	display: none;
}

/* tlačítko nahoru - na všech stránkách */
.scroll-top {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--theme-color);
	color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .2s, transform .2s, visibility .2s, background-color .2s;
}
.scroll-top.visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.scroll-top:hover {
	background-color: var(--theme-overflow);
}
.scroll-top:focus-visible {
	outline: 3px solid var(--focus-ring);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.scroll-top {
		transition: none;
	}
}

/* hlavní menu */
.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background-color: var(--theme-color);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
	font-family: 'Open Sans SemiBold', sans-serif;
}
.topbar-inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	max-width: 1280px;
	height: 60px;
	margin: 0 auto;
	padding: 0 1rem;
}
.topbar a {
	text-decoration: none;
}
/* na desktopu jsou odkazy i odhlášení přímo v liště, aby šel zvonek zařadit před odhlášení */
.topbar-menu {
	display: contents;
}
.topbar-links {
	display: flex;
	gap: .2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.topbar-links a {
	display: block;
	padding: .45rem .75rem;
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	font-size: .95rem;
	white-space: nowrap;
}
.topbar-links a:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}
.topbar-links a.current {
	background-color: rgba(255, 255, 255, .2);
	color: #fff;
}
.topbar-actions {
	display: flex;
	order: 2;
	align-items: center;
	gap: .4rem;
	margin-left: -1.1rem;
}
.topbar-ico {
	display: inline-block;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}
.i-exit { --icon: url("../img/icons/arrow-right-to-bracket.svg"); }
.topbar-create {
	position: relative;
	flex-shrink: 0;
}
.topbar-create-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	background-color: var(--headline-color);
	color: #3b2a00;
	list-style: none;
	cursor: pointer;
	user-select: none;
}
.topbar-create-btn .topbar-ico {
	width: 16px;
	height: 16px;
}
.topbar-create-btn::-webkit-details-marker {
	display: none;
}
.topbar-create-btn:hover, .topbar-create[open] .topbar-create-btn {
	background-color: #ffd47a;
}
.topbar-dropdown {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 1;
	min-width: 200px;
	margin: 0;
	padding: .35rem;
	list-style: none;
	background-color: var(--card-color);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.topbar-dropdown a {
	display: block;
	padding: .5rem .75rem;
	border-radius: 6px;
	color: var(--text-color);
	font-family: 'Open Sans Regular', sans-serif;
	font-size: .9rem;
}
.topbar-dropdown a:hover {
	background-color: var(--segment-bg);
	color: var(--theme-color);
}
.topbar-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: 36px;
	height: 36px;
	border-radius: 8px;
	color: rgba(255, 255, 255, .85);
	font-size: .95rem;
}
.topbar-logout:hover {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}
.topbar-logout .topbar-ico {
	width: 16px;
	height: 16px;
}
.topbar-logout-label {
	display: none;
}
.topbar-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-left: auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: #fff;
	cursor: pointer;
}
.topbar-toggle:hover {
	background-color: rgba(255, 255, 255, .12);
}
/* hamburger ze tří čar, v otevřeném stavu křížek */
.topbar-toggle span, .topbar-toggle span::before, .topbar-toggle span::after {
	display: block;
	width: 20px;
	height: 2px;
	border-radius: 1px;
	background-color: currentColor;
	transition: transform .2s, background-color .2s;
}
.topbar-toggle span {
	position: relative;
}
.topbar-toggle span::before, .topbar-toggle span::after {
	content: '';
	position: absolute;
	left: 0;
}
.topbar-toggle span::before {
	top: -6px;
}
.topbar-toggle span::after {
	top: 6px;
}
.topbar.open .topbar-toggle span {
	background-color: transparent;
}
.topbar.open .topbar-toggle span::before {
	transform: translateY(6px) rotate(45deg);
}
.topbar.open .topbar-toggle span::after {
	transform: translateY(-6px) rotate(-45deg);
}
.topbar a:focus-visible, .topbar summary:focus-visible, .topbar-toggle:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .6);
	outline-offset: 1px;
}
.topbar-dropdown a:focus-visible {
	outline-color: var(--focus-ring);
}

@media (max-width: 960px) {
	.topbar-toggle {
		display: inline-flex;
		order: 2;
		margin-left: -1.1rem;
	}
	.topbar-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: .75rem;
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		padding: .5rem 1rem 1rem;
		background-color: var(--theme-color);
		box-shadow: 0 8px 16px rgba(0, 0, 0, .2);
		box-sizing: border-box;
	}
	.topbar.open .topbar-menu {
		display: flex;
	}
	.topbar-links {
		flex-direction: column;
	}
	.topbar-links a {
		padding: .7rem .8rem;
		font-size: 1rem;
	}
	.topbar-actions {
		margin-left: 0;
		padding-top: .75rem;
		border-top: 1px solid rgba(255, 255, 255, .2);
	}
	.topbar-logout {
		height: auto;
		padding: .6rem .8rem;
	}
	.topbar-logout-label {
		display: inline;
	}
}
@media (prefers-reduced-motion: reduce) {
	.topbar-toggle span, .topbar-toggle span::before, .topbar-toggle span::after {
		transition: none;
	}
}

/* přihlášení */
.page.login {
	justify-content: center;
	box-sizing: border-box;
	max-width: 420px;
	min-height: 100vh;
	margin: 0 auto;
	padding: 1.5rem 1rem;
}
.login-card {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	padding: 2rem 2rem 1.8rem;
}
.login-brand {
	text-align: center;
}
.login-brand img {
	display: block;
	width: 96px;
	height: 80px;
	margin: 0 auto .8rem;
	object-fit: contain;
}
.login-brand h1 {
	font-size: 1.5rem;
	line-height: 1.25;
}
.login-brand h1 span {
	color: var(--muted-color);
	font-size: .8rem;
}
.login-brand p {
	margin: .3rem 0 0;
	color: var(--muted-color);
	font-size: .9rem;
}
.login-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.login-form ul.error {
	margin: 0;
	padding: .8rem 1rem .8rem 2rem;
	border-radius: 8px;
	border-left: 4px solid var(--danger-color);
	background-color: var(--segment-bg);
}
.login-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}
.login-field label {
	color: var(--muted-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .85rem;
}
.page .login-field input {
	width: 100%;
	padding: .65rem .8rem;
	font-size: 1rem;
}
.login-error {
	color: var(--danger-color);
	font-size: .8rem;
}
.login-remember label {
	display: inline-flex;
	align-items: center;
	color: var(--muted-color);
	font-size: .9rem;
	cursor: pointer;
}
.login-remember input[type=checkbox] {
	margin: 0 .5rem 0 0;
	accent-color: var(--theme-color);
}
.page .login-form input[type=submit] {
	justify-content: center;
	width: 100%;
	padding: .75rem 1rem;
	font-size: 1rem;
}
@media (max-width: 480px) {
	.login-card {
		padding: 1.5rem 1.2rem;
	}
}

/* uživatelé systému */
.badge-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .25rem;
}

/* centrum zpráv v liště */
.topbar-notify {
	position: relative;
	order: 1;
	margin-left: auto;
}
.topbar-notify-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: transparent;
	color: rgba(255, 255, 255, .85);
	cursor: pointer;
}
.topbar-notify-btn:hover, .topbar-notify-btn[aria-expanded=true] {
	background-color: rgba(255, 255, 255, .12);
	color: #fff;
}
.topbar-notify-btn:focus-visible {
	outline: 3px solid rgba(255, 255, 255, .6);
	outline-offset: 1px;
}
.topbar-notify-count {
	position: absolute;
	top: 2px;
	right: 1px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 8px;
	background-color: var(--headline-color);
	color: #3b2a00;
	font-family: 'Open Sans Bold', sans-serif;
	font-size: .65rem;
	line-height: 16px;
	text-align: center;
}
.topbar-notify-count[hidden] {
	display: none;
}
.notify-panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 1;
	width: 340px;
	max-height: min(480px, calc(100vh - 90px));
	overflow-y: auto;
	background-color: var(--card-color);
	border: 1px solid var(--card-border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: var(--text-color);
	font-family: 'Open Sans Regular', sans-serif;
}
.notify-panel[hidden] {
	display: none;
}
.notify-panel-header {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .7rem .9rem;
	border-bottom: 1px solid var(--card-border);
	background-color: var(--card-color);
	font-size: .9rem;
}
.notify-clear {
	padding: .2rem .4rem;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--muted-color);
	font-family: 'Open Sans SemiBold', sans-serif;
	font-size: .8rem;
	cursor: pointer;
}
.notify-clear:hover {
	background-color: var(--segment-bg);
	color: var(--danger-color);
}
.notify-clear[hidden], .notify-empty[hidden] {
	display: none;
}
.notify-list {
	margin: 0;
	padding: .3rem;
	list-style: none;
}
.notify-item {
	--notify-color: var(--info-color);
	display: flex;
	flex-direction: column;
	gap: .15rem;
	padding: .55rem .7rem .55rem .9rem;
	border-left: 3px solid var(--notify-color);
	border-radius: 4px 6px 6px 4px;
	font-size: .85rem;
}
.notify-item + .notify-item {
	margin-top: .3rem;
}
.notify-item.unread {
	background-color: color-mix(in srgb, var(--notify-color) 9%, var(--card-color));
}
.notify-item.success { --notify-color: var(--theme-color); }
.notify-item.warning { --notify-color: var(--warning-color); }
.notify-item.danger { --notify-color: var(--danger-color); }
.notify-time {
	color: var(--muted-color);
	font-size: .75rem;
}
.notify-empty {
	margin: 0;
	padding: 1.4rem .9rem;
	color: var(--muted-color);
	font-size: .85rem;
	text-align: center;
}

/* flash zprávy jako toasty - samy zmizí, proužek dole ukazuje zbývající čas */
.toasts {
	position: fixed;
	top: 72px;
	right: 1rem;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	width: min(380px, calc(100vw - 2rem));
	pointer-events: none;
}
.toast {
	--toast-color: var(--info-color);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	padding: .8rem .8rem .9rem 1rem;
	overflow: hidden;
	border: 1px solid var(--card-border);
	border-left: 4px solid var(--toast-color);
	border-radius: 10px;
	background-color: var(--card-color);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	color: var(--text-color);
	font-size: .9rem;
	line-height: 1.4;
	pointer-events: auto;
	animation: toast-in .25s ease-out;
}
.toast.success { --toast-color: var(--theme-color); }
.toast.warning { --toast-color: var(--warning-color); }
.toast.danger { --toast-color: var(--danger-color); }
.toast::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background-color: var(--toast-color);
	opacity: .35;
	transform-origin: left;
	animation: toast-progress var(--toast-time, 5s) linear forwards;
}
.toast.paused::after {
	animation-play-state: paused;
}
.toast.leaving {
	opacity: 0;
	transform: translateX(16px);
	transition: opacity .25s, transform .25s;
}
.toast-message {
	flex: 1;
}
.toast-close {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin: -.15rem -.2rem 0 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: none;
	color: var(--muted-color);
	font-size: 1.2rem;
	line-height: 1;
	cursor: pointer;
}
.toast-close:hover {
	background-color: var(--segment-bg);
	color: var(--text-color);
}
@keyframes toast-in {
	from { opacity: 0; transform: translateY(-8px); }
}
@keyframes toast-progress {
	to { transform: scaleX(0); }
}
@media (max-width: 960px) {
	.topbar-notify {
		order: 1;
	}
	.notify-panel {
		position: fixed;
		top: 68px;
		left: .75rem;
		right: .75rem;
		width: auto;
	}
	.toasts {
		top: 68px;
		right: .75rem;
		width: calc(100vw - 1.5rem);
	}
}
@media (prefers-reduced-motion: reduce) {
	.toast, .toast.leaving {
		animation: none;
		transition: none;
	}
	.toast::after {
		animation-name: none;
	}
}