/*
 * ketna-ui: MUI-like design layer on top of Bootstrap 5.
 *
 * Load order (templates/main/index.php):
 *   bootstrap.min.css -> bootstrap-icons -> css/tokens.php -> css/ketna-ui.css
 *   -> css/css.php (legacy class vocabulary) -> css/ketna-icons.css
 */

/* ---------------------------------------------------------------------
 * Roboto (vendored, lib/fonts/roboto)
 * ------------------------------------------------------------------ */
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 300;
	src: url('../lib/fonts/roboto/roboto-latin-300-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 300;
	src: url('../lib/fonts/roboto/roboto-latin-ext-300-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 400;
	src: url('../lib/fonts/roboto/roboto-latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 400;
	src: url('../lib/fonts/roboto/roboto-latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 500;
	src: url('../lib/fonts/roboto/roboto-latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 500;
	src: url('../lib/fonts/roboto/roboto-latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 700;
	src: url('../lib/fonts/roboto/roboto-latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family: 'Roboto'; font-style: normal; font-display: swap; font-weight: 700;
	src: url('../lib/fonts/roboto/roboto-latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------------------------------------------------------------------
 * Tokens (surface, text, shape, elevation). Colour tokens: css/tokens.php
 * ------------------------------------------------------------------ */
:root{
	--k-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--k-font-size: 13px;
	--k-table-font-size: 12.5px;

	/* surfaces and lines: the neutral greys (css/tokens.php) */
	--k-bg: var(--k-neutral-200);
	--k-paper: #ffffff;
	--k-paper-2: var(--k-neutral-50);
	--k-row-stripe: var(--k-neutral-50);

	/* text, lines and fields: the role tokens of css/tokens.php, so every
	   page uses the same greys as the order pages */
	--k-text: var(--k-ink);
	--k-text-2: var(--k-ink-3);
	--k-text-disabled: var(--k-neutral-500);
	--k-divider: var(--k-line-strong);
	--k-divider-light: var(--k-line);
	--k-input-border: var(--k-field-border);
	--k-input-border-hover: var(--k-field-border-hover);
	--k-action-hover: var(--k-surface-hover);
	--k-action-selected: var(--k-neutral-200);
	--k-tooltip-bg: rgba(33, 37, 41, .95);
	--k-tooltip-fg: #fff;   /* text on the tooltip / note surface (dark in the dark theme: tokens.php) */
	/* one height for every control: a button next to a field lines up */
	--k-field-h: 28px;   /* text fields and selects */
	--k-button-h: 28px;

	/* --k-danger, --k-success, --k-warning, --k-info (+ -bg, -border, -fg)
	   are derived from the brand colour: css/tokens.php */

	--k-radius: 6px;
	--k-radius-sm: 4px;

	/* elevation: flat sheets with a hairline (cards, lists), stronger only
	   for things that float (menus, dialogs) */
	--k-shadow-1: 0 1px 2px rgba(0,0,0,.05);
	--k-shadow-2: none;
	--k-shadow-4: 0 2px 6px rgba(0,0,0,.12);
	--k-shadow-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);
	--k-shadow-24: 0 11px 15px -7px rgba(0,0,0,.2), 0 24px 38px 3px rgba(0,0,0,.14), 0 9px 46px 8px rgba(0,0,0,.12);

	--k-appbar-h: 44px;
	--k-drawer-w: 184px;

	/* Bootstrap globals */
	--bs-font-sans-serif: var(--k-font);
	--bs-body-font-family: var(--k-font);
	--bs-body-font-size: var(--k-font-size);
	--bs-body-line-height: 1.43;
	--bs-body-color: var(--k-text);
	--bs-body-bg: var(--k-bg);
	--bs-border-color: var(--k-divider-light);
	--bs-border-radius: var(--k-radius-sm);
	--bs-border-radius-sm: 4px;
	--bs-border-radius-lg: var(--k-radius);
	--bs-box-shadow: var(--k-shadow-4);
	--bs-box-shadow-sm: var(--k-shadow-1);
	--bs-box-shadow-lg: var(--k-shadow-8);
	--bs-danger: var(--k-danger);
	--bs-success: var(--k-success);
	--bs-warning: var(--k-warning);
	--bs-info: var(--k-info);
}

/* ---------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------ */
html, body{
	height: 100%;
}
body{
	margin: 0;
	background-color: var(--k-bg);
	color: var(--k-text);
	font-family: var(--k-font);
	font-size: var(--k-font-size);
	line-height: 1.43;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6{
	font-weight: 500;
	line-height: 1.3;
	color: var(--k-text);
	margin: 0 0 8px 0;
}
h1{ font-size: 20px; }
h2{ font-size: 17px; }
h3{ font-size: 16px; }
h4{ font-size: 15px; }
h5{ font-size: 14px; }
h6{ font-size: 13px; }
b, strong{ font-weight: 500; }
a{ color: var(--k-primary-text); text-decoration: none; }
a:hover{ color: var(--k-primary-dark); text-decoration: underline; }
hr{ border: 0; border-top: 1px solid var(--k-divider); opacity: 1; margin: 8px 0; }
fieldset{
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	padding: 4px 10px 8px;
	margin: 0 0 8px 0;
	background: var(--k-paper);
}
legend{
	float: none;
	width: auto;
	padding: 0 6px;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--k-text-2);
}
/* Reboot sets borders on tables to 0 and collapses them; legacy tables rely on
   cellpadding/width attributes, so keep them from inheriting unexpected spacing */
table{ caption-side: top; }
th{ font-weight: 500; }
img{ vertical-align: middle; }
label{ margin-bottom: 0; }
::selection{ background: rgba(var(--k-primary-rgb), .2); }

/* Base look for every form control in page content, legacy popups/overlays
   and jQuery UI dialogs: the same outlined look as .form-control. Zero
   specificity (:where), so any class that styles a control (.input_txt,
   .form-control, .input_map, module CSS…) still wins, while controls whose
   class has no styling (e.g. .exchange_rate in prodotti/currencies) no
   longer fall back to the browser default. */
:where(#content, .k-dialog, .msg_overlay, .ui-dialog) :where(
	input[type=text], input[type=number], input[type=email], input[type=date],
	input[type=password], input[type=tel], input:not([type]), select, textarea
){
	box-sizing: border-box;
	min-height: var(--k-field-h);
	padding: 2px 8px;
	font: inherit;
	color: var(--k-text);
	background-color: var(--k-paper);
	border: 1px solid var(--k-input-border);
	border-radius: var(--k-radius-sm);
	transition: border-color .15s ease, box-shadow .15s ease;
	vertical-align: middle;
}
:where(#content, .k-dialog, .msg_overlay, .ui-dialog) :where(
	input[type=text], input[type=number], input[type=email], input[type=date],
	input[type=password], input[type=tel], input:not([type]), select, textarea
):hover{
	border-color: var(--k-input-border-hover);
}
:where(#content, .k-dialog, .msg_overlay, .ui-dialog) :where(
	input[type=text], input[type=number], input[type=email], input[type=date],
	input[type=password], input[type=tel], input:not([type]), select, textarea
):focus{
	outline: 0;
	border-color: var(--k-focus);
	box-shadow: 0 0 0 2px var(--k-focus-ring);
}
/* buttons without a class of their own: secondary (grey outline), like the
   buttons of the order pages. The brand colour is kept for the one primary
   action of a page (.apply_action, .btn-primary) */
:is(#content, .k-dialog, .msg_overlay, .ui-dialog) :is(input[type=button], input[type=submit], input[type=reset], button):is(:not([class]), [class=""], [class="hasDatepicker"]){
	min-height: var(--k-button-h);
	padding: 2px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--k-ink-2);
	background: var(--k-paper);
	border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
	vertical-align: middle;
}
:is(#content, .k-dialog, .msg_overlay, .ui-dialog) :is(input[type=button], input[type=submit], input[type=reset], button):is(:not([class]), [class=""], [class="hasDatepicker"]):not(:disabled):hover{
	color: var(--k-ink);
	background-color: var(--k-surface-sunken);
	border-color: var(--k-field-border-hover);
}
:is(#content, .k-dialog, .msg_overlay, .ui-dialog) :is(input[type=button], input[type=submit], input[type=reset], button):is(:not([class]), [class=""], [class="hasDatepicker"])[disabled]{
	opacity: .5;
	cursor: default;
}
/* legacy button classes with no styling of their own (search / save /
   download template buttons): same secondary look as the plain buttons
   (Save and Confirm order are then filled, below) */
:is(input, button):is(.cerca, .save, .download_empty_excel, .client_confirm):not(.input_button, .btn, .apply_action, .cancel_action, [class*="input_btn_"]){
	min-height: var(--k-button-h);
	padding: 2px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--k-ink-2);
	background: var(--k-paper);
	border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
	vertical-align: middle;
}
:is(input, button):is(.cerca, .save, .download_empty_excel, .client_confirm):not(.input_button, .btn, .apply_action, .cancel_action, [class*="input_btn_"]):not(:disabled):hover{
	color: var(--k-ink);
	background-color: var(--k-surface-sunken);
	border-color: var(--k-field-border-hover);
}
/* Save / the customer's Confirm order: the main action of their page, filled
   with the brand colour (also when written as .input_button save) */
:is(input, button):is(.save, .client_confirm):not(.btn, .cancel_action, [class*="input_btn_"]){
	color: #fff;
	background-color: var(--k-primary);
	border-color: var(--k-primary);
}
:is(input, button):is(.save, .client_confirm):not(.btn, .cancel_action, [class*="input_btn_"]):not(:disabled):hover{
	color: #fff;
	background-color: var(--k-primary-dark);
	border-color: var(--k-primary-dark);
}
/* Search bars: a <form action="javascript:..."> with inline fields placed
   directly in the page (Movimenti, lista DDT, Sfoglia ordini, reports…)
   becomes a Paper toolbar like the other forms. Layout only. */
#content > form[action^="javascript:"]:not(:has(table)){
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 8px 0;
	padding: 6px 10px;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
#content > form[action^="javascript:"]:not(:has(table)) > br{ display: none; }
#content > form[action^="javascript:"]:not(:has(table)) > label{
	width: auto !important;
	margin: 0;
	color: var(--k-text-2);
	font-size: 13px;
}
/* Loose controls wrapped by functions.js (k_wrap_loose_controls) and the
   page's top icon-button row (#buttons): same Paper toolbar as the search
   forms above, so they never sit flush against the table below. */
#content > .k-toolbar,
#content > #buttons:has(> :not(script, style, input[type=hidden], br)){
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin: 0 0 8px 0;
	padding: 6px 10px;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
#content > #buttons:has(> :not(script, style, input[type=hidden], br)){ gap: 2px; padding: 4px 8px; }
#content > .k-toolbar > br{ display: none; }
/* <br> used as spacing between page blocks (bar, <br><br><br>, list): the
   blocks have their own margins; a <br> after a block or after another <br>
   only adds a blank band */
#content > :is(div, form, table) + br,
#content > br + br{ display: none; }
#content > .k-toolbar > label{
	width: auto !important;
	margin: 0;
	color: var(--k-text-2);
	font-size: 13px;
}
/* a checkbox and its label stay together */
#content > .k-toolbar > input[type=checkbox] + label{ margin-left: -6px; }
/* a checkbox inside its label (BOMs: Show all) */
#content > .k-toolbar > label.k-toolbar-check{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#content > .k-toolbar > label.k-toolbar-check > input{ margin: 0; }
/* Address book: one search field */
#content > .k-toolbar > .k-rubrica-cerca{ width: 100%; max-width: 420px; }
/* a hint at the right end of a toolbar */
#content > .k-toolbar > .k-nota{ margin-left: auto; font-size: 12.5px; color: var(--k-ink-3); }
/* date fields: wide enough for dd/mm/yyyy even when the page sets ~70px */
input.hasDatepicker{ min-width: 108px; }
/* text fields are never narrower than a few characters, even when the page
   sets a tiny width (e.g. style="max-width: 20px" on licence quantities,
   "width: 32px" on RMA minutes): min-width wins over width/max-width */
#content input:is([type=text], [type=number], :not([type])){ min-width: 56px; }
#content input.hasDatepicker{ min-width: 108px; }
/* plain selects: same flat chevron as .input_map / .form-select instead of
   the browser arrow (zero specificity: styled classes keep their own) */
:where(#content, .k-dialog, .msg_overlay, .ui-dialog) :where(select:not([multiple], [size])){
	-webkit-appearance: none;
	appearance: none;
	padding-right: 30px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235f6368' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 10px;
}
/* selects in table cells: .input_map / .form-select are width 100%, which
   doesn't count towards an auto table's column width, so the column
   collapsed and the text was cut ("Di", "Bc" in Acquisti / Da ordinare) */
#content td select:not([multiple], [size]){ min-width: 160px; }
#content th select:not([multiple], [size]){ min-width: 72px; }
/* every native checkbox / radio uses the theme colour, also those with a
   module class (e.g. .kind-checkbox in Anagrafe / Firms/Kinds were browser
   blue); zero specificity, so styled ones (.form-check-input) keep theirs */
:where(input[type=checkbox], input[type=radio]){ accent-color: var(--k-primary); }
/* error window: long request URLs wrap instead of scrolling sideways */
#error_message{ overflow-wrap: anywhere; }
:is(#content, .k-dialog, .msg_overlay, .ui-dialog) :is(input[type=checkbox], input[type=radio]):is(:not([class]), [class=""], [class="hasDatepicker"]),
input.checkbox{
	width: 16px;
	height: 16px;
	accent-color: var(--k-primary);
	vertical-align: middle;
	cursor: pointer;
}

/* ---------------------------------------------------------------------
 * Bootstrap refinements towards MUI
 * ------------------------------------------------------------------ */
.form-control,
.form-select{
	font-size: var(--k-font-size);
	border-color: var(--k-input-border);
	border-radius: var(--k-radius-sm);
	color: var(--k-text);
}
.form-control:hover,
.form-select:hover{ border-color: var(--k-input-border-hover); }
.form-control:focus,
.form-select:focus{ border-color: var(--k-focus); box-shadow: 0 0 0 2px var(--k-focus-ring); }
.form-control-sm,
.form-select-sm{ min-height: var(--k-field-h); font-size: var(--k-font-size); }
.form-control[readonly],
.form-control:disabled,
.form-select:disabled{ background-color: var(--k-paper-2); color: var(--k-text-2); }
/* Disabled fields (e.g. a done activity that can't be edited): MUI disabled
   look, and no hover/focus reaction. !important beats the #content-scoped
   class-less rules above and the legacy .input_txt:hover rules. */
:is(input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=hidden]), select, textarea):disabled{
	color: var(--k-text-2) !important;
	-webkit-text-fill-color: var(--k-text-2);
	background-color: var(--k-paper-2) !important;
	border-color: var(--k-divider) !important;
	box-shadow: none !important;
	cursor: default !important;
	opacity: 1;
}
:is(input[type=checkbox], input[type=radio]):disabled,
:is(input[type=checkbox], input[type=radio]):disabled + label{
	cursor: default !important;
	opacity: .5;
}
.form-label,
.col-form-label{ color: var(--k-text-2); font-size: 13px; }
.form-check-input{ border-color: var(--k-field-border-hover); }
.form-floating > label{ color: var(--k-text-2); }

.btn{
	--bs-btn-font-size: 12.5px;
	--bs-btn-font-weight: 600;
	--bs-btn-padding-y: 3px;
	--bs-btn-padding-x: 12px;
	--bs-btn-border-radius: var(--k-radius-sm);
	--bs-btn-focus-box-shadow: 0 0 0 2px var(--k-focus-ring);
	letter-spacing: 0;
	text-transform: none;
	box-shadow: none;
}
.btn-sm{
	--bs-btn-padding-y: 2px;
	--bs-btn-padding-x: 10px;
	--bs-btn-font-size: 12.5px;
}
.btn-outline-secondary{
	--bs-btn-color: var(--k-ink-2);
	--bs-btn-bg: var(--k-paper);
	--bs-btn-border-color: var(--k-field-border);
	--bs-btn-hover-color: var(--k-ink);
	--bs-btn-hover-bg: var(--k-surface-sunken);
	--bs-btn-hover-border-color: var(--k-field-border-hover);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--k-ink-2);
	--bs-btn-active-border-color: var(--k-ink-2);
}
.btn-icon{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--k-text-2);
	font-size: 18px;
	text-transform: none;
}
.btn-icon:not(:disabled):hover{ background-color: var(--k-action-hover); color: var(--k-text); }

.card{
	--bs-card-border-color: var(--k-divider);
	--bs-card-border-radius: var(--k-radius);
	--bs-card-inner-border-radius: calc(var(--k-radius) - 1px);
	--bs-card-bg: var(--k-paper);
	--bs-card-cap-bg: var(--k-paper);
	--bs-card-cap-padding-y: 12px;
	--bs-card-cap-padding-x: 16px;
	box-shadow: var(--k-shadow-1);
}
.card-header{ font-weight: 500; font-size: 15px; }

/* Centres a message card (home, 404, access denied…) in the content area */
.k-page-center{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
}
.k-message-card{ width: 100%; max-width: 560px; }

/* Home (mod/home/index.php, Ketna and customer portal): one card per task.
   Every card the same size, the rows centred (5 + 5 on a laptop), and the
   block in the middle of the page, vertically too. Phones: one card per
   row, from the top. */
.k-home{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: calc(100dvh - var(--k-appbar-h) - 16px);   /* #content: 8px padding above and below */
	margin: 0 auto;
	max-width: 1240px;
	box-sizing: border-box;
}
.k-home h1{ margin: 0 0 16px; font-size: 20px; font-weight: 700; text-align: center; color: var(--k-ink); }
.k-home-schede{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: calc(var(--k-colonne, 5) * 228px + (var(--k-colonne, 5) - 1) * 12px); }   /* --k-colonne: mod/home/index.php */
.k-home-scheda{
	display: grid;
	grid-template-columns: 32px 1fr;
	grid-template-rows: auto auto;
	align-content: center;
	column-gap: 10px;
	row-gap: 2px;
	box-sizing: border-box;
	width: 228px;
	height: 84px;
	padding: 12px 14px;
	color: var(--k-ink);
	text-decoration: none;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius);
	transition: border-color .15s ease, background-color .15s ease;
}
.k-home-scheda:hover{ color: var(--k-ink); text-decoration: none; border-color: var(--k-primary); background: var(--k-surface-hover); }
.k-home-scheda > .bi{ grid-row: 1 / 3; align-self: center; font-size: 22px; line-height: 1; color: var(--k-primary-text); }
.k-home-titolo{ font-size: 14px; font-weight: 700; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* two lines at most, every card the same height */
.k-home-testo{ font-size: 12.5px; line-height: 16px; color: var(--k-ink-3); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
@media (max-width: 760px){
	.k-home{ justify-content: flex-start; min-height: 0; padding-top: 8px; }
	.k-home-schede{ width: 100%; }
	.k-home-scheda{ width: 100%; height: 64px; padding: 8px 14px; }
}
.k-home-nota{ margin: 20px 0 0; font-size: 12.5px; text-align: center; color: var(--k-ink-3); }

.table{
	--bs-table-bg: var(--k-paper);
	--bs-table-striped-bg: var(--k-row-stripe);
	--bs-table-hover-bg: var(--k-surface-sunken);
	--bs-table-border-color: var(--k-divider-light);
	font-size: var(--k-table-font-size);
}
.table > thead > tr > th{ font-weight: 500; color: var(--k-text); }
.table-sm > :not(caption) > * > *{ padding: 6px 10px; }

.badge{ font-weight: 500; border-radius: 16px; padding: 4px 10px; }

.modal{
	--bs-modal-border-radius: var(--k-radius);
	--bs-modal-box-shadow: var(--k-shadow-24);
	--bs-modal-header-border-color: var(--k-divider);
	--bs-modal-footer-border-color: var(--k-divider);
}
.modal-title{ font-weight: 500; font-size: 18px; }

.tooltip{ --bs-tooltip-bg: var(--k-tooltip-bg); --bs-tooltip-font-size: 12px; --bs-tooltip-border-radius: 4px; }

.alert{ border-radius: var(--k-radius); border: 0; }

.accordion{
	--bs-accordion-border-color: var(--k-divider);
	--bs-accordion-border-radius: var(--k-radius);
	--bs-accordion-inner-border-radius: calc(var(--k-radius) - 1px);
}

/* ---------------------------------------------------------------------
 * App shell: app bar + navigation drawer + main content
 * ------------------------------------------------------------------ */
.k-appbar{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1030;
	height: var(--k-appbar-h);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px 0 6px;
	background-color: var(--k-paper);
	color: var(--k-text);
	border-bottom: 1px solid var(--k-divider);
	box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.k-appbar .k-brand{
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--k-text);
	text-decoration: none;
}
/* the wordmark's lowercase letters sit in the lower part of the image (only
   t/k reach the top), so lift it to centre the letters optically in the bar */
.k-appbar .k-brand img{ height: 28px; width: auto; transform: translateY(-4px); }
.k-appbar .k-page-title{
	font-size: 16px;
	font-weight: 500;
	color: var(--k-text);
	margin: 0 0 0 8px;
	padding-left: 16px;
	border-left: 1px solid var(--k-divider);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.k-appbar .k-spacer{ flex: 1 1 auto; }
.k-appbar .k-user{
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	color: var(--k-text-2);
	white-space: nowrap;
}
.k-appbar .k-user b{ color: var(--k-text); font-weight: 500; }
.k-avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	box-sizing: border-box;
	/* Roboto's line box has more room above the capitals than below, so a
	   flex-centred letter sat ~1px high: 2px top padding moves it to the
	   optical centre */
	padding-top: 2px;
	line-height: 1;
	border-radius: 50%;
	background-color: var(--k-primary);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
}
.k-appbar .k-lang{ width: auto; min-width: 120px; }

.k-drawer{
	position: fixed;
	top: var(--k-appbar-h);
	bottom: 0;
	left: 0;
	z-index: 1020;
	width: var(--k-drawer-w);
	overflow-y: auto;
	background-color: var(--k-paper);
	border-right: 1px solid var(--k-divider);
	padding: 4px 0;
	transition: transform .2s ease;
}
.k-drawer ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
.k-drawer > #menu > ul > li > a{
	display: flex;
	align-items: center;
	min-height: 30px;
	margin: 1px 6px;
	padding: 4px 10px;
	border-radius: var(--k-radius);
	color: var(--k-text);
	font-weight: 500;
	text-decoration: none;
	transition: background-color .15s ease;
}
.k-drawer > #menu > ul > li > a:hover{ background-color: var(--k-action-hover); }
.k-drawer > #menu > ul > li.active > a{
	background-color: rgba(var(--k-primary-rgb), .1);
	color: var(--k-primary-text);
}
.k-drawer > #menu > ul > li > ul{ padding: 0 0 4px 0; }
.k-drawer > #menu > ul > li > ul > li > a{
	display: block;
	margin: 0 6px 0 14px;
	padding: 3px 8px 3px 14px;
	border-left: 2px solid var(--k-divider-light);
	border-radius: 0 var(--k-radius) var(--k-radius) 0;
	color: var(--k-text-2);
	font-size: 13px;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}
.k-drawer > #menu > ul > li > ul > li > a:hover{
	background-color: var(--k-action-hover);
	color: var(--k-text);
}
.k-drawer > #menu > ul > li > ul > li.active > a{
	border-left-color: var(--k-primary);
	background-color: rgba(var(--k-primary-rgb), .08);
	color: var(--k-primary-text);
	font-weight: 500;
}
/* Exit sits at the bottom of the drawer: #menu and its list fill the drawer
   height and the logout item takes the free space above it */
.k-drawer{ display: flex; flex-direction: column; }
.k-drawer > #menu,
.k-drawer > #menu > ul{
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}
.k-drawer > #menu > ul > li.k-logout{
	margin-top: auto;
	padding-top: 8px;
	border-top: 1px solid var(--k-divider);
}
.k-drawer > #menu > ul > li.k-logout > a{ color: var(--k-text-2); font-weight: 400; }
.k-drawer > #menu > ul > li.k-logout > a::before{
	font-family: 'bootstrap-icons';
	content: '\F1C3'; /* bi-box-arrow-right */
	margin-right: 12px;
	font-size: 16px;
}

#content.k-main{
	position: fixed;
	top: var(--k-appbar-h);
	left: var(--k-drawer-w);
	right: 0;
	bottom: 0;
	overflow: auto;
	padding: 8px;
	transition: left .2s ease;
}
body{ --k-drawer-offset: var(--k-drawer-w); }
body.k-drawer-collapsed{ --k-drawer-offset: 0px; }
body.k-drawer-collapsed .k-drawer{ transform: translateX(-100%); }
body.k-drawer-collapsed #content.k-main{ left: 0; }

/* login / anonymous pages: no drawer */
body.k-anon .k-drawer,
body.k-anon .k-drawer-toggle{ display: none; }
body.k-anon #content.k-main{ left: 0; }

@media (max-width: 991.98px){
	body{ --k-drawer-offset: 0px; }
	#content.k-main{ left: 0; padding: 8px; }
	.k-drawer{ box-shadow: var(--k-shadow-8); }
	body:not(.k-drawer-open) .k-drawer{ transform: translateX(-100%); }
	body.k-drawer-collapsed.k-drawer-open .k-drawer{ transform: none; }
	.k-appbar .k-page-title{ display: none; }
}
@media (max-width: 575.98px){
	.k-appbar .k-user-name{ display: none; }
}

.k-session-alert{
	position: fixed;
	top: calc(var(--k-appbar-h) + 12px);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1060;
	min-width: 320px;
	box-shadow: var(--k-shadow-8);
}

/* ---------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------ */
.k-login{
	min-height: calc(100vh - var(--k-appbar-h) - 48px);
	display: flex;
	align-items: center;
	justify-content: center;
}
.k-login .card{
	width: 100%;
	max-width: 380px;
	border: 1px solid var(--k-line-strong);
	border-radius: 8px;
	box-shadow: var(--k-shadow-4);
}
.k-login .card-body{ padding: 28px; }
.k-login h1{ margin: 0 0 20px; font-size: 20px; font-weight: 700; color: var(--k-ink); }
/* label above the field, as in the forms */
.k-login-campo{ margin-bottom: 14px; }
.k-login-campo > label{ display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--k-ink-2); }
.k-login-campo > .form-control{ width: 100%; min-height: 34px; margin: 0; background-color: var(--k-paper); }
.k-login .k-login-invia{ width: 100%; min-height: 34px; margin-top: 6px; font-size: 13px; }
.k-login .k-login-link{ display: block; margin-top: 12px; font-size: 12.5px; text-align: center; }
.k-login .card-body > p{ margin-top: 20px !important; padding-top: 14px; font-size: 12px; color: var(--k-ink-3) !important; border-top: 1px solid var(--k-line); }

/* ---------------------------------------------------------------------
 * Overlays: block_interface / spinner / Popup (mod/basic/js)
 * ------------------------------------------------------------------ */
.overlay,
.k-backdrop{
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, .5);
}
.overlay{ z-index: 1040; }
.msg_overlay{
	position: fixed;
	top: 15%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1041;
	max-width: calc(100vw - 32px);
	max-height: 75vh;
	overflow: auto;
	padding: 12px 14px;
	background-color: var(--k-paper);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-24);
}
.msg_overlay .close_overlay{
	text-align: right;
	margin-bottom: 8px;
}
.msg_overlay .close_overlay .input_button{ margin-right: 0; }
#waiting_block{
	top: 40%;
	width: auto !important;
	min-width: 240px;
	text-align: center;
	z-index: 999999;
}
#waiting_block .close_overlay{ display: none; }
/* show_spinner (functions.js): blocking at once, visible after 250ms */
@keyframes k-attesa-in{ from{ opacity: 0; } to{ opacity: 1; } }
.overlay.k-attesa, #waiting_block{ animation: k-attesa-in .15s ease .25s both; }
.spinner_inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 4px 10px;
	color: var(--k-text-2);
}
.spinner_inner b{ font-weight: 500; }
.spinner_inner .spinner-border{ color: var(--k-primary-text); width: 40px; height: 40px; border-width: 4px; }

.k-dialog{
	position: absolute;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	padding: 0;
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 64px);
	background-color: var(--k-paper);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-24);
	overflow: hidden;
	animation: k-dialog-in .15s ease-out;
}
/* waiting for content (mod/basic/js/classes/popup.js): hidden but still
   measurable, so code that sizes/positions it keeps working */
.k-dialog.k-dialog-pending{
	visibility: hidden;
	animation: none;
}
@keyframes k-dialog-in{
	from{ opacity: 0; transform: translateY(8px); }
	to{ opacity: 1; transform: none; }
}
.k-popup-no-data{ padding: 24px 0; }

/* theme menu in the app bar (templates/main/index.php): Light / Dark / System */
.k-tema .btn-icon{ font-size: 17px; color: var(--k-ink-2); }
.k-tema .dropdown-menu{ min-width: 180px; padding: 4px; font-size: 13px; }
.k-tema .dropdown-item{ display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--k-radius-sm); }
.k-tema .dropdown-item.active{ color: var(--k-ink); background: var(--k-surface-sunken); font-weight: 600; }

/* In-app alert / confirm (mod/basic/js/k_dialoghi.js): a small card over a
   dimmed page, icon + message, buttons bottom right; the main button in the
   brand colour, red when it deletes. */
.k-dlg-fondo{
	position: fixed;
	inset: 0;
	z-index: 20000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 16px 16px;
	background: rgba(17, 24, 39, .32);
	animation: k-dlg-fondo-in .12s ease-out;
}
@keyframes k-dlg-fondo-in{ from{ opacity: 0; } to{ opacity: 1; } }
.k-dlg{
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-sizing: border-box;
	width: 440px;
	max-width: 100%;
	max-height: calc(100vh - 24vh);
	padding: 18px 18px 14px;
	font-family: var(--k-font);
	font-size: 13.5px;
	color: var(--k-ink);
	background: var(--k-paper);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-24);
	animation: k-dialog-in .15s ease-out;
}
.k-dlg-riga{ display: flex; gap: 12px; min-height: 0; }
.k-dlg-icona{ flex: none; font-size: 22px; line-height: 22px; color: var(--k-info-fg); }
.k-dlg-errore .k-dlg-icona,
.k-dlg-pericolo .k-dlg-icona{ color: var(--k-danger); }
.k-dlg-ok .k-dlg-icona{ color: var(--k-success-fg); }
.k-dlg-domanda .k-dlg-icona{ color: var(--k-ink-2); }
.k-dlg-corpo{ flex: 1 1 auto; min-width: 0; overflow: auto; }
.k-dlg-titolo{ margin-bottom: 4px; font-size: 15px; font-weight: 700; line-height: 22px; }
.k-dlg-testo{ line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.k-dlg-azioni{ display: flex; justify-content: flex-end; gap: 8px; }
.k-dlg-campo{ display: block; box-sizing: border-box; width: 100%; height: var(--k-field-h); margin-top: 10px; padding: 2px 8px; font: 400 13px/16px var(--k-font); color: var(--k-ink); background: var(--k-paper); border: 1px solid var(--k-field-border); border-radius: var(--k-radius-sm); }
.k-dlg-campo:focus{ outline: 0; border-color: var(--k-focus); box-shadow: 0 0 0 2px var(--k-focus-ring); }
.k-dlg-errore{ min-height: 0; margin-top: 4px; font-size: 12px; color: var(--k-danger); }
.k-dlg-errore:empty{ display: none; }
.k-dlg-btn{
	min-width: 72px;
	height: var(--k-button-h);
	padding: 0 14px;
	font: 600 12.5px/1 var(--k-font);
	color: var(--k-ink-2);
	background: var(--k-paper);
	border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
}
.k-dlg-btn:hover{ color: var(--k-ink); background: var(--k-surface-sunken); border-color: var(--k-field-border-hover); }
.k-dlg-btn:focus-visible{ outline: 0; box-shadow: 0 0 0 2px var(--k-focus-ring); }
.k-dlg-btn-si{ color: #fff; background: var(--k-primary); border-color: var(--k-primary); }
.k-dlg-btn-si:hover{ color: #fff; background: var(--k-primary-dark); border-color: var(--k-primary-dark); }
.k-dlg-btn-pericolo{ background: var(--k-danger); border-color: var(--k-danger); }
.k-dlg-btn-pericolo:hover{ background: var(--k-danger); border-color: var(--k-danger); filter: brightness(.92); }
/* short note (Saved...), bottom centre, fades out */
.k-dlg-notifica{
	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 20001;
	transform: translateX(-50%);
	max-width: calc(100vw - 32px);
	padding: 9px 16px;
	font: 500 13px/18px var(--k-font);
	color: var(--k-tooltip-fg);
	background: var(--k-tooltip-bg);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-8, 0 4px 12px rgba(0,0,0,.2));
	transition: opacity .35s ease;
	animation: k-dialog-in .15s ease-out;
}
.k-dlg-notifica.k-dlg-notifica-via{ opacity: 0; }
.k-dlg-notifica .bi{ margin-right: 8px; }
.k-dlg-notifica-ok .bi{ color: var(--k-success-note, #6fdc8c); }
@media (max-width: 760px){
	.k-dlg-fondo{ align-items: flex-end; padding: 16px 8px; }
	.k-dlg{ width: 100%; }
	.k-dlg-azioni .k-dlg-btn{ flex: 1 1 0; height: 36px; }
}
/* Dialog forms use the full dialog width: layout tables stretch, and text
   fields/selects fill their cell (overriding module inline widths such as
   style="width:100px"); text that doesn't fit ends with an ellipsis. */
.k-dialog-body > table,
.k-dialog-body > form > table,
.k-dialog-body > div > table{ width: 100% !important; }
.k-dialog-body :is(input:not([type=button], [type=submit], [type=reset], [type=checkbox], [type=radio], [type=hidden], [type=image], [type=file]), select, textarea){
	width: 100% !important;
	max-width: 100%;
	/* never squeezed to nothing: the cell widens instead (and the dialog
	   widens to fit, classes/popup.js fit_width) */
	min-width: 64px;
	box-sizing: border-box;
	text-overflow: ellipsis;
}
.k-dialog-body select{ white-space: nowrap; overflow: hidden; min-width: 96px; }
.k-dialog-body textarea{ min-width: 160px; }
.k-dialog-body input.hasDatepicker{ min-width: 108px; }
/* select with no options: greyed label (functions.js, k_label_empty_selects) */
select[data-k-no-options]{ color: var(--k-text-disabled) !important; }
.k-dialog > .header_generic{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	min-height: 32px;
	padding: 2px 6px 2px 12px;
	background-color: var(--k-paper);
}
.k-dialog > .header_generic .btn-close{ padding: 8px; border-radius: 50%; }
.k-dialog > .header_generic:has(> .k-dialog-titolo){ justify-content: space-between; }
.k-dialog-titolo{ min-width: 0; overflow: hidden; color: var(--k-ink); font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
/* the e-mail form (mailform.js): Cancel | Send at the bottom of the dialog, always in view */
#mail_form form > table > tbody > tr:last-child{ position: sticky; bottom: -8px; z-index: 2; background: var(--k-paper); box-shadow: 0 -1px 0 var(--k-line); }
#mail_form .k-mail-annulla{ margin-right: 8px; }
#mail_form #mailform-button{ color: #fff; background-color: var(--k-primary); border-color: var(--k-primary); }
#mail_form #mailform-button:not(:disabled):hover{ background-color: var(--k-primary-dark); border-color: var(--k-primary-dark); }
#mail_form{ overflow-x: hidden; }   /* the content fits; a stray sideways scrollbar showed under it */
/* a field that failed its check: the pages mark it with an inline red border
   (2-3px "solid red", ~20 places); one calm error look for all of them, and no
   jump in size. Same look as .k-campo-errato */
:is(input, select, textarea)[style*="solid red"],
:is(input, select, textarea).k-campo-errato{
	border: 1px solid var(--k-danger) !important;
	background-color: var(--k-danger-bg) !important;
	box-shadow: 0 0 0 2px var(--k-danger-border) !important;
}
/* a dialog whose X the page hid (it closes through its own Close button, e.g.
   the firm's contacts / destinations / end users): the header is only the drag
   handle, a slim bar with a grip mark instead of an empty 32px strip */
.k-dialog > .header_generic:not(:has(> :not([style*="display: none"]))){ justify-content: center; min-height: 14px; padding: 3px 0; }
.k-dialog > .header_generic:not(:has(> :not([style*="display: none"])))::before{ content: ''; width: 36px; height: 4px; background: var(--k-line-strong); border-radius: 2px; }
.k-dialog > .header_generic .btn-close:hover{ background-color: var(--k-action-hover); }
.k-dialog-body{ padding: 8px 12px; overflow: auto; flex: 1 1 auto; }

/* ---------------------------------------------------------------------
 * jQuery UI widgets (datepicker, autocomplete, dialog, accordion, tabs)
 * ------------------------------------------------------------------ */
.ui-widget{ font-family: var(--k-font); font-size: var(--k-font-size); }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button{ font-family: var(--k-font); font-size: var(--k-font-size); }
.ui-helper-hidden-accessible{ position: absolute !important; clip: rect(1px,1px,1px,1px); width: 1px; height: 1px; overflow: hidden; }
.ui-helper-clearfix::after{ content: ''; display: table; clear: both; }
.ui-front{ z-index: 1070; }
.ui-helper-hidden{ display: none; }
.ui-helper-reset{ margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-zfix{ width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; }
.ui-icon{ display: inline-block; width: 16px; height: 16px; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; vertical-align: middle; }
.ui-resizable{ position: relative; }
.ui-resizable-handle{ position: absolute; font-size: .1px; display: block; }
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle{ display: none; }
.ui-draggable .ui-dialog-titlebar{ cursor: move; }

/* datepicker */
.ui-datepicker{
	display: none;
	width: 296px;
	padding: 8px 12px 12px;
	margin-top: 4px;
	background: var(--k-paper);
	border: 0;
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-8);
	z-index: 1070 !important;
}
.ui-datepicker .ui-datepicker-header{
	position: relative;
	padding: 6px 0 8px;
	background: transparent;
	border: 0;
}
.ui-datepicker .ui-datepicker-title{
	margin: 0 40px;
	line-height: 32px;
	text-align: center;
	font-weight: 500;
	text-transform: capitalize;
}
.ui-datepicker .ui-datepicker-title select{ font-size: 13px; padding: 2px 4px; border: 1px solid var(--k-input-border); border-radius: 4px; }
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{
	position: absolute;
	top: 6px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
	border: 0;
	background: transparent;
}
.ui-datepicker .ui-datepicker-prev{ left: 0; }
.ui-datepicker .ui-datepicker-next{ right: 0; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover{ background: var(--k-action-hover); }
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span{ display: none; }
.ui-datepicker .ui-datepicker-prev::after,
.ui-datepicker .ui-datepicker-next::after{
	font-family: 'bootstrap-icons';
	font-size: 14px;
	color: var(--k-text-2);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.ui-datepicker .ui-datepicker-prev::after{ content: '\F284'; } /* chevron-left */
.ui-datepicker .ui-datepicker-next::after{ content: '\F285'; } /* chevron-right */
.ui-datepicker table{ width: 100%; border-collapse: collapse; font-size: 13px; margin: 0; }
.ui-datepicker th{
	padding: 4px 0;
	text-align: center;
	font-weight: 400;
	font-size: 12px;
	color: var(--k-text-2);
	border: 0;
	background: transparent;
}
.ui-datepicker td{ padding: 1px; border: 0; text-align: center; }
.ui-datepicker td a,
.ui-datepicker td span{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border-radius: 50%;
	border: 0 !important;
	background: transparent !important;
	color: var(--k-text) !important;
	font-weight: 400 !important;
	text-decoration: none;
}
.ui-datepicker td a:hover{ background: var(--k-action-hover) !important; }
.ui-datepicker td.ui-datepicker-today a{ border: 1px solid var(--k-text-2) !important; }
.ui-datepicker td a.ui-state-active,
.ui-datepicker td.ui-datepicker-current-day a{
	background: var(--k-primary) !important;
	color: #fff !important;
	font-weight: 500 !important;
}
.ui-datepicker td.ui-datepicker-other-month a{ color: var(--k-text-disabled) !important; }
.ui-datepicker td.ui-datepicker-week-col{ color: var(--k-text-disabled); font-size: 11px; }
.ui-datepicker .ui-datepicker-buttonpane{
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--k-divider);
}
.ui-datepicker .ui-datepicker-buttonpane button{
	padding: 4px 10px;
	font-size: 12.5px;
	font-weight: 600;
	text-transform: none;
	color: var(--k-ink-2);
	background: transparent;
	border: 0;
	border-radius: var(--k-radius-sm);
	cursor: pointer;
}
.ui-datepicker .ui-datepicker-buttonpane button:not(:disabled):hover{ background: var(--k-surface-sunken); color: var(--k-ink); }
/* timepicker addon */
.ui-timepicker-div dl{ margin: 8px 0 0; }
.ui-timepicker-div dt{ font-weight: 400; color: var(--k-text-2); font-size: 12px; }
.ui-slider{ position: relative; height: 4px; background: rgba(var(--k-primary-rgb), .25); border-radius: 2px; border: 0; margin: 10px 6px; }
.ui-slider .ui-slider-handle{
	position: absolute;
	top: -6px;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--k-primary);
	border: 0;
	box-shadow: var(--k-shadow-1);
	cursor: pointer;
}

/* autocomplete / menu */
.ui-autocomplete{
	position: absolute;
	max-height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	cursor: default;
}
.ui-menu{
	list-style: none;
	margin: 4px 0 0;
	padding: 6px 0;
	background: var(--k-paper);
	border: 0;
	border-radius: var(--k-radius-sm);
	box-shadow: var(--k-shadow-8);
	z-index: 1070 !important;
}
.ui-menu .ui-menu-item{ margin: 0; padding: 0; }
.ui-menu .ui-menu-item a{
	display: block;
	padding: 6px 16px;
	color: var(--k-text);
	text-decoration: none;
	line-height: 1.5;
	border: 0 !important;
	border-radius: 0 !important;
	margin: 0 !important;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active,
.ui-menu .ui-menu-item a:hover{
	background: var(--k-action-hover) !important;
	color: var(--k-text) !important;
	font-weight: 400;
}

/* dialog */
.ui-widget-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	opacity: 1;
}
.ui-dialog{
	position: absolute;
	padding: 0;
	background: var(--k-paper);
	border: 0;
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-24);
	overflow: hidden;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar{
	position: relative;
	padding: 7px 44px 7px 12px;
	background: var(--k-paper);
	border: 0;
	border-bottom: 1px solid var(--k-divider);
	border-radius: 0;
	color: var(--k-text);
}
.ui-dialog .ui-dialog-title{ font-size: 17px; font-weight: 500; }
.ui-dialog .ui-dialog-titlebar-close{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	width: 32px;
	height: 32px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	font-size: 0;
	color: transparent;
}
.ui-dialog .ui-dialog-titlebar-close:hover{ background: var(--k-action-hover); }
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-text{ display: none; }
.ui-dialog .ui-dialog-titlebar-close::after{
	content: '\F659'; /* bi-x-lg */
	font-family: 'bootstrap-icons';
	font-size: 16px;
	color: var(--k-text-2);
}
.ui-dialog .ui-dialog-content{ padding: 8px 12px; background: var(--k-paper); overflow: auto; position: relative; }
.ui-dialog .ui-dialog-buttonpane{
	display: flex;
	justify-content: flex-end;
	padding: 6px 10px;
	border-top: 1px solid var(--k-divider);
	background: var(--k-paper);
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset{ display: flex; gap: 8px; }
.ui-dialog .ui-dialog-buttonpane button{
	min-height: var(--k-button-h);
	padding: 2px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--k-ink-2);
	background: var(--k-paper);
	border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm);
	cursor: pointer;
	vertical-align: middle;
}
.ui-dialog .ui-dialog-buttonpane button:not(:disabled):hover{
	color: var(--k-ink);
	background-color: var(--k-surface-sunken);
	border-color: var(--k-field-border-hover);
}
.ui-dialog .ui-dialog-buttonpane button:first-child{
	color: #fff;
	background: var(--k-primary);
	border-color: var(--k-primary);
}
.ui-dialog .ui-dialog-buttonpane button:first-child:not(:disabled):hover{ background: var(--k-primary-dark); border-color: var(--k-primary-dark); }
.ui-dialog .ui-resizable-handle{ position: absolute; font-size: .1px; display: block; }
.ui-dialog .ui-resizable-se{ width: 12px; height: 12px; right: 0; bottom: 0; cursor: se-resize; }

/* accordion */
.ui-accordion{ margin-bottom: 8px; }
.ui-accordion .ui-accordion-header{
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 36px 5px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	color: var(--k-ink);
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-bottom-width: 0;
	cursor: pointer;
	outline: 0;
}
.ui-accordion .ui-accordion-header:first-child{ border-radius: var(--k-radius) var(--k-radius) 0 0; }
.ui-accordion .ui-accordion-header:hover{ background: var(--k-surface-hover); }
.ui-accordion .ui-accordion-header .ui-icon{ display: none; }
.ui-accordion .ui-accordion-header::after{
	content: '\F282'; /* bi-chevron-down */
	font-family: 'bootstrap-icons';
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--k-text-2);
	transition: transform .2s ease;
}
/* open section: grey band like the card titles, a brand line marks it */
.ui-accordion .ui-accordion-header.ui-state-active{
	background: var(--k-surface-sunken);
	color: var(--k-ink);
	box-shadow: inset 3px 0 0 var(--k-primary);
}
.ui-accordion .ui-accordion-header.ui-state-active::after{ transform: translateY(-50%) rotate(180deg); color: var(--k-ink-2); }
.ui-accordion .ui-accordion-content{
	padding: 8px 10px;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-top: 0;
	border-bottom-width: 0;
	overflow: auto;
}
.ui-accordion > :last-child{
	border-bottom-width: 1px;
	border-radius: 0 0 var(--k-radius) var(--k-radius);
}
.ui-accordion > .ui-accordion-header:last-of-type:not(.ui-state-active){
	border-bottom-width: 1px;
	border-radius: 0 0 var(--k-radius) var(--k-radius);
}

/* tabs */
.ui-tabs{ padding: 0; background: transparent; border: 0; }
.ui-tabs .ui-tabs-nav{
	display: flex;
	gap: 2px;
	margin: 0 0 8px;
	padding: 0 4px;
	list-style: none;
	border-bottom: 1px solid var(--k-line-strong);
	background: transparent;
	overflow-x: auto;
	scrollbar-width: none;
}
.ui-tabs .ui-tabs-nav li{ margin: 0; border: 0; background: transparent; flex: 0 0 auto; }
.ui-tabs .ui-tabs-nav li a{
	display: block;
	margin-bottom: -1px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
	color: var(--k-ink-2);
	text-decoration: none;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}
.ui-tabs .ui-tabs-nav li a:hover{ color: var(--k-ink); background: var(--k-surface-hover); text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active a{
	color: var(--k-primary-text);
	background: var(--k-paper);
	border-color: var(--k-line-strong);
	box-shadow: inset 0 2px 0 var(--k-primary), 0 1px 0 var(--k-paper);
}
.ui-tabs .ui-tabs-panel{ padding: 0; }
.ui-tabs .ui-tabs-hide{ display: none !important; }

.ui-state-disabled{ opacity: .38; cursor: default !important; }
.ui-state-highlight{ background: var(--k-warning-bg); border-color: transparent; color: var(--k-text); }
.ui-state-error{ background: #fdeded; border-color: transparent; color: var(--k-danger); }
.ui-sortable-helper{ box-shadow: var(--k-shadow-8); }

/* tipsy tooltips */
.tipsy{ font-size: 12px; position: absolute; padding: 5px; z-index: 100000; }
.tipsy-inner{
	background-color: var(--k-tooltip-bg);
	color: var(--k-tooltip-fg);
	max-width: 320px;
	padding: 4px 8px;
	text-align: center;
	border-radius: 4px;
	font-family: var(--k-font);
}

/* ---------------------------------------------------------------------
 * Command palette (mod/basic/js/k_palette.js): Ctrl+K or the app bar button
 * ------------------------------------------------------------------ */
.k-pal-btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 32px;
	min-width: 220px;
	margin-right: 8px;
	padding: 0 8px 0 10px;
	color: var(--k-ink-3);
	font-size: 13px;
	background: var(--k-surface-sunken);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius, 6px);
	cursor: pointer;
}
.k-pal-btn:hover{ color: var(--k-ink-2); border-color: var(--k-field-border-hover, var(--k-line-strong)); }
.k-pal-btn-testo{ flex: 1 1 auto; text-align: left; }
.k-pal-btn kbd{
	padding: 1px 5px;
	color: var(--k-ink-3);
	font: 600 11px/16px inherit;
	font-family: inherit;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: 4px;
	box-shadow: none;
}
@media (max-width: 760px){
	.k-pal-btn{ min-width: 0; width: 32px; padding: 0; justify-content: center; margin-right: 2px; background: none; border-color: transparent; }
	.k-pal-btn :is(.k-pal-btn-testo, kbd){ display: none; }
}
.k-pal-fondo{
	position: fixed;
	inset: 0;
	z-index: 19000;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 10vh 16px 16px;
	background: rgba(17, 24, 39, .32);
}
.k-pal-fondo.k-pal-aperta{ display: flex; }
.k-pal{
	display: flex;
	flex-direction: column;
	width: 640px;
	max-width: 100%;
	max-height: 70vh;
	overflow: hidden;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: 10px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.k-pal-cerca{ display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--k-line); }
.k-pal-cerca > i{ color: var(--k-ink-3); font-size: 16px; }
.k-pal-cerca > input{
	flex: 1 1 auto;
	min-width: 0;
	height: 28px;
	padding: 0;
	color: var(--k-ink);
	font-size: 15px;
	background: none;
	border: 0;
	outline: 0;
	box-shadow: none;
}
.k-pal-lista{ flex: 1 1 auto; overflow-y: auto; padding: 6px; }
.k-pal-gruppo{ padding: 8px 10px 4px; color: var(--k-ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.k-pal-voce{
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 10px;
	border-radius: 6px;
	cursor: pointer;
}
.k-pal-voce > i{ flex: 0 0 auto; width: 16px; color: var(--k-ink-3); font-size: 14px; }
.k-pal-titolo{ flex: 0 0 auto; max-width: 65%; min-width: 0; overflow: hidden; color: var(--k-ink); font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.k-pal-sotto{ flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--k-ink-3); font-size: 12.5px; white-space: nowrap; text-overflow: ellipsis; }
.k-pal-voce.k-pal-attiva{ background: var(--k-surface-hover); }
.k-pal-voce.k-pal-attiva > i{ color: var(--k-primary-text); }
.k-pal-vuoto{ padding: 18px 12px; color: var(--k-ink-3); font-size: 13px; text-align: center; }
.k-pal-piede{ padding: 7px 14px; color: var(--k-ink-3); font-size: 11.5px; background: var(--k-surface-sunken); border-top: 1px solid var(--k-line); }
@media (max-width: 760px){
	.k-pal-fondo{ padding: 8px; }
	.k-pal{ max-height: 85vh; }
	.k-pal-piede{ display: none; }
}

/* ---------------------------------------------------------------------
 * Status bar (k_barra_stato, mod/basic/js/functions.js): Odoo's statusbar.
 * Chevron steps; done ones muted with a tick, the current one marked.
 * ------------------------------------------------------------------ */
.k-barra-stato{
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	margin: 0 12px 0 auto;      /* in a header row: pushed right, before the totals */
	padding: 0;
	list-style: none;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
}
.k-barra-stato > li{
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 26px;
	padding: 0 14px 0 20px;
	color: var(--k-ink-3);
	white-space: nowrap;
	background: var(--k-surface-sunken);
	border-top: 1px solid var(--k-line-strong);
	border-bottom: 1px solid var(--k-line-strong);
}
.k-barra-stato > li:first-child{ padding-left: 10px; border-left: 1px solid var(--k-line-strong); border-radius: 4px 0 0 4px; }
.k-barra-stato > li:last-child{ border-right: 1px solid var(--k-line-strong); border-radius: 0 4px 4px 0; }
/* the chevron: a rotated square on each step's right edge */
.k-barra-stato > li:not(:last-child)::after{
	content: '';
	position: absolute;
	top: 3px;
	right: -9px;
	z-index: 1;
	width: 18px;
	height: 18px;
	background: inherit;
	border-top: 1px solid var(--k-line-strong);
	border-right: 1px solid var(--k-line-strong);
	transform: rotate(45deg);
}
.k-barra-stato > li.k-passo-fatto{ color: var(--k-ink-2); }
.k-barra-stato > li.k-passo-fatto::before{ content: '\2713'; font-weight: 700; color: var(--k-success-fg, var(--k-ink-2)); }
.k-barra-stato > li.k-passo-attuale{ color: var(--k-primary-text); background: var(--k-paper); }
@media (max-width: 760px){
	/* phones: only the current step, the others are implied */
	.k-barra-stato > li:not(.k-passo-attuale){ display: none; }
	.k-barra-stato > li.k-passo-attuale{ padding-left: 10px; border: 1px solid var(--k-line-strong); border-radius: 4px; }
	.k-barra-stato > li.k-passo-attuale::after{ display: none; }
}

/* the shortcuts card (k_scorciatoie.js, "?") */
.k-scorciatoie{ border-collapse: collapse; }
.k-scorciatoie td{ padding: 3px 12px 3px 0; font-size: 13px; color: var(--k-ink-2); }
.k-scorciatoie kbd{ display: inline-block; min-width: 22px; padding: 1px 6px; color: var(--k-ink); font: 600 12px/18px inherit; font-family: inherit; text-align: center; background: var(--k-surface-sunken); border: 1px solid var(--k-line-strong); border-radius: 4px; box-shadow: none; }

/* "Unsaved changes" by a record's title while lock_page() is on (functions.js) */
.k-non-salvato{ display: none; align-items: center; gap: 5px; padding: 1px 8px; color: var(--k-warning-fg); font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--k-warning-bg); border: 1px solid var(--k-warning-border); border-radius: 10px; }
.k-non-salvato::before{ content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; }
body.k-modificato .k-non-salvato{ display: inline-flex; }

/* ---------------------------------------------------------------------
 * Smart buttons (firm page, k_ditta_smart in mod/anagrafica/detail.js)
 * ------------------------------------------------------------------ */
.k-smart{ display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 10px 8px; }
.k-smart-btn{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 12px;
	color: var(--k-ink-2);
	font-size: 12.5px;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-radius: 6px;
	cursor: pointer;
}
.k-smart-btn > i{ color: var(--k-ink-3); font-size: 14px; }
.k-smart-n{ color: var(--k-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.k-smart-btn:hover{ background: var(--k-surface-hover); border-color: var(--k-field-border-hover, var(--k-line-strong)); }
.k-smart-btn:hover > i{ color: var(--k-primary-text); }

/* ---------------------------------------------------------------------
 * Side panel (k_pannello, mod/basic/js/functions.js)
 * ------------------------------------------------------------------ */
.k-pannello-fondo{ position: fixed; inset: 0; z-index: 18000; background: rgba(17, 24, 39, 0); transition: background .15s ease; }
.k-pannello-fondo.k-pannello-aperto{ background: rgba(17, 24, 39, .28); }
.k-pannello{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: 560px;
	max-width: 100%;
	background: var(--k-paper);
	border-left: 1px solid var(--k-line-strong);
	box-shadow: -12px 0 36px rgba(0, 0, 0, .18);
	transform: translateX(100%);
	transition: transform .18s ease;
}
.k-pannello-aperto .k-pannello{ transform: none; }
.k-pannello-testa{ display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--k-line); }
.k-pannello-testa h2{ flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; color: var(--k-ink); font-size: 15px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.k-pannello-corpo{ flex: 1 1 auto; overflow-y: auto; padding: 6px 0; }
.k-pannello-vuoto{ padding: 24px 16px; color: var(--k-ink-3); font-size: 13px; text-align: center; }
.k-pannello-riga{
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) 84px minmax(0, 1fr) 96px;
	gap: 10px;
	align-items: baseline;
	padding: 7px 16px;
	color: var(--k-ink-2);
	font-size: 13px;
	text-decoration: none;
	border-bottom: 1px solid var(--k-line);
}
.k-pannello-riga:hover{ background: var(--k-surface-hover); }
.k-pr-titolo{ color: var(--k-primary-text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-pr-data{ color: var(--k-ink-3); font-variant-numeric: tabular-nums; }
.k-pr-info{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.k-pr-importo{ text-align: right; font-variant-numeric: tabular-nums; color: var(--k-ink); }
@media (max-width: 600px){
	.k-pannello-riga{ grid-template-columns: minmax(0, 1fr) auto; }
	.k-pr-info{ grid-column: 1; }
}
/* the filter box over the rows (k_pannello opzioni.cerca) */
.k-pannello-filtro{ flex: none; padding: 8px 12px; border-bottom: 1px solid var(--k-line); }
.k-pannello-filtro .k-pannello-cerca{ width: 100%; margin: 0; }
/* results table (k_pannello_tabella): titles stay on top, a row with an action is picked by a click */
.k-pannello-corpo:has(> .k-pannello-tabella){ padding: 0; }
.k-pannello-tabella{ width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.k-pannello-tabella th{ position: sticky; top: 0; z-index: 1; padding: 7px 8px; color: var(--k-ink-2); font-size: 12px; font-weight: 600; text-align: left; white-space: nowrap; background: var(--k-surface-sunken); border-bottom: 1px solid var(--k-line-strong); }
.k-pannello-tabella td{ padding: 6px 8px; color: var(--k-ink); vertical-align: top; border-bottom: 1px solid var(--k-line); overflow-wrap: break-word; }
.k-pannello-tabella :is(th, td):first-child{ padding-left: 16px; }
.k-pannello-tabella :is(th, td):last-child{ padding-right: 16px; }
.k-pannello-tabella .k-pt-num{ text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-pannello-tabella .k-pt-nowrap{ white-space: nowrap; }
.k-pannello-tabella tr.k-pannello-scegli{ cursor: pointer; }
.k-pannello-tabella tr.k-pannello-scegli:is(:hover, :focus-visible){ outline: 0; }
.k-pannello-tabella tr.k-pannello-scegli:is(:hover, :focus-visible) > td{ background: var(--k-surface-hover); }
.k-pannello-tabella tr.k-pannello-scegli > td:first-child{ color: var(--k-primary-text); font-weight: 600; }
.k-pannello-tabella tr.k-pannello-muta > td{ color: var(--k-ink-3); }
/* phones: a bottom sheet (a grab bar on top, pulled down it closes), the table rows as small cards */
@media (max-width: 760px){
	.k-pannello{
		top: auto;
		left: 0;
		width: auto !important;
		max-height: 88vh;
		max-height: 88dvh;
		padding-bottom: env(safe-area-inset-bottom, 0);
		border-left: 0;
		border-top: 1px solid var(--k-line-strong);
		border-radius: 14px 14px 0 0;
		box-shadow: 0 -12px 36px rgba(0, 0, 0, .18);
		transform: translateY(100%);
	}
	.k-pannello-testa{ position: relative; padding-top: 18px; touch-action: none; }
	.k-pannello-testa::before{ content: ''; position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; background: var(--k-line-strong); border-radius: 2px; }
	.k-pannello-tabella, .k-pannello-tabella > tbody, .k-pannello-tabella tr, .k-pannello-tabella td{ display: block; }
	.k-pannello-tabella > thead{ display: none; }
	.k-pannello-tabella tr{ padding: 8px 16px; border-bottom: 1px solid var(--k-line); }
	.k-pannello-tabella td, .k-pannello-tabella :is(th, td):is(:first-child, :last-child), .k-pannello-tabella td.k-pt-num{ display: flex; gap: 10px; padding: 1px 0; text-align: left; white-space: normal; border: 0; overflow-wrap: anywhere; }
	.k-pannello-tabella td:empty{ display: none; }
	.k-pannello-tabella td::before{ content: attr(data-k-et); flex: 0 0 104px; color: var(--k-ink-3); font-size: 12px; font-weight: 400; }
	.k-pannello-tabella td:first-child{ font-weight: 600; }
	.k-pannello-tabella td:first-child::before{ display: none; }
	.k-pannello-tabella tr.k-pannello-scegli:is(:hover, :focus-visible){ background: var(--k-surface-hover); }
	.k-pannello-tabella tr.k-pannello-scegli:is(:hover, :focus-visible) > td{ background: none; }
}

/* copy buttons (k_pulsante_copia, functions.js): faint until their row / title is hovered */
.k-copia{ display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; color: var(--k-ink-3); font-size: 12px; vertical-align: middle; background: none; border: 0; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .12s ease; }
:is(.k-ordine-num, tr, .k-cella-copia):hover > .k-copia, :is(tr):hover .k-copia, .k-copia:focus-visible{ opacity: 1; }
.k-copia:hover{ color: var(--k-primary-text); background: var(--k-surface-hover); }
.k-ordine-num .k-copia{ font-size: 13px; }
/* in a one-line list cell (overflow hidden) the button sits on the cell's right edge, the text ends in "…" before it */
td.k-cella-copia{ position: relative; padding-right: 30px !important; }
td.k-cella-copia > .k-copia{ position: absolute; top: 50%; right: 4px; margin: 0; transform: translateY(-50%); background: var(--k-paper); }
@media (hover: none){ .k-copia{ opacity: .7; } }

/* a counter on a home tile (mod/home/index.php): what needs attention */
.k-home-scheda{ position: relative; }
.k-home-conta{ position: absolute; top: 8px; right: 10px; min-width: 22px; padding: 1px 7px; color: var(--k-warning-fg); font-size: 12px; font-weight: 700; text-align: center; background: var(--k-warning-bg); border: 1px solid var(--k-warning-border); border-radius: 11px; font-variant-numeric: tabular-nums; }

/* record pager by the page title (k_scorciatoie.js): "3 / 25 < >" */
.k-scorri{ display: inline-flex; align-items: center; gap: 2px; margin-left: 12px; color: var(--k-ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-scorri-n{ margin-right: 4px; }
.k-scorri .btn-icon{ width: 28px; height: 28px; color: var(--k-ink-2); text-decoration: none; }
.k-scorri .k-scorri-off{ opacity: .35; cursor: default; }
@media (max-width: 760px){ .k-scorri-n{ display: none; } .k-scorri{ margin-left: 4px; } }

/* ---------------------------------------------------------------------
 * Printing a page (Ctrl+P): the record or list only, on white. No app bar,
 * menu, buttons, filters or toolbars; scrolling boxes printed in full; the
 * dark theme prints light. Printed documents (PDF, DDT, invoices) are made by
 * the server and do not use this.
 * ------------------------------------------------------------------ */
@media print{
	:root{ color-scheme: light; }
	html, body, #page_wrapper, #container, #content, .k-main{ background: #fff !important; color: #000 !important; }
	#header, .k-appbar, #menu_side, .k-drawer, .k-pal-fondo, .k-dlg-fondo, .k-pannello-fondo, .k-colonne-menu,
	.k-ordine-azioni, .k-barra-testa, #buttons, .buttons, .k-toolbar, .k-bar-cmds, .k-bar-filter,
	.k-schede-nav, .k-smart, .k-copia, .k-scorri, .k-non-salvato, .k-list-toolbar, .k-collapse-btn,
	.k-list-container > table > thead .lbl_header > div, .k-ordine-titolo .back, .k-dlg-notifica{ display: none !important; }
	#container{ display: block !important; }
	#content, .k-main{ margin: 0 !important; padding: 0 !important; overflow: visible !important; }
	.k-ordine-testa, .k-vista-testa{ position: static !important; box-shadow: none !important; }
	.k-list-container, .k-schede-pannelli, form:has(> table){ height: auto !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; }
	.k-list-container > table > :is(thead, tfoot){ position: static !important; }
	a{ color: inherit !important; text-decoration: none !important; }
	.k-stato, .k-barra-stato > li{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
	tr{ break-inside: avoid; }
}