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

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

/* Client-notes button 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;
}

/* does not work yet */
.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;
}

/* ===== User-selectable theme (dark / navbar colour) =====
   The default "coffee" theme is compiled into styles.css (via the $dark
   override in the SCSS), so only the other choices are overridden here. The
   choice is stored in the session and applied through <html data-theme="...">
   (see default_layout). Only Bootstrap's `dark` colour changes; the orange
   accent (#e95420) and the logo stay as they are. Mirrors the list in
   app/Config/Theme.php. */
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 (see docs/ui-navigation.md) =====
   The breadcrumb shows only the ancestors and sits above <h1>, so it is set
   apart from the heading: smaller font and a "›" separator. The page name is
   shown only by <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, "›");
}

/* ===== Button icons (icon() helper) =====
   Inline SVG is aligned with the text the same way the bootstrap-icons font
   used to do it. Large decorative icons cancel this inline (vertical-align:0).
   See 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;
}

.card {
	--bs-card-title-spacer-y: 1rem;
}

/* ===== Dashboard (Home) cards in two masonry-like columns =====
   The dashboard cards have very different heights. A Bootstrap `row` would
   stretch every short card to the height of the tallest one in its row, which
   leaves big vertical gaps. Instead the cards flow into two independent columns
   (CSS multi-column), and `break-inside: avoid` keeps a card from being split
   across the two columns. Narrow screens fall back to a single column.
   See app/Views/home_view.php and app/Cells/*.php.

   VERTICAL RHYTHM: each card sits in a `.dashboard-card` wrapper and the gap is
   the WRAPPER's padding, never the card's margin. At the end of a column the
   browser truncates the trailing MARGIN of that column's last card, so a
   container margin plus the cards' own `mb-4` made the space above the footer
   vary between one and two 1.5rem gaps (and sometimes vanish completely). A
   padding belongs to the box height, so it is never dropped - every column now
   ends with exactly one 1.5rem gap, matching the gap between the cards. */
.card-columns-2 {
	column-count: 2;
	column-gap: 1.5rem;
}

.card-columns-2>.dashboard-card {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
	padding-bottom: 1.5rem;
}

/* Cells that render nothing (hidden card, non-admin card) must not leave a gap. */
.card-columns-2>.dashboard-card:empty {
	display: none;
}

/* The wrapper already provides the spacing - do not add it twice.
   `!important` is needed because the cards carry Bootstrap's `.mb-4`, and the
   utility classes are declared `!important` themselves. */
.card-columns-2>.dashboard-card>.card {
	margin-bottom: 0 !important;
}

/* Bootstrap's md breakpoint is 768px - below it the cards stack in one column. */
@media (max-width: 767.98px) {
	.card-columns-2 {
		column-count: 1;
	}
}

/* ===== Invoice template preview („Sąskaitos išvaizda“) =====
   The white A4 sheet sits on a dark backdrop, so its edges are obvious, and the
   frame scrolls: a long invoice can be read to the end instead of being clipped
   at the frame. The sheet is drawn scaled with a CSS transform, which does NOT
   change its layout height - scripts.js sets the height of the sheet wrapper
   from the unscaled height (initInvoicePreview). See settings_appearance_view.
*/
.invoice-preview-frame {
	max-height: 60vh;
	overflow: auto;
	padding: 12px;
	border: 1px solid var(--bs-border-color);
	border-radius: 8px;
	background: #343a40;
}

.invoice-preview-sheet {
	width: 270px;
	margin: 0 auto;
	background: #ffffff;
	box-shadow: 0 0 14px rgba(0, 0, 0, .5);
}

/* The invoice itself inside such a frame („Sąskaitą peržiūra“,
   „Siųsti el. laišku“): A4 at 96 dpi, scaled by scripts.js
   (initInvoiceDocPreview), which also stops the frame at half the sheet
   height. The padding belongs to the SCALED page, so the margins shrink with
   it. */
.invoice-preview-sheet .invoice-preview-page {
	width: 794px;
	padding: 50px;
	box-sizing: border-box;
	background: #ffffff;
	transform-origin: top left;
}

/* Dashboard card dismiss button (the X in the card corner, see
   dashboard_card_close() in app/Helpers/dashboard_helper.php). Kept above the
   card content (the chart canvas) so it stays clickable. */
.dashboard-card-hide {
	z-index: 2;
}