/* The content beside the side navigation (sideNavigation.css): the head of a page and the cards
   of the admin start page, in the colours and type of the navigation. */

#usermenuLayout td.mainCol {
	--pageInk:#1f2933;
	--pageMuted:#5c6878;
	--pageLine:#e4e8ee;
	--pageCanvas:#f6f8fa;
	--pageWarning:#c8102e;
}

/* A light canvas instead of the grey of the layout table (bgcolor), with room to the navigation;
   white cards and forms stand out on it. */
#usermenuLayout td.mainCol {
	box-sizing:border-box;
	padding:20px 24px;
	background:var(--pageCanvas);
}
@media only screen and (max-width:835px),
       only screen and (orientation:portrait) and (max-width:1024px) {
	#usermenuLayout td.mainCol {
		padding:12px;
	}
}

/* A card: a white box with the fine line and the rounded corners of the navigation. */
.adminCard {
	box-sizing:border-box;
	margin:0;
	padding:14px 16px;
	background:#ffffff;
	border:1px solid var(--pageLine);
	border-radius:8px;
	color:var(--pageInk);
	font-size:14px;
	line-height:1.4;
	text-align:left;
}
.adminCard h2.adminCardTitle {
	margin:0 0 10px;
	color:var(--pageInk);
	font-size:15px;
	font-weight:600;
	text-align:left;
}
.adminCard.isWarning {
	border-color:var(--pageWarning);
	color:var(--pageWarning);
	font-weight:600;
}
/* buttons in a row with room between them, wrapping on a narrow screen */
.adminCardActions {
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:0;
}

/* The head of a page (templates/navigation/pageHead.html.twig): the label of its entry in the
   navigation, the filter or what the page says about itself below. */
.adminPageHead {
	box-sizing:border-box;
	margin:0 0 16px;
	padding:0 0 12px;
	border-bottom:1px solid var(--pageLine);
	color:var(--pageInk);
	text-align:left;
}
#usermenuLayout td.mainCol .adminPageHead h1.adminPageTitle {
	margin:0;
	color:var(--pageInk);
	font-size:20px;
	font-weight:600;
	line-height:1.3;
}
.adminPageHead p.adminPageSubtitle {
	margin:4px 0 0;
	color:var(--pageMuted);
	font-size:14px;
}

/* the content takes the width beside the navigation; the layout table would shrink to it, and the
   head of the page with it */
table#usermenuLayout {
	width:100%;
}

/* The greys of the legacy pages, lighter beside the light navigation. The pages colour their tables
   by bgcolor attributes and inline styles, and by the classes of usermenu.css: the darker grey of
   headings and totals (#dddddd, #d6d6d6, #cccccc) becomes --pageTableHead, the grey of whole tables
   and forms (#eeeeee) --pageTableSoft. Only beside the navigation; the pages stay as they are
   elsewhere. */
#usermenuLayout td.mainCol {
	--pageTableHead:#e9edf2;
	--pageTableSoft:#f3f5f8;
	--pageTableDeep:#dfe5ec;
}
#usermenuLayout td.mainCol :is(table, tr, td, th)[bgcolor="#dddddd" i],
#usermenuLayout td.mainCol :is(table, tr, td, th)[bgcolor="#d6d6d6" i],
#usermenuLayout td.mainCol :is(table, tr, td, th)[bgcolor="#cccccc" i],
#usermenuLayout td.mainCol .usermenuContent th,
#usermenuLayout td.mainCol :is(.orderTotal, .orderlistTotal) td,
#usermenuLayout td.mainCol .orderBuyerStatistics {
	background-color:var(--pageTableHead);
}
#usermenuLayout td.mainCol :is(table, tr, td, th)[bgcolor="#eeeeee" i],
#usermenuLayout td.mainCol table.usermenuContent,
#usermenuLayout td.mainCol :is(.cancelInfo, .orderInfo) td,
#usermenuLayout td.mainCol td.bgDark,
#usermenuLayout td.mainCol :is(.orderMailBlock, .invoiceForm) {
	background-color:var(--pageTableSoft);
}
#usermenuLayout td.mainCol .groupOrderInfo td {
	background-color:var(--pageTableDeep);
}
#usermenuLayout td.mainCol :is([style*="background-color:#dddddd" i], [style*="background-color: #dddddd" i], [style*="background:#dddddd" i]) {
	background-color:var(--pageTableHead)!important;
}
#usermenuLayout td.mainCol :is([style*="background-color:#eeeeee" i], [style*="background-color: #eeeeee" i], [style*="background:#eeeeee" i]) {
	background-color:var(--pageTableSoft)!important;
}
/* the lines between the cells of the lists in the colour of the navigation */
#usermenuLayout td.mainCol table.usermenuContent,
#usermenuLayout td.mainCol .usermenuContent :is(th, td) {
	border-color:var(--pageLine);
}

/* The forms of the legacy pages are tables coloured by a bgcolor, with cellpadding 2 and the label
   in the middle of a tall row. Beside the navigation they become white cards like those of the
   start page: room in every cell, a fine line between the rows, each label at the top of its
   field. The lists (usermenuContent) keep their own look; a table inside a form stays plain. */
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) {
	box-sizing:border-box;
	width:100%;
	max-width:100%;
	margin:0 0 16px;
	background-color:#ffffff;
	border:1px solid var(--pageLine);
	border-radius:8px;
	border-collapse:separate;
	border-spacing:0;
	overflow:hidden;
}
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) > tbody > tr > :is(td, th) {
	padding:10px 12px;
	vertical-align:top;
	border-top:1px solid var(--pageLine);
	line-height:1.45;
}
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) > tbody > tr:first-child > :is(td, th) {
	border-top:0;
}
/* the explanation below a label, a little apart from it */
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) .smallgrau {
	display:inline-block;
	margin-top:4px;
	line-height:1.4;
}

/* A sentence that says what the page does, below its head (the price offer categories). */
#usermenuLayout td.mainCol p.adminPageIntro {
	margin:0 0 12px;
	color:var(--pageInk);
	font-size:15px;
	text-align:left;
}

/* In the form cards the wide fields (size 30 to 40) follow their cell instead of forcing their width,
   and a cell with nothing but a label keeps a width of its own: the labels of the shop settings
   broke after every word beside fields of a fixed width. */
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) :is(input[size="30"], input[size="36"], input[size="38"], input[size="40"], input[size="50"]) {
	box-sizing:border-box;
	width:100%;
	min-width:0;
	max-width:420px;
}
#usermenuLayout td.mainCol table[bgcolor]:not(.usermenuContent):not(td.mainCol table[bgcolor] table) > tbody > tr > td:not(:has(input, select, textarea, img, table)) {
	min-width:150px;
}

/* The card "to do" of the start page (templates/shopAdmin/openTasks.html.twig): one line per task,
   the count as a badge like in the navigation. */
.adminTaskList {
	margin:0;
	padding:0;
	list-style:none;
}
.adminTaskList li + li {
	border-top:1px solid var(--pageLine);
}
#usermenuLayout td.mainCol .adminTaskList > li > a {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	padding:9px 4px;
	color:var(--pageInk);
	text-decoration:none;
}
#usermenuLayout td.mainCol .adminTaskList > li > a:hover {
	background:#f1f4f8;
}
/* the single entries of a task (MA-Admin: the requests to create an order for) */
.adminTaskList p.adminTaskDetails {
	margin:0;
	padding:0 4px 9px;
	color:var(--pageMuted);
	font-size:13px;
}
.adminTaskCount {
	min-width:22px;
	padding:1px 8px;
	border-radius:999px;
	background:var(--pageWarning);
	color:#ffffff;
	font-size:13px;
	font-weight:600;
	text-align:center;
}
.adminCard p.adminCardNote {
	margin:0;
	color:var(--pageMuted);
}

/* Buttons, fields and links of the legacy pages, in one look beside the navigation. The order search
   (.orderSearchForm) has its own design and the editor (TinyMCE, .tox) its own controls. */
#usermenuLayout td.mainCol {
	--pageLink:#1d4a8c;
	--pageField:#c9d1db;
	--pageFocus:rgba(29, 74, 140, 0.18);
	--pageButton:#fad15f;
	--pageButtonHover:#ffc723;
}

/* every button like the yellow .btn of the shop administration */
#usermenuLayout td.mainCol :is(input[type="submit" i], input[type="button" i], input[type="reset" i], button):not(.btn):not(.tox *):not(.orderSearchForm *) {
	box-sizing:border-box;
	margin:4px 0;
	padding:8px 12px;
	border:0;
	border-bottom:1px solid rgba(0, 0, 0, 0.25);
	border-radius:4px;
	background-color:var(--pageButton);
	color:#000000;
	font-family:"Helvetica neue", Helvetica, Verdana, Arial, sans-serif;
	font-size:15px;
	cursor:pointer;
}
#usermenuLayout td.mainCol :is(input[type="submit" i], input[type="button" i], input[type="reset" i], button):not(.btn):not(.tox *):not(.orderSearchForm *):hover {
	background-color:var(--pageButtonHover);
}

/* text fields and selects of one height, with the line colour of the navigation and a visible focus */
#usermenuLayout td.mainCol :is(input:not([type]), input[type="text" i], input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="date" i], select, textarea):not(.tox *):not(.orderSearchForm *) {
	box-sizing:border-box;
	padding:6px 8px;
	border:1px solid var(--pageField);
	border-radius:6px;
	background-color:#ffffff;
	color:var(--pageInk);
	font-size:14px;
}
#usermenuLayout td.mainCol :is(input:not([type]), input[type="text" i], input[type="email" i], input[type="number" i], input[type="password" i], input[type="tel" i], input[type="url" i], input[type="date" i], select):not(.tox *):not(.orderSearchForm *) {
	min-height:34px;
}
#usermenuLayout td.mainCol :is(input, select, textarea):not(.tox *):not(.orderSearchForm *):focus-visible {
	border-color:var(--pageLink);
	outline:none;
	box-shadow:0 0 0 3px var(--pageFocus);
}

/* links in the dark blue of the navigation instead of the pure blue of the browser */
#usermenuLayout td.mainCol a:not(.btn):is(:link, :visited) {
	color:var(--pageLink);
}

/* Messages of a page: saved (isSuccess), a hint (isWarning), an error (isError). */
#usermenuLayout td.mainCol .adminNotice {
	box-sizing:border-box;
	margin:0 0 16px;
	padding:12px 14px;
	border:1px solid;
	border-radius:8px;
	font-size:14px;
	font-weight:600;
	line-height:1.45;
	text-align:left;
}
#usermenuLayout td.mainCol .adminNotice.isSuccess {
	border-color:#9fd3b0;
	background-color:#effaf3;
	color:#14532d;
}
#usermenuLayout td.mainCol .adminNotice.isWarning {
	border-color:#f0c36d;
	background-color:#fff8e6;
	color:#6b4e00;
}
#usermenuLayout td.mainCol .adminNotice.isError {
	border-color:#f1a5ae;
	background-color:#fdf0f2;
	color:#9b1c2c;
}