:root {
	--ssf-bg: #f4f7fb;
	--ssf-surface: #ffffff;
	--ssf-border: #d9e2ec;
	--ssf-text: #1f2937;
	--ssf-muted: #64748b;
	--ssf-primary: #2563eb;
	--ssf-primary-dark: #1d4ed8;
	--ssf-danger: #dc2626;
	--ssf-radius: 6px;
}

html {
	background: var(--ssf-bg);
}

body {
	background: var(--ssf-bg);
	color: var(--ssf-text);
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	line-height: 1.45;
}

a {
	color: var(--ssf-primary);
}

a:hover,
a:focus {
	color: var(--ssf-primary-dark);
}

.container,
.container-fluid {
	width: 100%;
}

.panel,
.well,
.modal-content,
.popover,
.dropdown-menu,
.form-control,
.btn {
	border-radius: var(--ssf-radius);
}

.panel {
	border-color: var(--ssf-border);
	box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
}

.panel-heading {
	border-top-left-radius: var(--ssf-radius);
	border-top-right-radius: var(--ssf-radius);
}

.panel-metafora {
	border-color: #b8d4ff !important;
}

.panel-metafora .panel-heading {
	background: linear-gradient(180deg, #3b82f6 0%, var(--ssf-primary) 100%) !important;
	color: #ffffff !important;
	border-color: var(--ssf-primary) !important;
}

.btn {
	border-width: 1px;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-primary,
.btn-info {
	background: var(--ssf-primary);
	border-color: var(--ssf-primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus {
	background: var(--ssf-primary-dark);
	border-color: var(--ssf-primary-dark);
}

.btn-danger {
	background: var(--ssf-danger);
	border-color: var(--ssf-danger);
}

.form-control {
	border-color: #cbd5e1;
	box-shadow: none;
}

.form-control:focus {
	border-color: var(--ssf-primary);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.nav-tabs {
	border-bottom-color: var(--ssf-border);
}

.nav-tabs > li > a {
	border-radius: var(--ssf-radius) var(--ssf-radius) 0 0;
	color: var(--ssf-muted);
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--ssf-text);
	border-color: var(--ssf-border) var(--ssf-border) transparent;
}

.table,
table.dataTable {
	background: var(--ssf-surface);
}

.table > thead > tr > th,
table.dataTable thead th {
	border-bottom-color: var(--ssf-border);
	color: #334155;
	font-weight: 600;
}

.table > tbody > tr > td,
table.dataTable tbody td {
	border-top-color: #e5e7eb;
}

.fancytree-container,
.jstree-default .jstree-clicked,
.jstree-default .jstree-hovered {
	border-radius: var(--ssf-radius);
}

.fancytree-container {
	border-color: var(--ssf-border) !important;
}

#naslov {
	color: #b91c1c !important;
	letter-spacing: 0;
}

.wbox,
.olist,
.tmark {
	border-radius: 4px;
}

@media (max-width: 767px) {
	body {
		font-size: 12px;
	}

	.panel {
		box-shadow: none;
	}

	.sstab {
		height: auto !important;
		max-height: 70vh;
	}
}