/* ============================================================
   reevalo-theme.css — Thème Reevalo par-dessus Bulma 1.x
   Identité (spec §6.2) : primaire #0F766E (teal profond),
   accent #F59E0B (ambre), fond #F8FAFC, police Inter self-hosted.
   ============================================================ */

@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Inter";
	src: url("/assets/fonts/inter/inter-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* Schéma clair verrouillé : Bulma 1.x bascule sinon en dark selon l'OS (illisible avec notre thème) */
	color-scheme: light;
	--bulma-scheme-h: 210;
	--bulma-scheme-s: 20%;
	--bulma-light-l: 96%;
	--bulma-dark-l: 15%;

	/* Palette Reevalo — alignée sur les logos officiels (teal #0D655E, ambre #F59E12) */
	--rv-primary: #0D655E;
	--rv-primary-dark: #0B4A44;
	--rv-primary-light: #14B8A6;
	--rv-primary-soft: #F0FDFA;
	--rv-accent: #F59E12;
	--rv-accent-soft: #FEF3C7;
	--rv-ink: #0F172A;
	--rv-bg: #F8FAFC;
	--rv-surface: #FFFFFF;
	--rv-border: #E2E8F0;
	--rv-text: #0F172A;
	--rv-text-soft: #64748B;
	--rv-danger: #DC2626;
	--rv-success: #16A34A;

	/* Élévations & rayons homogènes */
	--rv-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
	--rv-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
	--rv-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
	--rv-radius: 10px;
	--rv-radius-lg: 12px;
	--rv-transition: 150ms ease;
	--rv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);

	/* Surcharges Bulma (variables CSS Bulma 1.x) */
	--bulma-primary-h: 175deg;
	--bulma-primary-s: 77%;
	--bulma-primary-l: 22%;
	--bulma-link-h: 175deg;
	--bulma-link-s: 77%;
	--bulma-link-l: 22%;
	--bulma-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--bulma-body-background-color: var(--rv-bg);
	--bulma-radius: 8px;
	--bulma-radius-large: 12px;
}

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	background-color: var(--rv-bg);
	color: var(--rv-text);
	-webkit-font-smoothing: antialiased;
}

/* ---------- Hiérarchie typographique affirmée ---------- */
.title {
	color: var(--rv-text);
	font-weight: 700;
	letter-spacing: -0.02em;
}
.subtitle {
	color: var(--rv-text-soft);
}
.label {
	color: var(--rv-text);
	font-weight: 600;
}
.label.is-small {
	font-size: 0.78rem;
}
.help {
	color: var(--rv-text-soft);
}

/* ---------- Interactions : transitions & focus visibles ---------- */
a,
.button,
.input,
.select select,
.textarea,
.rv-status,
.tag {
	transition: background-color var(--rv-transition), border-color var(--rv-transition),
		color var(--rv-transition), box-shadow var(--rv-transition), transform var(--rv-transition);
}
:focus-visible {
	outline: 2px solid var(--rv-primary);
	outline-offset: 2px;
}
.input:focus-visible,
.select select:focus-visible,
.textarea:focus-visible {
	outline: none;
}
.input:focus,
.select select:focus,
.textarea:focus {
	border-color: var(--rv-primary);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------- Layout applicatif : sidebar fixe + contenu ---------- */
.rv-shell {
	display: flex;
	min-height: 100vh;
}
.rv-sidebar {
	width: 240px;
	flex-shrink: 0;
	background: linear-gradient(180deg, var(--rv-primary-dark) 0%, var(--rv-primary) 100%);
	color: #fff;
	display: flex;
	flex-direction: column;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}
.rv-sidebar .rv-logo {
	padding: 1.5rem 1.25rem 1rem;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
}
.rv-sidebar .rv-logo .rv-logo-dot {
	color: var(--rv-accent);
}
.rv-sidebar .menu-label {
	color: rgba(255, 255, 255, 0.4);
	padding: 0 1.25rem;
	margin-top: 1.5rem;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
}
.rv-sidebar .menu-list a {
	/* Bulma 1.x pose un fond scheme-main (blanc) sur les items de menu : on le neutralise */
	background: transparent;
	color: rgba(255, 255, 255, 0.82);
	border-radius: 0;
	padding: 0.6rem 1.25rem;
	font-size: 0.92rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	transition: background-color var(--rv-transition), color var(--rv-transition);
}
.rv-sidebar .menu-list a:hover {
	background: rgba(255, 255, 255, 0.07);
	color: #fff;
}
.rv-sidebar .menu-list a.is-active {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--rv-accent);
}
.rv-sidebar .menu-list a.is-active .rv-nav-icon,
.rv-sidebar .menu-list a:hover .rv-nav-icon {
	opacity: 1;
}
.rv-sidebar .rv-sidebar-footer {
	margin-top: auto;
	padding: 1.25rem 1.25rem;
	font-size: 0.72rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.38);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.rv-sidebar .rv-sidebar-tenant {
	color: rgba(255, 255, 255, 0.6);
	font-weight: 600;
}
.rv-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.rv-topbar {
	background: var(--rv-surface);
	border-bottom: 1px solid var(--rv-border);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	position: sticky;
	top: 0;
	z-index: 30;
}
.rv-topbar .rv-search {
	flex: 1;
	max-width: 420px;
}
.rv-topbar .rv-search .input {
	background: #F1F5F9;
	border-color: transparent;
	box-shadow: none;
	border-radius: var(--rv-radius);
}
.rv-topbar .rv-search .input::placeholder {
	color: #94A3B8;
}
.rv-topbar .rv-search .input:hover {
	background: #E9EEF5;
}
.rv-topbar .rv-search .input:focus {
	background: var(--rv-surface);
	border-color: var(--rv-primary);
	box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.rv-content {
	padding: 2rem 2rem 3rem;
	flex: 1;
}
@media screen and (max-width: 768px) {
	.rv-content {
		padding: 1.25rem 1rem 2rem;
	}
}

/* ---------- Cartes KPI ---------- */
.rv-kpi {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-lg);
	padding: 1.25rem 1.5rem;
	height: 100%;
	box-shadow: var(--rv-shadow-sm);
}
.rv-kpi .rv-kpi-label {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #64748B;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.rv-kpi .rv-kpi-label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--rv-primary);
	flex-shrink: 0;
}
.rv-kpi:has(.rv-kpi-value.is-positive) .rv-kpi-label::before {
	background: var(--rv-success);
}
.rv-kpi:has(.rv-kpi-value.is-accent) .rv-kpi-label::before {
	background: var(--rv-accent);
}
.rv-kpi .rv-kpi-value {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--rv-text);
	font-variant-numeric: tabular-nums;
}
.rv-kpi .rv-kpi-value.is-positive {
	color: var(--rv-success);
}
.rv-kpi .rv-kpi-value.is-accent {
	color: var(--rv-accent);
}
.rv-kpi .rv-kpi-sub {
	font-size: 0.8rem;
	color: var(--rv-text-soft);
	margin-top: 0.25rem;
}

/* ---------- Cartes / tables ---------- */
.rv-card {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: var(--rv-radius-lg);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	box-shadow: var(--rv-shadow-sm);
}
.rv-card .rv-card-title {
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--rv-text);
	margin-bottom: 1rem;
}
.table.rv-table {
	background: transparent;
}
.table.rv-table th {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #475569;
	border-color: var(--rv-border);
	padding-bottom: 0.6rem;
	white-space: nowrap;
}
.table.rv-table td {
	vertical-align: middle;
	border-color: var(--rv-border);
	font-size: 0.92rem;
	padding-top: 0.65rem;
	padding-bottom: 0.65rem;
}
.table.rv-table tbody tr {
	transition: background-color var(--rv-transition);
}
.table.rv-table tbody tr:hover {
	background: #F8FAFC;
}
.table.rv-table tr.is-clickable:hover {
	background: var(--rv-primary-soft);
	cursor: pointer;
}

/* ---------- Badges de statut de révision ---------- */
.rv-status {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
}
.rv-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
/* Contrastes AA : texte foncé sur fonds pastel */
.rv-status.is-upcoming { background: #F1F5F9; color: #475569; }
.rv-status.is-waiting  { background: #FEF3C7; color: #92400E; }
.rv-status.is-ready    { background: #DBEAFE; color: #1D4ED8; }
.rv-status.is-approved { background: #E0E7FF; color: #4338CA; }
.rv-status.is-notified { background: #F3E8FF; color: #7E22CE; }
.rv-status.is-applied  { background: #DCFCE7; color: #15803D; }
.rv-status.is-skipped  { background: #F1F5F9; color: #64748B; }
.rv-status.is-disputed { background: #FEE2E2; color: #B91C1C; }

/* ---------- Deltas ---------- */
.rv-delta-up { color: var(--rv-success); font-weight: 600; }
.rv-delta-down { color: var(--rv-danger); font-weight: 600; }

/* ---------- Boutons ---------- */
.button {
	font-weight: 600;
}
.button.is-primary:not(.is-outlined) {
	background-color: var(--rv-primary);
	border-color: var(--rv-primary);
	color: #fff;
	box-shadow: 0 1px 2px rgba(15, 118, 110, 0.25);
}
.button.is-primary:not(.is-outlined):hover {
	background-color: var(--rv-primary-dark);
	border-color: var(--rv-primary-dark);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(15, 118, 110, 0.3);
}
.button.is-primary.is-outlined {
	background-color: transparent;
	border-color: var(--rv-primary);
	color: var(--rv-primary);
}
.button.is-primary.is-outlined:hover {
	background-color: var(--rv-primary);
	border-color: var(--rv-primary);
	color: #fff;
	transform: translateY(-1px);
}
.button.is-accent {
	background-color: var(--rv-accent);
	border-color: transparent;
	color: #fff;
	box-shadow: 0 1px 2px rgba(245, 158, 11, 0.3);
}
.button.is-accent:hover {
	background-color: #D97706;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}
.button.is-accent:focus,
.button.is-accent:focus:not(:active) {
	color: #fff;
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
.button:not(.is-static):active {
	transform: translateY(0) scale(0.98);
}

/* ---------- Jauge de validation du builder de formule ---------- */
.rv-gauge {
	height: 10px;
	border-radius: 999px;
	background: var(--rv-border);
	overflow: hidden;
}
.rv-gauge .rv-gauge-fill {
	height: 100%;
	border-radius: 999px;
	background: var(--rv-accent);
	transition: width 300ms var(--rv-ease-out), background-color 250ms ease;
}
.rv-gauge .rv-gauge-fill.is-valid {
	background: var(--rv-success);
}
.rv-gauge .rv-gauge-fill.is-over {
	background: var(--rv-danger);
}

/* ---------- Notifications / toasts ---------- */
.rv-toasts {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 100;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 380px;
}

/* ---------- Cloche d'alertes ---------- */
.rv-bell {
	position: relative;
}
.rv-bell .rv-bell-count {
	position: absolute;
	top: -6px;
	right: -6px;
	background: var(--rv-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	min-width: 18px;
	height: 18px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 4px;
}

/* ---------- Pages auth ---------- */
.rv-auth-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		linear-gradient(rgba(15, 118, 110, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 118, 110, 0.035) 1px, transparent 1px),
		radial-gradient(900px 480px at 80% -10%, rgba(20, 184, 166, 0.12), transparent 60%),
		linear-gradient(160deg, #F8FAFC 0%, #F0FDFA 100%);
	background-size: 44px 44px, 44px 44px, auto, auto;
	padding: 2rem 1rem;
}
.rv-auth-card {
	background: var(--rv-surface);
	border: 1px solid var(--rv-border);
	border-radius: 16px;
	box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 20px 50px rgba(15, 118, 110, 0.12);
	padding: 2.5rem;
	width: 100%;
	max-width: 440px;
}
.rv-auth-logo {
	font-size: 2.1rem !important;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--rv-primary-dark);
}

/* ---------- Responsive (lecture mobile OK, saisie desktop-first) ---------- */
@media screen and (max-width: 1023px) {
	.rv-sidebar {
		position: fixed;
		left: -240px;
		z-index: 40;
		transition: left 0.25s ease;
	}
	.rv-sidebar.is-open {
		left: 0;
	}
	.rv-shell.is-sidebar-open::after {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(15, 23, 42, 0.4);
		z-index: 35;
	}
}

/* ---------- Micro-interactions & squelettes de chargement ---------- */
input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--rv-primary);
}

/* Apparition sobre du contenu chargé en AJAX (une seule fois, ajoutée par le JS) */
.rv-fade-in {
	animation: rv-fade-in 200ms var(--rv-ease-out) both;
}
@keyframes rv-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* Squelettes : shimmer subtil pendant le chargement des tables et KPI */
.rv-skeleton {
	display: inline-block;
	height: 0.85em;
	width: 100%;
	max-width: 100%;
	border-radius: 6px;
	background: linear-gradient(90deg, #EEF2F7 25%, #F6F8FB 45%, #EEF2F7 65%);
	background-size: 200% 100%;
	animation: rv-shimmer 1.4s linear infinite;
	vertical-align: middle;
}
@keyframes rv-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}
.rv-skeleton.is-w-25 { width: 25%; }
.rv-skeleton.is-w-40 { width: 40%; }
.rv-skeleton.is-w-50 { width: 50%; }
.rv-skeleton.is-w-60 { width: 60%; }
.rv-skeleton.is-w-75 { width: 75%; }
.rv-skeleton.is-w-85 { width: 85%; }
.rv-skeleton-row td .rv-skeleton { width: 75%; }
.rv-skeleton-row td:nth-child(even) .rv-skeleton { width: 55%; }
.table.rv-table tbody tr.rv-skeleton-row:hover { background: transparent; }
.rv-kpi-value .rv-skeleton { height: 1.4rem; }

/* Micro-« pop » ponctuel (jauge valide, compteur d'alertes) */
.rv-pop {
	animation: rv-pop 250ms var(--rv-ease-out);
}
@keyframes rv-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.04); }
	100% { transform: scale(1); }
}
.rv-bell-count.rv-pop {
	animation: rv-pop-badge 250ms var(--rv-ease-out);
}
@keyframes rv-pop-badge {
	0% { transform: scale(1); }
	45% { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* Dropdowns topbar : fond blanc Bulma conservé, apparition sobre depuis le déclencheur */
.rv-topbar .dropdown-content {
	border: 1px solid var(--rv-border);
	box-shadow: var(--rv-shadow-md);
}
.rv-topbar .dropdown.is-active .dropdown-menu {
	animation: rv-dropdown-in 160ms var(--rv-ease-out);
	transform-origin: top right;
}
@keyframes rv-dropdown-in {
	from { opacity: 0; transform: translateY(-4px) scale(0.98); }
	to { opacity: 1; transform: none; }
}
.rv-topbar a.dropdown-item {
	transition: background-color var(--rv-transition), color var(--rv-transition);
}
.rv-topbar a.dropdown-item:hover {
	background: var(--rv-primary-soft);
	color: var(--rv-primary-dark);
}

/* Focus clavier lisible sur le fond teal de la sidebar */
.rv-sidebar :focus-visible {
	outline-color: #fff;
}

/* ---------- Impression ---------- */
@media print {
	.rv-sidebar, .rv-topbar, .rv-no-print {
		display: none !important;
	}
	.rv-content {
		padding: 0;
	}
}

/* ---------- Logos image (SVG officiels) ---------- */
.rv-logo img {
	height: 34px;
	width: auto;
	display: block;
}
.rv-auth-logo img {
	height: 44px;
	width: auto;
	display: inline-block;
}