@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200);

.material-symbols-rounded {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	font-size: 24px;
	line-height: 1;
	vertical-align: middle;
	user-select: none;
}

:root {
	color-scheme: light dark;
}

body {
	font-family: Roboto, sans-serif;
	background: #ecf0f5;
	margin: 0;
	color: rgba(0, 0, 0, 0.87);
	font-size: 16px;
}

nav {
	background-color: #1E88E5;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.21);
	box-sizing: border-box;
	color: white;
	text-align: left;
	position: sticky;
	top: 0;
	/* Stacking order: nav(100) < drawer-overlay(200) < side-drawer(201) < swal2(~1060 from lib). */
	z-index: 100;
}

/* Push SweetAlert2 top-positioned toasts below the sticky nav bar. */
.swal2-container.swal2-top,
.swal2-container.swal2-top-start,
.swal2-container.swal2-top-end {
	top: 60px !important;
}
@media only screen and (max-width: 500px) {
	.swal2-container.swal2-top,
	.swal2-container.swal2-top-start,
	.swal2-container.swal2-top-end {
		top: 50px !important;
	}
}

/* ------------------------------------------------------------------ */
/* SweetAlert2 app-styled overrides.                                    */
/* Applied via customClass in js/script.js: `zbc-swal` for dialogs,     */
/* `zbc-swal-danger` added when the dialog is destructive,              */
/* `zbc-toast` for toasts. Auto-switches with prefers-color-scheme.     */

.zbc-swal.swal2-popup {
	border-radius: 12px;
	padding: 24px 20px 20px;
	font-family: inherit;
	background: #ffffff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}
.zbc-swal .swal2-title {
	font-size: 18px;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.87);
	padding: 0 8px;
	margin: 8px 0 4px;
}
.zbc-swal .swal2-html-container {
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	line-height: 1.5;
	margin: 8px 0 4px;
}
.zbc-swal .swal2-actions {
	gap: 8px;
	margin-top: 20px;
}
.zbc-swal .swal2-styled {
	border-radius: 20px;
	padding: 8px 22px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	min-width: 100px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
	transition: background-color 0.2s, box-shadow 0.2s;
}
.zbc-swal .swal2-styled.swal2-confirm {
	background-color: #1E88E5;
	color: #ffffff;
}
.zbc-swal .swal2-styled.swal2-confirm:hover {
	background-color: #1a7fd4;
	box-shadow: 0 2px 6px rgba(30, 136, 229, 0.3);
}
.zbc-swal .swal2-styled.swal2-confirm:focus {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(30, 136, 229, 0.25);
}

.zbc-swal-danger .swal2-styled.swal2-confirm {
	background-color: #F44336;
}
.zbc-swal-danger .swal2-styled.swal2-confirm:hover {
	background-color: #e53935;
	box-shadow: 0 2px 6px rgba(244, 67, 54, 0.3);
}
.zbc-swal-danger .swal2-styled.swal2-confirm:focus {
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(244, 67, 54, 0.25);
}

.zbc-swal .swal2-styled.swal2-cancel {
	background-color: transparent;
	color: rgba(0, 0, 0, 0.6);
	box-shadow: none;
}
.zbc-swal .swal2-styled.swal2-cancel:hover {
	background-color: rgba(0, 0, 0, 0.05);
}
.zbc-swal .swal2-styled.swal2-cancel:focus {
	box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Toast variant — compact, auto-theming. */
.swal2-popup.zbc-toast {
	border-radius: 10px;
	padding: 12px 16px;
	background: #ffffff;
	color: rgba(0, 0, 0, 0.87);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.08);
	font-family: inherit;
}
.swal2-popup.zbc-toast .swal2-title {
	font-size: 14px;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.87);
	padding: 0;
	margin: 0;
}
.swal2-popup.zbc-toast .swal2-icon {
	margin: 0 10px 0 0;
}

nav .nav-inner {
	display: flex;
	align-items: stretch;
}

nav .title {
	display: flex;
	line-height: 40px;
	padding: 10px;
	font-size: 25px;
	flex: 1;
	white-space: nowrap;
	overflow-x: hidden;
}

nav .title .title-text {
	white-space: nowrap;
	overflow-x: auto;
}

nav .menu {
	list-style: none;
	margin: 0 10px 0 0;
	padding: 0;
	display: flex;
	align-items: stretch;
}

nav .menu li {
	padding: 0;
	display: flex;
	align-items: stretch;
	position: relative; /* Za dropdown meni */
}
/* Hover on the button itself, not the li — otherwise hovering a dropdown
   item bubbles :hover up to its ancestor li and visually highlights the
   wrong neighbour. */
nav .menu .dropdownbtn:hover {
	background-color: #1565C0;
}

.dropdown {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 200px;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
	z-index: 101; /* above the sticky nav (z-index 100) */
	padding: 6px 0;
}
.dropdown-show {
	display: block;
}
/* Nav dropdowns pop as a floating card just below the top of the button,
   overlapping the nav bar like a Material menu. */
nav .menu .dropdown-show {
	top: 8px;
	right: 8px;
}
.dropdownbtn {
	cursor: pointer;
	position: relative;
	height: 100%;
	display: inline-flex;
	align-items: center;
	padding: 0 16px;
}

.dropdown a {
    color: rgba(0,0,0,0.87);
    padding: 10px 20px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}
.dropdown a:hover {
    background-color: rgba(0,0,0,0.06);
}

.dropdown a.danger {
    color: #F44336;
}
.dropdown a.danger:hover {
    background-color: rgba(244,67,54,0.10);
}

nav .menu li.kebab .kebab-btn {
    padding: 0 12px;
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: white;
    opacity: 0.85;
}
nav .menu li.kebab .kebab-btn:hover {
    opacity: 1;
}
nav .menu li.kebab .kebab-btn .material-symbols-rounded {
    font-size: 24px;
}

.container {
	padding: 10px;
	box-sizing: border-box;
	display: block;
	float: left;
}

.card {
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
	transition: background 0.2s;
	width: 100%;
	box-sizing: border-box;
	border-radius: 12px;
}
a.card {
	text-decoration: none;
	color: inherit;
}
a.card:hover {
	background: rgba(30,136,229,0.08);
	transition: background 0.2s;
}

.card .card-head {
	border-bottom: 1px solid #f4f4f4;
	padding: 10px 12px;
	box-sizing: border-box;
	min-height: 44px;
	display: flex;
	align-items: center;
}
.card .card-head h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 400;
	flex: 1;
}
.card .card-body {
	padding: 12px;
}
.card-body .vertical {
	display: flex;
}
.card-body .vertical span, .card-body .vertical input, .card-body .vertical select, .card-body .vertical label {
	flex: 1;
}
.card-body .vertical .spacer {
	width: 16px;
	flex: 0 1 auto;
}
.card hr {
	border: none;
	border-top: 1px solid #f4f4f4;
}
.card .card-foot {
	border-top: 1px solid #f4f4f4;
	padding: 0;
	display: flex;
	align-items: center;
}
.card .card-foot .card-foot-text {
	display: inline-block;
	padding: 12px;
	flex: 1;
}
.card .card-foot.card-foot-buttons {
	padding: 0;
	text-align: right;
}

.img-button {
	cursor: pointer;
	opacity: 0.54;
}
.img-button:hover {
	opacity: 0.87;
}

.sym-warning {
	color: #f57c00;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sym-error {
	color: #d32f2f;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sym-success {
	color: #388e3c;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.sym-info {
	color: #1976d2;
	font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.progress {
	display: flex;
	align-items: center;
	height: 28px;
	background: linear-gradient(to right, var(--progress-color, #1E88E5) 0%, var(--progress-color, #1E88E5) var(--progress-width, 50%), #f0f0f0 var(--progress-width, 50%), #f0f0f0 100%);
	border-radius: 4px;
	margin-bottom: 8px;
	padding: 0 12px;
	position: relative;
	color: #000;
	font-size: 14px;
	overflow: hidden;
}
.progress-text {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 50%;
}
.progress-detail {
	flex: 1;
	text-align: right;
	white-space: nowrap;
}
.progress-detail-wrapper {
	display: none;
}

.card .card-left {
	
}
.card .card-single {
	flex: 1;
	display: flex;
	align-items: center;
	margin: 0 20px;
	font-size: 18px;
}

.container-header {
	padding-bottom: 0;
}
h1 {
	margin: 0;
	font-weight: 400;
	font-size: 24px;
}

.container-header h1 {
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(0,0,0,0.54);
}

input.big {
	width: 100%;
	box-sizing: border-box;
	font-size: 25px;
	text-align: center;
	border: 1px solid #bdbdbd;
	background-color: white;
	padding: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-radius: 8px;
	outline: none;
	transition: box-shadow 0.2s;
}
input.big:focus {
	box-shadow: 0 0 0 2px #1E88E5;
}
input.big2 {
	font-size: 22px;
	width: 100%;
	box-sizing: border-box;
	padding: 5px;
	border-radius: 8px;
	border: 2px solid #bdbdbd;
	margin-bottom: 10px;
	outline: none;
	transition: box-shadow 0.2s;
}
input.big2:focus {
	box-shadow: 0 0 0 2px #1E88E5;
}

/* Modern form layout — centered single-column card with labeled fields. */
.form-container {
	max-width: 600px;
	margin: 24px auto 32px;
	padding: 0 16px;
	box-sizing: border-box;
	float: none;
}
.form-container.has-bottom-bar {
	margin-bottom: 80px; /* clears the fixed bottom-bar */
}
.form-stack {
	display: flex;
	flex-direction: column;
	gap: 13px;
}
/* Padding only when inside a card — cardless layouts rely on .form-container's padding. */
.card > .form-stack {
	padding: 13px 15px 15px;
}
.form-field {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.form-field label {
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: rgba(0,0,0,0.54);
	margin-bottom: 2px;
}
.form-field label .required {
	color: #d32f2f;
	margin-left: 2px;
}
.form-field .hint {
	font-size: 12px;
	color: rgba(0,0,0,0.54);
	margin-top: 2px;
}
.form-field input,
.form-field select,
.form-field textarea {
	font-family: inherit;
	font-size: 16px;
	padding: 9px 12px;
	border: 1px solid #bdbdbd;
	background-color: #ffffff;
	color: inherit;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	box-sizing: border-box;
	width: 100%;
}
.form-field select {
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.form-field select::-ms-expand { display: none; }
.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
	border-color: #8a8a8a;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
	border-color: #1E88E5;
	box-shadow: 0 0 0 3px rgba(30,136,229,0.2);
}
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 13px;
}
.form-row-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 13px;
}
.form-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}
@media (max-width: 500px) {
	.form-row,
	.form-row-3 { grid-template-columns: 1fr; }
}

/* Checkbox row: <input type=checkbox> followed by <label>. */
.form-check {
	display: flex;
	align-items: center;
	gap: 10px;
}
.form-check input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 0;
	flex-shrink: 0;
	cursor: pointer;
}
.form-check label {
	cursor: pointer;
	font-size: 15px;
	line-height: 1.4;
	color: inherit;
	user-select: none;
}

/* For mobile phones: */
[class*="col-"] {
	width: 100%;
}
@media only screen and (min-width: 720px) {
    .col-md-1 {width: 8.33%;}
	.col-md-2 {width: 16.66%;}
	.col-md-3 {width: 25%;}
	.col-md-4 {width: 33.33%;}
	.col-md-5 {width: 41.66%;}
	.col-md-6 {width: 50%;}
	.col-md-7 {width: 58.33%;}
	.col-md-8 {width: 66.66%;}
	.col-md-9 {width: 75%;}
	.col-md-10 {width: 83.33%;}
	.col-md-11 {width: 91.66%;}
	.col-md-12 {width: 100%;}
}

input[type="checkbox"] {
	width: 20px;
	height: 21px;
	vertical-align: middle;
	accent-color: #1E88E5;
}

select.big {
	font-size: 22px;
	background: #ffffff;
	border: 2px solid #bdbdbd;
	padding: 2px 10px 2px 2px;
	border-radius: 8px;
	margin-right: 10px;
	margin-bottom: 10px;
	outline: none;
	transition: box-shadow 0.2s;
}
select.big:focus {
	box-shadow: 0 0 0 2px #1E88E5;
}

#back {
	float: left;
	opacity: 0.9;
	color: inherit;
	transition: opacity 0.2s;
	margin-right: 7px;
}
#back:hover {
	opacity: 1.0;
}
#back:active {
	opacity: 0.8;
}

#back .material-symbols-rounded {
	font-size: 28px;
	position: relative;
	top: 5px;
	float: left; /* Da ne upošteva whitespace in naredi toolbar za brezveze previsok */
}

.date-picker {
	font-size: inherit;
	font-family: inherit;
	border: none;
	width: 150px;
	padding: 7px 10px !important;
}

.button-raised {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	color: white;
	background-color: #1E88E5;
	transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);

	min-width: 120px;
	padding: 7px 20px;
	margin: 7px;
	border-radius: 20px;

	box-sizing: border-box;
}
.button-raised:hover { background-color: #1a7fd4; }
.button-raised:active { background-color: #71a4f7; }
.button-raised.disabled {
	pointer-events: none;
	opacity: 0.5;
}
.button-red { background-color: #F44336; }
.button-red:active { background-color: #FF8A80; }

.button-flat {
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	color: #1E88E5;
	transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.2s, color 0.2s;
	
	min-width: 80px;
	padding: 7px 20px;
	margin: 7px;
	border-radius: 20px;

	box-sizing: border-box;
}
.button-flat:hover {
	background-color: #1E88E5;
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.14);
	color: white;
}
.button-flat:active {
	background-color: #71a4f7;
}

.button-small {
	min-width: 30px;
	padding: 3px 12px;
	margin: 0 3px;
}

table.seznam {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	white-space: nowrap;
	background-color: #fafafa;

	font-size: 15px;
	line-height: 1.5;
}
table.seznam tr { border-bottom: 1px solid #e3e3e3; }
table.seznam tr.activated { color: #3F51B5; }
table.seznam tr.header {
	color: white;
}
table.seznam tr.header a {
	color: white;
	text-decoration: underline;
}
table.seznam tr.header th {
	background-color: #1E88E5;
	padding: 1px 10px;
	font-weight: 500;
	text-align: left;
	white-space: nowrap;
	position: sticky;
	top: 60px;
}
table.seznam tr.header:hover { background-color:#1E88E5; }
table.seznam tr td { padding: 1px 5px; }
table.seznam tr:hover { background-color: #eeeeee; }

table.seznam tr.clickable { cursor:pointer; }
table.seznam .material-symbols-rounded { font-size: 18px; }


/*
 * Table data
 */
table.data {
	width: 100%;
	border-collapse: collapse;
}
table.data th {
	font-weight: 400;
	color: #000;
	white-space: nowrap;
}
table.data tr:hover th { background-color: #f5f5f5; }
table.data tr:hover td { background-color: #f5f5f5; }
table.data th, table.data td {
	padding: 5px 20px;
}

table.data tr.divider-bottom {
	border-bottom: 1px solid #d2d6de;
}

table.data-main td {
	width: 100%;
}

table.data td.input {
	padding: 0 !important;
}
table.data td.input input {
	border-radius: 8px;
	border: 2px solid #91a7ff;
	height: 100%;
	font: inherit;
	width: 100%;
	padding: 5px 20px;
	box-sizing: border-box;
	outline: none;
	transition: box-shadow 0.2s;
}
table.data td.input input:focus {
	box-shadow: 0 0 0 2px #1E88E5;
}

.bottom-bar {
	background: #ffffff;
	min-height: 54px;
	border-top: 1px solid #bdbdbd;
	text-align: right;
	white-space: nowrap;
	overflow-x: auto;
	
	position: fixed;
	bottom: 0;
	width: 100%;
}

/* Tooltips */
#tt {
	background-color: black;
	display: block;
	color: white;
	position: absolute;
	text-align: left;
	padding: 10px;
	border-radius: 4px;
	
	transition: opacity 0.2s;
}

/* Smartphones */
@media only screen and (max-width : 500px) {
	body {
		font-size: 13px;
	}

	nav .title {
		line-height: 30px;
		font-size: 20px;
	}

	table.seznam tr.header th {
		top: 50px;
	}
	
	/*.scroll-x-tablet {
		overflow-x: auto;
	}*/

	
	.button-raised {
		min-width: 90px;
		padding: 7px 10px;
		margin: 10px 5px;
	}
	
	.button-small {
		min-width: 30px;
		padding: 3px 10px;
		margin: 0 3px;
	}

	table.seznam {
		font-size: 13px;
	}
	
	table.data th, table.data td {
		padding: 3px 10px;
	}
	
	.pika-lendar {
		width: 100% !important;
		box-sizing: border-box;
	}
	
	.pika-single {
		left: 0 !important;
		width: 100%;
		box-sizing: border-box;
	}
}

/* Tablets */
@media only screen and (min-width : 500px) and (max-width : 1024px) {
	/*.scroll-x-tablet {
		overflow-x: auto;
	}*/
}

/* Smartphones */
@media only screen and (max-width : 500px) {
	.vertical .spacer {
		width: 10px;
		flex: 0 1 auto;
	}
	
	.container {
		padding: 10px 0;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background: #212121;
		color: #ededed;
	}
	
	nav, table.seznam tr.header th, .bottom-bar {
		background-color: #2b2b2b;
	}

	.dropdown {
		background-color: #333333;
		box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
	}
	.dropdown a {
		color: rgba(255,255,255,0.92);
	}
	.dropdown a:hover {
		background-color: rgba(255,255,255,0.08);
	}
	.dropdown a.danger {
		color: #ef5350;
	}
	.dropdown a.danger:hover {
		background-color: rgba(239,83,80,0.15);
	}

	a.card:hover { background: #454545; }
	
	.progress {
		color: white;
		background: linear-gradient(to right, var(--progress-color, #1E88E5) 0%, var(--progress-color, #1E88E5) var(--progress-width, 50%), #353535 var(--progress-width, 50%), #353535 100%);
	}
	
	table.seznam { background: #1a1a1a; }
	table.seznam tr { border-color: #444; }
	table.seznam tr.activated { color: #7489ff; }
	
	.card {
		background: #2b2b2b;
		box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.15);
	}
	a.card:hover {
		background: rgba(30,136,229,0.12);
	}

	.container-header h1 {
		color: rgba(255,255,255,0.6);
	}
	
	table.data th {
		color: #fff;
	}
	
	table.data tr:hover th { background-color: #222; }
	table.data tr:hover td { background-color: #222; }
	table.seznam tr:hover { background-color: #333; }
	
	input.big, input.big2, select.big, table.data td.input input {
		background: #212121;
		color: #ededed;
	}
	input.big2, select.big { border-color: #111; }

	.form-field label { color: rgba(255,255,255,0.6); }
	.form-field .hint { color: rgba(255,255,255,0.5); }
	.form-field label .required { color: #ef5350; }
	.form-field input,
	.form-field select,
	.form-field textarea {
		background-color: #1a1a1a;
		border-color: #444;
		color: #ededed;
	}
	.form-field select {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23aaa' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	}
	.form-field input:hover,
	.form-field select:hover,
	.form-field textarea:hover { border-color: #666; }
	.form-field input:focus,
	.form-field select:focus,
	.form-field textarea:focus {
		border-color: #64b5f6;
		box-shadow: 0 0 0 3px rgba(100,181,246,0.25);
	}
	
	.card .card-head, table.data th, .card .card-foot, table.data tr.divider-bottom {
		border-color: #444;
	}
	
	.button-raised { background-color: #1360a3; }
	.button-raised:hover { background-color: #0e47a1; }

	.button-flat { color: #2e9eff; }
	.button-flat:hover { background-color: #1360a3; }

	.button-raised:active { background-color: #1872c1; }
	.button-red { background-color: #bf2317; }
	.button-red:active { background-color: #d32d20; }

	input[type="checkbox"] {
		accent-color: #1360a3;
	}

	/* SweetAlert2 dark mode */
	.zbc-swal.swal2-popup {
		background: #2b2b2b;
		box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
	}
	.zbc-swal .swal2-title { color: rgba(255, 255, 255, 0.92); }
	.zbc-swal .swal2-html-container { color: rgba(255, 255, 255, 0.6); }

	.zbc-swal .swal2-styled.swal2-confirm { background-color: #1360a3; }
	.zbc-swal .swal2-styled.swal2-confirm:hover { background-color: #0e47a1; }

	.zbc-swal-danger .swal2-styled.swal2-confirm { background-color: #bf2317; }
	.zbc-swal-danger .swal2-styled.swal2-confirm:hover { background-color: #d32d20; }

	.zbc-swal .swal2-styled.swal2-cancel { color: rgba(255, 255, 255, 0.6); }
	.zbc-swal .swal2-styled.swal2-cancel:hover { background-color: rgba(255, 255, 255, 0.08); }
	.zbc-swal .swal2-styled.swal2-cancel:focus { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12); }

	.swal2-popup.zbc-toast {
		background: #2b2b2b;
		color: rgba(255, 255, 255, 0.92);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
	}
	.swal2-popup.zbc-toast .swal2-title { color: rgba(255, 255, 255, 0.92); }
}

.nav-search {
	display: flex;
	align-items: center;
	padding: 8px;
}
.nav-search input {
	background: rgba(255, 255, 255, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 20px;
	color: white;
	padding: 6px 14px;
	font-size: 14px;
	font-family: inherit;
	outline: none;
	width: 180px;
	transition: background 0.2s, width 0.2s;
}
.nav-search input::placeholder {
	color: rgba(255, 255, 255, 0.65);
}
.nav-search input:focus {
	background: rgba(255, 255, 255, 0.25);
	width: 240px;
}

@media only screen and (max-width: 500px) {
	.nav-search input {
		width: 90px;
	}
	.nav-search input:focus {
		width: 200px;
	}
}

/* Nav drawer button */
.nav-drawer-btn {
	display: flex;
	background: none;
	border: none;
	color: white;
	font-size: 22px;
	cursor: pointer;
	padding: 0 14px;
	align-items: center;
	opacity: 0.85;
	flex-shrink: 0;
}
.nav-drawer-btn:hover { opacity: 1; }

/* Drawer overlay */
.drawer-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 200;
}
.drawer-overlay.visible { display: block; }

/* Side drawer — base is always overlay (position: fixed) */
.side-drawer {
	position: fixed;
	left: 0;
	top: 60px;
	height: calc(100vh - 60px);
	width: 280px;
	background: white;
	z-index: 201;
	overflow-y: auto;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	box-shadow: 2px 0 8px rgba(0,0,0,0.2);
}
.side-drawer.open { transform: translateX(0); }

/* Fixed-width inner wrapper so content doesn't reflow during width transition */
.side-drawer-inner { width: 280px; padding-top: 8px; }

/* Push mode: drawer inside .page-wrapper on desktop */
@media (min-width: 721px) {
	.page-wrapper {
		display: flex;
		align-items: flex-start;
	}
	.page-content {
		flex: 1;
		min-width: 0;
	}
	.page-wrapper .side-drawer {
		position: sticky;
		transform: none;
		width: 0;
		overflow: hidden;
		transition: width 0.25s ease;
		box-shadow: none;
		border-right: none;
		/* Override base transform transition so it doesn't animate on resize */
		transition: width 0.25s ease, transform 0s;
	}
	.page-wrapper .side-drawer.open { width: 280px; }
}

.side-drawer-section {
	padding: 8px 0;
	border-bottom: 1px solid #f0f0f0;
}
.side-drawer-section-label {
	padding: 8px 16px 4px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(0,0,0,0.54);
	font-weight: 500;
}
.side-drawer-link {
	display: flex;
	align-items: center;
	padding: 10px 16px;
	text-decoration: none;
	color: rgba(0,0,0,0.87);
	transition: background 0.15s;
	white-space: nowrap;
}
.side-drawer-link:hover { background: #f5f5f5; }
.side-drawer-link.active {
	background: rgba(30,136,229,0.1);
	color: #1E88E5;
	font-weight: 500;
}
.side-drawer-link img {
	width: 24px;
	height: 24px;
	margin-right: 12px;
	flex-shrink: 0;
}
.side-drawer-badge {
	margin-left: auto;
	padding: 1px 7px;
	border-radius: 10px;
	background: #1E88E5;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	line-height: 18px;
	min-width: 20px;
	text-align: center;
}

.side-drawer-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 8px 8px 16px;
	border-top: 1px solid #f0f0f0;
	gap: 8px;
}
.side-drawer-username {
	font-size: 13px;
	color: rgba(0,0,0,0.54);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.side-drawer-logout {
	display: flex;
	align-items: center;
	padding: 8px;
	border-radius: 50%;
	color: rgba(0,0,0,0.54);
	flex-shrink: 0;
}
.side-drawer-logout:hover { background: #f5f5f5; }

/* Remove card-head border when directly followed by a table or status-ok */
.card-head + .status-table-overflow,
.card-head + .status-ok {
	margin-top: 0;
}
.card:has(> .status-table-overflow) .card-head,
.card:has(> .status-ok) .card-head {
	border-bottom: none;
}

/* Status tables (blokirani) — overflow-x scroll, no sticky headers inside */
.status-table-overflow {
	overflow-x: auto;
}
.status-table-overflow table.seznam tr.header,
.status-table-overflow table.seznam tr.header th {
	background: white;
	color: black;
	position: static;
}
.status-table-overflow table.seznam { background: white; }
.status-ok {
	padding: 12px;
	color: #4caf50;
	font-size: 15px;
}

/* Ostalo section divider */
.ostalo-header {
	padding: 16px 0 4px;
	clear: both;
}
.ostalo-header h2 {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
	.side-drawer { background: #2b2b2b; border-right-color: #333; }
	.side-drawer-section { border-color: #444; }
	.side-drawer-section-label { color: rgba(255,255,255,0.6); }
	.side-drawer-link { color: #ededed; }
	.side-drawer-link:hover { background: #333; }
	.side-drawer-link.active { background: rgba(30,136,229,0.15); color: #64b5f6; }
	.side-drawer-footer { border-color: #444; }
	.side-drawer-username { color: rgba(255,255,255,0.54); }
	.side-drawer-logout { color: rgba(255,255,255,0.54); }
	.side-drawer-logout:hover { background: #333; }
	.status-ok { color: #66bb6a; }
	.ostalo-header h2 { color: rgba(255,255,255,0.4); }
	.status-table-overflow table.seznam tr.header,
	.status-table-overflow table.seznam tr.header th { background: #2b2b2b; color: white; }
	.status-table-overflow table.seznam { background: #2b2b2b; }
}

/* ------------------------------------------------------------------ */
/* Kontakt / Sporočila — master-detail inbox                          */

.kontakt-wrap {
	display: flex;
	height: calc(100vh - 60px);
	overflow: hidden;
}

.kontakt-list {
	width: 570px;
	min-width: 280px;
	max-width: 60%;
	border-right: 1px solid #e0e0e0;
	overflow-y: auto;
	background: #ffffff;
	flex-shrink: 0;
}

.kontakt-list-item {
	display: block;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background 0.15s;
	text-decoration: none;
	color: inherit;
	position: relative;
}
.kontakt-list-item:hover { background: rgba(30,136,229,0.06); }
.kontakt-list-item.active { background: rgba(30,136,229,0.12); }

.kontakt-list-actions {
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	align-items: center;
	gap: 2px;
	padding: 0 8px;
	background: #f2f7fc;
}
.kontakt-list-item:hover .kontakt-list-actions { display: flex; }
.kontakt-list-item.active .kontakt-list-actions { background: #dfeaf6; }

.kontakt-list-action {
	background: none;
	border: none;
	cursor: pointer;
	color: rgba(0,0,0,0.38);
	padding: 4px;
	border-radius: 4px;
	line-height: 1;
}
.kontakt-list-delete:hover { color: #e53935; background: rgba(229,57,53,0.08); }
.kontakt-list-unread:hover { color: #1E88E5; background: rgba(30,136,229,0.08); }

.kontakt-list-item.unread { font-weight: 500; }
.kontakt-list-item.unread .kontakt-item-sender::before {
	content: '';
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #1E88E5;
	margin-right: 8px;
	vertical-align: middle;
}

.kontakt-item-sender {
	font-size: 15px;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kontakt-item-preview {
	font-size: 13px;
	color: rgba(0,0,0,0.54);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.kontakt-item-date {
	font-size: 12px;
	color: rgba(0,0,0,0.42);
	margin-top: 2px;
}

.kontakt-detail {
	flex: 1;
	overflow-y: auto;
	padding: 24px 32px;
	background: #fff;
}

.kontakt-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	color: rgba(0,0,0,0.38);
	font-size: 15px;
}

.kontakt-detail .kontakt-header h2 {
	margin: 0 0 4px;
	font-size: 20px;
	font-weight: 500;
}
.kontakt-detail .kontakt-meta {
	font-size: 13px;
	color: rgba(0,0,0,0.54);
	line-height: 1.5;
}
.kontakt-back-btn { display: none; }

.kontakt-detail .kontakt-body {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.6;
	white-space: pre-wrap;
	word-wrap: break-word;
}

/* Mobile: full-width list, detail replaces it */
@media only screen and (max-width: 720px) {
	.kontakt-wrap { flex-direction: column; height: auto; min-height: calc(100vh - 50px); }
	.kontakt-list {
		width: 100%;
		max-width: 100%;
		border-right: none;
		border-bottom: 1px solid #e0e0e0;
		overflow-y: visible;
	}
	.kontakt-list.hidden-mobile { display: none; }
	.kontakt-detail { padding: 16px; }
	.kontakt-detail.hidden-mobile { display: none; }
	.kontakt-back-btn { display: inline-block; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	.kontakt-list { background: #1a1a1a; border-right-color: #444; }
	.kontakt-list-item { border-bottom-color: #333; }
	.kontakt-list-item:hover { background: rgba(30,136,229,0.1); }
	.kontakt-list-item.active { background: rgba(30,136,229,0.18); }
	.kontakt-list-item.unread .kontakt-item-sender::before { background: #64b5f6; }
	.kontakt-item-preview { color: rgba(255,255,255,0.5); }
	.kontakt-item-date { color: rgba(255,255,255,0.38); }
	.kontakt-detail { background: #1e1e1e; }
	.kontakt-empty { color: rgba(255,255,255,0.38); }
	.kontakt-detail .kontakt-meta { color: rgba(255,255,255,0.5); }
	.kontakt-list-actions { background: #1f2a35; }
	.kontakt-list-item.active .kontakt-list-actions { background: #1a3050; }
	.kontakt-list-action { color: rgba(255,255,255,0.38); }
	.kontakt-list-delete:hover { color: #ef5350; background: rgba(239,83,80,0.12); }
	.kontakt-list-unread:hover { color: #64b5f6; background: rgba(100,181,246,0.12); }
}

/* ------------------------------------------------------------------ */
/* Notifications — bell button + popover panel.                        */
/* Lives inside nav .menu li.notif-wrap.                              */

.notif-wrap {
	position: relative;
}
.notif-bell-btn {
	background: none;
	border: 0;
	padding: 0 12px;
	height: 100%;
	display: inline-flex;
	align-items: center;
	color: #fff;
	cursor: pointer;
	opacity: 0.85;
	position: relative;
	font: inherit;
}
.notif-bell-btn:hover { opacity: 1; }
.notif-bell-btn .material-symbols-rounded { font-size: 24px; }

.notif-bell-badge {
	position: absolute;
	top: 6px;
	right: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	box-sizing: border-box;
	border-radius: 9px;
	background: #f44336;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
	pointer-events: none;
	box-shadow: 0 0 0 2px #1E88E5;
}

.notif-panel {
	position: absolute;
	top: calc(100% - 4px);
	right: 8px;
	width: 460px;
	max-width: calc(100vw - 16px);
	max-height: min(560px, calc(100vh - 80px));
	background: #fff;
	color: rgba(0,0,0,0.87);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
	z-index: 101;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.notif-panel[hidden] { display: none; }

.notif-panel-head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 8px 10px 16px;
	border-bottom: 1px solid #f0f0f0;
	flex-shrink: 0;
}
.notif-panel-title {
	flex: 1;
	font-size: 15px;
	font-weight: 500;
}
.notif-panel-icon {
	background: none;
	border: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	color: rgba(0,0,0,0.6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.notif-panel-icon:hover { background: rgba(0,0,0,0.06); color: #1E88E5; }
.notif-panel-icon .material-symbols-rounded { font-size: 20px; }

.notif-panel-list {
	flex: 1;
	overflow-y: auto;
	min-height: 0;
}

.notif-empty {
	padding: 32px 16px;
	text-align: center;
	color: rgba(0,0,0,0.5);
	font-size: 14px;
}

.notif-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 10px 12px 10px 16px;
	border-bottom: 1px solid #f4f4f4;
	cursor: pointer;
	transition: background 0.15s;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: rgba(30,136,229,0.06); }

.notif-item-main {
	flex: 1;
	min-width: 0;
}
.notif-item-title {
	font-size: 14px;
	font-weight: 400;
	color: rgba(0,0,0,0.87);
}
.notif-item-body {
	font-size: 13px;
	color: rgba(0,0,0,0.6);
	margin-top: 2px;
}
.notif-item-time {
	font-size: 11px;
	color: rgba(0,0,0,0.45);
	margin-top: 4px;
}

.notif-item.notif-unread {
	background: rgba(30,136,229,0.05);
}
.notif-item.notif-unread .notif-item-title {
	font-weight: 500;
}
.notif-item.notif-unread::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #1E88E5;
}

.notif-item-actions {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.notif-item-mark {
	background: none;
	border: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	cursor: pointer;
	color: rgba(0,0,0,0.45);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.notif-item:hover .notif-item-mark { opacity: 1; }
.notif-item-mark:hover { background: rgba(30,136,229,0.1); color: #1E88E5; }
.notif-item-mark .material-symbols-rounded { font-size: 18px; }

.notif-panel-foot {
	flex-shrink: 0;
	border-top: 1px solid #f0f0f0;
}
.notif-panel-foot:has(.notif-show-more[hidden]) { display: none; }
.notif-show-more {
	width: 100%;
	background: none;
	border: 0;
	padding: 12px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	color: #1E88E5;
	cursor: pointer;
}
.notif-show-more:hover { background: rgba(30,136,229,0.08); }
.notif-show-more[hidden] { display: none; }

@media only screen and (max-width: 500px) {
	.notif-panel {
		position: fixed;
		top: 50px;
		right: 4px;
		left: 4px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - 60px);
	}
}

@media (prefers-color-scheme: dark) {
	.notif-panel {
		background: #2b2b2b;
		color: rgba(255,255,255,0.87);
		box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
	}
	.notif-panel-head { border-bottom-color: #3a3a3a; }
	.notif-panel-icon { color: rgba(255,255,255,0.6); }
	.notif-panel-icon:hover { background: rgba(255,255,255,0.08); color: #64b5f6; }
	.notif-empty { color: rgba(255,255,255,0.5); }
	.notif-item { border-bottom-color: #383838; }
	.notif-item:hover { background: rgba(100,181,246,0.08); }
	.notif-item-title { color: rgba(255,255,255,0.87); }
	.notif-item-body { color: rgba(255,255,255,0.6); }
	.notif-item-time { color: rgba(255,255,255,0.45); }
	.notif-item.notif-unread { background: rgba(100,181,246,0.08); }
	.notif-item.notif-unread::before { background: #64b5f6; }
	.notif-item-mark { color: rgba(255,255,255,0.5); }
	.notif-item-mark:hover { background: rgba(100,181,246,0.15); color: #64b5f6; }
	.notif-panel-foot { border-top-color: #3a3a3a; }
	.notif-show-more { color: #64b5f6; }
	.notif-show-more:hover { background: rgba(100,181,246,0.1); }
	.notif-bell-badge { box-shadow: 0 0 0 2px #1E88E5; }
}