/* =====================================================================
   REVENDO — Charte graphique
   Chargé en dernier (après core.css / style.css / Bootstrap 5 du login).
   Toute couleur de l'application doit venir d'une variable ci-dessous :
   ne jamais coder une couleur en dur dans une vue.
   ===================================================================== */

:root {
	--ink: #15202b;
	--brand: #e8572a;
	--brand-dark: #c2410c;
	--brand-light: #ffe5da;

	--bg: #f4f5f7;
	--surface: #ffffff;
	--border: #e5e7eb;
	--muted: #4a5562;

	--success: #166534;
	--success-bg: #dcfce7;
	--warning: #92400e;
	--warning-bg: #fef3c7;
	--danger: #b91c1c;
	--danger-bg: #fee2e2;
	--info: #1d4ed8;
	--info-bg: #dbeafe;

	--radius-card: 12px;
	--radius-ctrl: 8px;
	--shadow-card: 0 1px 3px rgba(21, 32, 43, 0.08);

	--font-title: 'Outfit', sans-serif;
	--font-body: 'Inter', sans-serif;

	/* Variables Bootstrap 5 (login.blade.php) : mêmes valeurs, autre convention de nommage */
	--bs-primary: var(--brand);
	--bs-primary-rgb: 232, 87, 42;
	--bs-body-color: var(--ink);
	--bs-body-bg: var(--bg);
	--bs-border-color: var(--border);
	--bs-link-color: var(--brand-dark);
	--bs-link-hover-color: var(--brand);
}

/* ---------------------------------------------------------------------
   Typographie
   --------------------------------------------------------------------- */

body {
	font-family: var(--font-body);
	color: var(--ink);
	background: var(--bg);
}

h1, h2, h3, h4, h5, h6,
.weight-600, .weight-700 {
	font-family: var(--font-title);
	color: var(--ink);
}

a {
	color: var(--brand-dark);
}
a:hover, a:focus {
	color: var(--brand);
}

/* Le template utilise du bleu (#1b00ff) pour les sous-titres de carte et
   certains liens : jamais de bleu dans la charte, toujours encre ou mandarine. */
.text-blue {
	color: var(--ink) !important;
}
.text-primary {
	color: var(--brand-dark) !important;
}
a.text-primary:hover, a.text-primary:focus {
	color: var(--brand) !important;
}
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--info) !important; }
.text-secondary { color: var(--muted) !important; }

/* Les chiffres du dashboard (voir Étape 3) utiliseront .stat-number : Outfit 700, grande taille */
.stat-number {
	font-family: var(--font-title);
	font-weight: 700;
}

/* ---------------------------------------------------------------------
   Boutons
   --------------------------------------------------------------------- */

.btn {
	border-radius: var(--radius-ctrl);
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
}

.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
	background-color: var(--brand);
	border-color: var(--brand);
	color: var(--ink);
	font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--brand-dark) !important;
	border-color: var(--brand-dark) !important;
	color: #fff !important;
}

.btn-secondary,
.btn-outline-primary {
	background-color: var(--surface);
	border-color: var(--border);
	color: var(--ink);
	font-weight: 500;
}
.btn-secondary:hover, .btn-secondary:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
	background-color: var(--bg) !important;
	border-color: var(--border) !important;
	color: var(--ink) !important;
}

.btn-danger {
	background-color: var(--danger);
	border-color: var(--danger);
	color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
	background-color: #991b1b !important;
	border-color: #991b1b !important;
}

.btn-success {
	background-color: var(--success);
	border-color: var(--success);
	color: #fff;
}
.btn-success:hover, .btn-success:focus {
	background-color: #14532d !important;
	border-color: #14532d !important;
}

.btn-warning {
	background-color: var(--warning-bg);
	border-color: var(--warning);
	color: var(--warning);
}
.btn-warning:hover, .btn-warning:focus {
	background-color: var(--warning) !important;
	border-color: var(--warning) !important;
	color: #fff !important;
}

.btn-info {
	background-color: var(--info-bg);
	border-color: var(--info);
	color: var(--info);
}

/* ---------------------------------------------------------------------
   Badges / statuts (badge-* = Bootstrap 4, bg-* = usages Bootstrap 5 déjà
   présents dans certaines vues : les deux conventions pointent vers les
   mêmes couleurs tant que le markup n'est pas harmonisé, écran par écran)
   --------------------------------------------------------------------- */

.badge {
	font-family: var(--font-body);
	font-weight: 600;
	border-radius: 999px;
}

.badge-success, .bg-success {
	background-color: var(--success-bg) !important;
	color: var(--success) !important;
}
.badge-warning, .bg-warning {
	background-color: var(--warning-bg) !important;
	color: var(--warning) !important;
}
.badge-danger, .bg-danger {
	background-color: var(--danger-bg) !important;
	color: var(--danger) !important;
}
.badge-info, .bg-info {
	background-color: var(--info-bg) !important;
	color: var(--info) !important;
}
.badge-primary, .bg-primary {
	background-color: var(--brand-light) !important;
	color: var(--brand-dark) !important;
}
.badge-secondary, .bg-secondary,
.badge-dark, .bg-dark {
	background-color: var(--bg) !important;
	color: var(--ink) !important;
}

/* ---------------------------------------------------------------------
   Cartes, modales, formulaires
   --------------------------------------------------------------------- */

.card, .card-box, .modal-content {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
}

.form-control, .custom-select, .select2-selection {
	border-radius: var(--radius-ctrl);
	border-color: var(--border);
	min-height: 40px;
	font-family: var(--font-body);
}
.form-control:focus {
	border-color: var(--brand);
	box-shadow: 0 0 0 0.2rem var(--brand-light);
}

/* Cases à cocher, radios, interrupteurs : contour mandarine toujours,
   remplissage mandarine une fois coché. On ne touche pas aux états focus/clic
   (trop de règles concurrentes dans core.css + style.css, source d'instabilité). */
.custom-control-label::before {
	border-color: var(--brand) !important;
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
.custom-radio .custom-control-input:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
}

/* Select2 / bootstrap-select : option surlignée en bleu par défaut */
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--brand) !important;
	color: #fff !important;
}
.bootstrap-select .dropdown-menu li .dropdown-item.active,
.bootstrap-select .dropdown-menu li a:hover {
	background-color: var(--brand) !important;
	color: #fff !important;
}

label {
	color: var(--muted);
}

/* ---------------------------------------------------------------------
   Tableaux / DataTables
   --------------------------------------------------------------------- */

.table thead th {
	background-color: var(--bg);
	color: var(--muted);
	border-bottom: 1px solid var(--border);
	font-size: 0.78rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-weight: 600;
}
.table td, .table th {
	border-color: var(--border);
}
/* Supprime les lignes zébrées grises : séparation par bordure uniquement */
.table-striped tbody tr:nth-of-type(odd) {
	background-color: transparent;
}
.table-hover tbody tr:hover {
	background-color: var(--brand-light);
	opacity: 1;
}

.page-item.active .page-link,
.paginate_button.current {
	background-color: var(--brand) !important;
	border-color: var(--brand) !important;
	color: var(--ink) !important;
}
.page-link {
	color: var(--brand-dark);
	border-radius: var(--radius-ctrl);
}

/* ---------------------------------------------------------------------
   Barre latérale
   --------------------------------------------------------------------- */

/* La sidebar est toujours sombre : on neutralise le thème clair/sombre
   togglable du template (classe .sidebar-light ajoutée par défaut en JS,
   plus spécifique que .left-side-bar seul) avec !important. */
.left-side-bar,
.sidebar-light .left-side-bar {
	background-color: var(--ink) !important;
}
.sidebar-menu .dropdown-toggle,
.sidebar-menu .dropdown-toggle .micon,
.sidebar-light .sidebar-menu .dropdown-toggle,
.sidebar-light .sidebar-menu .dropdown-toggle .micon,
.sidebar-menu .submenu li a,
.sidebar-light .sidebar-menu .submenu li a {
	color: rgba(255, 255, 255, 0.8) !important;
}
.sidebar-menu .submenu,
.sidebar-light .sidebar-menu .submenu {
	background-color: rgba(255, 255, 255, 0.06) !important;
}
.sidebar-menu .dropdown-toggle:hover,
.sidebar-menu .show > .dropdown-toggle,
.sidebar-light .sidebar-menu .dropdown-toggle:hover,
.sidebar-light .sidebar-menu .show > .dropdown-toggle,
.sidebar-menu .submenu li a:hover,
.sidebar-light .sidebar-menu .submenu li a:hover {
	color: #fff !important;
	background-color: rgba(255, 255, 255, 0.1) !important;
}
.sidebar-menu .submenu li a.active,
.sidebar-light .sidebar-menu .submenu li a.active {
	color: #fff !important;
	background-color: var(--brand-dark) !important;
}
.sidebar-menu > ul > li > .dropdown-toggle.active,
.sidebar-light .sidebar-menu > ul > li > .dropdown-toggle.active {
	background-color: var(--brand-light) !important;
	color: var(--brand-dark) !important;
}
.sidebar-menu > ul > li > .dropdown-toggle.active .micon,
.sidebar-menu > ul > li > .dropdown-toggle.active .micon i {
	color: var(--brand-dark) !important;
}
.sidebar-menu .sidebar-small-cap,
.sidebar-light .sidebar-menu .sidebar-small-cap {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Anneau de focus bleu par défaut de Bootstrap sur .dropdown-toggle
   (sidebar, menu utilisateur) : recoloré en mandarine clair. */
.dropdown-toggle:focus {
	box-shadow: 0 0 0 0.2rem var(--brand-light) !important;
}

.header {
	background-color: var(--surface);
	border-bottom: 1px solid var(--border);
}

/* Espacement entre les items de menu, à la place des séparateurs
   horizontaux supprimés entre chaque entrée (trop de bruit visuel). */
.sidebar-menu > ul > li {
	margin-bottom: 4px;
}
.sidebar-menu .submenu li a {
	margin-bottom: 2px;
}

/* ---------------------------------------------------------------------
   Dashboard (resources/views/index.blade.php)
   --------------------------------------------------------------------- */

.dashboard-card,
.filter-card,
.popular-articles {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 24px;
	margin-bottom: 20px;
}
.dashboard-card {
	transition: box-shadow 0.2s ease;
}
.dashboard-card:hover {
	box-shadow: 0 4px 14px rgba(21, 32, 43, 0.12);
}

.stat-number {
	font-size: 2rem;
	margin: 0;
	color: var(--ink);
}
.stat-label {
	font-size: 0.95rem;
	color: var(--muted);
	margin: 4px 0 0;
}
.card-meta {
	display: block;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--muted);
	margin-top: 6px;
}
.unit-currency {
	font-size: 0.55em;
	font-weight: 500;
	opacity: 0.85;
	margin-left: 2px;
}

.stat-icon-wrap {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--brand-light);
	color: var(--brand-dark);
	font-size: 1.3rem;
	flex-shrink: 0;
}

/* Carte « Chiffre d'affaires » : seule exception à fond plein (encre) */
.dashboard-card.money {
	background-color: var(--ink);
	border-color: var(--ink);
}
.dashboard-card.money .stat-number {
	color: var(--brand);
}
.dashboard-card.money .stat-label,
.dashboard-card.money .card-meta {
	color: rgba(255, 255, 255, 0.75);
}
.dashboard-card.money .stat-icon-wrap {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--brand);
}

.article-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}
.article-item:last-child {
	border-bottom: none;
}

@media (max-width: 768px) {
	.stat-number { font-size: 1.6rem; }
	.dashboard-card { padding: 18px; }
}

/* ---------------------------------------------------------------------
   Page publique déposant : pas de sidebar (layouts/deposant.blade.php
   ajoute la classe .deposant-page sur <body>)
   --------------------------------------------------------------------- */

.deposant-page .main-container {
	padding: 16px;
}

/* ---------------------------------------------------------------------
   Page publique déposant (resources/views/pageDeposant.blade.php)
   --------------------------------------------------------------------- */

.deposant-header {
	background-color: var(--ink);
	color: #fff;
	padding: 24px 20px;
	border-radius: var(--radius-card);
}
.deposant-header-logo {
	display: block;
	height: 32px;
	width: auto;
}
.deposant-header h1 {
	color: #fff;
	font-size: 1.5rem;
}
.deposant-header p {
	color: rgba(255, 255, 255, 0.75);
	margin: 0;
}

.deposant-stat {
	background-color: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 16px 6px;
	text-align: center;
}
.deposant-stat-number {
	font-family: var(--font-title);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
}
.deposant-stat-label {
	font-size: 0.8rem;
	color: var(--muted);
}

.deposant-article-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}
.deposant-article-row:last-child {
	border-bottom: none;
}

.deposant-receivable {
	background-color: var(--brand-light);
	border-radius: var(--radius-card);
	padding: 20px;
	text-align: center;
}
.deposant-receivable-label {
	color: var(--brand-dark);
	font-weight: 600;
	margin-bottom: 4px;
}
.deposant-receivable-amount {
	font-family: var(--font-title);
	font-size: 1.8rem;
	font-weight: 700;
	color: var(--brand-dark);
}

/* ---------------------------------------------------------------------
   Logo (sidebar) et écran de chargement (partials/preloader.blade.php)
   --------------------------------------------------------------------- */

.brand-logo img {
	display: block !important;
	height: 40px;
	width: auto;
	object-fit: contain;
}

#preloader-overlay {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	background: var(--surface);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
}
#preloader-overlay.fade-out {
	opacity: 0;
	transition: opacity 0.45s ease;
	pointer-events: none;
}
.preloader-content {
	text-align: center;
}
.preloader-content .brand {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.preloader-content .brand img {
	width: 200px;
	height: auto;
	object-fit: contain;
}
.preloader-content .spinner {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 5px solid var(--brand-light);
	border-top-color: var(--brand);
	animation: revendo-spin 1s linear infinite;
	margin: 0 auto 12px auto;
}
@keyframes revendo-spin {
	to { transform: rotate(360deg); }
}
.preloader-content .loader-message {
	color: var(--muted);
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   Pied de page toujours en bas (layouts/app.blade.php) : par défaut
   .footer-wrap suit juste le contenu, donc remonte avec lui sur une page
   courte et laisse un grand vide gris en dessous.
   --------------------------------------------------------------------- */

.main-container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.main-container .footer-wrap {
	margin-top: auto;
}

/* ---------------------------------------------------------------------
   Focus visible (contraste / accessibilité)
   --------------------------------------------------------------------- */

a:focus-visible, button:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
}