/*
 * Site-wide look: neutral greys and white, one accent colour, and layouts that
 * hold up from phone width (375px) to desktop. Same look as shopper-marketing-tracker.
 *
 * Loaded after the Metronic theme CSS and custom.css (canvas.html, login.html),
 * so it overrides them without editing the theme's files. Page CSS from
 * app/view/css/*.css is printed inline in the page body, after this file.
 * Visual only: spacing, sizing and colour. Nothing the app shows or hides is
 * touched; the only things hidden here are decorations (the loading spinner,
 * clearfix pseudo-elements, empty wrappers).
 * The public menu pages (menu.public.html) and the PDFs don't load this file.
 */

:root {
	--ui-bg: #f3f4f6;
	--ui-surface: #ffffff;
	--ui-surface-muted: #f8f9fa;
	--ui-surface-disabled: #eef0f3;
	--ui-border: #e2e5e9;
	--ui-border-strong: #cdd2d8;
	--ui-text: #23282e;
	--ui-text-muted: #5f6b77;
	--ui-text-faint: #8a94a0;
	--ui-accent: #2b4a78;
	--ui-accent-hover: #223c63;
	--ui-accent-soft: #e9eef6;
	--ui-danger: #b42318;
	--ui-danger-soft: #fdf1f0;
	--ui-danger-border: #efc2be;
	--ui-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238a94a0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--ui-radius: 6px;
	--ui-radius-lg: 8px;
}

/* ---------------------------------------------------------------------------
 * Base
 * ------------------------------------------------------------------------- */

body,
.page-container-bg-solid,
.page-container-bg-solid .page-content,
.page-content-white .page-content {
	background-color: var(--ui-bg) !important;
	color: var(--ui-text);
}

body {
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--ui-accent);
}

a:hover,
a:focus {
	color: var(--ui-accent-hover);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ui-text);
}

.form-horizontal h4,
.portlet-body > form h4 {
	font-size: 15px;
	font-weight: 600;
	margin: 34px 0 16px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ui-border);
}

/* Loading bar: a thin accent line at the very top instead of a blue bar
   peeking out under the header. */
.pace .pace-progress {
	top: 0 !important;
	height: 2px !important;
	background: var(--ui-accent) !important;
	z-index: 10001 !important;
}

.pace .pace-activity {
	display: none !important;
}

/* ---------------------------------------------------------------------------
 * Page frame
 * ------------------------------------------------------------------------- */

.page-content-wrapper .page-content {
	padding-top: 16px;
}

/* Bootstrap rows use -15px margins: 15px gutters keep them inside the page. */
@media (max-width: 991px) {
	.page-content-wrapper .page-content {
		padding: 12px 15px !important;
	}
}

.page-breadcrumb.breadcrumb {
	margin: 0 0 16px;
	padding: 0;
	background: none;
	font-size: 12px;
	color: var(--ui-text-faint);
}

.page-breadcrumb.breadcrumb > li > a {
	color: var(--ui-text-muted);
}

.page-breadcrumb.breadcrumb > li > span.active,
.page-breadcrumb.breadcrumb > li.active {
	color: var(--ui-text-faint);
}

/* ---------------------------------------------------------------------------
 * Header and menus
 * ------------------------------------------------------------------------- */

.page-header.navbar {
	background-color: var(--ui-surface) !important;
	border-bottom: 1px solid var(--ui-border);
	box-shadow: none !important;
}

.page-header.navbar .page-logo {
	display: flex;
	align-items: center;
}

/* The user menu's band (.page-top) is as tall as the header and floats over its
   bottom border: transparent, so the border shows the whole width. On narrow
   screens it sits under the logo, as a band of its own. */
.page-header.navbar .page-top {
	background-color: transparent !important;
	box-shadow: none !important;
}

@media (max-width: 991px) {
	.page-header.navbar .page-top {
		background-color: var(--ui-surface) !important;
		border-top: 1px solid var(--ui-border);
		border-bottom: 1px solid var(--ui-border);
	}
}

.page-header.navbar .page-logo > a {
	display: block;
}

/* User menu (top right): the name and a chevron; a small dropdown with the email,
   the password change and the logout. */
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 74px;
	padding: 0 20px 0 16px !important;
	background-color: transparent !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .username {
	display: inline;
	color: var(--ui-text) !important;
	font-size: 14px !important;
	font-weight: 600;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle > .fa-angle-down {
	color: var(--ui-text-faint);
	font-size: 15px;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user.open > .dropdown-toggle {
	background-color: var(--ui-surface-muted) !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu {
	left: auto !important;
	right: 12px !important;
	width: auto;
	min-width: 240px;
	margin-top: -6px;
	padding: 6px;
	background: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu::before,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu::after {
	display: none !important;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--ui-text);
	border: 0;
	border-radius: var(--ui-radius);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li > a > i {
	width: 16px;
	margin: 0;
	color: var(--ui-text-muted);
	text-align: center;
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li > a:hover,
.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li > a:focus {
	background: var(--ui-surface-muted);
	color: var(--ui-text);
}

.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-menu > li.divider {
	margin: 4px 0;
	background-color: var(--ui-border);
}

.dropdown-user-identity {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 6px 10px 8px;
}

.dropdown-user-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-text);
}

.dropdown-user-email {
	font-size: 12px;
	color: var(--ui-text-muted);
	overflow-wrap: anywhere;
}

@media (max-width: 991px) {
	.page-header.navbar .top-menu .navbar-nav > li.dropdown-user > .dropdown-toggle {
		height: 52px;
	}
}

.page-header.navbar .menu-toggler {
	filter: grayscale(1);
	opacity: .7;
}

.dropdown-menu {
	border-color: var(--ui-border);
	border-radius: var(--ui-radius);
	box-shadow: 0 6px 20px rgba(16, 24, 40, .08);
}

.dropdown-menu > li > a {
	color: var(--ui-text);
}

.dropdown-menu > li > a:hover {
	background-color: var(--ui-surface-muted);
}

/* Top menu (desktop): white bar, muted items, an accent underline under the
   active one, instead of the dark slate bar. */
.top-menu-wrapper {
	border-bottom: 1px solid var(--ui-border);
}

.top-menu-wrapper .navbar {
	min-height: 44px;
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	background-color: var(--ui-surface) !important;
}

/* The first and last items line up with the panels' 20px page margin. */
.top-menu-wrapper .container-fluid {
	padding-left: 5px;
	padding-right: 5px;
}

.top-menu-wrapper .navbar-nav > li > a {
	padding: 12px 14px;
	line-height: 20px;
	font-size: 13px;
	color: var(--ui-text-muted) !important;
	background: transparent !important;
}

.top-menu-wrapper .navbar-nav > li > a i {
	margin-right: 4px;
	color: var(--ui-text-faint) !important;
}

.top-menu-wrapper li:hover {
	background-color: transparent !important;
}

.top-menu-wrapper .navbar-nav > li > a:hover,
.top-menu-wrapper .navbar-nav > li > a:focus {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface-muted) !important;
}

.top-menu-wrapper .navbar-nav > li.active > a,
.top-menu-wrapper .navbar-nav > li.active > a:hover {
	color: var(--ui-text) !important;
	font-weight: 600;
	background-color: transparent !important;
	box-shadow: inset 0 -2px 0 var(--ui-accent);
}

.top-menu-wrapper .navbar-nav > li.active > a i {
	color: var(--ui-accent) !important;
}

/* Side menu (phones and tablets, and the sidebar layout) */
.page-sidebar,
.page-sidebar .page-sidebar-menu {
	background-color: var(--ui-surface) !important;
}

@media (max-width: 991px) {
	.page-sidebar {
		border: 1px solid var(--ui-border);
		border-radius: var(--ui-radius-lg);
		margin: 10px 15px 0 !important;
		overflow: hidden;
	}
}

.page-sidebar .page-sidebar-menu > li > a,
.page-sidebar .page-sidebar-menu .sub-menu > li > a {
	color: var(--ui-text) !important;
	border-top: 0 !important;
}

.page-sidebar .page-sidebar-menu > li > a > i,
.page-sidebar .page-sidebar-menu .sub-menu > li > a > i {
	color: var(--ui-text-faint) !important;
}

.page-sidebar .page-sidebar-menu > li.active > a,
.page-sidebar .page-sidebar-menu > li.open > a,
.page-sidebar .page-sidebar-menu > li > a:hover,
.page-sidebar .page-sidebar-menu .sub-menu > li > a:hover,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a,
.page-sidebar .page-sidebar-menu .sub-menu > li.open > a {
	background-color: var(--ui-surface-muted) !important;
	color: var(--ui-text) !important;
}

.page-sidebar .page-sidebar-menu > li.active > a > i,
.page-sidebar .page-sidebar-menu .sub-menu > li.active > a > i {
	color: var(--ui-accent) !important;
}

.page-sidebar .page-sidebar-menu .sub-menu > li.active > a {
	font-weight: 600;
	box-shadow: inset 2px 0 0 var(--ui-accent);
}


/* ---------------------------------------------------------------------------
 * Panels (Metronic portlets)
 * ------------------------------------------------------------------------- */

.portlet.light {
	padding: 16px 20px 18px;
	border-radius: var(--ui-radius-lg) !important;
}

.portlet.light.bordered,
.portlet.bordered {
	border: 1px solid var(--ui-border) !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.portlet {
	margin-bottom: 24px;
}

@media (max-width: 767px) {
	.portlet.light {
		padding: 12px 14px 14px;
	}
}

/* Title bar: caption on the left, actions on the right, wrapping as a row of
   buttons instead of floats stacking unevenly. The actions are floated right
   in the markup, so the last one in the source is the leftmost on screen;
   the order rules below keep that same on-screen order. */
.portlet > .portlet-title {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	min-height: 0 !important;
	margin-bottom: 16px;
	padding: 0 0 12px !important;
	border-bottom: 1px solid var(--ui-border) !important;
}

.portlet > .portlet-title::before,
.portlet > .portlet-title::after {
	display: none !important;
}

.portlet > .portlet-title > .caption {
	order: 0;
	float: none !important;
	margin-right: auto;
	padding: 0 !important;
	line-height: 1.4 !important;
	color: var(--ui-text) !important;
}

.portlet > .portlet-title > :not(.caption) {
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.portlet > .portlet-title > :not(.caption):nth-last-child(1) { order: 1; }
.portlet > .portlet-title > :not(.caption):nth-last-child(2) { order: 2; }
.portlet > .portlet-title > :not(.caption):nth-last-child(3) { order: 3; }
.portlet > .portlet-title > :not(.caption):nth-last-child(4) { order: 4; }
.portlet > .portlet-title > :not(.caption):nth-last-child(5) { order: 5; }
.portlet > .portlet-title > :not(.caption):nth-last-child(6) { order: 6; }

/* site.js groups the actions (everything but the caption and Metronic's .tools,
   whose handlers need it as a direct child) in .portlet-title-actions. The
   group stays on one line and, when it doesn't fit next to the caption, moves
   to the next line as a whole, right-aligned. The actions are floated right in
   the markup, so row-reverse keeps the first one rightmost, as before. On a
   screen too narrow for the group even on its own line, the buttons wrap
   within it, still from the right. */
.portlet > .portlet-title > .portlet-title-actions {
	order: 1 !important;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	margin-left: auto !important;
}

.portlet > .portlet-title > .tools {
	order: 2 !important;
}

.portlet > .portlet-title > .portlet-title-actions > * {
	float: none !important;
	margin: 0 !important;
}

.portlet > .portlet-title > .portlet-title-actions > :empty {
	display: none;
}

.portlet > .portlet-title > .portlet-title-actions > .btn + .btn {
	margin-left: 0 !important;
}

/* Actions nested in a wrapper div and floated right form an even row too. */
.portlet > .portlet-title > .portlet-title-actions div:not(.btn-group):has(> .btn, > .btn-group, > .pull-right) {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	max-width: 100%;
}

.portlet > .portlet-title > .portlet-title-actions div:not(.btn-group):has(> .btn, > .btn-group, > .pull-right) > * {
	float: none !important;
	margin: 0 !important;
}

/* One dark button per title bar at most: the add/create action (a plus icon)
   or the save action of a page form (Paramètres).
   Excel, PDF, Visualiser, Modifier, Copier... are neutral outlines, whatever
   colour class the markup gave them; delete actions (a trash icon) a red one. */
.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):not(:has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o)):not(:has(.icon-trash, .fa-trash, .fa-trash-o)) {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-border-strong) !important;
}

.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):not(:has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o)):not(:has(.icon-trash, .fa-trash, .fa-trash-o)):hover,
.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):not(:has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o)):not(:has(.icon-trash, .fa-trash, .fa-trash-o)):focus,
.portlet > .portlet-title > .portlet-title-actions .open > .btn.dropdown-toggle {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface-muted) !important;
	border-color: var(--ui-text-faint) !important;
}

.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):has(.icon-trash, .fa-trash, .fa-trash-o) {
	color: var(--ui-danger) !important;
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-danger) !important;
}

.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):has(.icon-trash, .fa-trash, .fa-trash-o):hover,
.portlet > .portlet-title > .portlet-title-actions .btn:not(.btn-icon-only):has(.icon-trash, .fa-trash, .fa-trash-o):focus {
	color: var(--ui-danger) !important;
	background-color: var(--ui-danger-soft) !important;
	border-color: var(--ui-danger) !important;
}

/* The primary (dark) action is always the rightmost one. The groups are
   row-reverse (floats in the markup), so order -1 puts it at the right end. */
.portlet > .portlet-title > .portlet-title-actions > .btn:has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o),
.portlet > .portlet-title > .portlet-title-actions > :not(.btn):has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o),
.portlet > .portlet-title > .portlet-title-actions div:not(.btn-group) > .btn:has(.icon-plus, .fa-plus, .fa-plus-circle, .glyphicon-plus, .fa-save, .fa-floppy-o) {
	order: -1;
}

/* Wrappers left empty by permission checks take no room. */
.portlet > .portlet-title > :not(.caption):empty {
	display: none;
}

.portlet > .portlet-title > :not(.caption) .btn {
	margin: 0 !important;
}

/* Same height for every title button (some are btn-sm with an inline font size). */
.portlet > .portlet-title > :not(.caption) .btn:not(.btn-icon-only) {
	padding: 6px 12px;
	font-size: 13px !important;
}

.portlet > .portlet-title > :not(.caption) .btn + .btn {
	margin-left: 6px !important;
}

.portlet > .portlet-title > .caption > .caption-subject,
.portlet.light > .portlet-title > .caption > .caption-subject {
	font-size: 15px !important;
	font-weight: 600 !important;
	letter-spacing: .02em;
	color: var(--ui-text) !important;
}

.portlet > .portlet-title > .caption > i,
.portlet.light > .portlet-title > .caption > i {
	color: var(--ui-text-faint) !important;
	font-size: 15px;
	margin-right: 4px;
}

.portlet > .portlet-title > .tools > a {
	opacity: .6;
}

/* portlet-fit panels have no padding of their own: the title and body carry it. */
.portlet.light.portlet-fit {
	padding: 0;
}

.portlet.portlet-fit > .portlet-title {
	padding: 14px 20px 12px !important;
	margin-bottom: 0;
}

.portlet.light.portlet-fit > .portlet-body {
	padding: 16px 20px 20px;
}

@media (max-width: 767px) {
	.portlet.portlet-fit > .portlet-title {
		padding: 12px 14px 10px !important;
	}

	.portlet.light.portlet-fit > .portlet-body {
		padding: 12px 14px 14px;
	}
}

.portlet-body {
	color: var(--ui-text);
}

@media (max-width: 767px) {
	.portlet > .portlet-title {
		margin-bottom: 12px;
	}

	/* Actions that do not fit next to the title wrap under it, right-aligned. */
	.portlet > .portlet-title > .caption {
		flex: 1 1 auto;
	}

	.portlet > .portlet-title > :not(.caption) .btn {
		margin-bottom: 0 !important;
	}
}

/* Stacked panels inside a column (detail pages) keep the same gap as panels
   side by side. */
.row > [class*="col-"] > .portlet + .portlet {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * Buttons
 * One accent for the main action; everything else is a neutral outline.
 * ------------------------------------------------------------------------- */

.btn {
	border-radius: var(--ui-radius) !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	padding: 6px 12px;
	box-shadow: none !important;
	white-space: nowrap;
	transition: background-color .12s, border-color .12s, color .12s;
}

.btn.btn-sm {
	padding: 4px 10px;
	font-size: 12px !important;
}

.btn > i,
.btn > span[class^="icon-"],
.btn > span[class*=" icon-"],
.btn > span.fa,
.btn > .glyphicon {
	margin-right: 3px;
}

/* Main actions */
.btn.purple:not(.btn-outline),
.btn.blue:not(.btn-outline),
.btn.green:not(.btn-outline),
.btn.green-jungle:not(.btn-outline),
.btn.dark:not(.btn-outline),
.btn-primary,
.btn-success,
.btn-info {
	color: #fff !important;
	background-color: var(--ui-accent) !important;
	border-color: var(--ui-accent) !important;
}

.btn.purple:not(.btn-outline):hover,
.btn.purple:not(.btn-outline):focus,
.btn.purple:not(.btn-outline):active,
.btn.blue:not(.btn-outline):hover,
.btn.blue:not(.btn-outline):focus,
.btn.blue:not(.btn-outline):active,
.btn.green:not(.btn-outline):hover,
.btn.green:not(.btn-outline):focus,
.btn.green-jungle:not(.btn-outline):hover,
.btn.dark:not(.btn-outline):hover,
.btn.dark:not(.btn-outline):focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-info:hover {
	background-color: var(--ui-accent-hover) !important;
	border-color: var(--ui-accent-hover) !important;
}

/* Secondary actions (Excel, PDF, remove filters, apply, cancel...) */
.btn-default,
.btn.default,
.btn.orange:not(.btn-outline),
.btn.yellow:not(.btn-outline),
.btn.yellow-crusta:not(.btn-outline),
.btn.red:not(.btn-outline),
.btn.grey-salt,
.btn.grey-cascade,
.btn-warning,
.btn.btn-outline {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-border-strong) !important;
}

.btn-default:hover,
.btn-default:focus,
.btn.default:hover,
.btn.orange:not(.btn-outline):hover,
.btn.orange:not(.btn-outline):focus,
.btn.yellow:not(.btn-outline):hover,
.btn.yellow-crusta:not(.btn-outline):hover,
.btn.red:not(.btn-outline):hover,
.btn.grey-salt:hover,
.btn.grey-cascade:hover,
.btn-warning:hover,
.btn.btn-outline:hover,
.open > .btn-default.dropdown-toggle {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface-muted) !important;
	border-color: var(--ui-text-faint) !important;
}

.btn.orange:not(.btn-outline) > i,
.btn.orange:not(.btn-outline) > span {
	color: var(--ui-text-muted);
}

/* Destructive actions: red text and border, solid red on hover. "Supprimer" in
   the dialogs is "red float-left" in the markup, a form's remove-file button
   "btn_remove red"; the other "red" buttons (Non, Se déconnecter) stay neutral. */
.btn-danger,
.btn.red.float-left,
.btn.red.btn_remove {
	color: var(--ui-danger) !important;
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-danger-border) !important;
}

.btn-danger:hover,
.btn-danger:focus,
.btn.red.float-left:hover,
.btn.red.float-left:focus,
.btn.red.btn_remove:hover,
.btn.red.btn_remove:focus {
	color: #fff !important;
	background-color: var(--ui-danger) !important;
	border-color: var(--ui-danger) !important;
}

/* "Enlever filtres" (a btn-danger div in the markup; it only clears the form)
   is an underlined text link, greyed out and inactive until a filter is set:
   site.js toggles .is-disabled. */
.btn.form_filter_floor,
.btn.btn-danger.form_filter_floor {
	display: inline-block;
	height: auto;
	padding: 4px 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	color: var(--ui-accent) !important;
	font-size: 13px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	/* No colour fade: site.js sets the state right after the page loads. */
	transition: none;
}

.btn.form_filter_floor:hover,
.btn.form_filter_floor:focus,
.btn.btn-danger.form_filter_floor:hover,
.btn.btn-danger.form_filter_floor:focus {
	background: none !important;
	color: var(--ui-accent-hover) !important;
}

.btn.form_filter_floor.is-disabled,
.btn.btn-danger.form_filter_floor.is-disabled {
	color: var(--ui-text-faint) !important;
	text-decoration: none;
	cursor: default;
	pointer-events: none;
}

/* Round icon buttons in table rows */
.btn.btn-circle.btn-icon-only,
.btn-icon-only.btn-circle {
	width: 30px;
	height: 30px;
	padding: 0 !important;
	line-height: 28px;
	border-radius: 50% !important;
	color: var(--ui-text-muted) !important;
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-border-strong) !important;
	font-size: 13px;
}

.btn.btn-circle.btn-icon-only > i,
.btn.btn-circle.btn-icon-only > span {
	margin: 0 !important;
}

.btn.btn-circle.btn-icon-only:hover {
	color: var(--ui-text) !important;
	background-color: var(--ui-surface-muted) !important;
	border-color: var(--ui-text-faint) !important;
}

/* Delete buttons (a trash icon) in the danger colour. */
.btn.btn-circle.btn-icon-only:has(> .icon-trash, > .fa-trash, > .fa-trash-o) {
	color: var(--ui-danger) !important;
	border-color: var(--ui-danger-border) !important;
}

.btn.btn-circle.btn-icon-only:has(> .icon-trash, > .fa-trash, > .fa-trash-o):hover {
	color: var(--ui-danger) !important;
	background-color: var(--ui-danger-soft) !important;
	border-color: var(--ui-danger) !important;
}

.btn-group > .btn + .btn,
.btn-group > .btn + .dropdown-toggle {
	margin-left: -1px;
}

.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
	border-radius: 0 !important;
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.btn-group > .btn.active,
.btn-default.active {
	background-color: var(--ui-accent-soft) !important;
	border-color: var(--ui-border-strong) !important;
	color: var(--ui-accent) !important;
}

/* ---------------------------------------------------------------------------
 * Form fields
 * ------------------------------------------------------------------------- */

.form-control,
.input-group-addon,
.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection--single {
	border-color: var(--ui-border-strong) !important;
	box-shadow: none !important;
}

.form-control {
	height: 34px;
	padding: 6px 10px;
	font-size: 14px;
	color: var(--ui-text);
	border-radius: var(--ui-radius) !important;
}

textarea.form-control {
	height: auto;
}

.form-control:focus {
	border-color: var(--ui-accent) !important;
	box-shadow: 0 0 0 3px rgba(43, 74, 120, .12) !important;
}

.form-control::placeholder {
	color: var(--ui-text-faint);
}

/* Read-only fields stay lightly tinted: date pickers use them and open on click. */
.form-control[readonly] {
	background-color: var(--ui-surface-muted);
}

/* Disabled fields (values that can't be changed here) look it: grey, muted
   text, no pointer. */
.form-control[disabled],
fieldset[disabled] .form-control {
	background-color: var(--ui-surface-disabled);
	color: var(--ui-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.input-group-addon {
	background-color: var(--ui-surface-muted) !important;
	color: var(--ui-text-faint);
	border-radius: var(--ui-radius) !important;
}

/* Field groups (date picker, $ / % addons...): the inner corners where the
   field meets its button or addon are square. */
.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-btn:last-child > .btn,
.input-group > .input-group-btn:last-child > .btn-group > .btn {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.input-group > .input-group-btn:first-child > .btn,
.input-group > .input-group-btn:first-child > .btn-group > .btn {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* A Select2 field followed by buttons (document form: modifier, ajouter) and
   buttons followed by another button: square where they meet. */
.input-group > .select2-container:not(:last-child) .select2-selection {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-btn > .btn:not(:last-child) {
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-btn > .btn:not(:first-child) {
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

/* Buttons attached to a field (date picker...) are as tall as the field. */
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-btn > .btn {
	height: 34px;
	padding-top: 0;
	padding-bottom: 0;
}

/* Buttons with a set height (beside a field): the label centred with flexbox,
   whatever line height Metronic's .btn:not(...) rule gives them. */
.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-btn > .btn,
.password-field > .btn,
.password-input > .btn,
.file-field-row > .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.input-group:not(.input-group-sm):not(.input-group-lg) > .input-group-btn > .btn > i,
.password-field > .btn > i,
.password-input > .btn > i,
.file-field-row > .btn > i {
	margin-right: 0;
}

/* Multiselect buttons look like the other fields. */
.btn-group > .multiselect.btn-default,
.btn-group > .multiselect.btn {
	height: 34px;
	padding: 6px 28px 6px 10px !important;
	font-size: 14px;
	font-weight: 400;
	text-align: left;
	color: var(--ui-text) !important;
	border-color: var(--ui-border-strong) !important;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-group > .multiselect.btn-default:not([disabled]):not(.disabled):hover {
	background-color: var(--ui-surface) !important;
}

/* Dropdowns: the same chevron on native selects, multiselect buttons and the
   date range field, and the hand cursor on all of them. */
.btn-group > .multiselect .caret,
.advanced-date-picker .caret {
	position: absolute;
	right: 10px;
	top: 50%;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border: none;
	background: var(--ui-chevron) no-repeat center / 12px 12px;
}

select.form-control:not([multiple]):not([size]),
select.form-control[size="1"],
.dataTables_wrapper .dataTables_length select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 30px;
	background-image: var(--ui-chevron);
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 12px 12px;
}

select.form-control:not([multiple]):not([disabled]),
.dataTables_wrapper .dataTables_length select:not([disabled]) {
	cursor: pointer;
}

.btn-group > .multiselect[disabled],
.btn-group > .multiselect.disabled,
.btn-group > .multiselect[disabled]:hover,
.btn-group > .multiselect.disabled:hover {
	color: var(--ui-text-faint) !important;
	background-color: var(--ui-surface-disabled) !important;
	opacity: 1;
}

.multiselect-container.dropdown-menu {
	max-width: calc(100vw - 30px);
}

.multiselect-container > li > a > label {
	white-space: normal;
}

/* Date range field of the filters (a div styled as a field, custom.js). */
.advanced-date-picker {
	display: flex !important;
	align-items: center;
	gap: 6px;
	width: 100%;
	height: 34px;
	padding: 6px 28px 6px 10px !important;
	font-size: 14px;
	color: var(--ui-text);
	background-color: var(--ui-surface) !important;
	border: 1px solid var(--ui-border-strong) !important;
	border-radius: var(--ui-radius) !important;
	white-space: nowrap;
	overflow: hidden;
}

.advanced-date-picker > i {
	color: var(--ui-text-faint);
}

.advanced-date-picker .date-show {
	overflow: hidden;
	text-overflow: ellipsis;
}

.control-label,
.form-horizontal .control-label {
	color: var(--ui-text);
	font-weight: 600 !important;
	font-size: 13px;
}

.help-block {
	color: var(--ui-text-faint);
	font-size: 12px;
}

.has-error .help-block,
.help-block-error {
	color: var(--ui-danger);
}

/* In horizontal forms, fields fill their column so the edges line up.
   Input groups keep their own sizing (some are sized by a class or inline). */
.form-horizontal .form-group > [class*="col-"] > .form-control:not(.input-inline),
.form-horizontal .form-group > [class*="col-"] > .btn-group:has(> .multiselect),
.form-horizontal .form-group > [class*="col-"] > select.form-control {
	width: 100% !important;
	max-width: 480px;
}

.form-horizontal .form-group > [class*="col-"] > .form-control.input-small {
	max-width: 180px;
}

.form-horizontal .form-group > [class*="col-"] > .input-group:not([style*="width"]):not([class*="input-xs"]):not([class*="input-sm"]):not([class*="input-me"]):not([class*="input-la"]):not([class*="input-xl"]) {
	max-width: 480px;
}

/* A field alone in an input group (no addon) fills the column like the others. */
.form-horizontal .form-group > [class*="col-"] > .input-group:not([style*="width"]):has(> .form-control:only-child) {
	width: 100%;
	max-width: 480px;
}

.form-horizontal .form-group > [class*="col-"] > .input-group:not([style*="width"]) > .form-control:only-child {
	width: 100% !important;
}

/* Select2 dropdowns sit in a wrapper with input-medium (a fixed 240px). */
.form-horizontal .form-group > [class*="col-"] > .select2-input-container {
	width: 100% !important;
	max-width: 480px;
}

.modal .form-horizontal .form-group > [class*="col-"] > .select2-input-container {
	max-width: none;
}

.select2-container--bootstrap .select2-selection,
.select2-container--default .select2-selection--single {
	height: 34px;
	border-radius: var(--ui-radius) !important;
}

/* Select2 fields: the same chevron as the other dropdowns, 10px from the right. */
body .select2-container .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 10px;
	width: 12px;
	height: 100%;
}

body .select2-container .select2-selection--single .select2-selection__arrow b {
	top: 50%;
	left: 0;
	width: 12px;
	height: 12px;
	margin: -6px 0 0;
	border: 0 !important;
	background: var(--ui-chevron) no-repeat center / 12px 12px;
}

/* Multiselects too (some buttons carry input-medium, a fixed 240px). */
.form-horizontal .form-group .multiselect-native-select > .btn-group {
	width: 100%;
	max-width: 480px;
}

.form-horizontal .form-group .multiselect-native-select > .btn-group > .multiselect {
	width: 100% !important;
}

.form-horizontal .form-group {
	margin: 0 0 14px;
}

/* Forms read top to bottom: each label sits above its field, left-aligned
   (Bootstrap's horizontal form put them side by side in grid columns). */
.form-horizontal .form-group > [class*="col-"] {
	float: none;
	width: auto;
	margin-left: 0;
	padding-left: 0;
	padding-right: 0;
}

.form-horizontal .control-label {
	display: block;
	margin-bottom: 6px;
	padding: 0;
	line-height: 1.35;
	text-align: left !important;
}

.form-horizontal .form-group {
	margin-left: 0;
	margin-right: 0;
}

.form-horizontal .form-group::before,
.form-horizontal .form-group::after {
	display: none;
}

/* A field without a label (checkbox, button...) starts on the left edge like the others. */
.form-horizontal .form-group > [class*="-offset-"] {
	margin-left: 0;
}

/* Required fields: the star right after the label text (custom.css placed it
   at the far right of a right-aligned label column). */
.form-horizontal .label-required::after {
	position: static !important;
	padding-left: 3px;
	color: var(--ui-danger);
	font-weight: 600;
}

/* Long forms in sections (menu): titled groups side by side when the dialog
   gives each 340px, starting on the same line; short fields paired in rows. */
.form-sections {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(340px, calc((100% - 40px) / 2))), 1fr));
	gap: 12px 40px;
}

.form-section {
	min-width: 0;
}

.form-horizontal .form-section > h4 {
	margin-top: 0;
}

/* Fields in a row stay level when one label wraps onto two lines. */
.form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	align-items: end;
	column-gap: 16px;
}

.form-row > .form-group {
	min-width: 0;
}

/* Four short numbers (margins top / right / bottom / left), two by two on a phone. */
.form-row-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 479px) {
	.form-row-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Yes / no choices side by side. */
.form-row-toggles {
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* Style editor: the preview stays at the top of the dialog while the fields
   scroll under it, with the contrast of its colours. */
.style-editor-preview {
	position: sticky;
	top: -18px;
	z-index: 3;
	margin: -18px -20px 6px;
	padding: 14px 20px 10px;
	background-color: var(--ui-surface);
	border-bottom: 1px solid var(--ui-border);
}

.style-editor-preview .style-preview {
	min-height: 72px;
	max-width: none;
}

.style-editor-contrast {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--ui-text-muted);
}

.style-editor-contrast.is-low {
	color: var(--ui-danger);
	font-weight: 600;
}

.styles-form h4:first-of-type {
	margin-top: 18px;
}

@media (max-width: 767px) {
	.style-editor-preview {
		margin-left: -14px;
		margin-right: -14px;
		padding-left: 14px;
		padding-right: 14px;
	}
}

/* Menu dialog: the fields on the left, and on the right a phone-sized preview
   of the public menu that stays in view while the fields scroll. One column
   under 992px, the preview after the fields. */
@media (min-width: 992px) {
	.modal-menu .modal-dialog {
		width: min(1120px, calc(100vw - 40px));
	}
}

.menu-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
}

@media (min-width: 992px) {
	/* The window height minus the dialog's margins, title and buttons
	   (custom.js caps every dialog body at 70% of the window). */
	.modal-menu .modal-body {
		max-height: calc(100vh - 180px) !important;
	}

	/* 375px of menu (a common phone width) plus the border and the scrollbar. */
	.menu-editor {
		grid-template-columns: minmax(0, 1fr) 392px;
		gap: 36px;
	}

	/* The preview fits in the visible part of the dialog; a long menu scrolls
	   inside it. */
	.menu-editor-preview {
		position: sticky;
		top: 0;
		align-self: start;
		display: flex;
		flex-direction: column;
		max-height: calc(100vh - 216px);
	}

	.menu-editor-preview .menu-preview-screen {
		flex: 1 1 auto;
		min-height: 0;
		max-width: none;
		margin: 0;
		overflow-y: auto;
		scrollbar-gutter: stable;
		scrollbar-width: thin;
	}
}

.menu-editor-fields > .form-section + .form-section {
	margin-top: 24px;
}

/* QR code: a thumbnail beside the address, with its downloads. */
.menu-qr {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin-top: 10px;
}

.menu-qr-image {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 64px;
	height: 64px;
	padding: 4px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface-muted);
}

.menu-qr-image img {
	width: 100%;
	height: 100%;
}

.menu-qr-image .detail-qr-empty {
	width: auto;
	height: auto;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	background: none;
}

.menu-qr-text {
	display: flex;
	flex: 1 1 140px;
	flex-direction: column;
	min-width: 0;
}

.menu-qr-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-text);
}

.menu-qr-text .help-block {
	margin: 0;
}

.menu-qr-actions {
	display: flex;
	flex: none;
	gap: 6px;
}

.menu-qr-actions > .btn.disabled {
	opacity: .5;
}

/* Styles: one line each, a warning when its contrast is too low, Modifier. */
.style-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
}

/* Name (and its warning under it) on the left, Modifier on the right. */
.style-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 12px;
	padding: 8px 8px 8px 12px;
}

.style-row + .style-row {
	border-top: 1px solid var(--ui-border);
}

.style-row-label {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.style-row-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-text);
}

.style-row-name small {
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ui-text-faint);
}

.style-row-warning {
	font-size: 12px;
	font-weight: 600;
	color: var(--ui-danger);
}

.style-row-warning:empty {
	display: none;
}



/* The preview: the public page (menu.public.html) at phone width, with its
   own fonts and Bootstrap's button defaults instead of the admin's. */
.menu-preview-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.menu-preview-heading {
	font-size: 15px;
	font-weight: 600;
	color: var(--ui-text);
}

.menu-preview-lang > .btn {
	min-width: 44px;
	padding: 3px 10px;
	font-size: 12px;
}

.menu-preview-lang > .btn.active {
	position: relative;
	z-index: 1;
	color: var(--ui-accent) !important;
	background-color: var(--ui-accent-soft) !important;
	border-color: var(--ui-accent) !important;
}

.menu-preview-screen {
	max-width: 380px;
	margin: 0 auto;
	overflow: hidden;
	font-family: "Courier New", Courier, Georgia, Times, "Times New Roman", serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	border: 1px solid var(--ui-border-strong);
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .08);
}

.menu-preview-screen .btn {
	padding: 6px 12px;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	letter-spacing: normal;
	border: 0;
	border-radius: 4px !important;
	transition: none;
}

.mp-lang {
	padding: 10px 10px 0;
	text-align: right;
}

.mp-title {
	margin: 0;
	font-size: 14px;
	font-weight: normal;
	line-height: 1.42857143;
	overflow-wrap: anywhere;
}

.mp-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 14px;
	margin: 10px;
	padding-bottom: 6px;
}

.mp-page {
	position: relative;
}

.mp-page.is-current::after {
	content: "";
	position: absolute;
	left: 25%;
	right: 25%;
	bottom: -8px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--mp-dot, #000);
}

.mp-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(120px, 24vh, 230px);
	margin: 0 10px;
	overflow: hidden;
	border-radius: 4px;
	background-color: rgba(128, 128, 128, .14);
}

.mp-image img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mp-image-empty {
	padding: 16px;
	font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
	font-size: 12px;
	text-align: center;
	color: #8a94a0;
}

.mp-dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 10px 0 4px;
}

.mp-dots > span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--mp-dot, #000);
	box-shadow: 0 0 0 1px rgba(128, 128, 128, .7);
	opacity: .35;
}

.mp-dots > span.is-current {
	opacity: 1;
}

.mp-pdf {
	padding: 8px 10px 18px;
	text-align: center;
}

.mp-pdf-text {
	margin: 0;
}

/* Elements of the preview open their style: dashed outline on hover and focus. */
.mp-edit {
	cursor: pointer;
}

.mp-edit:hover,
.mp-edit:focus-visible {
	outline: 2px dashed var(--ui-accent);
	outline-offset: 3px;
}

/* Date and time side by side. */
.datetime-field {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.datetime-field > .input-group {
	flex: 1 1 150px;
	max-width: 200px;
}

.datetime-field > .input-group:not(.date-picker) {
	flex: 0 1 130px;
}

/* L'heure qu'il est au restaurant, à côté de la date d'activation d'un menu (menu.form.js la tient à jour). */
.datetime-local-time {
	align-self: center;
	font-size: 13px;
	line-height: 1.3;
	color: var(--ui-text-muted);
}

.datetime-local-clock {
	color: var(--ui-text);
	font-variant-numeric: tabular-nums;
}

.datetime-local-zone {
	display: block;
	font-size: 12px;
}

/* A style set in a dialog (menu buttons, title...): what it looks like, on the
   menu's background colour, and the button that opens the style editor. */
.style-field {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.style-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	max-width: 100%;
	min-height: 56px;
	padding: 8px 14px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	overflow: hidden;
}

.style-preview .btn {
	cursor: default;
}

/* File fields: the file name fills the line, then Choisir / Changer and Enlever. */
/* The Jasny plugin's CSS (.fileinput, .fileinput .form-control) is loaded by
   the page after this file: the rules repeat both classes to win. */
.fileinput.file-field {
	display: block;
	margin: 0;
}

.fileinput.file-field .file-field-row {
	display: flex;
	gap: 8px;
}

.fileinput.file-field .file-field-row > .form-control {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	height: 34px;
	padding: 6px 10px;
	cursor: pointer;
	background-color: var(--ui-surface-muted);
}

.fileinput.file-field .file-field-row > .form-control .fileinput-filename {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fileinput.file-field .file-field-row > .form-control .file-icon {
	flex: none;
	color: var(--ui-text-faint);
}

.file-field-row > .btn {
	flex: none;
	height: 34px;
	padding-top: 0;
	padding-bottom: 0;
}

.file-field + .help-block {
	margin-top: 6px;
	margin-bottom: 0;
}

/* Image fields (menu pages): the current or chosen image, whole, in a fixed
   box, with Choisir / Changer and Enlever under it. */
.fileinput.image-field {
	display: block;
	margin: 0;
}

.image-field-preview .thumbnail {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 320px;
	height: 220px;
	margin: 0;
	padding: 6px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface-muted);
}

.image-field-preview .thumbnail img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.image-field-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

.fileinput.image-field + .help-block {
	margin-top: 6px;
	margin-bottom: 0;
}

/* Images in detail panels: a framed thumbnail that opens the full image. */
.detail-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	padding: 6px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface-muted);
}

.detail-image img {
	display: block;
	max-width: 100%;
	max-height: 260px;
	object-fit: contain;
}

/* Role access: one line per section, its name on the left and Aucun / Lecture /
   Complet on the right, columns lined up. A level a section doesn't have stays
   in place, greyed out. */
.access-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 7px 0;
	border-bottom: 1px solid var(--ui-border);
}

/* The tinted band reaches 10px past the rows so its text and buttons line up
   with theirs. */
.access-row-all {
	padding: 8px 10px;
	margin: 0 -10px 6px;
	border: 0;
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface-muted);
}

.access-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--ui-text);
}

.access-row .btn-group > .btn {
	min-width: 84px;
}

.access-row .btn-group > .btn.disabled {
	opacity: .45;
	cursor: not-allowed;
}

.access-group {
	margin: 18px 0 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ui-text-muted);
}

/* A problem flagged in a list (font without a file...). */
.status-flag {
	display: inline-block;
	padding: 2px 8px;
	font-size: 12px;
	font-weight: 600;
	color: var(--ui-danger);
	background-color: var(--ui-danger-soft);
	border: 1px solid var(--ui-danger-border);
	border-radius: 999px;
	white-space: nowrap;
}

/* Font details: a line of text in the font itself. */
.font-sample {
	font-size: 22px;
	line-height: 1.3;
}

/* Document details: the file itself (image or PDF) beside its information. */
.detail-actions {
	margin-top: 8px;
}

.document-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 160px;
	padding: 8px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface-muted);
}

.document-preview img {
	display: block;
	max-width: 100%;
	max-height: 420px;
	object-fit: contain;
}

.document-preview-pdf {
	padding: 0;
	overflow: hidden;
}

.document-preview-pdf iframe {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
}

.document-preview-empty {
	padding: 24px;
	font-size: 13px;
	text-align: center;
	color: var(--ui-text-faint);
}

.document-preview + .detail-note {
	margin-top: 6px;
}

/* QR code placeholder before the URL is set. */
.detail-qr-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 136px;
	height: 136px;
	padding: 12px;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: var(--ui-text-faint);
	background-color: var(--ui-surface-muted);
}

.detail-qr-actions > .btn.disabled {
	opacity: .5;
}

/* Settings page: the sizes set per parameter in the database (input-mini to
   input-xlarge, 45px to 420px) come down to two: short values (numbers, codes,
   separators) 160px, the others 480px like every other form. */
#form_parameter .form-group > [class*="col-"] > .input-group,
#form_parameter .form-group > [class*="col-"] > .input-group > .form-control {
	width: 100% !important;
	max-width: 480px;
}

#form_parameter .form-group > [class*="col-"] > .input-group:is(.input-mini, .input-xxsmall, .input-xsmall, .input-small) {
	max-width: 160px;
}

/* Password fields (change password, user form, forced update): the field with
   its show / hide button attached, then "Générer le mot de passe" on the same
   line (below it when there is no room). The rules bubble (passvalidation)
   opens under the field. */
.password-field {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 480px;
}

.modal .password-field {
	max-width: none;
}

.password-input {
	position: relative;
	display: flex;
	flex: 1 1 200px;
	min-width: 0;
}

.password-input > .form-control {
	flex: 1 1 auto;
	min-width: 0;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

.password-input > .action-toggle-password {
	flex: none;
	width: 40px;
	margin-left: -1px;
	padding: 0;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}

.password-field > .btn,
.password-input > .btn {
	height: 34px;
	padding-top: 0;
	padding-bottom: 0;
}

.password-error {
	margin-top: 6px;
	font-size: 12px;
}

.password-error:empty {
	display: none;
}

body .pv-popup-wrapper {
	font-family: inherit;
	font-size: 13px;
	color: var(--ui-text);
	border-color: var(--ui-border);
	border-radius: var(--ui-radius-lg);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}

body .pv-popup-wrapper .pv-popup-title {
	padding: 8px 10px 6px;
	background-color: transparent;
	font-weight: 600;
}

body .pv-popup-wrapper .pv-popup-body {
	padding: 0 10px 8px;
	line-height: 1.7;
}

body .pv-popup-wrapper.bottom::after {
	border-bottom-color: var(--ui-border-strong);
}

/* Yes / no choices (radio buttons shown as a pair of buttons): the chosen one
   is outlined and tinted in the accent colour. */
.btn-group[data-toggle="buttons"] {
	display: inline-flex;
	flex-wrap: nowrap;
}

/* Metronic sets padding-right: 0 on these labels (the templates patched it
   inline with 12px !important), which pushed the text off-centre. */
.btn-group[data-toggle="buttons"] > .btn {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 14px !important;
	padding-right: 14px !important;
	min-width: 64px;
	color: var(--ui-text-muted);
	background-color: var(--ui-surface);
	border-color: var(--ui-border-strong);
	font-weight: 600;
}

.btn-group[data-toggle="buttons"] > .btn.active {
	position: relative;
	z-index: 1;
	border-color: var(--ui-accent) !important;
	box-shadow: none;
}

.btn-group[data-toggle="buttons"] + .help-block {
	margin-top: 6px;
}

@media (max-width: 767px) {
	.form-horizontal .form-group > [class*="col-"] > .form-control:not(.input-inline),
	.form-horizontal .form-group > [class*="col-"] > .input-group,
	.form-horizontal .form-group .multiselect-native-select > .btn-group {
		max-width: none;
	}

	/* 16px text stops phones zooming in when a field gets focus. */
	.form-control,
	.btn-group > .multiselect.btn,
	.select2-container .select2-selection,
	select {
		font-size: 16px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Filter bars above the lists
 * Every list looks the same: at most two even columns (one on a phone), each
 * label above a field that fills its cell; "Enlever filtres" below them on the
 * left, the per-page selector on the right of that row. Three markups exist:
 *   - the grid of most lists: .dataTables_header .filter-list, where each label
 *     and its field are grid items named label_N / input_N in the template
 *     (style="grid-area: ..."); the audit list adds its reset link (area reset);
 *   - one keyword field: .dataTables_header > .pull-left > .form-group
 *     (users, roles, blocked IPs, simple lists);
 *   - a row of .filter-label cells (connections).
 * ------------------------------------------------------------------------- */

/* Grid filters: each label above its field, two even columns at most, in a
   section of limited width. This replaces the grids of the list CSS
   (app/view/css/*.list.table.css), which put the labels beside the fields from
   1200px up; the selector is more specific, so it wins although that CSS is
   printed later in the page. Areas a list doesn't use take no room. */
.dataTables_header .filter-list {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"label_1 label_2"
		"input_1 input_2"
		"label_3 label_4"
		"input_3 input_4"
		"label_5 label_6"
		"input_5 input_6"
		"label_7 label_8"
		"input_7 input_8"
		"reset reset";
	column-gap: 32px;
	row-gap: 0;
	align-items: end;
	max-width: 920px;
	margin: 0 0 4px;
}

@media (max-width: 767px) {
	.dataTables_header .filter-list {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"label_1" "input_1" "label_2" "input_2" "label_3" "input_3" "label_4" "input_4"
			"label_5" "input_5" "label_6" "input_6" "label_7" "input_7" "label_8" "input_8"
			"reset";
	}
}

.dataTables_header .filter-list > .control-label,
.dataTables_header .filter-list > .filter-label {
	width: auto;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left !important;
	color: var(--ui-text);
}

/* A field cell: the field fills it (some cells carry input-medium, a fixed
   240px). A multiselect applies its choice when its dropdown closes. */
.dataTables_header .filter-list > .input {
	display: flex !important;
	align-items: center;
	gap: 6px;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 0 14px !important;
	padding: 0 !important;
}

.dataTables_header .filter-list > .input > :first-child:not(input[type="hidden"]),
.dataTables_header .filter-list > .input > input[type="hidden"] + input[type="hidden"] + .inline-block,
.dataTables_header .filter-list > .input > input[type="hidden"] + input[type="hidden"] + .advanced-date-picker {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
	max-width: none !important;
	padding: 0 !important;
}

.dataTables_header .filter-list .advanced-date-picker {
	width: 100% !important;
}

.dataTables_header .filter-list > .input .btn-group,
.dataTables_header .filter-list > .input .multiselect-native-select {
	display: block;
	width: 100%;
}

.dataTables_header .filter-list > .input .btn-group > .multiselect {
	width: 100% !important;
}

.dataTables_header .filter-list > .input .input-group,
.dataTables_header .filter-list > .input > .form-control,
.dataTables_header .filter-list > .input input.form-control,
.dataTables_header .filter-list > .input select.form-control {
	width: 100% !important;
	max-width: none;
}

/* A cell that is itself an input group (audit's Description): addon + field,
   joined. */
.dataTables_header .filter-list > .input.input-group {
	gap: 0;
}

.dataTables_header .filter-list > .input.input-group > .input-group-addon {
	display: flex;
	align-items: center;
	width: auto;
	height: 34px;
	padding: 0 10px;
	flex: 0 0 auto;
	border: 1px solid var(--ui-border-strong);
	border-right: 0;
}

.dataTables_header .filter-list > .input.input-group > .form-control {
	flex: 1 1 auto;
}

/* The audit list's "Enlever filtres", inside its grid. */
.dataTables_header .filter-list > .action-remove-filters {
	grid-area: reset;
	width: auto;
	float: none;
	margin: 0 0 8px !important;
	padding: 0 !important;
}

/* Filters and the list under them are separate sections: a divider and some
   room between them. */
.dataTables_header:has(.filter-list) {
	margin-bottom: 18px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ui-border);
}

.dataTables_header .filter-section > .row,
.dataTables_header .filter-section {
	margin-left: 0;
	margin-right: 0;
}

/* Simple lists and connections: the label above its field. */
#form_filter .form-group,
.dataTables_header .form-group:not(.input) {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	margin: 0 0 12px !important;
}

#form_filter .form-group::before,
#form_filter .form-group::after,
.dataTables_header .form-group::before,
.dataTables_header .form-group::after {
	display: none;
}

.dataTables_header > .pull-left > .form-group > label,
.dataTables_header .form-group > label.filter-label {
	width: auto !important;
	float: none;
	margin: 0 0 6px !important;
	padding: 0 !important;
	font-size: 13px;
	line-height: 1.3 !important;
	text-align: left !important;
	font-weight: 600 !important;
	color: var(--ui-text);
}

.dataTables_header > .pull-left > .form-group > .input-group,
.dataTables_header .form-group > .inline-block[style*="max-width"],
.dataTables_header .form-group > .inline-block[style*="max-width"] > .input-group {
	width: 100% !important;
	max-width: none !important;
	float: none;
	padding: 0;
}

.dataTables_header .form-group > .inline-block[style*="max-width"] > select.form-control {
	width: 100% !important;
	max-width: none !important;
}

/* Date ranges in the filters ("Dates: [ ] au [ ]") fill their cell like the
   other fields; the markup fixed them at 250px. */
.dataTables_header .input-daterange {
	display: flex;
	width: 100% !important;
}

.dataTables_header .input-daterange > .form-control {
	flex: 1 1 0;
	width: auto !important;
	min-width: 0;
}

.dataTables_header .input-daterange > .input-group-addon {
	display: flex;
	align-items: center;
	width: auto;
	flex: 0 0 auto;
}

.input-daterange > .input-group-addon {
	margin: 0 !important;
	padding: 0 10px !important;
}

@media (min-width: 768px) {
	/* One keyword field */
	.dataTables_header:has(> .pull-left > .form-group) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 444px)) minmax(0, 1fr);
		column-gap: 32px;
		align-items: center;
		margin-bottom: 18px;
		padding-bottom: 6px;
		border-bottom: 1px solid var(--ui-border);
	}

	.dataTables_header:has(> .pull-left > .form-group)::before,
	.dataTables_header:has(> .pull-left > .form-group)::after {
		display: none;
	}

	.dataTables_header:has(> .pull-left > .form-group) > .pull-left:has(> .form-group) {
		grid-column: 1;
		grid-row: 1;
		width: auto !important;
		float: none;
		margin: 0 0 4px !important;
	}

	.dataTables_header:has(> .pull-left > .form-group) > .pull-left:has(> .form_filter_floor),
	.dataTables_header:has(> .pull-left > .form-group) > .pull-left:not(:has(> .form-group)) {
		grid-column: 1;
		grid-row: 2;
		float: none;
		margin: 0 !important;
	}

	.dataTables_header:has(> .pull-left > .form-group) > .pull-right {
		grid-column: 3;
		grid-row: 2;
		justify-self: end;
		float: none;
		margin: 0;
	}

	/* A row of .filter-label cells, then a row with "Enlever filtres" and the per-page selector */
	.dataTables_header .row:has(> [class*="col-"] .form-group > label.filter-label) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
		max-width: 920px;
		margin: 0 0 4px;
	}

	.dataTables_header .row:has(> [class*="col-"] .form-group > label.filter-label)::before,
	.dataTables_header .row:has(> [class*="col-"] .form-group > label.filter-label)::after {
		display: none;
	}

	.dataTables_header .row:has(> [class*="col-"] .form-group > label.filter-label) > [class*="col-"] {
		width: auto;
		float: none;
		padding: 0;
	}

	.dataTables_header .row:has(> [class*="col-"] .form-group > label.filter-label) > [class*="col-"] > div {
		min-width: 0 !important;
	}
}

/* The row with "Enlever filtres" (left) and the per-page selector (right). */
.dataTables_header .row:has(> .filter-reset-container) {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 4px 16px;
	margin: 0;
}

.dataTables_header .row:has(> .filter-reset-container)::before,
.dataTables_header .row:has(> .filter-reset-container)::after {
	display: none;
}

.dataTables_header .row:has(> .filter-reset-container) > [class*="col-"] {
	width: auto;
	float: none;
	padding: 0;
}

.dataTables_header .form_filter_floor {
	float: none !important;
}

/* Per-page selector */
.dataTables_wrapper .dataTables_length {
	padding: 0 !important;
	margin: 4px 0 6px;
	font-size: 13px;
	color: var(--ui-text-muted);
}

.dataTables_wrapper .dataTables_length label {
	font-weight: 400;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dataTables_wrapper .dataTables_length select {
	height: 30px;
	padding: 2px 30px 2px 8px;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	background-color: var(--ui-surface);
	color: var(--ui-text);
}

/* Rows inside a list (per-page selector, pagination) have no gutter around
   them, so their -15px margins pushed them out of the panel. */
.dataTables_wrapper .row {
	margin-left: 0;
	margin-right: 0;
}

.dataTables_wrapper > table.table {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 767px) {
	.dataTables_header .form-group:not(.input) {
		flex-direction: column;
		align-items: stretch;
	}

	.dataTables_header [class*="col-md-"] {
		padding-left: 0;
		padding-right: 0;
	}

	.dataTables_wrapper .dataTables_header > .row > .pull-right {
		float: none !important;
	}

	/* Simple lists float a keyword box and a button side by side. */
	.dataTables_header > .pull-left {
		float: none !important;
		width: 100% !important;
		margin-left: 0 !important;
	}
}

/* ---------------------------------------------------------------------------
 * Tables
 * ------------------------------------------------------------------------- */

.table {
	font-size: 13px;
	color: var(--ui-text);
	background-color: var(--ui-surface);
}

/* 100% wide including the outer border (the tables use separate borders;
   table.dataTable sets content-box). */
table.table {
	box-sizing: border-box;
}

.table > thead > tr > th,
.table > thead > tr > td {
	background-color: var(--ui-surface-muted);
	color: var(--ui-text-muted);
	font-size: 12px;
	font-weight: 600 !important;
	vertical-align: bottom;
	border-bottom: 1px solid var(--ui-border) !important;
}

.table > thead > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > tfoot > tr > th {
	padding: 8px 10px;
}

.table > tbody > tr > td {
	vertical-align: middle;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table > tbody > tr > td,
.table > tfoot > tr > td {
	border-color: var(--ui-border) !important;
}

/* Lists: horizontal lines only, no vertical grid. */
.dataTables_wrapper .table-bordered > thead > tr > th,
.dataTables_wrapper .table-bordered > tbody > tr > td {
	border-left: 0 !important;
	border-right: 0 !important;
}

.dataTables_wrapper .table-bordered {
	border-left: 0 !important;
	border-right: 0 !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #fbfbfc;
}

.table-hover > tbody > tr:hover,
.table-hover > tbody > tr:hover > td {
	background-color: #f3f5f8 !important;
}

/* The row last opened or saved is marked .selected: a light accent tint that
   deepens a little on hover. */
.table > tbody > tr.selected,
.table > tbody > tr.selected > td,
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected > td {
	background-color: var(--ui-accent-soft) !important;
}

.table > tbody > tr.selected:hover,
.table > tbody > tr.selected:hover > td,
table.dataTable tbody tr.selected:hover,
table.dataTable tbody tr.selected:hover > td {
	background-color: #dfe6f1 !important;
}

.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > tbody > tr.total > td {
	background-color: var(--ui-surface-muted);
	font-weight: 600;
}

/* Sorting arrows stay out of the header text. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
	padding-right: 22px !important;
}

/* Dates and centred cells never break across lines. */
.table td[style*="text-align: right"],
.table td[style*="text-align:right"],
.table td.text-right,
.table td[align="right"],
.table td[style*="text-align: center"],
.table td[style*="text-align:center"],
.table td[align="center"] {
	white-space: nowrap;
}

/* Row action buttons stay on one line. A list without an actions column wraps
   its last text column again. */
.dataTable tr > td:last-of-type:has(.btn, .action-button),
.table.footable tr > td.footable-last-visible:last-child:has(.btn, .action-button) {
	white-space: nowrap;
}

.dataTable tr > td:last-of-type:not(:has(.btn, .action-button)) {
	white-space: normal;
}

.footable .footable-toggle {
	color: var(--ui-text-faint);
	margin-right: 4px;
}

/* FooTable prints its empty-list message at 30px. */
table.footable > tbody > tr.footable-empty > td {
	padding: 24px 10px;
	font-size: 14px;
	color: var(--ui-text-faint);
	background-color: var(--ui-surface);
}

.footable-details.table > tbody > tr > th {
	width: 1%;
	white-space: nowrap;
	color: var(--ui-text-muted);
	font-weight: 600;
	background-color: var(--ui-surface-muted);
}

/* Pagination row (pagination.html): count on the left, pages on the right. */
.dataTables_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 12px;
}

.dataTables_footer::before,
.dataTables_footer::after {
	display: none !important;
}

.dataTables_footer > [class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}

.dataTables_footer .dataTables_paginate .pagination {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}

.dataTables_footer .dataTables_paginate .pagination > li > a,
.dataTables_footer .dataTables_paginate .pagination > li > span {
	display: block;
	float: none;
}

.pagination > li > a,
.pagination > li > span {
	color: var(--ui-text-muted);
	border-color: var(--ui-border);
}

.pagination > li:first-child > a,
.pagination > li:first-child > span {
	border-radius: var(--ui-radius) 0 0 var(--ui-radius) !important;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
	border-radius: 0 var(--ui-radius) var(--ui-radius) 0 !important;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span {
	background-color: var(--ui-accent) !important;
	border-color: var(--ui-accent) !important;
	color: #fff;
}

.dataTables_info {
	color: var(--ui-text-muted);
	font-size: 13px;
}

/* Row actions (view / edit / delete) stay pinned to the right edge while a
   wide list scrolls sideways, at every width. */
.table:has(> tbody > tr > td:last-child .btn-icon-only) > thead > tr > th:last-child,
.table:has(> tbody > tr > td:last-child .btn-icon-only) > tbody > tr:not(.footable-detail-row) > td:last-child {
	position: sticky;
	right: 0;
	z-index: 2;
	background-color: var(--ui-surface);
}

.table:has(> tbody > tr > td:last-child .btn-icon-only) > thead > tr > th:last-child {
	background-color: var(--ui-surface-muted);
}

.table-striped:has(> tbody > tr > td:last-child .btn-icon-only) > tbody > tr:nth-of-type(odd):not(.footable-detail-row) > td:last-child {
	background-color: #fbfbfc;
}

/* While part of the table is hidden on the right (site.js sets the class),
   a soft edge shows that the columns slide under the pinned buttons. */
.table-scroll.has-more-right > .table:has(> tbody > tr > td:last-child .btn-icon-only) > thead > tr > th:last-child,
.table-scroll.has-more-right > .table:has(> tbody > tr > td:last-child .btn-icon-only) > tbody > tr:not(.footable-detail-row) > td:last-child {
	box-shadow: inset 1px 0 0 var(--ui-border), -8px 0 8px -8px rgba(16, 24, 40, .22);
}

/* Row buttons: as wide as the buttons, lined up on the right of their column.
   The row templates gave the group a fixed width (45px per possible action),
   and Metronic adds 5px after each button. */
.table td > .actions {
	display: flex !important;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
	width: auto !important;
}

.table td > .actions > .btn {
	margin: 0 !important;
}

@media (max-width: 767px) {
	.table > thead > tr > th,
	.table > tbody > tr > td,
	.table > tfoot > tr > td {
		padding: 8px 6px;
	}

	.btn.btn-circle.btn-icon-only {
		width: 28px;
		height: 28px;
		line-height: 26px;
	}

	.dataTable tr > td:last-of-type .btn + .btn {
		margin-left: 2px;
	}

	.pagination > li > a,
	.pagination > li > span {
		padding: 6px 10px;
	}

	.dataTables_info {
		text-align: center;
	}

	.dataTables_footer,
	.dataTables_footer .dataTables_paginate .pagination {
		justify-content: center;
	}

}

/* A table wider than its panel (long URLs, row buttons) scrolls sideways in its
   own container (div.table-scroll in each *.list.table.html), with the row
   buttons pinned on the right; the filters and the pagination stay put, and
   the page itself never scrolls sideways. */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-bottom: 20px;
}

.table-scroll > table.table {
	margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * Detail panels (restaurant, menu, page, document, audit...)
 * Labels in a fixed, left-aligned column and values starting on one edge,
 * instead of right-aligned labels at 40% that made the content look centred.
 * The page CSS sets the widths with an id selector, hence !important.
 * ------------------------------------------------------------------------- */

[id$="-detail-container"] .element-label {
	font-weight: 600 !important;
	color: var(--ui-text-muted);
	line-height: 1.5;
	margin-bottom: 6px;
}

[id$="-detail-container"] .element-data {
	color: var(--ui-text);
	line-height: 1.5;
	margin-bottom: 6px;
}

@media (min-width: 500px) {
	[id$="-detail-container"] .element-label {
		width: 170px !important;
		padding-right: 12px !important;
		text-align: left !important;
	}

	[id$="-detail-container"] .element-data {
		width: calc(100% - 175px) !important;
	}
}

.portlet-body dl.dl-horizontal dt,
.portlet-body dl.dl-horizontal dd {
	line-height: 1.5;
	margin-bottom: 6px;
}

@media (min-width: 768px) {
	.portlet-body .dl-horizontal dt {
		width: 170px;
		padding-right: 12px;
		text-align: left;
	}

	.portlet-body .dl-horizontal dd {
		margin-left: 170px;
	}
}

/* Detail sections (menu): titled groups of label / value pairs. Two columns
 * when each gets 360px (the panel is half the page from 1200px), sections side
 * by side starting on the same line; one column otherwise. */
.detail-sections {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(360px, calc((100% - 40px) / 2))), 1fr));
	gap: 28px 40px;
	padding-bottom: 4px;
}

.detail-section {
	min-width: 0;
}

.detail-section-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 12px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--ui-border);
}

.detail-list {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr);
	gap: 8px 16px;
	align-items: start;
	margin: 0;
	line-height: 1.5;
}

.detail-list > dt {
	font-weight: 600;
	color: var(--ui-text-muted);
}

.detail-list > dd {
	margin: 0;
	color: var(--ui-text);
	overflow-wrap: anywhere;
}

.detail-empty {
	color: var(--ui-text-faint);
}

.detail-note {
	display: block;
	font-size: 12px;
	color: var(--ui-text-muted);
}

.detail-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 1px solid var(--ui-border-strong);
	border-radius: 3px;
}

/* Style previews (buttons, title, PDF text) on the menu's background colour. */
.detail-list > dd.detail-preview {
	justify-self: start;
	align-self: center;
	max-width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	overflow: hidden;
}

.detail-list > dt:has(+ dd.detail-preview) {
	align-self: center;
}

.detail-preview .btn {
	cursor: default;
}

.detail-qr {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.detail-qr-image {
	flex: none;
	padding: 6px;
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius);
	line-height: 0;
}

.detail-qr-image img {
	width: 136px;
	height: 136px;
}

.detail-qr-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

@media (max-width: 479px) {
	.detail-list {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.detail-list > dd {
		margin-bottom: 10px;
	}
}

/* ---------------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------------- */

.nav-tabs {
	border-bottom-color: var(--ui-border);
}

.nav-tabs > li > a {
	color: var(--ui-text-muted);
	border-radius: var(--ui-radius) var(--ui-radius) 0 0;
}

.nav-tabs > li > a:hover {
	background-color: var(--ui-surface-muted);
	border-color: transparent;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
	color: var(--ui-text);
	font-weight: 600;
	border-color: var(--ui-border) var(--ui-border) transparent;
}

.portlet-body > .nav-tabs,
.tabbable-line > .nav-tabs {
	margin-top: 4px;
	margin-bottom: 18px;
}

@media (max-width: 767px) {
	.nav-tabs {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
	}

	.nav-tabs > li {
		float: none;
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------------------------
 * Modals (bootbox)
 * ------------------------------------------------------------------------- */

/* The tint and blur apply in every state, so closing fades the same light
   backdrop out (Metronic forces #333 with !important). */
.modal-backdrop,
.modal-backdrop.fade,
.modal-backdrop.fade.in {
	background-color: rgba(27, 33, 40, .28) !important;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.modal-backdrop.in,
.modal-backdrop.fade.in {
	opacity: 1;
}

/* The page behind a dialog stays put (Metronic let it scroll), and scrolling
   past the end of a long dialog doesn't carry on to the page. site.js keeps the
   lock while a dialog opened from another one closes. */
html:has(> body.modal-open),
body.modal-open {
	overflow: hidden !important;
}

.modal {
	overscroll-behavior: contain;
}

.modal-content {
	border: 0;
	border-radius: 10px !important;
	box-shadow: 0 20px 50px rgba(16, 24, 40, .18);
}

.modal-header {
	padding: 14px 20px;
	border-bottom: 1px solid var(--ui-border);
}

.modal-header .modal-title,
.modal-title {
	font-size: 16px;
	font-weight: 600;
	color: var(--ui-text);
}

.modal-header .close {
	margin-top: 2px !important;
	opacity: .45;
}

.modal-body {
	padding: 18px 20px;
}

/* Dialog footers: the primary (dark) or confirming button on the right, the
   others (Annuler...) to its left. */
.modal-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	padding: 12px 20px;
	border-top: 1px solid var(--ui-border);
	background-color: var(--ui-surface-muted);
	border-radius: 0 0 10px 10px;
}

.modal-footer::before,
.modal-footer::after {
	display: none;
}

.modal-footer > .btn,
.modal-footer > .btn + .btn {
	margin: 0 !important;
}

.modal-footer > .btn:is(.purple, .blue, .green, .btn-primary, .btn-success, .btn-info, .btn-danger) {
	order: 1;
}

.modal-footer > .pull-left,
.modal-footer > .float-left {
	order: -1;
	margin-right: auto !important;
}

/* Fields in dialogs fill the dialog: every field the same width. */
@media (min-width: 768px) {
	.modal .form-horizontal .form-group > [class*="col-"] > .form-control:not(.input-inline),
	.modal .form-horizontal .form-group > [class*="col-"] > .input-group:not([style*="width"]),
	.modal .form-horizontal .form-group .multiselect-native-select > .btn-group,
	.modal .form-horizontal .form-group > [class*="col-"] > .btn-group:has(> .multiselect),
	.modal .form-horizontal .form-group > [class*="col-"] > select.form-control {
		max-width: none;
	}

	.modal .form-horizontal .form-group > [class*="col-"] > .form-control.input-small,
	.modal .form-horizontal .form-group > [class*="col-"] > .form-control.input-xsmall {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.modal {
		padding-right: 0 !important;
	}

	.modal-dialog {
		width: auto !important;
		margin: 10px !important;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding-left: 14px;
		padding-right: 14px;
	}

	.modal-body {
		overflow-x: auto;
	}
}

/* ---------------------------------------------------------------------------
 * Alerts, notifications
 * ------------------------------------------------------------------------- */

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

#toast-container > div {
	border-radius: var(--ui-radius) !important;
	box-shadow: 0 8px 24px rgba(16, 24, 40, .14) !important;
	opacity: .97;
}

/* ---------------------------------------------------------------------------
 * Administration tiles
 * ------------------------------------------------------------------------- */

.portlet .portlet-body:has(> a.icon-btn) {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.portlet .portlet-body a.icon-btn {
	border: 1px solid var(--ui-border);
	border-radius: var(--ui-radius-lg);
	background-color: var(--ui-surface);
	color: var(--ui-text);
	box-shadow: none;
	margin: 0;
	transition: border-color .12s, background-color .12s;
}

.portlet .portlet-body a.icon-btn:hover {
	border-color: var(--ui-border-strong);
	background-color: var(--ui-surface-muted);
}

.portlet .portlet-body a.icon-btn > i {
	color: var(--ui-text-muted);
}

.portlet .portlet-body a.icon-btn > div {
	font-size: 13px !important;
	line-height: 1.3;
	color: var(--ui-text);
}

@media (max-width: 767px) {
	.portlet .portlet-body a.icon-btn {
		width: calc(50% - 4px) !important;
		min-width: 0;
		height: auto !important;
		min-height: 84px;
		padding: 14px 6px 10px !important;
	}
}

/* ---------------------------------------------------------------------------
 * Login
 * ------------------------------------------------------------------------- */

body.login {
	background-color: var(--ui-bg) !important;
}

.login .content {
	width: 360px;
	max-width: calc(100% - 30px);
	padding: 28px 28px 24px !important;
	background-color: var(--ui-surface);
	border: 1px solid var(--ui-border);
	border-radius: 10px !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.login .content .form-title {
	font-size: 20px;
	font-weight: 600 !important;
	color: var(--ui-text);
	margin-bottom: 20px !important;
}

.login .content .input-icon {
	border-left: 0 !important;
}

.login .content .input-icon .form-control {
	border-left: 1px solid var(--ui-border-strong) !important;
	height: 40px;
	padding-left: 36px;
}

.login .content .input-icon > i {
	color: var(--ui-text-faint);
	margin-top: 13px;
}

/* The sign-in button centred, "Mot de passe oublié?" right under it. */
.login .content .form-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 6px 0 0 !important;
	margin: 0 !important;
	border: 0;
}

.login .content #btn_login_wrapper {
	float: none;
}

.login .content #btn_login {
	min-width: 180px;
}

.login .content #btn_forgot_password_wrapper {
	height: auto;
	padding: 0;
	font-size: 13px;
	line-height: 1.4;
	border: 0;
	cursor: default;
}

/* Pages with a single button on the right (link_connection's "Enregistrer"). */
.login .content .form-actions > .pull-right:only-child {
	align-self: flex-end;
}

.login .content .form-actions::before,
.login .content .form-actions::after {
	display: none;
}

/* ---------------------------------------------------------------------------
 * Floating panels: date range picker, multiselect and Select2 dropdowns,
 * tooltips. The same white card as the other menus, rows that tint grey on
 * hover and light accent when chosen, instead of the plugins' bright blue.
 * The plugins' CSS is loaded by the list pages, after this file: the rules
 * start with "body" to outrank them.
 * ------------------------------------------------------------------------- */

body .daterangepicker.dropdown-menu,
body .multiselect-container.dropdown-menu,
body .select2-dropdown {
	margin-top: 4px;
	border: 1px solid var(--ui-border) !important;
	border-radius: var(--ui-radius-lg) !important;
	background-color: var(--ui-surface);
	box-shadow: 0 8px 24px rgba(16, 24, 40, .12) !important;
	color: var(--ui-text);
	font-family: inherit;
}

/* Date range picker: the presets list, then the calendar for a custom range. */
body .daterangepicker.dropdown-menu {
	padding: 6px;
}

body .daterangepicker::before,
body .daterangepicker::after {
	display: none !important;
}

body .daterangepicker .ranges {
	margin: 0;
}

body .daterangepicker .ranges ul {
	width: auto;
	min-width: 190px;
}

/* Presets only (no calendar yet): the list fills the picker, which site.js
   makes as wide as the field. */
body .daterangepicker:not(.show-calendar) .ranges,
body .daterangepicker:not(.show-calendar) .ranges ul {
	float: none;
	width: 100%;
}

/* Multiselect lists open as wide as their field. */
body .btn-group > .multiselect-container.dropdown-menu {
	min-width: 100%;
}

/* Metronic's plugins.css forces the blue with !important. */
body .daterangepicker .ranges li {
	margin: 0 0 1px;
	padding: 7px 10px;
	font-size: 13px;
	color: var(--ui-text) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--ui-radius);
}

body .daterangepicker .ranges li:hover {
	background: var(--ui-surface-muted) !important;
	color: var(--ui-text) !important;
	border: 0 !important;
}

/* The chosen preset: tinted like the other menus, no border (Metronic's
   li.active rule adds a blue one, and outranks the li rule above). */
body .daterangepicker .ranges li.active,
body .daterangepicker .ranges li.active:hover {
	background: var(--ui-accent-soft) !important;
	color: var(--ui-accent) !important;
	border: 0 !important;
	font-weight: 600;
}

body .daterangepicker .calendar {
	margin: 4px;
}

body .daterangepicker .calendar-table {
	border: 0;
	padding: 0;
	background: transparent;
}

body .daterangepicker .daterangepicker_input .form-control {
	height: 30px;
	font-size: 13px;
}

body .daterangepicker .daterangepicker_input i {
	color: var(--ui-text-faint);
}

body .daterangepicker th,
body .daterangepicker td {
	min-width: 30px;
	width: 30px;
	height: 28px;
	font-size: 12px;
	border: 0;
	border-radius: var(--ui-radius);
}

body .daterangepicker th {
	color: var(--ui-text-muted);
	font-weight: 600;
}

body .daterangepicker th.month {
	color: var(--ui-text);
}

body .daterangepicker td.available:hover,
body .daterangepicker th.available:hover {
	background: var(--ui-surface-muted);
	color: var(--ui-text);
}

body .daterangepicker td.off,
body .daterangepicker td.off.in-range,
body .daterangepicker td.off.start-date,
body .daterangepicker td.off.end-date {
	background: transparent;
	color: var(--ui-text-faint);
}

body .daterangepicker td.in-range {
	background: var(--ui-accent-soft);
	color: var(--ui-text);
	border-radius: 0;
}

body .daterangepicker td.active,
body .daterangepicker td.active:hover {
	background: var(--ui-accent);
	color: #fff;
}

body .daterangepicker td.start-date {
	border-radius: var(--ui-radius) 0 0 var(--ui-radius);
}

body .daterangepicker td.end-date {
	border-radius: 0 var(--ui-radius) var(--ui-radius) 0;
}

body .daterangepicker td.start-date.end-date {
	border-radius: var(--ui-radius);
}

/* Multiselect dropdowns: search box, "Tout sélectionner", then the options. */
body .multiselect-container.dropdown-menu {
	min-width: 100%;
	padding: 6px;
}

body .multiselect-container > li > a {
	padding: 0;
	border-radius: var(--ui-radius);
	color: var(--ui-text);
}

body .multiselect-container > li > a > label,
body .multiselect-container > li > a > label.checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	margin: 0 !important;
	padding: 6px 8px !important;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ui-text);
	cursor: pointer;
}

body .multiselect-container > li > a > label > input[type="checkbox"],
body .multiselect-container > li > a > label > input[type="radio"] {
	position: static;
	flex: none;
	width: 15px;
	height: 15px;
	margin: 0 !important;
	accent-color: var(--ui-accent);
	cursor: pointer;
}

body .multiselect-container > li > a:hover,
body .multiselect-container > li > a:focus {
	background: var(--ui-surface-muted);
	color: var(--ui-text);
	outline: 0;
}

body .multiselect-container > li.active > a,
body .multiselect-container > li.active > a:hover,
body .multiselect-container > li.active > a:focus {
	background: var(--ui-accent-soft);
	color: var(--ui-text);
}

body .multiselect-container > li.active > a > label {
	color: var(--ui-text);
}

body .multiselect-container > li.multiselect-all {
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--ui-border);
}

body .multiselect-container > li.multiselect-all > a > label {
	font-weight: 600;
}

body .multiselect-container > li.multiselect-filter {
	margin: 0 0 6px;
	padding: 0;
}

body .multiselect-container > li.multiselect-filter > .input-group {
	display: flex;
	width: 100%;
	margin: 0;
}

body .multiselect-container > li.multiselect-filter .input-group-addon {
	display: flex;
	align-items: center;
	width: auto;
	height: 32px;
	padding: 0 10px;
}

body .multiselect-container > li.multiselect-filter .multiselect-search {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	height: 32px;
	margin: 0;
	font-size: 13px;
}

body .multiselect-container > li.multiselect-filter .input-group-btn {
	display: flex;
	width: auto;
}

body .multiselect-container > li.multiselect-filter .multiselect-clear-filter {
	height: 32px;
	padding: 0 10px !important;
	color: var(--ui-text-faint) !important;
	font-weight: 400;
}

body .multiselect-container > li.multiselect-filter .multiselect-clear-filter > i {
	margin: 0;
}

/* Select2 dropdowns (dialogs: location, restaurant...) */
body .select2-dropdown {
	overflow: hidden;
}

body .select2-container .select2-search--dropdown {
	padding: 6px;
}

body .select2-container .select2-search--dropdown .select2-search__field {
	height: 32px;
	padding: 4px 8px;
	font-size: 13px;
	border: 1px solid var(--ui-border-strong);
	border-radius: var(--ui-radius);
	outline: 0;
}

body .select2-container .select2-results__option {
	padding: 6px 10px;
	font-size: 13px;
	color: var(--ui-text);
}

body .select2-container .select2-results__option[aria-selected="true"] {
	background-color: var(--ui-accent-soft);
	color: var(--ui-accent);
	font-weight: 600;
}

body .select2-container .select2-results__option--highlighted[aria-selected] {
	background-color: var(--ui-surface-muted) !important;
	color: var(--ui-text) !important;
}

/* Tooltips (row buttons, help icons) */
body .tooltip-inner {
	padding: 5px 9px;
	font-size: 12px;
	border-radius: var(--ui-radius);
	background-color: #23282e;
}

body .tooltip.top .tooltip-arrow {
	border-top-color: #23282e;
}

body .tooltip.bottom .tooltip-arrow {
	border-bottom-color: #23282e;
}

body .tooltip.left .tooltip-arrow {
	border-left-color: #23282e;
}

body .tooltip.right .tooltip-arrow {
	border-right-color: #23282e;
}