/* .errors {
	background:pink;
	padding-top: 14px;
	padding-bottom: 4px;
	margin-bottom: 10px;
} */
label {
	font-weight: bold;
}

[x-cloak] {
	display: none !important;
}

/* Kliento pastabų mygtuko hover "popup" */
.notes-tooltip {
	position: absolute;
	z-index: 2000;
	max-width: 340px;
	max-height: 200px;
	overflow: auto;
	padding: 0.5rem 0.75rem;
	font-size: 0.875rem;
	line-height: 1.35;
	color: #fff;
	background-color: rgba(33, 37, 41, 0.95);
	border-radius: 0.375rem;
	white-space: pre-line;
	word-break: break-word;
	box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.no-wrap {
	white-space: nowrap;
}

.notice-feedback {
	color: green;
}

/* Eye positioning in inputs */
.eyeye {
	position: absolute;
	font-size: 20px;
	color: #e95420;
	top: 50%;
	right: 13px;
	transform: translateY(-50%);
	cursor: pointer;
}

/* htmx indicator styling and transitions*/
.htmx-indicator {
	height: 0px;
	opacity: 0;
	transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
	height: 80px;
	opacity: 1
}

.htmx-request.htmx-indicator {
	height: 80px;
	opacity: 1
}

#spinner {
	position: fixed;
	/*height: 80px;*/
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 9999;
	background-color: rgba(255, 255, 255, 0.829);
	display: block;
}

/*
 * Re-consent page (terms / privacy) – the document title must stay clearly
 * above the headings inside the document. Parsedown emits the document's own
 * sections as <h2>, so the controller demotes them to <h3> (and deeper).
 */
.terms-consent-docs>section>h2 {
	font-size: 1.35rem;
	font-weight: 700;
	margin-top: 0;
	margin-bottom: 1.25rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--bs-border-color);
}

.terms-consent-docs h2 {
	font-size: 1.35rem;
}

.terms-consent-docs h3 {
	font-size: 1.15rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.terms-consent-docs h4,
.terms-consent-docs h5,
.terms-consent-docs h6 {
	font-size: 1.05rem;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.terms-consent-docs table {
	width: 100%;
	margin: 1rem 0;
	border-collapse: collapse;
	font-size: 0.95em;
}

.terms-consent-docs table th,
.terms-consent-docs table td {
	border: 1px solid #dee2e6;
	padding: 0.5rem;
	vertical-align: top;
}

.terms-consent-docs table th {
	background: #f8f9fa;
}

/*
 * Re-consent page (terms / privacy): the documents scroll inside a box that
 * fits the screen, so the consent checkboxes and the button below it stay
 * visible without scrolling the page.
 */
.terms-consent-form {
	/* Fixed top navbar (56px) + page title + the alert above the box + gaps. */
	--terms-consent-chrome: 16.25rem;

	display: flex;
	flex-direction: column;
	height: clamp(22rem, calc(100vh - var(--terms-consent-chrome)), 64rem);
	height: clamp(22rem, calc(100dvh - var(--terms-consent-chrome)), 64rem);
}

@media (max-width: 767.98px) {
	.terms-consent-form {
		/* The alert above wraps onto more lines on narrow screens. */
		--terms-consent-chrome: 19rem;
	}
}

.terms-consent-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	/* Wheel over the documents scrolls the box, not the page behind it. */
	overscroll-behavior: contain;
	padding: 1rem;
	border: 1px solid var(--bs-border-color);
	border-bottom: 0;
	border-radius: 0.375rem 0.375rem 0 0;
	background: var(--bs-body-bg);
}

.terms-consent-footer {
	flex: 0 0 auto;
	margin-bottom: 1.5rem;
	padding: 1rem;
	border: 1px solid var(--bs-border-color);
	border-radius: 0 0 0.375rem 0.375rem;
	background: var(--bs-tertiary-bg);
}

.terms-consent-checkboxes {
	margin-bottom: 0.75rem;
}

/*the elements in the seller field should be with margin zero*/
td.zero-margin>* {
	margin: 0;
}

/*kol kas neveikia*/
.toast {
	z-index: 9999;
}

.show_error {
	color: red;
	font-size: 0.875em;
	/*corresponds to bs small */
}

/* undo heading link color and underline for sortable columns */
th a {
	color: var(--bs-body-color);
	text-decoration: none;
}

/* sortable ghost entry */
.sortable-ghost .row {
	--bs-bg-opacity: 0.5;
	background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important;
}

/* ===== Markdown text pages inside the app (terms / privacy / manual) =====
   The wrapper is added by common/generic_page.php, the page title above it is
   <h1 class="h3"> (1.55rem) set in common/crumbs.php. Parsedown starts the
   document's own sections with "##" (<h2>), which otherwise renders BIGGER
   than the page title (see docs/ui-navigation.md), so the sizes are pinned
   below the title here and the sections get the vertical spacing they lack. */
.text-page-content h1 {
	font-size: 1.35rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.text-page-content h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.text-page-content h3 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}

.text-page-content h4,
.text-page-content h5,
.text-page-content h6 {
	font-size: 1rem;
	font-weight: 600;
	margin-top: 1.25rem;
	margin-bottom: 0.5rem;
}

/* Screenshots embedded in the documents (the user guide): scale them down and
   give them a light frame so they stand out from the running text. */
.text-page-content img {
	max-width: 90%;
	height: auto;
	display: block;
	margin: 1.5rem auto;
	padding: .35rem;
	background-color: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: .5rem;
}

/* The same documents also open in the registration modals, whose own title is
   <h5 class="modal-title"> (1.1rem) – there the sections step down one notch
   more so they cannot outgrow it either. */
.modal-body.text-page-content h1,
.modal-body.text-page-content h2,
.modal-body.text-page-content h3,
.modal-body.text-page-content h4,
.modal-body.text-page-content h5,
.modal-body.text-page-content h6 {
	font-size: 1rem;
}

/* ===== Vartotojo pasirenkama tema (tamsioji / navbar spalva) =====
   Pagrindinė „coffee“ tema sukompiliuota į styles.css ($dark perraša SCSS
   faile), todėl čia – tik kitų parinkčių perrašos. Pasirinkimas saugomas
   sesijoje ir pritaikomas per <html data-theme="..."> (žr. default_layout).
   Keičiama tik Bootstrap `dark` spalva; oranžinis akcentas (#e95420) ir
   logotipas lieka nepakeisti. Atitinka app/Config/Theme.php sąrašą. */
html[data-theme="coffee"] {
	--bs-dark: #4a3a2e;
	--bs-dark-rgb: 74, 58, 46;
}

html[data-theme="purple"] {
	--bs-dark: #772953;
	--bs-dark-rgb: 119, 41, 83;
}

html[data-theme="teal"] {
	--bs-dark: #0f5e59;
	--bs-dark-rgb: 15, 94, 89;
}

html[data-theme="navy"] {
	--bs-dark: #2c3e50;
	--bs-dark-rgb: 44, 62, 80;
}

html[data-theme="graphite"] {
	--bs-dark: #3d3b36;
	--bs-dark-rgb: 61, 59, 54;
}

html[data-theme="green"] {
	--bs-dark: #2d6a4f;
	--bs-dark-rgb: 45, 106, 79;
}

/* ===== Breadcrumbs (žr. docs/ui-navigation.md) =====
   Breadcrumbas rodo tik protėvius ir yra virš <h1>, todėl atskiriamas nuo
   antraštės: mažesnis šriftas ir „›“ skiriklis. Puslapio pavadinimą rodo tik
   <h1> (app/Views/common/crumbs.php). */
.breadcrumb {
	--bs-breadcrumb-font-size: 0.875rem;
	--bs-breadcrumb-item-padding-x: 0.4rem;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: var(--bs-breadcrumb-divider, "›");
}

/* ===== Mygtukų ikonos (icon() helper) =====
   Inline SVG lygiuojamas su tekstu taip pat, kaip tai darė bootstrap-icons
   šriftas. Didelės dekoratyvinės ikonos atšaukia tai inline (vertical-align:0).
   Žr. docs/ui-buttons.md. */
.sp-icon {
	vertical-align: -0.125em;
}

/* Client-notes buttons carry two SVG icons (.js-note-off / .js-note-on); the
   note state is only known after render (Alpine binding / htmx trigger), so the
   visible one is switched with a class – see scripts.js and
   app/Views/invoices_add_edit_view.php. */
.js-client-notes .js-note-on {
	display: none;
}

.js-client-notes.has-notes .js-note-off {
	display: none;
}

.js-client-notes.has-notes .js-note-on {
	display: inline;
}