/* Colors and animations */
:root
{
	/* Background colors */
	--bg-color: hsl(0,0%,100%);
	--bg-color-1: #e6edef;
	--bg-color-2: var(--bg-color-1);
	--bg-color-3: var(--bg-color-1);
	--bg-color-4: hsl(0,40%,85%);
	--bg-color-dt-header: #f3f6f7;
	--bg-color-menu: #f7f3ed;
	--bg-color-menu-active: var(--bg-color-menu);
	--bg-color-details-open: #efe7dc;
	--bg-color-submit: #1c596c;
	--bg-color-submit-disabled: rgb(231, 219, 203, 0.2);
	--bg-color-pre: #f0f0f0;
	--bg-color-off: hsl(16, 80%, 90%);
	--bg-color-on: hsl(130, 90%, 90%);

	/* Foreground colors */
	--color: #1c596c;
	--color-pre: #505050;
	--color-error: hsl(0,100%,50%);
	--color-warning: hsl(16, 100%, 66%);
	--color-notice: hsl(248, 53%, 58%);
	--color-info: hsl(249, 80%, 67%);
	--color-okay: hsl(120, 100%, 35%);
	--color-success: hsl(120, 100%, 25%);

	--bg-header: var(--bg-color-1);
	--bg-footer: var(--bg-color-1);
	--bg-off: linear-gradient(to left, var(--bg-color-1), var(--bg-color-off));
	--bg-on: linear-gradient(var(--bg-color-1), var(--bg-color-on));

	--color-border-header: #b4c8ce;
	--color-border-section-etc: #b7b7b7;
	--color-border-pre: #ddd;
	--color-border-footer: var(--color-border-header);
	--color-border-table: #aaa;
}
@keyframes mbd_ongoing
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-3); }
}
@keyframes mbd_attention
{
	from { background-color: var(--bg-color); }
	to   { background-color: var(--bg-color-4); }
}

/* Main custom classes */
.mbd-error,
.mbd-event-REJECTED,
.mbd-event-FAILED,
.mbd-model-status-None,       /* Non-existing object */
td[class^='mbd-distribution-'][class$='-experimental'],
.mbd-sbuild-status-failed,
.mbd-sbuild-status-attempted,
.mbd-sbuild-status-given-back,
.mbd-sbuild-check-error,
.mbd-sbuild-check-fail,
.mbd-django-message-error,
.mbd-inspect-severity3
{
	color: var(--color-error) !important;
}

.mbd-warning,
.mbd-model-status-Removed,       /* Removed StatusModel object */
td[class^='mbd-distribution-'][class$='-unstable'],
td[class^='mbd-distribution-'][class$='-snapshot'],
.mbd-sbuild-check-warn,
.mbd-django-message-warning,
.mbd-inspect-severity2
{
	color: var(--color-warning) !important;
}

.mbd-notice,
.mbd-event-REMOVED,
.mbd-model-status-Prepared,       /* Prepared StatusModel object */
td[class^='mbd-distribution-'][class$='-testing'],
.mbd-sbuild-check-no-tests,
.mbd-inspect-severity1
{
	color: var(--color-notice) !important;
}

.mbd-info,
.mbd-event-BUILDING,
.mbd-event-PACKAGING,
td[class^='mbd-distribution-'][class$='-hotfix'],
.mbd-model-status-Exists,       /* Existing (non StatusModel) object */
.mbd-sbuild-status-skipped,
.mbd-sbuild-check-info,
.mbd-django-message-debug,
.mbd-django-message-info
{
	color: var(--color-info) !important;
}

.mbd-okay,
.mbd-event-BUILT,
td[class^='mbd-distribution-'][class$='-stable'],
.mbd-inspect-severity0
{
	color: var(--color-okay) !important;
}

.mbd-success,
.mbd-event-INSTALLED,
.mbd-event-MIGRATED,
.mbd-model-status-Active,       /* Active StatusModel object */
.mbd-sbuild-check-pass,
.mbd-sbuild-status-successful,
.mbd-django-message-success
{
	color: var(--color-success) !important;
}

.mbd-not-used,
.mbd-sbuild-check-none
{
	text-decoration: line-through;
}

/* Misc */
.mbd-ongoing          { animation: mbd_ongoing 1s infinite alternate-reverse; }
.mbd-attention        { animation: mbd_attention 1s infinite alternate-reverse; }
.mbd-menu-active      { background-color: var(--bg-color-menu-active); border: .1rem solid #978368; border-radius: .2rem; }
.mbd-hidden           { display: none !important; }
.mbd-off              { background: var(--bg-off); }
.mbd-on               { background: var(--bg-on); }
.mbd-dim              { filter: opacity(30%); }
img.mbd-logo          { height: 3rem; vertical-align: middle; padding: 0 .1rem; }
img.mbd-icon          { height: 1.8rem; vertical-align: middle; }
img.mbd-icon[alt="admin"] {content: url(/static/static/icons/logged-in-as-admin.svg); }
img.mbd-icon-small    { height: 1.5rem; vertical-align: middle; }
button.mbd-button     { color: white; font-weight: bold; border: .1rem solid #05536b; border-radius: .35rem; background-color: var(--bg-color-submit); padding: .2rem .5rem; margin: .1rem .2rem; }
button.mbd-button:hover { background-color: #056f8f; }
button.mbd-button-raw { border: none; background: none; }
a.mbd-underline       { text-decoration: underline; }
body>header img.mbd-icon[title^="logged"], body>header img.mbd-icon[alt="API"], body>header img.mbd-icon[alt="Manual"] { height: 2.1rem; }
body>header img.mbd-icon[alt="dirview"] { height: 2.2rem; margin-top: -.2rem; }
img.mbd-icon[alt="Home"], img.mbd-icon[alt="Reload"], img.mbd-icon[alt="Close"] { height: 1.5rem; }

/* DataTables */
.dataTables_wrapper.no-footer { background-color: var(--bg-color-1); border: .1rem solid #bfbfbf; padding: 1rem; border-radius: .4rem; }
.dataTables_wrapper .dataTables_filter { float: left; text-align: right; width: 54%; margin: -.4rem 0 .6rem 0; }
.dataTables_wrapper .dataTables_filter input { font-size: 1rem; background-color: white; border: .1rem solid #aaa; width: 16rem; border-radius: .5rem; padding: .2rem; }
.dataTables_wrapper .dataTables_info { font-size: 1rem; color: #777777; text-align: right; clear: none; float: none; padding: 0 .2rem 0 0; margin-top: -.1rem; }
table.dataTable.no-footer { border: .1rem solid var(--color-border-table); border-radius: .4rem; }
table.dataTable thead th, table.dataTable.no-footer { border-bottom: .1rem solid var(--color-border-table); }
table.dataTable.compact thead th { padding: .6rem; background-color: var(--bg-color-dt-header); }
table.dataTable.compact tbody td { padding: .1rem .4rem; }
table.dataTable.cell-border tbody tr td:first-child { border-left: 0; }
table.dataTable.cell-border tbody tr td:last-child { border-right: 0; }
table.dataTable.compact thead th:first-child { border-radius: .4rem 0 0 0; }
table.dataTable.compact thead th:last-child { border-radius: 0 .4rem 0 0; }
table.dataTable.cell-border tbody tr:last-child td:first-child { border-radius: 0 0 0 .4rem; }
table.dataTable.cell-border tbody tr:last-child td:last-child { border-radius: 0 0 .4rem 0; }
table.dataTable.cell-border tbody tr:last-child td:last-child.dataTables_empty{ border-radius: 0 0 .4rem .4rem; }
table[class^="dataTable"] img.mbd-icon { height: 1.6rem; }
table[class^="dataTable"] a { padding: 0 .2rem .1rem .2rem; }
table[class^="dataTable"] a:hover { color: #ffffff; background-color: #dbc298; border-radius: .2rem; }
table[class^="dataTable"] a:hover code { background-color: transparent; }
table[class^="dataTable"] form.mbd-api input[type="submit"] { padding: .25rem .6rem; border-radius: .35rem; }

/* Inner DataTables */
table.dataTable table.dataTable { border: .1rem solid var(--color-border-table); border-radius: .4rem; margin-bottom: .3rem; }
table.dataTable .dataTables_wrapper.no-footer { margin: .1rem .2rem .4rem .2rem; }
table.dataTable .dataTables_wrapper .dataTables_filter { margin-top: .4rem; text-align: left; }
table.dataTable .dataTables_wrapper .dataTables_filter label { margin: 0; padding: 0; }
table.dataTable .dataTables_wrapper .dataTables_filter input { width: 11rem; margin: 0; }
table.dataTable .dataTables_wrapper .dataTables_info { display: inline-block; margin-top: 0; padding: .7rem 0; }
table.dataTable.cell-border tbody thead tr:first-child th { border-left: 0; border-right: 0; }

/* Inner DT: Distribution Snapshots */
table.dataTable form[action$="snapshot_create/"]
{
	display: block ruby; /* minor improvement working only for Firefox & compatible */
	margin: .1rem;
}
table.dataTable.cell-border tbody tr:first-child thead th { border-left: 0; border-right: 0; }
table.dataTable.cell-border tbody tr:first-child tfoot th { background-color: var(--bg-color-dt-header); border-top: .1rem solid var(--color-border-table); border-left: 0; border-right: 0; border-radius: 0 0 .4rem .4rem; }

section>div>table.dataTable.compact>tbody>tr>td.dataTables_empty
{
	padding: 3rem 0;
	font-size: larger;
	font-weight: bold;
	font-style: italic;
	color: rgba(0, 0, 08, 0.3);
}

/* Grids */
.mbd-grid-llr { padding: 0.1rem; display: grid;        grid: auto / 1fr 1fr auto; }
.mbd-grid-lcr { padding: 0.1rem; display: grid;        grid: auto / auto 1fr auto;  align-items: center; justify-items: center; }
.mbd-grid-aaa { padding: 0.1rem; display: inline-grid; grid: auto / auto auto auto; align-items: center; }
.mbd-grid-ll  { padding: 0.1rem; display: grid;        grid: auto / auto 1fr;       align-items: center; }
.mbd-grid-lr  { padding: 0.1rem; display: grid;        grid: auto / 1fr auto;       align-items: center; }

/* API calls */
form.mbd-api>details  { display: inline; font-family: initial; font-size: initial; font-weight: initial; }  /* '[ls]->': -> should be after submit button, to the right. */
form.mbd-api>details[open]
{
	position: absolute;
	width: max-content;
	z-index: 2;
	margin-top: -.25rem;
	margin-left: -.05rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.2);
	background-color: var(--bg-color-details-open);
	border: .1rem solid #796853;
	border-radius: .5rem;
	padding: .5rem .3rem .4rem .3rem;
}

/* "Details Popup" special treatments */
footer form.mbd-api>details[open] { bottom: -.2rem; }
main header form.mbd-api>details[open] { right: -.5rem; margin-top: -.4rem; padding-top: .55rem; padding-right: .05rem; }
main header form.mbd-api>details[open] > summary { text-align: right; margin: auto .45rem .5rem auto; }
form.mbd-api[action="/mini_buildd/api/cronjob/"]>details[open] { right: -3.25rem; margin-top: -.3rem; }
form.mbd-api[action="/mini_buildd/api/cronjob/"]>details[open] > summary { text-align: right; margin: auto .1rem .5rem auto; }
main section[id="mbd-api-popup-content"]>header li:first-child form.mbd-api>details[open] { right: auto; margin-left: -.1rem; padding-left: .2rem; margin-top: -.25rem; padding-top: .4rem; }
main section[id="mbd-api-popup-content"]>header li:first-child form.mbd-api>details[open] > summary { text-align: left; margin-left: .1rem; }
header.mbd-grid-lcr>nav:nth-child(2)>ul>li>details[open] { margin-top: -1.1rem; margin-left: -2rem; } /* URL, CLI, JSON */
/* OMG, deal with inner tables within most right (outer) column */
div[id$="_wrapper"] td:last-child td form.mbd-api>details[open] { right: 0; margin-top: -.25rem; }
div[id$="_wrapper"] td:last-child td form.mbd-api>details[open] > summary { text-align: right; margin: auto .45rem .5rem auto; }

form.mbd-api input[type="submit"] /* API call submit */
{
	color: white;
	font-weight: bold;
	border: .1rem solid #05536b;
	border-radius: .4rem;
	background-color: var(--bg-color-submit);
	padding: .3rem .8rem;
	margin: .1rem .2rem .2rem .2rem;
}
form.mbd-api input[disabled]
{
	color: rgb(95, 82, 65, 0.2);
	border-color: rgb(72, 59, 40, 0.2);
	background-color: transparent;
}
form.mbd-api input[type="text"], form.mbd-api input[type="number"], form.mbd-api input[type="url"]
{
	width: 12rem;
	border: .1rem solid #796853;
	border-radius: .3rem;
	padding: .2rem;
}
header form.mbd-api input[type="text"][name="source"][value=""]
{
	font-size: 1rem;
	width: 16rem;
	border-radius: .5rem;
	padding: .2rem .5rem;
}
form input, form select, form checkbox { margin: .15rem .0rem .15rem .2rem; }
body>header label[title="Source package name"] { display: none; }
form.mbd-api input[type="submit"]:hover { background-color: #056f8f; }
form.mbd-api input[type="submit"][disabled]:hover { background-color: transparent; }
form.mbd-api summary:hover { filter: brightness(105%); }

/* Popup */
#mbd-api-popup
{
	display: table;  /* get real centering */
	/* gray-out everything */
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	background-color: rgba(0,0,0,0.6);
}
#mbd-api-popup>div  /* popup content */
{
	background-color: var(--bg-color-1);
	margin: auto;
	max-height: 90vh;
	max-width: 90vw;
	overflow-y: auto;
	padding: 0.3rem 0.6rem 0.3rem 0.3rem;
	padding: .5rem .7rem .6rem .7rem;
	border: .1rem solid var(--color-border-section-etc);
	border-radius: 0 0 .6rem .6rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.4);
}

header.mbd-grid-lcr>nav>ul>li>details[open]
{
	position: absolute;
	width: max-content;
	z-index: 1;
	margin-top: -.1rem;
	box-shadow: 0 .2rem .4rem rgba(0,0,0,.2);
	background-color: var(--bg-color-details-open);
	border: .1rem solid #796853;
	border-radius: .5rem;
	padding: .3rem .5rem;
}

/* Generic styles */
body
{
	color: var(--color);
	background-color: var(--bg-color);
	padding: .2rem .5rem;
}

/* margin/padding: Generally, we don't really want to change any browser's defaults. */
/* Any pimping that seems worthwhile anyway should be done here. */
label,
h1
{
	margin: 0.1rem;
	padding: 0.1rem;
}
pre
{
	color: var(--color-pre);
	margin: 0.2rem;
	padding: 0.2rem;
	border-radius: .3rem;
	border: .1rem solid var(--color-border-pre);
}
iframe
{
	width: 100%;
	height: 100vh;
	border: 0;
}
pre,
code { background-color: var(--bg-color-pre); white-space: break-spaces; }
table tr>th { text-align: left; }
body>header
{
	position: sticky;
	top: -.3rem;
	z-index: 1;
	font-size: 1.2rem;
	font-weight: bold;
	background: var(--bg-header);
	border-radius: .4rem;
	border: .1rem solid var(--color-border-header);
}
body>main>header>h1 { font-size: 1.5rem; margin: 0.2rem; }
header a { text-decoration: none; }
a { color: #426a76; }

/* make empty "pre elements" completely invisible */
pre:empty {background-color: transparent; padding: 0; margin: 0; border-width: 0; }

/* Sections and aside */
section,
aside
{
	border-style: groove;
	border-width: thin;
	border-radius: .4rem;
	border-color: var(--color-border-section-etc);
}
section                 { background-color: #fafafa; padding: .8rem 1rem; }
section.mbd-warning     { margin: 1rem .1rem; }
section>section         { background-color: #f4f4f4; margin: .5rem 0; }
section>section>section { background-color: var(--bg-color-3); margin: .5rem 0; }
aside                   { background-color: var(--bg-color-off); }

/* Navigation (menus) */
nav ul                { display: inline; padding-inline-start: 0rem; }
nav>ul li             { display: inline-block; position: relative; vertical-align: middle; padding: .2rem 0; margin: .1rem; border: .1rem solid transparent; }
header>nav>ul>li:first-child { border-radius: .4rem; } /* mbd-logo */
header>nav>ul>li:last-child { margin-right: .4rem; } /* manual */
nav>ul>li>a           { padding: .2rem; }
nav>ul>li>a:hover     { color: white; border-radius: .2rem; background-color: #dbc298; }
nav>ul>li>a[role="button"]:hover        { background-color: transparent; }
nav>ul>li>a[href="/mini_buildd/"]:hover { background-color: inherit; filter: brightness(110%); }
nav>ul>li>ul          { display: none; }  /* dropdown menu */
nav>ul>li:hover>ul  /* on dropdown menu */
{
	display: inline-grid;
	position: absolute;
	z-index: 1;
	background-color: var(--bg-color-menu);
	border: .1rem solid #88765e;
	border-radius: .2rem;
	padding: .4rem .1rem;
	box-shadow: 0 .2rem .4rem 0 rgba(0, 0, 0, 0.2);
}
nav>ul>li:hover>ul a { padding: 0 .4rem; }
nav>ul>li:hover>ul>li:hover  /* on dropdown menu item */
{
	background-color: #dbc298;
	border-radius: .2rem;
}
nav>ul>li:hover>ul>li:hover>a { color: white; }
nav>ul>li:hover>ul>li { padding: .1rem 0; margin: 0 0.3rem; }

/* Hover forms */
form { display: inline-block; border-radius: .4rem; border: .1rem solid transparent; padding: .2rem .4rem .1rem .3rem; margin: -.2rem -.4rem -.1rem -.3rem; } /* default */
form:hover { background-color: rgba(239, 231, 220, .8); border-color: rgba(136, 118, 94, .8) } /* default */
td li>form { margin: -.5rem -.5rem -.5rem -.3rem; } /* table special */
td>form { padding: .2rem .3rem .1rem .2rem;  margin: -.1rem 0; } /* table special */
header.mbd-grid-lcr>nav>ul>li>form.mbd-api[action="/mini_buildd/api/setup/"] { padding: .2rem .4rem .1rem .3rem; margin: 0 .5rem 0 -.1rem; } /* setup */

/* Manual */
iframe[title="Manual"]{ border: 0.1rem solid var(--color-border-section-etc); border-radius: .4rem; }

/* Form inputs */
input::placeholder   { filter: opacity(30%); }
textarea             { width: 40rem; height: 15rem; }

/* Warning */
body>div.mbd-warning>section { margin-top: 1rem; }

body>footer
{
	position: sticky;
	bottom: -.3rem;
	z-index: 1;
	font-family: monospace, monospace;
	background: var(--bg-footer);
	border: .1rem solid var(--color-border-footer);
	border-radius: .5rem;
	margin-top: .6rem;
}
body>footer.mbd-grid-lcr { padding: .4rem .5rem; }
