html, body { height:100%; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background:#0f172a; color:#e5e7eb; font-size:16px; line-height:1.5; }
/* Évite que les champs à width:100% dépassent du conteneur à cause des paddings/bordures */
*, *::before, *::after { box-sizing: border-box; }

/* Variables globales simples */
:root { --settings-field-width: 360px; }

/* Topbar cohérente avec la page carte */
.topbar { position: sticky; top:0; left:0; right:0; height:56px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#111827; color:#e5e7eb; z-index:10; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.brand { font-weight:700; letter-spacing:.2px; }
.actions { display:flex; gap:8px; }
/* Harmonise l’alignement des actions (utile pour la page login) */
.actions { align-items: center; }

.container { padding: 16px; max-width: 1100px; margin: 0 auto; }
h1 { margin: 10px 0 14px; font-size: 20px; }
/* Utilitaires d'espacement et visibilité */
.mt-8 { margin-top: 8px; }
.mt-24 { margin-top: 24px; }
.hidden { display: none !important; }

/* Titres de cartes (login, etc.) */
.card-title { margin: 0 0 12px; color:#e5e7eb; }

.row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Mise en forme spécifique à la section Paramètres trajets */
/* Mise en page des paramètres en 2 colonnes (responsive) */
.settings-row { display: grid; grid-template-columns: repeat(2, minmax(var(--settings-field-width), 1fr)); column-gap: 12px; row-gap: 12px; align-items: start; }
.settings-field { display:flex; flex-direction:column; align-items:flex-start; }
.settings-field input,
.settings-field select,
.settings-field textarea { width: 100%; }
/* Bouton des paramètres: utilise le style .btn standard (pas de largeur forcée) */
/* Dans la grille, éviter l'étirement horizontal pour qu'il se comporte comme en colonne Actions */
.settings-row > .btn { justify-self: start; width: auto; }

@media (max-width: 760px) {
	.settings-row { grid-template-columns: 1fr; }
}
/* Champs de saisie en thème sombre (texte, nombres, date, etc.) */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input:not([type]),
select,
textarea { background:#0b1220; color:#e5e7eb; border:1px solid #374151; padding:8px 10px; border-radius:6px; }
input::placeholder, textarea::placeholder { color:#9ca3af; }
label { display:flex; align-items:center; gap:6px; }

table { border-collapse: collapse; width: 100%; background:#0b1220; border:1px solid #1f2937; }
th, td { border: 1px solid #1f2937; padding: 10px; }
th { background: #111827; text-align: left; }
tbody tr:nth-child(even){ background: #0f172a; }
tbody tr:hover{ background:#111827; }

.btn { padding: 6px 10px; background: #1f2937; color: #e5e7eb; border: 1px solid #374151; border-radius: 6px; cursor: pointer; font-size: 14px; text-decoration:none; display:inline-flex; align-items:center; line-height: 1.5; }
.btn:hover { background:#374151; }
.btn.secondary { background: #374151; }
/* Bouton danger (Supprimer) */
.btn.danger { background: #7f1d1d; border-color: #b91c1c; color: #fee2e2; }
.btn.danger:hover { background: #991b1b; }

.switch { cursor: pointer; }
.msg { margin-top: 8px; }
.numeric { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

/* Styles pour la page de connexion */
.card{max-width:420px;margin:40px auto;padding:20px;background:#111827;border:1px solid #374151;border-radius:8px}
.field{margin-bottom:12px}
.field label{display:block;margin-bottom:4px;color:#d1d5db}
.field input{width:100%;padding:10px;border:1px solid #374151;border-radius:6px;background:#0b1220;color:#e5e7eb}
.hint{color:#9ca3af;margin-top:8px}

/* Actions: aligner les boutons comme le bouton Enregistrer des paramètres (desktop) */
.devices-table td.actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.devices-table td.actions .btn {
	width: auto; /* comme .settings-row > .btn */
}

/* Responsive: tableau des appareils en mode cartes sur mobile */
@media (max-width: 760px) {
	/* Masquer l'en-tête */
	.devices-table thead { display: none; }

	/* Rendre chaque ligne autonome */
	.devices-table,
	.devices-table tbody,
	.devices-table tr,
	.devices-table td {
		display: block;
		width: 100%;
	}

	/* Carte visuelle */
	.devices-table tr {
		background: #1b1f2a;
		border: 1px solid #2a2f3a;
		border-radius: 8px;
		padding: 12px;
		margin: 12px 0;
	}

	/* Libellé + valeur sur 2 colonnes */
	.devices-table td {
		display: grid;
		grid-template-columns: 110px 1fr;
		gap: 8px;
		padding: 4px 0;
	}

	/* Libellés par position de colonne */
	.devices-table td:nth-child(1)::before { content: 'ID'; }
	.devices-table td:nth-child(2)::before { content: 'IMEI'; }
	.devices-table td:nth-child(3)::before { content: 'Label'; }
	.devices-table td:nth-child(4)::before { content: 'Autorisé'; }
	.devices-table td:nth-child(5)::before { content: 'Actions'; }

	.devices-table td::before {
		color: #a0a6b0;
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .04em;
		align-self: start;
	}

	/* IMEI longs: éviter le débordement */
	.devices-table td:nth-child(2) {
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	/* Colonne Actions: mêmes contraintes que le bouton des paramètres (pas pleine largeur) */
	.devices-table td.actions .btn { width: auto; }
	.devices-table td.actions > * + * { margin-top: 8px; }

	/* Colonne Actions : forcer l'affichage en grille et centrer les boutons (2 colonnes: label + contenu) */
	.devices-table td.actions { display: grid; grid-template-columns: 110px 1fr; }
	.devices-table td.actions::before { grid-column: 1; text-align: left; justify-self: start; }
	.devices-table td.actions > * { grid-column: 2; justify-self: center; }

	/* Dernière cellule: marge basse propre */
	.devices-table td:last-child { padding-bottom: 0; }
}