/* Styles pour le dashboard Parkings */
:root{
  --bg     : #f7f7f7;
  --card-bg: #fff;
  --muted  : #666;
  --accent : #0073e6;
	--source : #F44336;
  --map    : #616060;
  --border : #eee;
  --danger : #900;
  --radius : 6px;
}

html,body{height:100%}
body{
  font-family            : Arial, Helvetica, sans-serif;
  background             : var(--bg);
  color                  : #222;
  padding                : 10px;
  margin                 : 0;
  -webkit-font-smoothing :antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width    : 1300px;
  margin       : 0 auto;
  background   : var(--card-bg);
  padding      : 18px;
  border-radius: var(--radius);
  box-shadow   : 0 2px 8px rgba(0,0,0,0.08);
}

/* h1{
		margin-top : 0;
		font-size  : 30px;
    align-items  : center;
} */

.titre{
  display      : flex;
  align-items  : center;
  height: 40px;
  justify-content: space-between;
  padding-bottom: 20px;
}

.titre h1 {
    margin: 0;
    font-size  : 30px;
}

.titre button{
  padding      : 7px 12px;
  background   : var(--map);
  color        : #fff;
  border       : 0;
  border-radius: 4px;
  cursor       : pointer;
  height       : 36px;
}

.controls{
  display      : flex;
  gap          : 10px;
  align-items  : center;
  flex-wrap    : wrap;
  margin-bottom: 8px;
}

.controls label{font-size:14px}
.controls select{padding:6px 8px;border-radius:4px;border:1px solid #d7d7d7;background:#fff}
.controls button{
  padding      : 7px 12px;
  background   : var(--accent);
  color        : #fff;
  border       : 0;
  border-radius: 4px;
  cursor       : pointer;
}
.controls button:hover{opacity:.95}

.controls .btn {
  background   : var(--source);
}

.small{
		font-size: 13px;
		color    : var(--muted)
}

table{
  width          : 100%;
  border-collapse: collapse;
  margin-top     : 12px;
  background     : transparent;
  table-layout   : fixed;
  word-break     : break-word;
}

th,td{
  padding       : 8px 10px;
  border-bottom : 1px solid var(--border);
  text-align    : left;
  vertical-align: middle;
  font-size     : 14px;
}

th{
  background : #fafafa;
  font-weight: 600;
  color      : #333;
}

.legend{
  background   : #fafafa;
  border-radius: 6px;
  font-size    : 14px;
}

.legend div.item{
  display      : inline-block;
  margin       : 0px;
  padding      : 6px;
  border-radius: 4px;
  font-weight  : 600;
}

.error{
  color    : var(--danger);
  font-size: 13px;
  margin   : 10px 0;
}

a.small-link{color:var(--accent);text-decoration:none;font-size:13px}
a.small-link:hover{text-decoration:underline}

/* responsive */
@media (max-width:700px){
  .container{padding : 12px}
  th,td{padding :8px}
  .controls{
		flex-direction: column;
		align-items: flex-start
	}
  table{font-size : 13px}
}