/* ==========================================================================
   Thème Foyabo : CSS Global (Header, Navigation, Footer & Listes)
   Couleurs alignées sur la page de connexion
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES GLOBALES
   -------------------------------------------------------------------------- */
:root {
	/* En-tête : mêmes bleus nuit que le bandeau de la page de connexion */
	--f-navy: #0f172a;
	--f-navy-deep: #0b1220;
	--f-topbar-bg: #0b1220;

	/* Textes (en-tête) */
	--f-ink: #e8eefc;
	--f-muted: #9aa8c2;

	/* Lignes & cartes (en-tête) */
	--f-line: #24314d;
	--f-line-hover: rgba(96, 165, 250, 0.4);
	--f-card: #111a2e;
	--f-card-hover: #1a2640;

	/* Accents (en-tête) */
	--f-accent: #2563eb;
	--f-accent-light: #60a5fa;
	--f-accent-glow: rgba(96, 165, 250, 0.25);

	/* Erreurs & focus */
	--f-danger: #e54848;
	--f-danger-bg: rgba(229, 72, 72, 0.14);

	--f-focus: rgba(96, 165, 250, 0.45);
	--f-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Pages de contenu / listes (fond blanc) : palette claire de la connexion */
	--p-bg: #ffffff;
	--p-ink: #0f172a;
	--p-muted: #5b667a;
	--p-line: #d9e0ec;
	--p-line-strong: #cfd8e6;
	--p-soft: #f1f5fb;
	--p-accent: #2563eb;
	--p-accent-hover: #1d4ed8;
	--p-accent-soft: rgba(37, 99, 235, 0.08);
	--p-danger: #ef4444;
	--p-danger-soft: rgba(239, 68, 68, 0.1);
	--p-focus: rgba(37, 99, 235, 0.28);
	--p-radius: 10px;
	--p-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 24px -16px rgba(15, 23, 42, 0.2);
}

/* --------------------------------------------------------------------------
   2. EN-TÊTE PRINCIPAL (APP-HEADER)
   -------------------------------------------------------------------------- */
.app-header {
	background: linear-gradient(180deg, var(--f-navy) 0%, var(--f-navy-deep) 100%) !important;
	padding-bottom: 2rem;
}

/* ---------- Top-bar ---------- */
div.top-bar,
.app-header .top-bar,
header .top-bar {

	background-color: var(--f-topbar-bg) !important;
	background-image: none !important;
	border-bottom: 2px solid var(--f-accent) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
	z-index: 99 !important;
}

.top-bar-inner {
	background: transparent !important;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.25rem;
	padding-top: 0.75rem;
	padding-bottom: 2.5rem;
}

.top-bar-left {
	display: flex;
	align-items: center;
	gap: 2rem;
	min-width: 0;
}

.top-bar-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
}


.top-bar-logo img {
	display: block;
	width: auto;
	height: 2.25rem;
	max-width: 11rem;
	object-fit: contain;
	transition: opacity 0.2s var(--f-ease), transform 0.2s var(--f-ease);
}

.top-bar-logo:hover img {
	opacity: 0.9;
	transform: scale(1.02);
}

/* Pastilles d'usage */
.top-bar-usage-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.top-bar-usage-item {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.85rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--f-muted);
	font-variant-numeric: tabular-nums;

	white-space: nowrap;
	background: var(--f-card);
	border: 1px solid var(--f-line);
	border-radius: 999px;
	transition: border-color 0.2s var(--f-ease), background 0.2s var(--f-ease);
}

.top-bar-usage-item:hover {
	border-color: var(--f-line-hover);
	background: var(--f-card-hover);
}

.top-bar-usage-item .u-text-bold {
	color: var(--f-ink);
	font-weight: 600;
}

.top-bar-usage-item i {
	color: var(--f-accent-light);
}

/* Icônes de droite */
.top-bar-right {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.top-bar-menu-list {
	gap: 0.35rem;
}


.top-bar-menu-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	color: var(--f-muted) !important;
	border-radius: 10px;
	transition: all 0.2s var(--f-ease);
}

.top-bar-menu-link:hover {
	color: var(--f-ink) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

.top-bar-menu-link.active {
	color: var(--f-accent-light) !important;
	background: rgba(96, 165, 250, 0.14) !important;
}

.top-bar-menu-link-logout:hover {
	color: #fff !important;
	background: var(--f-danger) !important;
}

/* Panneau de notifications */
.top-bar-notifications-panel {
	overflow: hidden;
	background: var(--f-navy-deep);
	border: 1px solid var(--f-line-hover);
	border-radius: 16px;

	box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.top-bar-notification-item.unseen {
	box-shadow: inset 3px 0 0 var(--f-accent-light);
	background: rgba(96, 165, 250, 0.06);
}

.top-bar-notification-delete {
	border-radius: 6px;
	transition: all 0.2s var(--f-ease);
}

.top-bar-notification-delete:hover {
	color: var(--f-danger);
	background: var(--f-danger-bg);
}

/* ---------- Menu principal ---------- */
.main-menu {
	background: transparent !important;
	padding-top: 2.25rem !important;
}

.main-menu-list {
	gap: 0.875rem;
}

.main-menu-item-link {
	position: relative;
	display: block;
	height: 100%;

	padding: 1.1rem 1.35rem;
	color: var(--f-muted);
	background: var(--f-card);
	border: 1px solid var(--f-line);
	border-radius: 14px;
	backdrop-filter: blur(12px);
	transition: all 0.25s var(--f-ease);
}

.main-menu-item-link:hover {
	color: var(--f-ink);
	background: var(--f-card-hover);
	border-color: var(--f-line-hover);
	transform: translateY(-2px);
	box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.5);
}

.main-menu-item-link.active {
	color: var(--f-ink);
	background: linear-gradient(180deg, rgba(96, 165, 250, 0.16) 0%, rgba(96, 165, 250, 0.04) 100%);
	border-color: var(--f-accent-light);
	box-shadow: 0 0 16px var(--f-accent-glow);
}

.main-menu-item-label {
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.main-menu-item-link.active .main-menu-item-label,

.main-menu-item-link.active .main-menu-item-label i {
	color: var(--f-accent-light);
}

.main-menu-stats {
	font-size: 0.8125rem;
	color: var(--f-muted);
	line-height: 1.6;
	font-variant-numeric: tabular-nums;
}

.main-menu-toggle {
	color: var(--f-ink);
	border-radius: 10px;
}

/* --------------------------------------------------------------------------
   3. BARRE D'OUTILS ET PAGES DE LISTES (fond blanc)
   -------------------------------------------------------------------------- */
.toolbar {
	background: var(--p-bg);
	border-bottom: 1px solid var(--p-line);
	box-shadow: none;
}

.toolbar-inner {
	align-items: center;
	gap: 1rem;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}


.toolbar-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.toolbar-buttons {
	display: flex;
	gap: 0.5rem;
}

.toolbar-buttons .button {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.15rem;
	font-weight: 600;
	border-radius: var(--p-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.toolbar-buttons .button:first-child {
	color: #fff;
	text-shadow: none;
	background: var(--p-accent);
	border: 1px solid var(--p-accent);
	box-shadow: 0 6px 14px -8px rgba(37, 99, 235, 0.6);
}

.toolbar-buttons .button:first-child:hover {
	background: var(--p-accent-hover);
	border-color: var(--p-accent-hover);

	transform: translateY(-1px);
}

.toolbar-buttons .button:first-child i {
	margin: 0;
	color: #fff;
}

.toolbar-buttons .button:not(:first-child) {
	color: var(--p-ink);
	background: var(--p-bg);
	border: 1px solid var(--p-line-strong);
}

.toolbar-buttons .button:not(:first-child):hover {
	background: var(--p-soft);
	border-color: var(--p-muted);
}

/* Tri */
.toolbar-sorting-toggle {
	padding: 0.5rem 0.75rem;
	color: var(--p-muted);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--p-radius);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.toolbar-sorting-toggle:hover {
	background: var(--p-soft);
	border-color: var(--p-line);

}

.toolbar-sorting-toggle .u-text-bold {
	color: var(--p-ink);
}

.toolbar-sorting-menu {
	padding: 0.35rem;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: 12px;
	box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.35);
}

.toolbar-sorting-menu li {
	border-radius: 8px;
}

.toolbar-sorting-menu li:hover {
	background: var(--p-accent-soft);
}

.toolbar-sorting-menu .name.active {
	font-weight: 600;
	color: var(--p-accent);
}

/* Formulaires de la barre d'outils */
.toolbar .form-select,
.toolbar .form-control {
	color: var(--p-ink);
	background-color: var(--p-bg);

	border: 1px solid var(--p-line-strong);
	border-radius: var(--p-radius);
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar .form-select:hover,
.toolbar .form-control:hover {
	border-color: var(--p-muted);
}

.toolbar .form-select:focus,
.toolbar .form-control:focus {
	outline: 0;
	border-color: var(--p-accent);
	box-shadow: 0 0 0 4px var(--p-focus);
}

.toolbar-input-submit {
	color: var(--p-accent);
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.toolbar-input-submit:hover {
	color: var(--p-accent-hover);
	background: var(--p-accent-soft);
}

/* ---------- Tableaux ---------- */
.units-table {
	margin-top: 1.75rem;

	overflow: hidden;
	background: var(--p-bg);
	border: 1px solid var(--p-line);
	border-radius: 14px;
	box-shadow: var(--p-shadow);
}

.units-table-header {
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--p-muted);
	background: var(--p-soft);
	background-image: none;
	border-bottom: 1px solid var(--p-line);
	box-shadow: none;
}

.units-table-row {
	padding-top: 1.05rem;
	padding-bottom: 1.05rem;
	color: var(--p-ink);
	background: var(--p-bg);
	border-bottom: 1px solid var(--p-line);
	transition: background-color 0.15s ease;
}

.units-table-row:last-child {
	border-bottom: 0;

}

.units-table-row:hover {
	background: var(--p-soft);
}

.units-table-row.disabled {
	opacity: 0.6;
	background: repeating-linear-gradient(
		135deg,
		transparent 0 10px,
		rgba(91, 102, 122, 0.05) 10px 20px
	);
}

.units-table-heading-cell a {
	color: var(--p-ink);
	text-decoration: none;
	transition: color 0.15s ease;
}

.units-table-heading-cell a:hover {
	color: var(--p-accent);
}

.units-table-row .hint {
	margin-top: 0.15rem;
	font-weight: 400;
	color: var(--p-muted);
}

.units-table input[type="checkbox"] {

	accent-color: var(--p-accent);
}

.units-table-row-actions {
	gap: 0.15rem;
}

.units-table-row-action-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	color: var(--p-muted);
	border-radius: 8px;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.units-table-row-action-link:hover {
	color: var(--p-accent);
	background: var(--p-accent-soft);
	transform: translateY(-1px);
}

.units-table-row-action-link.danger:hover,
.units-table-row-action-link.data-controls-delete:hover,
.units-table-row-action-link[title*="Delete"]:hover,
.units-table-row-action-link[title*="Supprimer"]:hover {
	color: var(--p-danger);
	background: var(--p-danger-soft);
}


.units-table-footer {
	padding: 1rem 0.25rem 2rem;
}

.units-table-footer p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--p-muted);
}

/* --------------------------------------------------------------------------
   4. ACCESSIBILITÉ & FOOTER
   -------------------------------------------------------------------------- */
/* Focus sur fond sombre (en-tête, footer) : bleu clair */
.top-bar-menu-link:focus-visible,
.top-bar-logo:focus-visible,
.main-menu-toggle:focus-visible,
.main-menu-item-link:focus-visible,
.app-footer-link:focus-visible {
	outline: 3px solid var(--f-accent-light);
	outline-offset: 2px;
}

/* Focus sur fond blanc (barre d'outils, tableaux) : bleu Foyabo, plus contrasté */
.toolbar .button:focus-visible,
.toolbar-sorting-toggle:focus-visible,
.toolbar-input-submit:focus-visible,
.units-table-row-action-link:focus-visible {
	outline: 3px solid var(--p-accent);
	outline-offset: 2px;
}


.app-footer {
	margin-top: 3.5rem;
	padding: 1.75rem 1.5rem;
	font-size: 0.8125rem;
	color: var(--f-muted) !important;
	background: var(--f-navy-deep) !important;
	border-top: 2px solid var(--f-accent);
}

.app-footer .container {
	display: flex;
	justify-content: center;
}

.app-footer p {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0;
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.app-footer-link {
	font-weight: 500;
	color: var(--f-ink) !important;
	text-decoration: none;
	transition: color 0.2s var(--f-ease);
}


.app-footer-link:hover {
	color: var(--f-accent-light) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   5. RESPONSIVE & MOTIONS
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.top-bar-inner {
		min-height: 3.75rem;
		gap: 0.75rem;
	}

	.top-bar-left {
		gap: 1rem;
	}

	.top-bar-logo img {
		height: 1.85rem;
	}

	.main-menu-list {
		gap: 0.625rem;
	}
}

@media (max-width: 768px) {
	.top-bar-usage-item {
		padding: 0.3rem 0.65rem;
		font-size: 0.75rem;

	}

	.main-menu {
		padding-top: 1.25rem !important;
	}

	.main-menu-item-link {
		padding: 0.85rem 1rem;
	}

	.main-menu-item-link:hover {
		transform: none;
		box-shadow: none;
	}

	.toolbar-inner {
		padding-top: 0.85rem;
		padding-bottom: 0.85rem;
	}

	.units-table {
		margin-top: 1rem;
		border-radius: 12px;
	}

	.units-table-row:hover {
		background: var(--p-bg);
	}

	.app-footer {
		margin-top: 2rem;
		padding: 1.25rem 1rem;

		font-size: 0.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.top-bar-logo img,
	.top-bar-menu-link,
	.main-menu-item-link,
	.top-bar-notification-delete,
	.app-footer-link,
	.toolbar-buttons .button,
	.units-table-row,
	.units-table-row-action-link,
	.toolbar .form-select,
	.toolbar .form-control {
		transition: none !important;
	}

	.main-menu-item-link:hover,
	.toolbar-buttons .button:hover,
	.units-table-row-action-link:hover {
		transform: none !important;
	}
}