/* Accents du tableau de bord (admin.html) uniquement — thème clair d'origine (fond blanc,
style.css), sans surcharge de fond ni de texte. On joue uniquement sur les couleurs de
police pour un rendu professionnel : pourcentages, lignes de total, statuts de chambre.
Ce fichier ne modifie ni le balisage ni la logique JS. */
/* Pourcentages à l'intérieur des tableaux (1, 2, 4, 10) : couleur distincte de la valeur
principale, comme demandé. */
.pct-value {
color: #8a6a26;
font-weight: 600;
}
/* Ligne "Total Général" : mise en avant en couleur accent, cohérent avec les libellés dorés
utilisés ailleurs sur le site. */
tr.row-total td {
color: var(--accent);
font-weight: 700;
}
tr.row-total td:first-child { color: var(--primary); }
/* Cellule "taux élevé" dans le tableau Indicateurs de contrôle (tableau 4) : mise en évidence
en rouge. NE PAS utiliser la classe "error-text" ici (voir style.css) : celle-ci a
"display: none" par défaut car elle sert normalement aux messages de validation de
formulaire cachés, ce qui rendait la cellule invisible dès que le taux dépassait le seuil. */
.kpi-taux-eleve {
color: var(--danger);
font-weight: 700;
}
/* Statuts de chambre, colorés selon leur état (cohérent avec le donut "Indicateur
hébergement" : occupé = rouge, réservé = or, libre = vert). */
.badge-occupee { background: rgba(178,59,59,0.12); color: #b23b3b; font-weight: 600; }
.badge-reservee { background: rgba(201,162,75,0.18); color: #8a6a26; font-weight: 600; }
.badge-libre { background: rgba(47,122,103,0.14); color: #1d4e42; font-weight: 600; }
/* Centrage des données dans tous les tableaux du tableau de bord, comme demandé : la première
colonne (libellé du secteur / nom / date) reste alignée à gauche pour rester lisible, les
colonnes de valeurs (montants, pourcentages, statuts...) sont centrées. */
#repartition-table th:not(:first-child), #repartition-table td:not(:first-child),
#ca-table th:not(:first-child), #ca-table td:not(:first-child),
#resultat-net-table th:not(:first-child), #resultat-net-table td:not(:first-child),
#disponibilite-table th:not(:first-child), #disponibilite-table td:not(:first-child),
#enregistrement-table th:not(:first-child), #enregistrement-table td:not(:first-child),
#controle-table th:not(:first-child), #controle-table td:not(:first-child),
#remises-table th:not(:first-child), #remises-table td:not(:first-child),
#chambres-table th:not(:first-child), #chambres-table td:not(:first-child),
#top-clients-table th:not(:first-child), #top-clients-table td:not(:first-child),
#remises-agents-table th:not(:first-child), #remises-agents-table td:not(:first-child),
#audit-table th:not(:first-child), #audit-table td:not(:first-child),
#tx-table th:not(:first-child), #tx-table td:not(:first-child),
#reliquats-table th:not(:first-child), #reliquats-table td:not(:first-child),
#causes-decaissement-table th:not(:first-child), #causes-decaissement-table td:not(:first-child),
#suivi-caisse-table th:not(:first-child), #suivi-caisse-table td:not(:first-child),
#suivi-banque-table th:not(:first-child), #suivi-banque-table td:not(:first-child),
#suivi-recap-table th:not(:first-child), #suivi-recap-table td:not(:first-child) {
text-align: center;
}
/* Mode "paysage" : le tableau de bord utilise davantage la largeur de l'écran pour que les
tableaux (notamment 4 et 12, qui ont beaucoup de colonnes) soient plus lisibles. Ne s'applique
qu'à admin.html (classe posée sur le body) — la page de saisie (index.html) garde sa largeur
d'origine, plus adaptée à un formulaire. */
body.admin-dashboard main {
max-width: 1400px;
}
/* Ligne "Total Général" : fond légèrement teinté pour qu'elle ressorte des lignes zébrées. */
tr.row-total {
background: #f2ead9 !important;
}
/* Section récapitulatif (analyse automatique + résumé exécutif), calculée à partir des
données réelles de la période sélectionnée (voir renderRecap dans admin.js). */
.recap-card h2 { display: flex; align-items: center; gap: 8px; }
.recap-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.recap-list li {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 12px;
background: #f7faf8;
border-radius: 8px;
border-left: 3px solid var(--border);
}
.recap-list li.recap-ok { border-left-color: #1f8a4c; }
.recap-list li.recap-warn { border-left-color: var(--accent); }
.recap-list li.recap-alert { border-left-color: var(--danger); }
.recap-list .recap-icon { flex-shrink: 0; }
.recap-list .recap-text strong { color: var(--primary); }
.recap-summary-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 14px;
}
.recap-summary-grid .recap-item {
background: #f7faf8;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
}
.recap-summary-grid .recap-item .recap-label {
font-size: 0.76rem;
color: var(--muted);
margin-bottom: 4px;
}
.recap-summary-grid .recap-item .recap-value {
font-size: 1.1rem;
font-weight: 700;
color: var(--primary);
}
.recap-summary-grid .recap-item.recap-danger .recap-value { color: var(--danger); }
.recap-summary-grid .recap-item.recap-success .recap-value { color: #1f8a4c; }
/* Messages de confirmation (ex. "Compte créé.", "Modifications enregistrées.") : la classe
"error-text" existante affiche déjà les erreurs en rouge (voir style.css) ; celle-ci affiche
les confirmations en vert, utilisée par config-admin.js et users-admin.js. */
.success-text {
color: #1f8a4c;
font-size: 0.85rem;
font-weight: 600;
margin: 6px 0;
}
/* Section Comptes utilisateurs (Paramètres, rôle admin uniquement) : réutilise le style de
tableau standard, avec un peu d'air avant le formulaire "Ajouter un utilisateur". */
#users-admin-card h3 {
margin-top: 22px;
}
/* ---------------------------------------------------------------------------------------------
Rendu "premium" du tableau de bord (admin.html uniquement, via body.admin-dashboard) :
relief et profondeur plus marqués sur les cartes et cadres-clés, sans toucher au balisage
ni à la logique JS — uniquement des ajustements visuels dans ce fichier d'accents dédié.
--------------------------------------------------------------------------------------------- */
/* Cartes : ombre en deux couches (portée large + contact) pour un effet de relief plus net
que l'ombre plate d'origine, plus un fin liseré dégradé en haut de chaque carte. Léger
soulèvement au survol pour renforcer la sensation de profondeur. */
body.admin-dashboard .card {
position: relative;
overflow: hidden;
border-color: rgba(29, 78, 66, 0.10);
box-shadow:
0 14px 28px -16px rgba(29, 78, 66, 0.22),
0 3px 8px rgba(29, 78, 66, 0.08);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
body.admin-dashboard .card::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary-light), var(--accent));
opacity: 0.85;
}
body.admin-dashboard .card:hover {
box-shadow:
0 20px 36px -18px rgba(29, 78, 66, 0.28),
0 5px 12px rgba(29, 78, 66, 0.10);
transform: translateY(-2px);
}
@media print {
body.admin-dashboard .card { box-shadow: none !important; transform: none !important; }
body.admin-dashboard .card::before { display: none; }
}
/* Cartes-chiffres (Indicateur hébergement, résumé exécutif) : léger dégradé de fond pour
donner du volume à la valeur mise en avant. */
body.admin-dashboard .stat-card,
body.admin-dashboard .recap-summary-grid .recap-item {
background: linear-gradient(160deg, #ffffff 0%, #f5f9f7 100%);
box-shadow: 0 6px 14px -9px rgba(29, 78, 66, 0.20);
}
/* Liste d'analyse et recommandations : même logique de relief doux sur chaque ligne. */
body.admin-dashboard .recap-list li {
background: linear-gradient(160deg, #ffffff 0%, #f7faf8 100%);
box-shadow: 0 3px 8px -4px rgba(29, 78, 66, 0.14);
}
/* Bandeau supérieur : fin liseré or en pied de bandeau, cohérent avec l'accent des cartes,
pour marquer la transition avec le contenu. */
body.admin-dashboard header.topbar {
box-shadow:
0 2px 10px rgba(0, 0, 0, 0.12),
0 3px 0 var(--accent);
}