/*
 * Legacy class vocabulary, restyled on top of Bootstrap 5 (MUI-like look).
 *
 * The class names below are used directly by ~300 module files and by the
 * shared JS renderers, so they are kept and given a modern look here.
 * Colours come from css/tokens.php (--k-* / --bs-* variables) and the
 * surface/shape tokens defined in css/ketna-ui.css.
 * Served through css/css.php (the #{key} theme substitution still works).
 */

/* ---------------------------------------------------------------------
 * Generic helpers (legacy)
 * ------------------------------------------------------------------ */
.clear{ clear: both; }
.left{ float: left; }
.right{ float: right; }
.half{ width: 50%; }
.nobold{ font-weight: normal; }
.hidden_input{ display: none; }
.allinea_centrato{ text-align: center; }
.input-full-width{ width: 100%; box-sizing: border-box; }
.normal_spaces td{ white-space: normal !important; }
.pulsante-immagine{ vertical-align: middle; cursor: pointer; }
td .evidence:parent{ background-color: var(--k-warning-bg); }

/* order form and its confirm box use the full content width */
#edit_order,
#forw{
	min-width: 600px;
}
#checkout{ min-width: 736px; }
#product_list th{ text-align: left; }

form{ text-align: left; }

/* ---------------------------------------------------------------------
 * Form "paper" (Dom_form / Table / DataGrid renderers and raw PHP forms)
 * ------------------------------------------------------------------ */
.dom_form,
.no_title_dom_form,
.bordered_table,
.bordered_table_hor{
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--k-shadow-1);
	font-size: var(--k-font-size);
	color: var(--k-text);
	margin-bottom: 8px;
}
/* nested layout tables must not look like cards */
.dom_form .dom_form,
.dom_form table:not([class]),
.bordered_table table:not([class]),
.bordered_table_hor table:not([class]){
	border: 0;
	box-shadow: none;
	border-radius: 0;
	margin-bottom: 0;
	background: transparent;
}

.dom_form th,
.bordered_table th,
.bordered_table_hor th{
	background-color: var(--k-surface-sunken);
	border-bottom: 1px solid var(--k-line-strong);
	color: var(--k-ink);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 18px;
	text-align: left;
	padding: 5px 10px;
}
.dom_form tr:first-child > th:first-child,
.bordered_table tr:first-child > th:first-child,
.bordered_table_hor tr:first-child > th:first-child{
	border-top-left-radius: var(--k-radius);
}
.dom_form tr:first-child > th:last-child,
.bordered_table tr:first-child > th:last-child,
.bordered_table_hor tr:first-child > th:last-child{
	border-top-right-radius: var(--k-radius);
}

.dom_form td,
.no_title_dom_form td{
	padding: 3px 8px;
	vertical-align: middle;
}
.dom_form td td,
.no_title_dom_form td td{
	padding: 1px 3px;
}
.dom_form tr:first-child > td,
.no_title_dom_form tr:first-child > td{ padding-top: 6px; }

.no_title_dom_form th{ display: none; }

.bordered_table td,
.bordered_table_hor td{
	border-bottom: 1px solid var(--k-divider-light);
	padding: 3px 8px;
	line-height: 1.4;
	white-space: pre-wrap;
	background-color: transparent;
}
.bordered_table td{ border-right: 1px solid var(--k-divider-light); }
.bordered_table td:last-child{ border-right: 0; }
.bordered_table td td,
.bordered_table_hor td td{
	border: 0;
	padding: 0 4px;
	background-color: transparent;
}
.bordered_table tr:last-child > td,
.bordered_table_hor tr:last-child > td{ border-bottom: 0; }

.form_lbl{
	color: var(--k-ink-2);
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
}
/* phones: long labels wrap instead of widening the form */
@media (max-width: 760px){
	.form_lbl{ white-space: normal; }
}
.form_val{
	color: var(--k-text);
	font-weight: 500;
}

.row_buttons{
	text-align: right;
	padding: 6px 10px !important;
	border-top: 1px solid var(--k-divider);
	background-color: var(--k-paper);
	border-bottom-left-radius: var(--k-radius);
	border-bottom-right-radius: var(--k-radius);
}
.row_buttons > *:last-child{ margin-right: 0; }

.fixed-table{
	position: fixed;
	bottom: 12px;
	/* spans the content area (viewport minus the open drawer), 16px gutters */
	left: calc(var(--k-drawer-offset, 0px) + 16px);
	width: calc(100% - var(--k-drawer-offset, 0px) - 32px);
	transition: left .2s ease, width .2s ease;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-8);
	font-size: var(--k-font-size);
	z-index: 1000;
}
.fixed-table td{ padding: 4px 8px; }

/* ---------------------------------------------------------------------
 * Inputs (MUI "outlined", small size)
 * ------------------------------------------------------------------ */
.input_txt,
.input_map,
.input_txt_qt{
	display: inline-block;
	box-sizing: border-box;
	min-height: var(--k-field-h);
	padding: 2px 8px;
	font-family: inherit;
	font-size: var(--k-font-size);
	line-height: 1.5;
	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;
}
.input_txt,
.input_map{
	width: 100%;
	max-width: 280px;
}
.input_txt_qt{
	width: 56px;
	padding: 4px 6px;
	text-align: right;
}
/* links built by the form renderers (Dom_Link, mod/basic/js/classes/rendering/
   link.js) get the default field class: they are links, not fields */
a.input_txt{
	display: inline;
	width: auto;
	max-width: none;
	min-height: 0;
	padding: 0;
	color: var(--k-primary-text);
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
a.input_txt:hover{ text-decoration: underline; }
textarea.input_txt{
	min-height: 64px;
	max-width: 100%;
	resize: vertical;
}
.input_txt:hover,
.input_map:hover,
.input_txt_qt:hover{
	border-color: var(--k-input-border-hover);
}
.input_txt:focus,
.input_map:focus,
.input_txt_qt:focus,
.focus_txt{
	outline: 0;
	border-color: var(--k-focus);
	box-shadow: 0 0 0 2px var(--k-focus-ring);
}
.input_txt[readonly],
.input_txt[disabled],
.input_map[disabled],
.input_txt_qt[readonly],
.input_txt_qt[disabled]{
	background-color: var(--k-paper-2);
	color: var(--k-text-2);
	border-color: var(--k-divider);
	box-shadow: none;
}
select.input_map:not([multiple]):not([size]),
select.input_txt:not([multiple]):not([size]){
	-webkit-appearance: none;
	-moz-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;
}
/* radio/checkbox rendered with the legacy text-input class */
input[type=radio].input_txt,
input[type=checkbox].input_txt{
	width: 16px;
	height: 16px;
	max-width: none;
	min-height: 0;
	padding: 0;
	border-radius: 4px;
	box-shadow: none;
}
input[type=radio].input_txt{ border-radius: 50%; }

.evasione_errore,
.errore-compilazione-input{
	border-color: var(--k-danger) !important;
	box-shadow: inset 0 0 0 1px var(--k-danger) !important;
}

/* ---------------------------------------------------------------------
 * Text buttons (MUI Button: contained / outlined / text)
 * ------------------------------------------------------------------ */
.input_button,
.apply_action,
.cancel_action,
.input_btn_xls2{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 64px;
	min-height: var(--k-button-h);
	padding: 2px 12px;
	margin: 1px 6px 1px 0;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	border-radius: var(--k-radius-sm);
	cursor: pointer;
	background-image: none;
	vertical-align: middle;
	transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
/* primary: the one main action of a page (brand colour) */
.apply_action{
	color: #fff;
	background-color: var(--k-primary);
	border: 1px solid var(--k-primary);
}
.apply_action:not(:disabled):hover{
	background-color: var(--k-primary-dark);
	border-color: var(--k-primary-dark);
}
/* secondary: grey outline, as on the order pages */
.input_button,
.input_btn_xls2,
.cancel_action{
	color: var(--k-ink-2);
	background-color: var(--k-paper);
	border: 1px solid var(--k-field-border);
}
.input_button:not(:disabled):hover,
.input_btn_xls2:not(:disabled):hover,
.cancel_action:not(:disabled):hover{
	color: var(--k-ink);
	background-color: var(--k-surface-sunken);
	border-color: var(--k-field-border-hover);
}
.input_button:focus-visible,
.apply_action:focus-visible,
.cancel_action:focus-visible,
.input_btn_xls2:focus-visible{
	outline: 0;
	box-shadow: 0 0 0 2px var(--k-focus-ring);
}
.input_button[disabled],
.apply_action[disabled],
.cancel_action[disabled],
.input_btn_xls2[disabled]{
	opacity: .5;
	cursor: default;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
 * Icon buttons (MUI IconButton). Icons: css/ketna-icons.css
 * ------------------------------------------------------------------ */
[class*="input_btn_"]:not(.input_btn_xls2),
.checkout,
.ord_resync{
	display: inline-block;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	min-width: 28px;
	padding: 0;
	margin: 1px 2px;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .15s ease;
}
[class*="input_btn_"]:not(.input_btn_xls2):not(:disabled):hover,
.checkout:not(:disabled):hover,
.ord_resync:not(:disabled):hover{
	background-color: var(--k-action-hover);
}
[class*="input_btn_"]:not(.input_btn_xls2):active,
.checkout:active,
.ord_resync:active{
	background-color: var(--k-action-selected);
}
[class*="input_btn_"]:not(.input_btn_xls2):focus-visible,
.checkout:focus-visible,
.ord_resync:focus-visible{
	outline: 0;
	box-shadow: 0 0 0 2px var(--k-focus-ring);
}
[class*="input_btn_"]:not(.input_btn_xls2)[disabled]{
	opacity: .38;
	cursor: default;
	background-color: transparent;
}
/* ---------------------------------------------------------------------
 * Command bar actions (k_label_command_bars, mod/basic/js/functions.js):
 * a page's top icon buttons with their name next to the icon, as on the
 * order view. Grey outline; the one main action filled with the brand
 * colour (white icon); delete red, on the right. Row icons stay icon-only.
 * ------------------------------------------------------------------ */
#content .k-azione{
	display: inline-flex;
	align-items: center;
	width: auto;
	min-width: 0;
	height: var(--k-button-h);
	margin: 0;
	padding: 0 10px 0 30px;
	font: 600 12.5px/26px var(--k-font);
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	color: var(--k-ink-2);
	background-color: var(--k-paper);
	/* !important: legacy inline icons ([style*="img/piu.png"], ketna-icons.css) are centred with !important */
	background-position: 9px center !important;
	background-size: 14px 14px !important;
	border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm);
	box-shadow: none;
}
#content .k-azione:not(:disabled):hover{ color: var(--k-ink); background-color: var(--k-surface-sunken); border-color: var(--k-field-border-hover); }
#content .k-azione.k-azione-primaria{ color: #fff; background-color: var(--k-primary); border-color: var(--k-primary); }
#content .k-azione.k-azione-primaria:not(:disabled):hover{ color: #fff; background-color: var(--k-primary-dark); border-color: var(--k-primary-dark); }   /* white text: the hover above set it dark */
#content .k-azione.k-azione-pericolo{ color: var(--k-danger); border-color: var(--k-danger-border); }
#content .k-azione.k-azione-pericolo:not(:disabled):hover{ background-color: var(--k-danger-bg); }
#content .k-barra-azioni{ gap: 6px !important; }
/* a plain div of buttons at the top of a page: same card as #buttons */
#content > div.k-barra-azioni:not(#buttons, #save_button, .k-toolbar){
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 8px 0;
	padding: 4px 8px;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
#content > .k-barra-azioni > br{ display: none; }
#content > .k-barra-azioni > .k-azione-pericolo{ margin-left: auto; }
/* phones: the actions on one line, swiped sideways (as on the order view) */
@media (max-width: 760px){
	#content > .k-barra-azioni{ flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; }
	#content > .k-barra-azioni > *{ flex: 0 0 auto; }
}
/* white icon on the filled main action (same Bootstrap Icons, fill #fff) */
#content .k-azione.k-azione-primaria.input_btn_save{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M11 2H9v3h2z'/%3E%3Cpath d='M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_ok{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_edit{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z'/%3E%3Cpath fill-rule='evenodd' d='M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_new{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 6.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V11a.5.5 0 0 1-1 0V9.5H6a.5.5 0 0 1 0-1h1.5V7a.5.5 0 0 1 .5-.5'/%3E%3Cpath d='M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_add{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_conf{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E") !important; }
#content .k-azione.k-azione-primaria.input_btn_done{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath d='M12.354 4.354a.5.5 0 0 0-.708-.708L5 10.293 1.854 7.146a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0zm-4.208 7-.896-.897.707-.707.543.543 6.646-6.647a.5.5 0 0 1 .708.708l-7 7a.5.5 0 0 1-.708 0'/%3E%3Cpath d='m5.354 7.146.896.897-.707.707-.897-.896a.5.5 0 1 1 .708-.708'/%3E%3C/svg%3E") !important; }

/* small variants */
.input_btn_close,
.input_btn_save_small,
.input_btn_add_notes,
.input_btn_remove_notes,
.input_btn_undo,
.input_btn_search_small,
.input_btn_up,
.input_btn_down{
	width: 26px;
	height: 26px;
	min-width: 26px;
	background-size: 14px 14px;
}
.input_btn_close_disabled{
	cursor: not-allowed;
	opacity: .45;
}

/* ---------------------------------------------------------------------
 * Data list (Lista / ketna_list): MUI dense Table inside Paper
 * ------------------------------------------------------------------ */
.ketna_list,
.ketna_list_no_min_width{
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	border-collapse: separate;
	border-spacing: 0;
	box-shadow: var(--k-shadow-1);
	font-size: var(--k-table-font-size);
	color: var(--k-text);
	table-layout: fixed;
	margin: 0 0 8px 0;
}
.ketna_list{ min-width: 956px; }
.ketna_list_no_min_width{ min-width: 256px; }

.ketna_list th,
.ketna_list_no_min_width th{
	background-color: var(--k-paper);
	border-bottom: 1px solid var(--k-divider-light);
	color: var(--k-text);
	font-weight: 500;
	text-align: left;
	vertical-align: top;
	padding: 5px 8px;
}
.ketna_list td,
.ketna_list_no_min_width td{
	border-bottom: 1px solid var(--k-divider-light);
	padding: 3px 8px;
	line-height: 1.43;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	vertical-align: middle;
}
/* header cells use an inner layout table (label | sort | filter) */
.ketna_list th table,
.ketna_list_no_min_width th table{
	border: 0;
	border-collapse: collapse;
}
.ketna_list th td,
.ketna_list_no_min_width th td,
.ketna_list thead th table td{
	border: 0;
	padding: 0;
	font-size: var(--k-table-font-size);
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ketna_list th .input_txt,
.ketna_list th .input_map,
.ketna_list_no_min_width th .input_txt,
.ketna_list_no_min_width th .input_map{
	max-width: none;
	min-height: 28px;
	margin-top: 6px;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 400;
}
.ketna_list th select.input_map,
.ketna_list_no_min_width th select.input_map{ padding-right: 26px; background-position: right 8px center; }
/* inner value tables (currency / img cells) */
.ketna_list td table,
.ketna_list_no_min_width td table{ width: 100%; border-collapse: collapse; }
.ketna_list td td,
.ketna_list_no_min_width td td{
	border: 0;
	padding: 0;
	background: transparent;
}
.ketna_list tbody tr:last-child td,
.ketna_list_no_min_width tbody tr:last-child td{ border-bottom: 0; }

.lbl_header{
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}
/* Column labels and IDs are always shown in full: lists use automatic table
   layout (the module's column widths are only hints), so a column is never
   narrower than its label or its values; the container scrolls sideways if
   the columns don't fit. */
.k-list-container > table.ketna_list,
.k-list-container > table.ketna_list_no_min_width,
.k-list-container > table[class*="ketna_list"]{ table-layout: auto; }
.ketna_list th,
.ketna_list_no_min_width th{ padding-left: 6px; padding-right: 6px; }
.ketna_list th .order,
.ketna_list_no_min_width th .order{ width: 16px; padding-left: 4px !important; }
.ketna_list th > table,
.ketna_list_no_min_width th > table{ width: 100% !important; }
/* the sort arrow sits beside the label, in the header's top-right corner,
   instead of a column of its own next to the filter: the filter field gets the
   whole width of its column (it was 21px in narrow columns: RMA no., Order, DDT) */
.k-list-container > table > thead th{ position: relative; }
.k-list-container > table > thead th > table,
.k-list-container > table > thead th > table > tbody,
.k-list-container > table > thead th > table > tbody > tr,
.k-list-container > table > thead th > table td.lbl_header{ display: block; width: auto !important; }
.k-list-container > table > thead th > table td.lbl_header{ padding-right: 16px !important; }   /* the label clears the arrow */
.k-list-container > table > thead th > table td.lbl_header > div{ margin-right: -16px; }        /* the filter does not need to */
.k-list-container > table > thead th > table td.order{ position: absolute; top: 5px; right: 2px; width: 16px !important; padding: 0 !important; }
.ketna_list th .lbl_header,
.ketna_list_no_min_width th .lbl_header{
	width: auto !important;
	overflow: visible;
	text-overflow: clip;
	white-space: nowrap;
}
.ketna_list td[data-column],
.ketna_list_no_min_width td[data-column]{ padding-left: 6px; padding-right: 6px; }
/* long text wraps at spaces (IDs, dates and numbers have none, so they stay whole) */
.k-list-container > table > tbody > tr > td[data-column]{
	white-space: normal;
	overflow-wrap: break-word;
}
.ketna_list .order,
.ketna_list_no_min_width .order{
	width: 22px;
	text-align: right;
	vertical-align: top;
}

/* row that needs attention, e.g. a planned activity not approved yet
   (lavorazioni_interne/pianificazioni.js): soft primary tint + left marker */
tr.k-row-pending > td{ background-color: var(--k-warning-bg) !important; }
tr.k-row-pending.list_over > td{ background-color: var(--k-warning-border) !important; }
tr.k-row-pending > td:first-child,
tr.k-row-pending > td[style*="display: none"]:first-child + td{ box-shadow: inset 3px 0 0 var(--k-warning); }
.list_even{ background-color: var(--k-row-stripe); }
.list_odd{ background-color: var(--k-paper); }
.list_over,
.list_even.list_over,
.list_odd.list_over{ background-color: var(--k-surface-sunken); }

/* toolbar rows (top and bottom of the list) */
.ketna_list .k-list-toolbar > td,
.ketna_list_no_min_width .k-list-toolbar > td{
	background-color: var(--k-paper);
	padding: 4px 8px;
	white-space: normal;
}
.ketna_list thead .k-list-toolbar > td,
.ketna_list_no_min_width thead .k-list-toolbar > td{
	border-bottom: 1px solid var(--k-divider-light);
	border-top-left-radius: var(--k-radius);
	border-top-right-radius: var(--k-radius);
}
.ketna_list tbody .k-list-toolbar > td,
.ketna_list_no_min_width tbody .k-list-toolbar > td{
	border-top: 1px solid var(--k-divider-light);
	border-bottom: 0;
}

/* totals row */
.ketna_list tr.ttail > td,
.ketna_list tr.ttail2 > td,
.ketna_list_no_min_width tr.ttail > td,
.ketna_list_no_min_width tr.ttail2 > td{
	background-color: var(--k-paper-2);
	font-weight: 500;
	cursor: default;
}
tr.empty_list > td,
tr.empty_list:hover > td,
tr.k-list-error > td,
tr.k-list-error:hover > td{
	text-align: center;
	color: var(--k-text-2);
	background: var(--k-paper) !important;
	box-shadow: none !important;   /* Bootstrap paints the hover as an inset shadow */
	padding: 32px 10px !important;
	cursor: default !important;
}
.k-empty-state{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--k-text-2);
}
.k-empty-state > .bi{
	font-size: 36px;
	line-height: 1;
	color: var(--k-text-disabled);
}
/* Tables built directly in module code: header present but no rows at all */
table:has(> thead):has(> tbody:empty)::after{
	content: var(--k-testo-vuoto, 'No items to display');   /* in the user's language, set by mod/basic/js/functions.js */
	display: table-caption;
	caption-side: bottom;
	padding: 32px 10px;
	text-align: center;
	font-size: 14px;
	color: var(--k-text-2);
	background: var(--k-paper);
}
.ketna_list tr.last_row > td{ cursor: default; }

/* pagination (MUI Pagination, small) */
.pagination_number{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 6px;
	margin: 0 2px;
	border-radius: 14px;
	color: var(--k-text);
	font-size: 13px;
	text-decoration: none;
	transition: background-color .15s ease;
}
.pagination_number:hover{
	background-color: var(--k-action-hover);
	color: var(--k-text);
	text-decoration: none;
}
.pagination_number.active,
.pagination_currentpage{
	background-color: var(--k-primary);
	color: #fff !important;
	font-weight: 500;
}
/* compact pagination (lista_incremental.js build_pages) */
.pagination_number.k-page-arrow{ font-size: 14px; color: var(--k-text-2); }
.pagination_number.k-page-arrow.disabled{ color: var(--k-text-disabled); pointer-events: none; }
.k-page-gap{
	display: inline-flex;
	align-items: flex-end;
	justify-content: center;
	min-width: 24px;
	height: 28px;
	padding-bottom: 6px;
	color: var(--k-text-2);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Other legacy tables
 * ------------------------------------------------------------------ */
.table_text_prod td,
.table_fatture td,
tr.riga-evasione-scorretto td{
	border-bottom: 1px solid var(--k-divider-light);
}
.table_with_borders{
	border-collapse: collapse;
}
.table_with_borders td,
.table_with_borders th{
	border-bottom: 1px solid var(--k-divider-light);
	border-right: 1px solid var(--k-divider-light);
	padding: 4px 8px;
}

/* ---------------------------------------------------------------------
 * Panels / headers
 * ------------------------------------------------------------------ */
.header_generic{
	background-color: var(--k-paper);
	border-bottom: 1px solid var(--k-divider);
	padding: 4px 8px;
	cursor: move;
}
.div_header{
	background-color: var(--k-paper-2);
	border: 1px solid var(--k-divider);
	border-bottom: 0;
	border-radius: var(--k-radius) var(--k-radius) 0 0;
	padding: 6px 10px;
	font-weight: 500;
}
.div_container{
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: 0 0 var(--k-radius) var(--k-radius);
	padding: 8px 10px;
	margin-bottom: 8px;
}
.default_border{
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius-sm);
}
.default_line{
	border: 1px solid var(--k-divider);
	background-color: var(--k-paper-2);
}

/* ---------------------------------------------------------------------
 * Fatturazione (invoicing) tables
 * ------------------------------------------------------------------ */
.tabella-fatturazione{
	width: 100%;
	margin: 0 auto 16px auto;
	background: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
	overflow: hidden;
}
.tabella-fatturazione,
.tabella-fatturazione table{
	border-spacing: 0;
	border-collapse: collapse;
	font-size: var(--k-table-font-size);
}
.tabella-fatturazione tr{ background: var(--k-paper); }
.tabella-fatturazione tr:nth-child(2n){ background-color: var(--k-row-stripe); }
.tabella-fatturazione tr:hover{ background: var(--k-surface-sunken); }
.tabella-fatturazione tr.selected{
	color: var(--k-primary-text);
	font-weight: 500;
}
.tabella-fatturazione tr td{
	border: 0;
	border-bottom: 1px solid var(--k-divider-light);
	padding: 6px 10px;
}
.tabella-fatturazione tr:last-child td{
	border-bottom: 0;
	background: transparent;
}
.tabella-fatturazione-tipo .totale,
.tabella-fatturazione-tipo .totale_netto,
.tabella-fatturazione-tipo .totale_iva{ text-align: right; }
.tabella-fatturazione-tipo .fatturare{ text-align: center; }
.tabella-fatturazione-tipo .euro-sign{ float: left; line-height: inherit; color: var(--k-text-2); }
.tabella-fatturazione-tipo .totale-parziale,
.tabella-fatturazione-tipo .totale-parziale-netto,
.tabella-fatturazione-tipo .totale-parziale-iva{
	font-weight: 500;
	text-align: right;
}
.tabella-fatturazione-tipo tr.riga-sommario > td{
	background: var(--k-surface-sunken) !important;
	border-top: 1px solid var(--k-line-strong);
	font-weight: 700;
}
.tabella-fatturazione-tipo tr.riga-sommario > td:first-child{ text-align: center; }
.tabella-fatturazione-azienda h5{
	font-size: 15px;
	font-weight: 500;
	padding: 4px 0;
	margin: 8px 0 4px 0;
}
/* payment group: a grey band; shipment type: a grey uppercase label (section bands) */
.tabella-fatturazione-azienda h5.k-fatt-pagamento{
	margin: 4px 0 6px;
	padding: 5px 10px;
	font-size: 13px;
	font-weight: 700;
	color: var(--k-ink);
	background: var(--k-surface-sunken);
	border: 1px solid var(--k-line-strong);
	border-radius: var(--k-radius-sm);
}
.tabella-fatturazione-azienda h5.k-fatt-tipo{
	margin: 8px 0 4px;
	padding: 0;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--k-ink-2);
}
.tabella-fatturazione-azienda .riga-totale-lista-fatturazione{
	font-weight: 500;
	font-size: 14px;
}
.tabella-fatturazione-azienda .totale-azienda button{
	float: left;
	margin-top: -3px;
	margin-left: 2%;
}
.tabella-fatturazione-azienda .totale-azienda,
.tabella-fatturazione-azienda .totale-azienda-iva,
.tabella-fatturazione-azienda .totale-azienda-netto{
	text-align: right;
	padding-right: 2%;
}
.riga-totale-fatturazione{
	text-align: right;
	font-weight: 500;
	font-size: 17px;
}
.riga-evasione.sospeso,
.riga-evasione.sospeso a{
	color: var(--k-text-disabled);
	text-decoration: line-through;
}
.riga-evasione.sospeso a{
	color: var(--k-text-disabled) !important;
	text-decoration: line-through underline;
}
.riga-evasione.sospeso .totale{ text-align: center; }

/* ---------------------------------------------------------------------
 * Evasioni (shipping) forms
 * ------------------------------------------------------------------ */
#tabella_evasione,
#tabella_evasione_righe,
#tabella_evasione_colli{
	width: 720px;
	max-width: 100%;
	border-collapse: collapse;
}
#tabella_evasione td,
#tabella_evasione_righe td,
#tabella_evasione_colli td{
	white-space: inherit;
	border: 0 none transparent;
	padding: 4px 0 4px 10px;
}
#tabella_evasione td[name]{
	font-weight: 500;
	padding-left: 10px;
}
#tabella_evasione_righe td,
#tabella_evasione_colli td{
	border-bottom: 1px solid var(--k-divider-light);
}
#tabella_evasione input,
#tabella_evasione select{
	min-width: 220px;
	box-sizing: border-box;
	margin: 0;
}
#tabella_evasione input,       #tabella_evasione select,       #tabella_evasione textarea,
#tabella_evasione_righe input, #tabella_evasione_righe select, #tabella_evasione_righe textarea,
#tabella_evasione_colli input, #tabella_evasione_colli select, #tabella_evasione_colli textarea{
	font-size: var(--k-font-size);
}
#tabella_evasione_colli input,
#tabella_evasione_colli select{
	box-sizing: border-box;
	width: 100%;
}
#tabella_evasione       .dimensione-molto-ridotta,
#tabella_evasione_righe .dimensione-molto-ridotta{
	width: 48px;
	min-width: 40px;
}
#tabella_evasione       .dimensione-ridotta,
#tabella_evasione_righe .dimensione-ridotta{
	width: 88px;
	min-width: 80px;
}
#tabella_evasione       .dimensione-massima,
#tabella_evasione_righe .dimensione-massima{
	width: 100%;
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Small widgets
 * ------------------------------------------------------------------ */
/* price hint above a field (showBubblePopup() in functions.js, which places
   it with viewport coordinates, hence fixed). The element also has the class
   dom_form: undo the card look/full width that class gets in #content. */
.bubble-popup,
#content .bubble-popup.dom_form{
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto !important;
	max-width: 324px;
	margin: 0;
	border: 0;
	font-size: 13px;
	background-color: var(--k-tooltip-bg);
	color: #fff;
	border-radius: var(--k-radius-sm);
	padding: 4px 8px;
	box-shadow: var(--k-shadow-8);
	z-index: 9999;
	display: none;
}
.bubble-content{
	display: inline-block;
	max-width: 300px;
}
.bubble-content p{
	margin: 0;
	padding: 0;
	font-size: 13px;
	white-space: pre-line; /* the hint text has a line break */
}
.bubble-content p::after{
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-style: solid;
	border-width: 8px;
	border-color: var(--k-tooltip-bg) transparent transparent transparent;
}
.btn-checkbox{
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--k-text-2);
	background-color: var(--k-paper);
	border-radius: 3px;
	cursor: pointer;
	font-size: 14px;
	color: var(--k-text);
	padding: 0;
	line-height: 1;
}

/* ---------------------------------------------------------------------
 * Lista extras (mod/basic/js/lista_incremental.js)
 * ------------------------------------------------------------------ */
/* The container is the Paper and the scroll area; k_fit_lists() (functions.js)
   may give it a fixed height, then rows scroll between the pinned header
   (thead) and footer (tfoot: totals + pages). */
.k-list-container{
	display: flex;
	flex-direction: column;
	max-width: 100%;
	overflow: auto;
	margin: 0 0 8px 0;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
#content .k-list-container{ min-height: var(--k-list-min-h, 220px); }
.k-list-container > table{
	flex: 1 0 auto;
	/* the list fills its Paper even when the module asks for a narrower
	   table (e.g. act_keys/licensing_features width: 60%) */
	min-width: 100%;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}
/* a list with a few rows: the space left in the Paper goes to an empty last
   row, not to the rows (one DDT row was 124px tall); an empty list keeps
   its centred message */
.k-list-container > table > tbody:not(:has(> tr.empty_list, > tr.k-list-error))::after{
	content: '';
	display: table-row;
	height: 100%;
}
/* an empty list with nothing filtered (lista_incremental.js): its message and
   bottom bar only, as wide as its box (no sideways scroll for nothing) */
.k-list-container.k-lista-vuota > table > thead{ display: none; }
.k-list-container.k-lista-vuota > table{ table-layout: auto !important; width: 100% !important; min-width: 0 !important; }
.k-list-container.k-lista-vuota > table col{ width: auto !important; }
.k-list-container > table > thead{ position: sticky; top: 0; z-index: 3; }
.k-list-container > table > tfoot{ position: sticky; bottom: 0; z-index: 3; }
.k-list-container > table > thead > tr > *,
.k-list-container > table > tfoot > tr > *{ background-color: var(--k-paper); }
.k-list-container > table > tfoot > tr.ttail > td,
.k-list-container > table > tfoot > tr.ttail2 > td{ background-color: var(--k-paper-2); }
.k-list-container > table > tfoot > tr:first-child > td{ border-top: 1px solid var(--k-divider-light); }
.k-list-container > table > tfoot > tr:last-child > td{ border-bottom: 0; }
.ketna_list.table,
.ketna_list_no_min_width.table,
.table.ketna_list,
table.table[class*="ketna_list"]{
	--bs-table-bg: transparent;
	--bs-table-hover-bg: var(--k-surface-sunken);
	--bs-table-hover-color: var(--k-text);
	--bs-table-color: var(--k-text);
	margin-bottom: 8px;
}
.k-list-toolbar-inner{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 10px;
	min-height: 28px;
}
.k-list-pages{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.k-list-tools{
	display: flex;
	align-items: center;
	gap: 2px;
	margin-left: auto;
}
.k-list-count{
	margin: 0 8px;
	color: var(--k-text-2);
	font-size: 12.5px;
	white-space: nowrap;
}
.k-list-count b{ color: var(--k-text); }
.k-sort{
	font-size: 12px;
	color: var(--k-text-2);
	transition: opacity .15s ease;
}
th .k-sort:not(.k-sort-active){ opacity: 0; }
th:hover .k-sort{ opacity: 1; }
.k-sort.k-sort-active{ color: var(--k-primary-text); }

/* Order header (.k-ordine-testa): stays at the top of the page with the
   order number, customer, type, status, totals and the actions. Used by
   the edit order page (mod/widgets/PopupClientOrder/PopupOrdineSchede.js)
   and the order view (mod/orders/vista_ordine.js). */
.k-ordine-testa{
	position: sticky;
	top: -8px;   /* #content's top padding */
	z-index: 5;
	background: var(--k-paper);
	border: 1px solid var(--k-line-strong);
	border-bottom: 0;
}
.k-ordine-riga{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; padding: 7px 12px 6px; }
.k-ordine-titolo{ display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.k-ordine-num{ font-size: 18px; font-weight: 700; line-height: 24px; color: var(--k-ink); white-space: nowrap; }
.k-ordine-cliente{ font-size: 15px; font-weight: 600; color: var(--k-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
a.k-ordine-cliente:hover{ color: var(--k-primary-text); }
.k-ordine-tipo{
	padding: 1px 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 16px;
	white-space: nowrap;
	color: var(--k-ink-2);
	background: var(--k-surface-sunken);
	border: 1px solid var(--k-line-strong);
	border-radius: 10px;
}
.k-ordine-data{ font-size: 12.5px; color: var(--k-ink-3); white-space: nowrap; }
.k-ordine-totali{ display: flex; align-items: baseline; gap: 18px; font-size: 12.5px; color: var(--k-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.k-ordine-totali b{ font-weight: 600; color: var(--k-ink); }
.k-ordine-totali .k-totale{ padding-left: 18px; border-left: 1px solid var(--k-line-strong); font-size: 14px; }
.k-ordine-totali .k-totale b{ font-weight: 700; }
.k-ordine-azioni{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* phones: the header wraps instead of running off the screen, and stays
   short, since it stays on screen while scrolling */
@media (max-width: 760px){
	.k-ordine-riga{ gap: 4px 12px; padding: 5px 8px; }
	.k-ordine-titolo{ flex-wrap: wrap; gap: 2px 8px; }
	.k-ordine-num{ font-size: 16px; line-height: 22px; }
	.k-ordine-cliente{ font-size: 14px; }
	.k-ordine-totali{ flex-wrap: wrap; gap: 0 12px; }
	.k-ordine-totali > :not(.k-totale){ display: none; }   /* the subtotals are under the lines */
	.k-ordine-totali .k-totale{ padding-left: 0; border-left: 0; }
	.k-ordine-azioni{ margin-left: auto; }
}

/* Record page in tabs (k_pagina_a_schede, mod/basic/js/functions.js): the
   order header above, the edit order page's tabs, the blocks in a frame */
.k-pagina-schede{ margin-bottom: 8px; }
.k-pagina-schede .k-schede-nav{ gap: 2px; margin: 0; padding: 0 10px; border-bottom: 1px solid var(--k-line-strong); }
.k-pagina-schede .k-schede-nav .nav-link{
	margin-bottom: -1px;
	padding: 5px 14px;
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--k-ink-2);
	background: none;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 4px 4px 0 0;
}
.k-pagina-schede .k-schede-nav .nav-link:hover{ color: var(--k-ink); background: var(--k-surface-hover); }
.k-pagina-schede .k-schede-nav .nav-link.active{
	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);
}
.k-pagina-schede .k-schede-nav .nav-link:focus-visible{ outline: 2px solid var(--k-focus); outline-offset: -2px; }
.k-schede-pannelli{ padding: 8px; background: var(--k-surface-sunken); border: 1px solid var(--k-line-strong); border-top: 0; }
.k-schede-pannelli .k-scheda-pannello > :last-child{ margin-bottom: 0 !important; }
.k-pagina-schede.k-senza-schede .k-ordine-testa{ border-bottom: 1px solid var(--k-line-strong); }
.k-pagina-schede.k-senza-schede .k-schede-pannelli{ padding: 8px 0 0; background: none; border: 0; }
/* purchase view: the lines first, supplier and order info side by side under them */
.k-pagina-schede #view_ordine{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: start; }
@media (max-width: 900px){ .k-pagina-schede #view_ordine{ grid-template-columns: minmax(0, 1fr); } }
.k-pagina-schede #view_ordine > #review{ grid-column: 1 / -1; min-width: 0; overflow-x: auto; }
.k-pagina-schede #view_ordine > :is(#info_supplier, #other_info) > table{ width: 100% !important; margin: 0; }
.k-pagina-schede #view_ordine > :is(#info_supplier, #other_info) td.form_lbl{ width: 1%; white-space: nowrap; }
/* the page's command bar inside the header: no card of its own */
.k-ordine-azioni > .k-barra-testa{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.k-ordine-azioni > .k-barra-testa > br{ display: none; }
.k-ordine-azioni > .k-barra-testa > .k-azione-pericolo{ margin-left: 10px; }
@media (max-width: 760px){
	.k-pagina-schede .k-schede-nav{ flex-wrap: nowrap; padding: 0 4px; overflow-x: auto; scrollbar-width: none; }
	.k-pagina-schede .k-schede-nav .nav-link{ padding: 5px 10px; white-space: nowrap; }
	.k-pagina-schede .k-ordine-num{ white-space: normal; overflow-wrap: anywhere; }
	.k-pagina-schede .k-ordine-azioni{ flex: 1 1 100%; min-width: 0; }
	.k-ordine-azioni > .k-barra-testa{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
	.k-ordine-azioni > .k-barra-testa > *{ flex: 0 0 auto; }
	.k-schede-pannelli{ padding: 4px; }
}

/* Status label (order / order line status, status_assoc_rows codes): soft
   colour per stage. Used by the edit order page (PopupOrdineSchede.js) and
   the orders list (mod/orders/index.php). */
.k-stato{
	display: inline-block;
	padding: 0 8px;
	font-size: 11.5px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
	border: 1px solid;
	border-radius: 10px;
}
.k-stato-bozza,
.k-stato-altro{ color: var(--k-ink-2); background: var(--k-surface-sunken); border-color: var(--k-line-strong); }
.k-stato-lavoro{ color: var(--k-info-fg); background: var(--k-info-bg); border-color: var(--k-info-border); }
.k-stato-pronto{ color: var(--k-ready-fg); background: var(--k-ready-bg); border-color: var(--k-ready-border); }
.k-stato-parziale{ color: var(--k-warning-fg); background: var(--k-warning-bg); border-color: var(--k-warning-border); }
.k-stato-evaso{ color: var(--k-success-fg); background: var(--k-success-bg); border-color: var(--k-success-border); }
.k-stato-annullato{ color: var(--k-danger-fg); background: var(--k-danger-bg); border-color: var(--k-danger-border); }

/* Compact list (k_lista_compatta, mod/basic/js/functions.js): the orders
   list look for any Lista. One line per row, fixed layout with the module's
   widths (long names end in "…", full text on hover); below its min-width
   the list scrolls sideways inside its own box. */
/* (.k-list-container too: it must beat .k-list-container > table[class*="ketna_list"]{ table-layout: auto }) */
.k-list-container.k-lista-compatta > table{ table-layout: fixed; font-size: 13px; font-variant-numeric: tabular-nums; }
.k-lista-compatta > table > tbody > tr > td[data-column]{
	padding-top: 3px;
	padding-bottom: 3px;
	white-space: nowrap !important;   /* Lista sets white-space: normal inline on re-render */
	overflow: hidden;
	text-overflow: ellipsis;
}
.k-lista-compatta td.k-col-chiave{ font-weight: 600; }
/* merged columns of a list (k_celle_unite) and the RMA tags (k_rma_celle_unite) */
.k-cella-codice{ margin-right: 6px; color: var(--k-ink-3); font-size: 12px; }
.k-cella-seconda{ color: var(--k-ink-3); }
.k-rma-tag{ display: inline-block; margin-right: 4px; padding: 0 5px; color: var(--k-ink-2); font-size: 11.5px; line-height: 17px; background: var(--k-surface-sunken); border: 1px solid var(--k-divider); border-radius: 9px; }
/* a value that opens another record (k_lista_compatta collegamenti): a link, the row still opens its own */
.k-lista-compatta td > a.k-cella-link{ color: var(--k-primary-text); text-decoration: none; }
.k-lista-compatta td > a.k-cella-link:hover{ text-decoration: underline; }
.k-lista-compatta td[data-column="status"]{ text-overflow: clip; }
/* a row with a problem (e.g. BOM of a product not registered yet) */
tr.k-riga-errore > td{ color: var(--k-danger-fg); background-color: var(--k-danger-bg) !important; }
/* a cancelled row (any list; set by the page or by k_lista_compatta) */
tr.k-riga-annullata > td{ color: var(--k-text-disabled); text-decoration: line-through; }
.k-lista-compatta tfoot td.k-totale-etichetta,
.k-lista-compatta tfoot tr.ttail > td{ font-weight: 700; }
/* the label may sit in a narrow first column (a checkbox): it runs over */
.k-lista-compatta tfoot td.k-totale-etichetta{ overflow: visible; text-overflow: clip; white-space: nowrap; }
/* the tools are in the bottom bar too (with the pages): one bar is enough */
.k-lista-compatta > table > thead > tr:first-child:has(.k-list-toolbar-inner){ display: none; }
.k-lista-compatta > table > thead > tr > th{ padding-right: 6px; }
/* lighter column filters */
.k-lista-compatta th :is(.input_txt, .input_map){ min-height: 24px; margin-top: 3px; padding-top: 1px; padding-bottom: 1px; }

/* ---------------------------------------------------------------------
 * Module-specific button classes (restyled as MUI buttons)
 * ------------------------------------------------------------------ */
button.conferma{
	min-height: var(--k-button-h); padding: 2px 12px; margin: 1px 6px 1px 0;
	font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
	color: #fff; background-color: var(--k-primary); border: 1px solid var(--k-primary);
	border-radius: var(--k-radius-sm); cursor: pointer;
}
button.conferma:not(:disabled):hover{ background-color: var(--k-primary-dark); border-color: var(--k-primary-dark); }
button.annulla,
button.pulsante-chiudi,
button.pulsante-chiudi-popup-storico-pdf,
button.seleziona-tutti-check,
button.deseleziona-tutti-check,
button.pulsante-ricopia{
	min-height: var(--k-button-h); padding: 2px 12px; margin: 1px 6px 1px 0;
	font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
	color: var(--k-ink-2); background-color: var(--k-paper); border: 1px solid var(--k-field-border);
	border-radius: var(--k-radius-sm); cursor: pointer;
}
button.pulsante-ricopia{ min-height: 24px; padding: 0; text-transform: none; }
button.annulla:not(:disabled):hover,
button.pulsante-chiudi:not(:disabled):hover,
button.pulsante-chiudi-popup-storico-pdf:not(:disabled):hover,
button.seleziona-tutti-check:not(:disabled):hover,
button.deseleziona-tutti-check:not(:disabled):hover,
button.pulsante-ricopia:not(:disabled):hover{ background-color: var(--k-surface-sunken); border-color: var(--k-field-border-hover); color: var(--k-ink); }

/* lavorazioni_interne dialogs: no parent activity -> show a dash, not a blank link */
a#parent_id:empty::before{ content: '\2014'; color: var(--k-text-disabled); }
a#parent_id:empty{ pointer-events: none; text-decoration: none; }

/* wide lists scroll sideways: keep toolbar and empty state inside the visible
   width (--k-list-w is set by k_fit_lists() in functions.js) */
.k-list-container .k-list-toolbar-inner,
.k-list-container tr.empty_list .k-empty-state,
.k-list-container tr.k-list-error .k-empty-state{
	position: sticky;
	left: 10px;
	max-width: calc(var(--k-list-w, 100%) - 20px);
	box-sizing: border-box;
}

/* ID columns: room for the label, sort icon and a usable filter field */
.ketna_list th.k-col-id,
.ketna_list_no_min_width th.k-col-id{ min-width: 96px; }
/* column filters use the full label width (JS sets 90%) */
.ketna_list th .lbl_header > div > :is(input, select),
.ketna_list_no_min_width th .lbl_header > div > :is(input, select){ width: 100% !important; }

/* forms built for very wide screens (e.g. width 1300px / 1590px) shrink to
   the content width instead of making the page scroll sideways */
#content .dom_form,
#content .bordered_table{ max-width: 100%; box-sizing: border-box; }

/* inline "color:red" built in PHP/SQL (e.g. invoice list "misto" / "NO",
   mod/fatture/functions.php) uses the palette's danger red on screen */
:is(#content, .k-dialog, .ui-dialog) :is([style*="color:red"], [style*="color: red"]){ color: var(--k-danger) !important; }

/* ---------------------------------------------------------------------
 * Layout pass after manual review (2026-09-25)
 * ------------------------------------------------------------------ */

/* Form and card tables use the full width of their container (module widths
   such as width="900" / style="width: 50%" are overridden). Floated or
   inline tables placed side by side keep their width. Content wider than the
   screen scrolls sideways inside the page / dialog / list container. */
:where(body:not(:has(.k-compact))) {   /* not inside .k-compact: there a form is only as wide as its fields */
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor):not(table table, [align="left"], [align="right"], [style*="float"], [style*="inline"]){
	width: 100% !important;
}
}
/* fixed column layouts let content spill out of its cell: columns grow instead */
#content table.bordered_table[style*="table-layout"]{ table-layout: auto !important; }

/* pagination bar under a grid that builds its own pages (orders_supplier/da_ordinare.js) */
.k-pagination-bar{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: -4px 0 8px 0;
	padding: 4px 0;
}
.k-pagination-bar:empty{ display: none; }

/* Dialog action buttons sit at the bottom right: a last block holding only
   buttons, or a last table row whose single cell holds only buttons */
.k-dialog-body > :last-child:is(div, p):has(> :is(button, input[type=button], input[type=submit])):not(:has(> :not(button, input[type=button], input[type=submit], input[type=hidden], br, script))),
.ui-dialog-content > :last-child:is(div, p):has(> :is(button, input[type=button], input[type=submit])):not(:has(> :not(button, input[type=button], input[type=submit], input[type=hidden], br, script))){
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}
/* the flex gap already spaces them */
.k-dialog-body > :last-child:is(div, p):has(> :is(button, input[type=button], input[type=submit])):not(:has(> :not(button, input[type=button], input[type=submit], input[type=hidden], br, script))) > *,
.ui-dialog-content > :last-child:is(div, p):has(> :is(button, input[type=button], input[type=submit])):not(:has(> :not(button, input[type=button], input[type=submit], input[type=hidden], br, script))) > *{ margin-left: 0; margin-right: 0; }
:is(.k-dialog-body, .ui-dialog-content) table > tbody > tr:last-child > td:only-child:has(> :is(button, input[type=button], input[type=submit])):not(:has(> :not(button, input[type=button], input[type=submit], input[type=hidden], br, script))){
	text-align: right;
	padding-top: 6px;
}

/* nothing sticks to its neighbour: text buttons, labels and fields keep a gap
   (flex toolbars already use gap) */
:where(#content, .k-dialog-body, .ui-dialog-content) :is(button, input:is([type=button], [type=submit], [type=reset])):not([class*="input_btn_"]):not(:where(.k-toolbar > *, #buttons > *, .ui-dialog-buttonset > *))
	+ :is(button, input:is([type=button], [type=submit], [type=reset])):not([class*="input_btn_"]){
	margin-left: 8px;
}
:where(#content, .k-dialog-body, .ui-dialog-content) label:not(:where(.k-toolbar > *)) + :is(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea){
	margin-left: 6px;
}
:where(#content, .k-dialog-body, .ui-dialog-content) :is(input:not([type=checkbox], [type=radio], [type=hidden]), select, textarea):not(:where(.k-toolbar > *)) + label{
	margin-left: 8px;
}
:where(#content, .k-dialog-body, .ui-dialog-content) input:is([type=checkbox], [type=radio]):not(:where(.k-toolbar > *)) + label{
	margin-left: 4px;
}

/* ---------------------------------------------------------------------
 * Form cards: uniform field sizes and aligned actions (2026-09-25)
 * ------------------------------------------------------------------ */
/* Fields in a form card have one size: selects and text fields fill their
   cell up to 280px (module inline widths on selects, e.g. provincia 175px,
   are overridden; text fields a module sizes small on purpose - quantities,
   minutes, marked data-k-fixed by functions.js k_mark_fixed_fields - keep
   their width). Cells spanning several columns are left
   alone (full-width fields such as "Dove"). */
/* not inside .k-compact (dense pilot page, mod/widgets/PopupClientOrder/styles.css):
   there every field keeps the size it needs. :where() adds no specificity. */
:where(body:not(:has(.k-compact))) {
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td:not([colspan]:not([colspan="1"])) :is(
	select:not([multiple], [size]),
	input:is([type=text], [type=email], [type=password], [type=number], [type=tel], :not([type])):not([data-k-fixed], .input_txt_qt)
){
	width: 100% !important;
	max-width: 280px !important;
	box-sizing: border-box;
}
/* cells spanning several columns: only fields the module sized in px
   (e.g. RMA cliente 385px, partnumber 200px) follow the uniform width;
   fields meant to be full width there have no px width and are untouched */
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td[colspan]:not([colspan="1"]) :is(
	select:not([multiple], [size]),
	input:is([type=text], [type=email], [type=password], [type=number], [type=tel], :not([type]))
):is([style*="px"], [width]):not([data-k-fixed], .input_txt_qt){
	width: 100% !important;
	max-width: 280px !important;
	box-sizing: border-box;
}
}
/* textareas fill their cell, aligned with the fields above instead of
   being centred at a fixed width */
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) textarea{
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td:has(> textarea){ text-align: left !important; }

/* "+" (add row) always at the right end of its row, lined up with the row
   action icons (delete ✕…) above it; module margins such as
   margin-right: 163px and centred cells are overridden */
:is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td:has(> .input_btn_add:only-child){
	text-align: right !important;
	padding-right: 12px !important;
}
:is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td > .input_btn_add:only-child{ margin: 1px 2px !important; }
/* a row's last cell holding only icon buttons (row actions) is right-aligned */
:is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) tr > td:last-child:has(> :is([class*="input_btn_"], .checkout, .ord_resync)):not(:has(> :not([class*="input_btn_"], .checkout, .ord_resync, br, input[type=hidden]))){
	text-align: right !important;
	padding-right: 12px !important;
}
/* a form card without a title (DataGrid title: '') shows no empty header strip */
:is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) tr:has(> th:only-child:empty){ display: none; }
/* a card nested directly in a card's cell (e.g. RMA "RMA" / "RICHIESTA CLIENTE"
   inside the page card) keeps normal cell padding and dividers; the tight
   "td td" padding is only for plain layout tables */
:is(.dom_form, .bordered_table, .bordered_table_hor) td :is(.dom_form, .bordered_table, .bordered_table_hor) > :is(tbody, thead) > tr > td,
:is(.dom_form, .bordered_table, .bordered_table_hor) td :is(.dom_form, .bordered_table, .bordered_table_hor) > tr > td{
	padding: 3px 8px;
	border-bottom: 1px solid var(--k-divider-light);
}
:is(.dom_form, .bordered_table, .bordered_table_hor) td :is(.dom_form, .bordered_table, .bordered_table_hor) > :is(tbody, thead) > tr:last-child > td{ border-bottom: 0; }
/* small fixed fields (quantities, parcels…) start where the other fields in
   their column start instead of being centred in the cell */
#content :is(.dom_form, .no_title_dom_form, .bordered_table, .bordered_table_hor) td:has(> input[data-k-fixed]){ text-align: left !important; }
/* page sections use the full content width: module caps on top-level
   containers (e.g. #edit_order max-width: 1300px, Acquisti list width 500px)
   are removed; content still scrolls inside when wider than the screen */
#content > :is(div, form)[style*="width"]{
	width: auto !important;
	max-width: none !important;
}

/* ---------------------------------------------------------------------
 * Manual review, round 2 (2026-09-25)
 * ------------------------------------------------------------------ */
/* Produzione / Nuova Dist + Edit dist: CONFERMA (#save_button, moved under
   the form by dist.js) sits in a Paper bar at the bottom right instead of
   floating in the middle of the page */
#form_dist > #save_button{
	width: auto !important;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px 0;
	padding: 4px 8px;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
#form_dist > #save_button > br{ display: none; }
/* BOM editors (New / Edit BOM, Made@Antek, Disass@Antek): lines of components,
   not a form of a few fields: the card uses the room on the right and the
   component description fills its column (it stopped at 280px: names cut) */
#content #form_dist.k-section{ max-width: 1100px; }
#content #form_dist input:is([name^="pn_comp_descr"], [name^="descr"]){ width: 100% !important; max-width: none !important; box-sizing: border-box; }
/* Made@Antek / Disass@Antek: the delete icon above the form gets the same
   bar look as the other pages' top icon rows (#buttons) */
#content > #save_button:has(> [class*="input_btn_"]){
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0 0 8px 0;
	padding: 4px 8px;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}

/* Produzione / Kit: the actions on the ticked kits, on one line; each
   button explains itself in its tooltip; "Only active firms" at the right */
.k-kit-actions{
	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);
}
.k-kit-bottoni{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.k-kit-bottoni > input[type=button]{ margin: 0 !important; }
.k-kit-scelti{ color: var(--k-text-2); font-size: 13px; }
.k-kit-bottoni > .k-kit-filter{ display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto !important; color: var(--k-text-2); font-size: 13px; font-weight: 400; cursor: pointer; }
.k-kit-bottoni > .k-kit-filter > input{ margin: 0; }

/* Ricerche / Area Ordini, Area Fatture: the position fields (inline
   max-width 40px) fill their cell like the fields of the other forms, and
   the filter textarea (inline 98%) ends at the same right edge */
#query_params .dom_form td > :is(input[type=text], textarea){
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/* Profile / Cambio Password: Invia at the right end of the card; the empty
   button row Dom_form adds at the bottom is not shown */
#form_profilo td.form_val:has(> input[type=button]:only-child){ text-align: right; }
.dom_form tr:has(> td.row_buttons:only-child:empty){ display: none; }

/* Lists with editable cells (Amministr: Gestione Ruoli, Gestione Utenti,
   Filtro Utenti, Codici IVA): the module wraps fields in <div align=center>;
   they start at the left like the header and the text cells, and the
   checkboxes (inline 21px) have the standard 16px size */
.k-list-container > table > tbody > tr > td > div[align="center"]:has(> :is(input, select, textarea)){
	text-align: left;
}
.k-list-container > table > tbody > tr > td > div[align="center"] > input[type=checkbox]{
	width: 16px !important;
	height: 16px !important;
	vertical-align: middle;
}

/* Amministr / Send Email Broadcast: the send icon at the right end of the bar */
#content > .k-toolbar:has(> #deselect_all) > #email.input_btn_sendmail{
	order: 1;
	margin-left: auto;
}

/* list whose data request failed (functions.js k_list_error_html): the
   message sits in the middle of the list Paper, warning icon in red */
.k-list-container > table:has(tr.k-list-error){ height: 100%; }
tr.k-list-error > td{ vertical-align: middle; border-bottom: 0 !important; }
tr.k-list-error .k-empty-state > .bi{ color: var(--k-danger, #d32f2f); }

/* long description + notes in order rows: capped height, scrolls inside the cell */
.k-desc-scroll{
	display: block;
	max-height: 80px;
	overflow-y: auto;
	white-space: pre-line;
}

/* Collapsible lists (functions.js k_collapse_button, built in the top toolbar
   of the list): collapsed = only the top toolbar row stays visible */
.k-collapse-btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--k-text-2);
	border-radius: 50%;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.k-collapse-btn:hover{ background-color: rgba(0, 0, 0, .06); color: var(--k-text); }
#content .k-list-container.k-collapsed{ min-height: 0; height: auto !important; overflow: hidden; }
.k-list-container.k-collapsed > table > tbody,
.k-list-container.k-collapsed > table > tfoot,
.k-list-container.k-collapsed > table > thead > tr:not(.k-list-toolbar){ display: none; }
/* data grid cards (bordered_table): only the title row stays */
form.k-collapsed > table > tbody > tr:not(:first-child),
form.k-collapsed > table > tr:not(:first-child){ display: none; }
.k-collapse-btn-title{ margin: -6px 8px -6px -6px; vertical-align: middle; }

/* Works (TO DO / DONE): the lists never get squeezed on short screens,
   the page scrolls instead */
#div-lavorazioni-HW,
#div-lavorazioni-SW{ --k-list-min-h: 260px; }

/* ---------------------------------------------------------------------
 * Filter forms (class k-form-narrow on a DataGrid table, k-form-stack on a
 * page form / toolbar): one horizontal bar over the full width of the page,
 * fields start at the left, checkboxes come after the text fields, the
 * buttons follow the inputs at the left. Nothing wraps onto a second line:
 * fields and labels shrink (labels get an ellipsis) and on narrower screens
 * font, padding and spacing get smaller.
 * ------------------------------------------------------------------ */
#content table.dom_form.k-form-narrow,
.k-bar-filter table.dom_form.k-form-narrow{
	display: block;
	width: 100% !important;
	max-width: none;
}
.k-form-narrow > tbody{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 4px 16px;
	padding: 8px 12px;
}
/* a table with a title row on top keeps that row on its own line */
.k-form-narrow > tbody:has(> tr > th:not(:empty)){ flex-wrap: wrap; }
.k-form-narrow > tbody > tr{
	display: flex;
	align-items: center;
	flex: 0 1 auto;
	min-width: 0;
	gap: 8px;
	order: 0;
}
.k-form-narrow > tbody > tr > :is(td, th){
	display: block;
	width: auto !important;
	min-width: 0;
	padding: 2px 0;
	border: 0 !important;
	text-align: left;
}
.k-form-narrow > tbody > tr > td:first-child:not([colspan]:not([colspan="1"])){
	flex: 0 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.k-form-narrow > tbody > tr > td:not(:first-child, [colspan]:not([colspan="1"])){ flex: 0 30 150px; min-width: 0; }
.k-form-narrow > tbody > tr > td:not(:first-child) > :is(input:not([type=checkbox], [type=radio], [type=hidden]), select){ width: 100% !important; }
.k-form-narrow > tbody > tr > td, .k-form-narrow > tbody > tr > td > label{ white-space: nowrap !important; }
.k-form-narrow :is(input:not([type=checkbox], [type=radio], [type=hidden]), select){
	min-width: 56px !important;
	max-width: 100% !important;
}
/* title row on top, alone on its line */
.k-form-narrow > tbody > tr:has(> th){ order: -1; flex: 0 0 100%; }
.k-form-narrow > tbody > tr > th{ flex: 1 1 auto; background: transparent; }
/* checkboxes after the text fields, buttons last, both at the left */
.k-form-narrow > tbody > tr:has(input[type=checkbox]):not(:has(input[type=text], select)){ order: 1; }
.k-form-narrow > tbody > tr:has(> td[colspan]:not([colspan="1"]):last-child):not(:has(> th)){ order: 2; }
.k-form-narrow > tbody > tr > td[colspan]:not([colspan="1"]):last-child{ text-align: left; white-space: nowrap; }
.k-form-narrow > tbody > tr:has(> td[colspan]:not([colspan="1"]):last-child){ flex: 0 0 auto; }
.k-form-narrow > tbody > tr:has(> th:only-child:empty){ display: none; }

/* page form / toolbar with loose fields (class k-form-stack) */
.k-form-stack{ flex-wrap: nowrap !important; justify-content: flex-start; }
.k-form-stack > br{ display: none; }
.k-form-stack > label{
	flex: 0 1 auto;
	min-width: 0;
	width: auto !important;
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--k-text-2);
	font-size: 13px;
}
.k-form-stack > :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select){
	flex: 0 1 auto;
	flex: 0 30 auto;
	min-width: 36px !important;
	max-width: 100%;
}
/* a date always shows dd/mm/yyyy in full (Finance reports showed "14/10/202") */
.k-form-stack > input.hasDatepicker{ flex-shrink: 0; min-width: 108px !important; }
.k-form-stack > :is(input[type=checkbox], input[type=checkbox] + label, .checkbox-tabella, div:has(> input[type=checkbox])){ order: 1; }
.k-form-stack > :is(input[type=submit], input[type=button], button, .k-form-actions){ order: 2; flex: 0 0 auto; }
.k-form-stack > .k-form-actions,
.k-form-actions{ display: flex; flex-wrap: nowrap; gap: 8px; }
.k-form-actions > input{ margin: 0 !important; }

/* field titles live in the field (placeholder / select overlay, see
   k_filter_titles in mod/basic/js/functions.js); the title element is hidden */
.k-lbl-moved{ display: none !important; }
.k-ph-select{ position: relative; }
.k-ph-select > .k-ph-label{
	position: absolute;
	left: 10px;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
	color: var(--k-ink-3);
	font-size: inherit;
	line-height: 1.2;
	z-index: 1;
}
.k-ph-select.k-has-val > .k-ph-label{ display: none; }
.k-form-stack > .k-ph-select{ display: inline-block; flex: 0 30 140px; min-width: 56px; }
.k-form-stack > .k-ph-select > select{ width: 100% !important; min-width: 0 !important; }

/* bars with checkboxes: fields on the first line, the checkboxes below them
   at the left, the buttons below the checkboxes at the left */
.k-form-narrow.k-has-cb > tbody,
.k-form-stack.k-has-cb{ flex-wrap: wrap !important; }
.k-form-narrow.k-has-cb > tbody::before,
.k-form-stack.k-has-cb::before{ content: ''; flex: 0 0 100%; height: 0; }
.k-form-narrow.k-has-cb > tbody::before,
.k-form-stack.k-has-cb::before{ order: 1; }
.k-form-narrow.k-has-cb > tbody > tr:has(input[type=checkbox]):not(:has(input[type=text], select)),
.k-form-stack.k-has-cb > :is(input[type=checkbox], input[type=checkbox] + label, .checkbox-tabella, div:has(> input[type=checkbox])){ order: 2; }
.k-form-narrow.k-has-cb > tbody > tr:has(> td[colspan]:not([colspan="1"]):last-child):not(:has(> th)),
.k-form-stack.k-has-cb > :is(input[type=submit], input[type=button], button, .k-form-actions){ order: 4; }
.k-form-narrow.k-has-cb > tbody > tr:not(:has(input[type=checkbox]), :has(> th), :has(> td[colspan]:not([colspan="1"]):last-child)){ flex: 0 1 auto; }
.k-form-narrow.k-has-cb > tbody > tr:has(input[type=checkbox]){ flex: 0 0 auto; }
.k-form-narrow.k-has-cb > tbody > tr:has(input[type=checkbox]) > td:first-child{ overflow: visible; text-overflow: clip; }
.k-form-stack.k-has-cb > :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select, .k-ph-select){ flex: 1 1 90px; max-width: 200px; }

/* same height for text fields, selects and the buttons in the bars; the
   select keeps room for its chevron */
:is(.k-form-stack, .k-form-narrow) :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select){
	height: var(--k-field-h);
	min-height: var(--k-field-h);
	box-sizing: border-box;
}
:is(.k-form-stack, .k-form-narrow) select{ padding-right: 28px !important; }
/* a checkbox title and its checkbox are not glued together */
.k-form-narrow > tbody > tr:has(input[type=checkbox]) > td:first-child{ padding-right: 10px; }
.k-form-stack input[type=checkbox] + label{ margin-left: 6px; }
.k-form-stack > .checkbox-tabella > div > label{ margin-left: 6px; }
/* purchase filter: "Show:" and its four checkboxes in one row */
.k-form-stack > .checkbox-tabella{
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 4px 18px;
	flex: 0 0 auto;
}
.k-form-stack > .checkbox-tabella > .k-cb-title{ grid-column: auto; }
.k-form-stack > .checkbox-tabella > div{ display: flex; align-items: center; white-space: nowrap; }
@media (max-width: 760px){ .k-form-stack > .checkbox-tabella{ flex-wrap: wrap; max-width: 100%; row-gap: 4px; } }   /* "Show:" and its checkboxes wrap on phones */

/* narrower screens: the bars stay on one line, so everything gets smaller */
@media (max-width: 1500px){
	:is(.k-form-stack, .k-form-narrow) :is(label, td, input, select, button){ font-size: 12px; }
	.k-form-narrow > tbody{ gap: 4px 10px; padding: 6px 8px; }
	.k-form-narrow > tbody > tr{ gap: 5px; }
	.k-form-stack{ gap: 4px 6px !important; padding: 6px 8px !important; }
	:is(.k-form-stack, .k-form-narrow) :is(input[type=submit], input[type=button], button){ padding: 4px 10px; }
	:is(.k-form-stack, .k-form-narrow) input:not([type=checkbox], [type=radio], [type=submit], [type=button]){ padding-left: 6px; padding-right: 6px; }
}
@media (max-width: 1100px){
	:is(.k-form-stack, .k-form-narrow) :is(label, td, input, select, button){ font-size: 11px; }
	.k-form-narrow > tbody{ gap: 3px 6px; padding: 5px 6px; }
	.k-form-stack{ gap: 3px 4px !important; padding: 5px 6px !important; }
	:is(.k-form-stack, .k-form-narrow) :is(input[type=submit], input[type=button], button){ padding: 3px 7px; }
}
/* phones: one line can't hold a filter bar; the fields wrap, two or so per line */
@media (max-width: 760px){
	.k-form-stack{ flex-wrap: wrap !important; }
	.k-form-stack > :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select, .k-ph-select){ flex: 1 1 130px; max-width: none; }
	/* the DataGrid filter bars too (Sold, Customers, Search invoices...): they squeezed
	   five fields into one line, each cut to a few letters ("Custome", "01/09/20") */
	.k-form-narrow > tbody{ flex-wrap: wrap; }
	.k-form-narrow > tbody > tr:not(:has(> th)):has(:is(input:not([type=checkbox], [type=radio], [type=hidden], [type=submit], [type=button]), select)){ flex: 1 1 140px; min-width: 0; }
	.k-form-narrow > tbody > tr > td:not(:first-child, [colspan]:not([colspan="1"])){ flex: 1 1 auto; }
}

/* a command bar (back / save / delete icons) and the filter below it share
   one card (wrapped by k_merge_bar_filter in mod/basic/js/functions.js) */
.k-bar-filter{
	display: flex;
	align-items: center;
	margin: 0 0 8px 0;
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
}
.k-bar-filter > .k-bar-cmds{
	display: flex;
	flex: 0 0 auto;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 6px 4px 6px 10px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
.k-bar-filter > :not(.k-bar-cmds){
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent !important;
	max-width: none !important;
}
/* the page form / toolbar loses its own card styles (#content > ...) inside the wrapper */
.k-bar-filter > :is(form.k-form-stack, .k-toolbar.k-form-stack){
	display: flex;
	align-items: center;
	gap: 4px 8px;
	padding: 8px 12px;
}
.k-bar-filter > div:has(> table.k-form-narrow){ padding: 0; }
/* phones: the actions above the filter, on one line swiped sideways */
@media (max-width: 760px){
	.k-bar-filter{ flex-direction: column; align-items: stretch; }
	.k-bar-filter > .k-bar-cmds{ overflow-x: auto; scrollbar-width: none; padding-right: 10px; border-bottom: 1px solid var(--k-divider); }
	.k-bar-filter > .k-bar-cmds > *{ flex: 0 0 auto; }
}

/* Profile / Registry-style single column forms (class k-form-column): label | field
   rows, narrow card, action button bottom right */
#content table.dom_form.k-form-column{
	width: 100% !important;
	max-width: 440px;
}
#content .k-form-column td{ text-align: left; }
#content .k-form-column td:first-child:not([colspan]){ white-space: nowrap; width: 40%; }
#content .k-form-column td[colspan]:last-child:has(> :is(input[type=button], input[type=submit], button)){ text-align: right; }

/* Searches / Orders area, Invoices area: field pairs in two columns; on a
   really narrow screen every pair goes under the previous one */
@media (max-width: 760px){
	#query_params > tbody > tr{
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		align-items: center;
	}
	#query_params > tbody > tr > :is(td, th){ width: auto !important; }
	#query_params > tbody > tr > :is(td, th)[colspan]{ grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
 * Single section wrapper (class k-section): one card for a whole page /
 * form; the forms inside become parts of it, divided by a line, with the
 * action button inside the card, bottom right
 * ------------------------------------------------------------------ */
#content .k-section{
	background-color: var(--k-paper);
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-1);
	max-width: 720px;
	margin: 0 0 8px 0;
	overflow: hidden;
}
#content .k-section > br{ display: none; }
#content .k-section > form > table,
#content .k-section > table.dom_form{
	width: 100% !important;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}
#content .k-section > form + form,
#content .k-section > form + div{ border-top: 1px solid var(--k-divider); }
#content .k-section .dom_form td{ padding: 2px 8px; }
#content .k-section .dom_form th{ padding: 5px 10px; font-size: 13px; }
#content .k-section > #save_button,
#content .k-section > div[style*="text-align: right"]{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	width: auto !important;
	margin: 0;
	padding: 6px 10px;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--k-divider);
	border-radius: 0;
	box-shadow: none;
}
#content .k-section > #save_button:has(> [class*="input_btn_"]){
	justify-content: flex-start;
	border-top: 0;
	border-bottom: 1px solid var(--k-divider);
}
#content .k-section > #save_button > br{ display: none; }

/* page built by hand (BOM import): padded, vertical flow */
#content .k-section.k-section-pad{
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 12px;
}
#content .k-section-pad p{ margin: 0; }
#content .k-section-pad > input[type=text]{ width: 100%; max-width: 360px; }
#content .k-section-pad .k-section-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#content .k-section-pad .k-section-actions > input{ margin: 0; }
.k-form-stack > .k-form-actions > :is(button, input){ margin: 0; }

/* Registry / Create firm: all cards the same narrow width, save button bottom right */
#handle_customer, #firms_kinds, #mail_fatturazione, #gestione_ricerche, #recapiti, #coordinate{ max-width: 640px; }
/* Product page, General: the two label | field column pairs only as wide as
   the fields (280px), not spread over the whole screen */
#basic_elements{ max-width: 960px; }
#basic_elements .dom_form tr > td:is(:nth-child(1), :nth-child(3)):not([colspan]:not([colspan='1'])){ width: 160px !important; }
#basic_elements .dom_form tr > td:is(:nth-child(2), :nth-child(4)){ width: auto !important; }
/* Payment page (mod/payments/payments.js): the product page's two label |
   field pairs */
#payments{ max-width: 960px !important; }
#payments .dom_form tr > td:is(:nth-child(1), :nth-child(3)):not([colspan]:not([colspan='1'])){ width: 160px !important; }
#payments .dom_form tr > td:is(:nth-child(2), :nth-child(4)){ width: auto !important; }
/* Contract page (mod/contracts/detail.js): as wide as two label | field
   pairs need; read-only values in ink at normal weight, like fields */
#contract, #additional{ max-width: 1128px; }
#form_contratto [style*='font-weight']{ font-weight: 400 !important; }   /* values the page set bold */
#account_zone th, #account_zone td{ white-space: nowrap; }
/* portal: the contract is read-only (fields disabled): values as text in ink, no boxes */
/* firm: the saved kind / account pairs are not editable (only removable): as text too */
#firms_kinds select:disabled,
#form_contratto :is(input[type=text], select):disabled{ padding-left: 0; border-color: transparent !important; background: none !important; box-shadow: none !important; color: var(--k-ink) !important; -webkit-text-fill-color: var(--k-ink); opacity: 1; appearance: none; background-image: none !important; }
/* Descriptions and Attachments: the same width, one label column */
#text_elements, #attach_file{ max-width: 960px; }
#text_elements .dom_form tr > td:first-child:not([colspan]:not([colspan='1'])),
#attach_file .dom_form tr > td:first-child:not([colspan]:not([colspan='1'])){ width: 220px !important; font-size: 12px; font-weight: 600; color: var(--k-ink-2); vertical-align: top; padding-top: 7px; }
#text_elements .dom_form tr > td + td, #attach_file .dom_form tr > td + td{ width: auto !important; }
#text_elements .dom_form td + td :is(input[type=text], textarea){ max-width: none !important; }
/* Contacts tab, defaults (template-modifica-precompilati): label | select | edit icon right after it */
#gestione_ricerche > table{ width: 100% !important; }
#gestione_ricerche > table td:first-child:not([colspan]){ width: 160px !important; }
#gestione_ricerche > table td:nth-child(2){ width: 290px !important; }   /* the select: the app's 280px field */
#gestione_ricerche > table td:last-child:not([colspan]){ width: auto !important; text-align: left; }
/* Firm General tab (k_ditta_colonne, mod/anagrafica/detail.js): cards in two
   columns, Firm details + Status and roles | Tax and invoicing; the roles as
   a two-column check list (box before its name) */
#handle_customer:has(.k-ditta-colonne){ max-width: 1128px; }
#firms_kinds, #content #firm_review_history{ max-width: 560px; }
.k-ditta-colonne{ display: grid; grid-template-columns: repeat(2, minmax(0, 560px)); gap: 8px; align-items: start; margin-bottom: 8px; }
.k-ditta-col{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#content .k-ditta-col > table.dom_form{ width: 100% !important; max-width: none; margin: 0 !important; }
.k-ditta-scheda tr > td:first-child:not([colspan='2']){ width: 160px; }
.k-ditta-scheda tr > td + td{ width: auto; }
#coordinate .dom_form tr > td:first-child:not([colspan='2']){ width: 160px !important; }
#coordinate .dom_form tr > td + td{ width: auto !important; }   /* Bank details: the same label column
   as the other firm cards */
.k-ditta-scheda :is(input[type=text], select){ width: 100% !important; max-width: none !important; box-sizing: border-box; }
.k-ditta-ruoli > tbody{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-ditta-ruoli > tbody > tr:first-child{ display: block; grid-column: 1 / -1; }
.k-ditta-ruoli > tbody > tr:first-child > th{ display: block; }
.k-ditta-ruoli > tbody > tr:not(:first-child){ display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; }
.k-ditta-ruoli > tbody > tr:not(:first-child) > td{ width: auto !important; border: 0; }
.k-ditta-ruoli > tbody > tr:not(:first-child) > td:last-child{ padding-right: 0; }
.k-ditta-ruoli > tbody > tr:has(input[type=hidden]){ display: none; }
@media (max-width: 900px){
	.k-ditta-colonne{ grid-template-columns: minmax(0, 1fr); }
}

/* Profile / user passwords: box where the password is shown */
.k-form-column #password{
	display: block;
	min-height: 30px;
	padding: 5px 10px;
	box-sizing: border-box;
	border: 1px solid var(--k-divider);
	border-radius: var(--k-radius-sm);
	background-color: var(--k-bg, #f8f9fa);
	line-height: 18px;
	word-break: break-all;
}
.k-form-stack > input[type=number]{ width: 150px; }
.k-form-narrow > tbody > tr:has(input[type=checkbox]){ flex: 0 0 auto; }
.k-form-narrow > tbody > tr:has(input[type=checkbox]) > td:first-child{ flex: 0 0 auto !important; overflow: visible !important; text-overflow: clip !important; }
.k-save-bar{ display: flex; justify-content: flex-start; margin: 0 0 8px 0; }
.k-save-bar > .list-button{ margin: 0; }
/* disabled buttons do not react to the mouse: every button :hover rule
   carries :not(:disabled), so a disabled button keeps its colours */

/* Phones: a wide table (data grid or form card) scrolls inside its own box,
   never the whole page sideways (docs/ui-redesign/HANDOFF.md, Mobile). The
   box is the form / div the renderers put around the table. */
@media (max-width: 760px){
	#content :is(form, div):has(> table:is(.bordered_table, .bordered_table_hor, .dom_form, .no_title_dom_form)):not(.k-list-container, .k-scheda-pannello, .k-schede-pannelli){
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* a table placed straight in the page (no form / div around it) is its own scroll box */
	#content > table:is(.bordered_table, .bordered_table_hor, .dom_form, .no_title_dom_form){
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}
}

/* Warehouse sheet (prodotti/magazzino, an editable Lista): the column widths
   the page sets (Description 31%, Model 8%...) instead of the widths of the
   selects inside; every field fills its cell; stock links in the link colour */
#magazzino table:has(td[data-column="descrizione"]){ table-layout: fixed; min-width: 1100px; }
/* Price lists (listini/index): the same sheet problem, nine price fields
   squeezed Description to ~10 characters per line (rows 6 lines tall) */
#div-listini table:has(td[data-column="descrizione"]){ table-layout: fixed; min-width: 1100px; }
#div-listini td[data-column] :is(input[type=text], input:not([type]), select){ width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; }
#magazzino td[data-column] :is(input[type=text], input:not([type]), select){ width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; }
#magazzino td[data-column] input[type=checkbox]{ width: auto !important; }
#magazzino td[data-column="giacenze"] a{ color: var(--k-primary-text); text-decoration: none; }
#magazzino td[data-column="giacenze"] a:hover{ text-decoration: underline; }

/* Phones: the record forms of the firm, product, payment and contract pages.
   Four-column forms (label | field | label | field) become one label | field
   pair per line, labels narrower; product descriptions put the label above
   its text area, which then has the full width */
@media (max-width: 600px){
	.k-ditta-scheda tr > td:first-child:not([colspan='2']),
	#coordinate .dom_form tr > td:first-child:not([colspan='2']){ width: 110px !important; }
	:is(#basic_elements, #payments) .dom_form > tbody > tr,
	#form_contratto td[colspan] > form > table > tbody > tr{ display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
	:is(#basic_elements, #payments) .dom_form > tbody > tr > :is(td, th),
	#form_contratto td[colspan] > form > table > tbody > tr > td{ width: auto !important; min-width: 0; }
	:is(#basic_elements, #payments) .dom_form > tbody > tr > :is(th, td[colspan]:not([colspan='1'])){ grid-column: 1 / -1; }
	:is(#basic_elements, #payments) .dom_form > tbody > tr > td:empty,
	#form_contratto td[colspan] > form > table > tbody > tr > td:empty{ display: none; }
	:is(#text_elements, #attach_file) .dom_form > tbody > tr{ display: grid; grid-template-columns: minmax(0, 1fr); }
	:is(#text_elements, #attach_file) .dom_form > tbody > tr > td{ width: auto !important; }
	:is(#text_elements, #attach_file) .dom_form > tbody > tr > td:first-child:not(:only-child){ padding-bottom: 0; }
	/* the contract's linked accounts (one line per cell) scroll on their own, not the whole form */
	#account_zone{ display: block; max-width: calc(100vw - 48px); overflow-x: auto; }
	/* the PDF to import: its label above it, the file field as wide as the screen */
	#form_contratto > table > tbody > tr:has(#attach_zone){ display: grid; grid-template-columns: minmax(0, 1fr); }
	#form_contratto > table > tbody > tr:has(#attach_zone) > td{ width: auto !important; }
	:is(#attach_zone, #attach_zone table){ max-width: calc(100vw - 48px) !important; }
	#attach_zone input[type=file]{ width: 100% !important; min-width: 0 !important; }
}

/* a long text in a list cell: two lines at most (k_testi_corti, e.g. Works >
   DONE! activities), the full text in the cell's tooltip */
.k-due-righe{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* An editable sheet in a list (.k-foglio on the list's container: admin users,
   user filters, VAT codes): the columns follow the widths the page sets
   instead of the fields' own widths, every field fills its cell; the list
   scrolls sideways only when the columns really do not fit */
.k-foglio > table{ table-layout: fixed; min-width: var(--k-foglio-min, 0); }   /* --k-foglio-min: a sheet too wide to squeeze (admin users) */
.k-foglio td[data-column] :is(input[type=text], input:not([type]), select){ width: 100% !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box; }
/* fixed-width columns (compact lists, sheets): a label longer than its column
   wraps instead of pushing the whole list into a sideways scroll */
:is(.k-lista-compatta, .k-foglio) > table > thead th > table{ table-layout: fixed; }
:is(.k-lista-compatta, .k-foglio) > table > thead th .lbl_header{ white-space: normal !important; overflow-wrap: normal; word-break: normal; }   /* at spaces only: a long word ends in "…" */
:is(.k-lista-compatta, .k-foglio, #div-listini) > table > thead th :is(input, select){ min-width: 0 !important; max-width: 100% !important; box-sizing: border-box; }

/* a list's active filters on its top bar (lista_incremental.js build_toolbar) */
.k-list-filtri{ display: inline-flex; align-items: center; gap: 6px; max-width: 520px; min-width: 0; height: 26px; margin-left: 6px; padding: 0 4px 0 9px; color: var(--k-info-fg, var(--k-ink-2)); font-size: 12.5px; background: var(--k-info-bg, var(--k-surface-sunken)); border: 1px solid var(--k-info-border, var(--k-line-strong)); border-radius: 13px; }
.k-list-filtri > i{ font-size: 11px; }
.k-list-filtri-nomi{ min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.k-list-filtri-via{ flex: 0 0 auto; height: 20px; padding: 0 8px; color: inherit; font-size: 12px; font-weight: 600; background: none; border: 0; border-radius: 10px; cursor: pointer; }
.k-list-filtri-via:hover{ background: rgba(0, 0, 0, .06); }

/* column chooser (lista_incremental.js colonne_scegli): a button on the bottom bar, a small menu */
.k-colonne-btn{ display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; color: var(--k-ink-3); font-size: 14px; background: none; border: 0; border-radius: 50%; cursor: pointer; }
.k-colonne-btn:hover{ color: var(--k-ink); background: var(--k-action-hover, var(--k-surface-hover)); }
.k-colonne-btn.k-colonne-attive{ color: var(--k-primary-text); }
.k-colonne-menu{ position: fixed; z-index: 17000; display: flex; flex-direction: column; min-width: 200px; max-height: 60vh; overflow-y: auto; padding: 6px; background: var(--k-paper); border: 1px solid var(--k-line-strong); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
.k-colonne-titolo{ padding: 4px 8px 6px; color: var(--k-ink-3); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.k-colonne-voce{ display: flex; align-items: center; gap: 8px; margin: 0; padding: 4px 8px; color: var(--k-ink); font-size: 13px; border-radius: 4px; cursor: pointer; white-space: nowrap; }
.k-colonne-voce:hover{ background: var(--k-surface-hover); }
.k-colonne-voce input{ margin: 0; }
.k-colonne-tutte{ margin-top: 4px; padding: 5px 8px; color: var(--k-primary-text); font-size: 12.5px; font-weight: 600; text-align: left; background: none; border: 0; border-top: 1px solid var(--k-line); cursor: pointer; }

/* search in a list (lista_incremental.js, bottom bar) */
.k-list-cerca{ width: 190px; height: 28px; margin: 0 6px 0 0; padding: 0 10px 0 28px; color: var(--k-ink); font-size: 12.5px; background: var(--k-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23808a96' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E") no-repeat 10px center; border: 1px solid var(--k-field-border, var(--k-line-strong)); border-radius: 14px; }
.k-list-cerca:focus{ outline: 0; border-color: var(--k-primary); box-shadow: 0 0 0 2px var(--k-focus-ring, transparent); }
@media (max-width: 760px){ .k-list-cerca{ width: 130px; } }

/* Query builder (Searches > Orders area / Invoices area, mod/search/costruttore.js):
   the columns as a checklist, the conditions with their buttons */
#query_params tr.k-qb-nascosta{ display: none; }
#query_params td.k-qb-cella{ padding: 8px 8px 12px; }
.k-qb-testa{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.k-qb-titolo{ font-weight: 600; color: var(--k-ink); }
.k-qb-svuota:disabled{ visibility: hidden; }
.k-qb-riassunto{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--k-ink-2); }
.k-qb-cella:not(.k-qb-chiusa) :is(.k-qb-riassunto, .k-qb-cambia),
.k-qb-cella.k-qb-chiusa :is(.k-qb-nota, .k-qb-griglia, .k-qb-svuota){ display: none; }
#query_params #query{ min-height: 64px !important; }
.k-qb-nota{ margin: 2px 0 8px; font-size: 12px; color: var(--k-ink-3); }
.k-qb-griglia{ display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 16px; }
.k-qb-campo{ display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding: 3px 6px; border-radius: var(--k-radius); }
.k-qb-campo:hover{ background: var(--k-neutral-100); }
.k-qb-campo > label{ display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; font-weight: 400; cursor: pointer; }
.k-qb-campo > label > input{ flex: none; margin: 0; }
.k-qb-nome{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-qb-n{ flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; font: 600 11px/1 var(--k-font); color: #fff; background: var(--k-primary); }
.k-qb-n:empty{ display: none; }
.k-qb-db{ flex: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; border: 0; background: none; font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--k-ink-3); cursor: pointer; }
.k-qb-db:hover, .k-qb-db:focus-visible{ color: var(--k-primary-text); text-decoration: underline; }
#query_params #query{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.k-qb-pezzi{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* Licence enablement (licgen/nuova_licenza): details card, features card with
   count / search / only enabled; the enabled rows stand out */
table.dom_form.k-lic-dati{ width: auto; min-width: 0; max-width: 640px; margin: 0 0 12px; }
table.dom_form.k-lic-dati td.form_lbl{ width: 180px; }
table.dom_form.k-lic-dati :is(input, select){ width: 280px !important; max-width: 100%; }
.k-lic-scheda{ max-width: 960px; }
table.dom_form.k-lic-dati td.k-lic-nota{ padding-top: 6px; font-size: 12px; color: var(--k-ink-3); white-space: normal; }
.k-lic-strumenti{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 8px 12px; background: var(--k-paper); border: 1px solid var(--k-divider-light); border-bottom: 0; border-radius: var(--k-radius) var(--k-radius) 0 0; }
.k-lic-titolo{ font-weight: 600; }
.k-lic-conta{ color: var(--k-ink-3); flex: 1 1 auto; }
.k-lic-cerca{ width: 220px !important; }
.k-lic-solo{ display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; white-space: nowrap; cursor: pointer; }
table.dom_form.k-lic-funzioni{ width: 100%; margin: 0; border-radius: 0 0 var(--k-radius) var(--k-radius); }
.k-lic-funzioni > tbody > tr > td{ border-top: 1px solid var(--k-divider-light); }
.k-lic-funzioni > :is(thead, tbody) > tr > :first-child{ width: 56px; text-align: center; }
.k-lic-funzioni > :is(thead, tbody) > tr > :nth-child(2){ width: 200px; }
.k-lic-funzioni > tbody > tr > td:nth-child(2){ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.k-lic-funzioni > tbody > tr > td:not(:first-child){ cursor: pointer; }
.k-lic-funzioni > tbody > tr.k-lic-attiva > td:nth-child(2){ font-weight: 600; color: var(--k-ink); }
.k-lic-funzioni input.k-lic-qta{ width: 44px !important; text-align: right; }
@media (max-width: 760px){
	.k-lic-funzioni > :is(thead, tbody) > tr > :nth-child(2){ width: 120px; }
	.k-lic-cerca{ width: 100% !important; }
}

/* Issued licence view (licgen/licenza_abilis_dettaglio): the key card, the enabled features */
.k-lic-chiave th{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.k-lic-chiave-azioni{ display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.k-lic-chiave-azioni .k-copia{ opacity: 1; }
textarea.k-lic-testo{ display: block; width: 100% !important; min-height: 120px; resize: vertical; font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; }
.k-lic-attive td.k-lic-fid{ width: 160px; font: 600 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.k-lic-attive td.k-lic-qtav{ width: 56px; color: var(--k-ink-3); white-space: nowrap; }

/* BOM view (prodotti_bom/distinta): a line that is not a quantity (Alternative, Work / service) */
.k-bom-tipo{ font-size: 12px; color: var(--k-ink-3); }

/* Currencies (prodotti/currencies): Save shows on the row whose rate was changed (to a valid number) */
#p_list .save_currency:disabled{ visibility: hidden; }

/* phones: record views built this round */
@media (max-width: 760px){
	/* BOM components: 5 columns in 360px wrapped every description on 4-5 lines;
	   the table scrolls sideways in its card (like the order lines) with room for the text */
	.k-vista-distinta #cont_distinta table{ min-width: 600px; }
	/* licence view: the feature ID column narrower, the description gets the room */
	.k-lic-attive td.k-lic-fid{ width: 110px; }
}