/**
 * Cette feuille de style doit déclarée avant chaque CSS qui sert
 * à formatter des vues paginées (table.css, list.css ...).
 * 
 * Note: on n'utilise pas la directive CSS "@import", car cette
 *       dernière risque de cacher une nouvelle version.
 *       C'est pourquoi il faut la déclarer dans les "head", en
 *       n'oubliant surtout pas d'utiliser la fonction PHP
 *       "addVersion()".
 * 
 * Elle définit les contrôles qui gèrent l'affichage des items dans ces
 * vues paginées.
 */

div.control-set {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5em;
}

div.control-set nav {
}

div.control-set nav ul {
	display: flex;
	width:100%;
	padding: 0 0.3em;
	margin: 0;
	background-color: #565656;
	border-radius: 5px;
}

div.control-set nav li {
	display: flex;
	flex-wrap: wrap;
	margin:0 0.2em;
	justify-content: center;
	flex-grow: 1;
}

div.control-set nav li a,
div.control-set nav li span {
	width:2em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2em;
	font-size: 1.3em;
}

div.control-set nav span.current {
	color: white;
	font-weight: bold;
	background-color: #565656;
}

div.control-set nav li a {
	color:#fffe92;
}

div.control-set nav li.nearest a {
	padding: 0;
	font-size: 1.5em;
}

div.control-set nav li.disabled a {
	color:grey;
}

div.control-set nav li a.limit {
	width: 4.5em;
	font-size: 0.7em;
	font-weight: bold;
}

div.control-set nav li a:hover.limit.disabled {
	color:black;
}

div.control-set nav a {
	width: 1em;
	padding-left: 0.25em;
	padding-right: 0.25em;

}

div.control-set nav a:hover {
	color: var(--link-color-hov-dark);
}

div.control-set dl {
	font-style: italic;
	font-size: small;
}

div.control-set dl > dt, div.control-set dl > dd {
	display: inline;
}

div.control-set dl > dt::after {
	content: ":";
}

div.control-set dl dd {
	margin-left: .5em;
}

div.control-set label {
	font-size: small;
}

form.search {
	display: flex;
}

div.control-set input[type="search"] {
	font-size: medium;
}

div.control-set input[type="search"] ~ button[type="submit"] {
	padding: 6px;
	font-size: xx-large;
}

form#page-settings {
	width: inherit;
}

input#maxcount {
	width: 4.2em;
	margin-left: 0.5em;
	text-align: center;
}

div.add-list-item {
	margin-top: 1em;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
	border-bottom: 1px solid;
	padding-bottom: 1em;
}

/*
div.add-list-item h2 {
	display: flex;
	margin: 0 2em;
}
*/

div.add-list-item h3 {
	display: flex;
	margin: 0 2em;
}

div.add-list-item a {
	display:flex;
}

dl.page.item-count {
	width: inherit;
	margin: 0;
	text-align: right;
}

@media (max-width: 1100px) and (min-width: 700px) {
	
	nav.page {
		margin-left: 0;
	}
}

@media (pointer:coarse), (max-width:700px) {

	div.control-set nav ul {
		padding: 0;
	}

	div.control-set nav span.current {
		width:3em;
	}
	
	div.page.control-set {
		align-items: stretch;
	}
	
	div.control-set.page.search {
		flex-direction: column-reverse;
		margin-bottom: 1em;
	}

	form.search {
		width: 100%;
	}

	form.search input[type="search"] {
		width: 100%;
		padding: 0.25em;
		margin-bottom: 1em;
		text-align: center;
		font-size: large;
	}

	form.search button[type="submit"] {
		/* Dans un smartphone, le bouton loupe est redondant
		   avec le clavier virtuel. */
		display: none;
	}

	form#page-settings {
		display: block;
		float:right;
	}

	form#page-settings label {
		display: block;
	}

	input#maxcount {
		/* Pas besoin d'etre plus large, car il n'y a pas le spinner. */
		width: 4em;
		text-align: center;
		height: auto;
	}
}