/* ---------------------------------------------------------------
   Public Form / Shared Record - shared chrome styles
   Used by create_item_k.jsp and share_k.jsp
   Account themes override via CSS custom properties in
   WEB-INF/report_templates/form/{account}/theme_css.html
   --------------------------------------------------------------- */

:root {
	--kzf-font:              'Roboto','Verdana','Helvetica','sans-serif';
	--kzf-body-bg:           rgb(248, 253, 255);
	--kzf-header-bg:         #ffffff;
	--kzf-header-border:     1px solid #e2e8f0;
	--kzf-header-shadow:     0 1px 2px rgba(0,0,0,0.05);
	--kzf-btn-color:         #64748b;
	--kzf-btn-hover-bg:      #f8faf9;
	--kzf-btn-hover-color:   #0f172a;
	--kzf-card-bg:           #ffffff;
	--kzf-card-shadow:       0 4px 16px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
	--kzf-card-radius:       16px;
	--kzf-footer-bg:         #ffffff;
	--kzf-footer-border:     1px solid #e2e8f0;
	--kzf-footer-shadow:     0 -1px 3px rgba(0,0,0,0.04);
	--kzf-loader-bg:         #0b3764;
	--kzf-loader-accent:     #2ec279;
	--kzf-pill-primary-bg:   #25c26f;
	--kzf-pill-primary-hover:#1ea85e;
	--kzf-pill-outline-color:#0f172a;
	--kzf-pill-outline-border:#e2e8f0;
	--kzf-pill-outline-hover-bg:#f8faf9;
	--kzf-pill-outline-hover-border:#cbd5e1;
}

/* --- Base typography --- */
body {
	font-size: 14px;
	font-family: var(--kzf-font);
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--kzf-body-bg);
	overflow: visible;
}

.select2-container {
	font-size: 14px;
	font-family: var(--kzf-font);
}

/* --- Header bar --- */
.kz-header-bar {
	background: var(--kzf-header-bg);
	border-bottom: var(--kzf-header-border);
	padding: 8px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 9999999;
	box-shadow: var(--kzf-header-shadow);
}
.kz-header-logo { display: flex; align-items: center; }
.kz-header-logo img { height: 32px; width: auto; }
.kz-text-size-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 6px;
	border: none; background: transparent;
	cursor: pointer; user-select: none;
	padding: 0; color: var(--kzf-btn-color); transition: all 0.15s;
	font-family: var(--kzf-font);
	font-size: 18px; font-weight: 600; line-height: 1;
}
.kz-text-size-btn:hover { background: var(--kzf-btn-hover-bg); color: var(--kzf-btn-hover-color); }

/* --- Scroll area --- */
.kz-scroll-area {
	padding: 10px;
	padding-top: 52px;
}

/* --- Card shell --- */
.kz-card-shell {
	max-width: 930px;
	margin: 32px auto;
	padding: 40px;
	background: var(--kzf-card-bg);
	border-radius: var(--kzf-card-radius);
	box-shadow: var(--kzf-card-shadow);
}

/* --- Footer bar --- */
.kz-footer-bar {
	position: fixed; bottom: 0; left: 0; right: 0;
	width: 100%; height: 60px;
	background: var(--kzf-footer-bg); border-top: var(--kzf-footer-border);
	box-shadow: var(--kzf-footer-shadow);
	display: flex; align-items: center;
	padding: 0 32px; z-index: 9999999;
	box-sizing: border-box; margin: 0;
}
.kz-footer-actions {
	display: flex; align-items: center; gap: 12px;
}

/* --- Loader bar --- */
.loaderHide {
	display: none;
}

.loader {
	display: block;
	height: 4px;
	width: 100%;
	overflow: hidden;
	background-color: var(--kzf-loader-bg);
	z-index: 9999999;
	position: fixed;
	top: 0;
}

.loader:before {
	display: block;
	position: absolute;
	content: "";
	left: -200px;
	width: 200px;
	height: 4px;
	background-color: var(--kzf-loader-accent);
	animation: loading 2s linear infinite;
}

@keyframes loading {
	from	{left: -200px;width: 30%;}
	50%		{width:30%;}
	70%		{width:70%;}
	80%		{left:50%;}
	95%		{left:120%;}
	to		{left: 100%;}
}

/* --- Page footer (Kohezion logo below card shell) --- */
.kz-page-footer {
	padding: 24px 32px;
	text-align: center;
}
.kz-page-footer a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.kz-page-footer .kz-footer-logo {
	height: 24px;
	width: auto;
	opacity: 0.6;
	transition: opacity 0.15s;
}
.kz-page-footer a:hover .kz-footer-logo {
	opacity: 1;
}

/* --- Responsive --- */
@media only screen and (max-width: 400px) {
	#kLink {
		display: none !important;
	}
}
@media only screen and (min-width: 1000px) {
	#saveButton {
		right: 30px !important;
	}
}