/* =====================================================================================
   THÈME « SaaS ERP — LUMIÈRE » (couche 2, à charger APRÈS theme-premium.css)
   -------------------------------------------------------------------------------------
   Aspect ERP SaaS professionnel : gris neutres, menu clair, bords nets, ombres discrètes,
   boutons plats, titres sobres, tableaux épurés.
   • 100 % visuel : aucune donnée, aucune logique, aucun fichier PHP concerné.
   • Votre couleur de marque (--orange) reste l'unique couleur d'accent.
   • Respecte la « Personnalisation visuelle » (couleur, police, arrondis, couleur du menu) :
     ces réglages, posés par l'application sur la page, restent toujours prioritaires.
   • Respecte le mode sombre (couleurs calculées à partir des variables du thème).
   • Exclusivement à l'écran : factures, reçus et bons imprimés inchangés.
   • RETOUR ARRIÈRE : supprimer la ligne <link ... theme-saas.css> de index.html et login.html
     rétablit le thème Premium ; supprimer aussi celle de theme-premium.css rétablit l'origine.
   ===================================================================================== */

/* ---- Valeurs par défaut posées sur la racine : les réglages de personnalisation les remplacent ---- */
/* Variables du thème : écran uniquement. À l'impression, les documents gardent leurs couleurs et polices d'origine. */
@media screen {
:root {
  --bg: #F5F6F8;
  --surface: #FFFFFF;
  --border: #E3E6EB;
  --ink: #0F172A;
  --ink-soft: #64748B;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(15, 23, 42, .05);
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
/* Menu clair : ses couleurs ne s'appliquent QUE si le menu n'a pas été personnalisé (repère posé par l'application).
   Si un fond ou un texte de menu a été choisi, ils gardent leurs couleurs d'origine, lisibles. */
html:not([data-menu-perso]) body:not(.dark-mode) {
  --sidebar-bg: #FFFFFF;
  --sidebar-text: #475467;
  --sidebar-text-solid: #101828;
}
body {
  --pm-shadow-1: 0 1px 2px rgba(15, 23, 42, .04);
  --pm-shadow-2: 0 4px 12px rgba(15, 23, 42, .07);
  --pm-shadow-3: 0 16px 40px rgba(15, 23, 42, .16);
  /* Teintes neutres calculées : s'adaptent seules au mode clair comme au mode sombre */
  --sx-hover: color-mix(in srgb, var(--ink) 4%, var(--surface));
  --sx-line: color-mix(in srgb, var(--ink) 8%, var(--surface));
  --sx-field: color-mix(in srgb, var(--ink) 16%, var(--surface));
  --sx-field-hover: color-mix(in srgb, var(--ink) 28%, var(--surface));
}

/* Mode sombre : le menu retrouve son texte clair (les valeurs par défaut ci-dessus sont celles du menu clair) */
body.dark-mode {
  --sidebar-text: rgba(255, 255, 255, .82);
  --sidebar-text-solid: #FFFFFF;
}
}

@media screen {

/* ================================ TITRES DE PAGE ================================ */
.view-header h1 { font-size: 22px; font-weight: 650; letter-spacing: -.015em; }
.view-header h1::after { display: none; }
.view-header p { font-size: 13px; margin-top: 2px; }

/* ===================================== BOUTONS ===================================== */
body .btn { font-weight: 600; font-size: 13px; letter-spacing: 0; }
body .btn-primary {
  background: var(--orange);
  border: 1px solid color-mix(in srgb, var(--orange) 82%, #000);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .14);
}
body .btn-primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--orange) 92%, #000);
  transform: none;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .22);
}
body .btn-ghost, body .btn-export {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--sx-field);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}
body .btn-ghost:hover:not(:disabled), body .btn-export:hover:not(:disabled) {
  background: var(--sx-hover); border-color: var(--sx-field-hover); color: var(--ink);
  transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}
body #btn-creation-rapide {
  background: var(--orange) !important;
  border: 1px solid color-mix(in srgb, var(--orange) 82%, #000) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .14) !important;
}
body #btn-creation-rapide:hover { transform: none; }
body #btn-retour-galerie { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
body #btn-retour-galerie:hover { transform: none; }

/* ==================================== CHAMPS ====================================== */
body :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea) { border-color: var(--sx-field); }
body :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea):hover:not(:disabled):not(:focus) { border-color: var(--sx-field-hover); }
body :is(.main, .modal, .toolbar, .panel) :is(input, select, textarea):focus { border-color: var(--orange); }
body #global-search-input { box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
body .global-search-wrap { background: color-mix(in srgb, var(--bg) 88%, transparent); }

/* ============================ CARTES ET PANNEAUX ================================== */
body .panel, body .table-wrap, body .kpi-card { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body .panel:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body .kpi-card:hover { transform: none; box-shadow: 0 4px 12px rgba(15, 23, 42, .07); }

/* ==================================== TABLEAUX ==================================== */
body .data-table th {
  background: color-mix(in srgb, var(--ink) 4%, var(--surface));
  color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .035em;
  border-bottom: 1px solid var(--border);
}
body .data-table td { border-top: 1px solid var(--sx-line); }
body .data-table tbody tr:nth-child(even), body .data-table tbody tr:nth-child(even) > td { background: transparent; }
body .data-table tbody tr:hover > td { background: var(--sx-hover); }
body .data-table td:first-child { color: var(--ink); }

/* Pastilles de statut : plus sobres */
body .status-pill { border: none; font-size: 11.5px; font-weight: 600; padding: 3px 9px; }

/* ===================================== FENÊTRES ==================================== */
body .modal { border-radius: 14px; }
body .modal-header { background: var(--surface); }
body .modal-footer { background: color-mix(in srgb, var(--ink) 3%, var(--surface)); }
body .modal-overlay { background: rgba(15, 23, 42, .5); }

/* ============================== ACCUEIL EN GALERIE ================================ */
body .galerie-accueil-fond { display: none; }
body .galerie-accueil-kpi::before { display: none; }
body .galerie-accueil-kpi { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body .galerie-accueil-kpi .valeur { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
body .galerie-accueil-kpi .label { font-size: 12px; font-weight: 500; }
body .galerie-accueil-tuile { box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
body .galerie-accueil-tuile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, .08); }
body .galerie-accueil-salutation, body .galerie-accueil-titre { font-weight: 700; letter-spacing: -.03em; }

/* ============ MENU LATÉRAL CLAIR — mode clair, sans couleur de menu personnalisée ============ */
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar { box-shadow: none; border-right: 1px solid var(--border); color: #101828; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar::before { display: none; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar .brand-mark { background: var(--orange); color: #fff; }
html:not([data-menu-perso]) body:not(.dark-mode) :is(.nav-item, .nav-group-toggle):not(.active):hover { background: #F2F4F7; color: #101828; transform: none; }
html:not([data-menu-perso]) body:not(.dark-mode) :is(.nav-item, .nav-group-toggle).active {
  background: color-mix(in srgb, var(--orange) 11%, #fff); color: var(--orange-dark); font-weight: 600;
  border-left-color: transparent; box-shadow: none;
}
html:not([data-menu-perso]) body:not(.dark-mode) .nav-submenu { border-left-color: var(--border); }
html:not([data-menu-perso]) body:not(.dark-mode) :is(.nav-section-label, .nav-mega-titre) { color: #667085; }
html:not([data-menu-perso]) body:not(.dark-mode) .menu-search-wrap { background: #F2F4F7; border-color: var(--border); }
html:not([data-menu-perso]) body:not(.dark-mode) .menu-search-wrap svg { color: #667085; }
html:not([data-menu-perso]) body:not(.dark-mode) .menu-search-wrap input { color: #101828; }
html:not([data-menu-perso]) body:not(.dark-mode) .menu-search-wrap input::placeholder { color: #7C8798; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar .user-menu { background: #F8FAFC; border: 1px solid var(--border); margin-top: 10px; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar .user-menu * { color: #344054; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar .user-menu button#btn-logout { background: #EAECF0; color: #344054; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar-avatar { background: #E4E7EC; border-color: var(--border); color: #344054; }
html:not([data-menu-perso]) body:not(.dark-mode) .sidebar-close { background: #F2F4F7; color: #344054; }
html:not([data-menu-perso]) body:not(.dark-mode) .btn-collapse-sidebar { border-color: var(--border); box-shadow: 0 1px 2px rgba(15, 23, 42, .1); }

/* ====== MENU PERSONNALISÉ (fond et/ou texte choisis dans les paramètres) ======
   Certains éléments avaient un blanc codé en dur : ils suivent maintenant la couleur de texte choisie,
   pour rester lisibles sur un menu clair comme sur un menu foncé. */
html[data-menu-perso] body:not(.dark-mode) :is(.nav-section-label, .nav-mega-titre) { color: var(--sidebar-text); opacity: .75; }
html[data-menu-perso] body:not(.dark-mode) .menu-search-wrap svg { color: var(--sidebar-text); }
html[data-menu-perso] body:not(.dark-mode) .menu-search-wrap input { color: var(--sidebar-text-solid); }
html[data-menu-perso] body:not(.dark-mode) .menu-search-wrap input::placeholder { color: var(--sidebar-text); opacity: .7; }

/* Icônes du menu sans couleur déclarée (ex. « Tableau de bord ») : elles s'affichaient en noir quel que soit le menu */
.sidebar .nav-item svg path:not([fill]):not([stroke]) { fill: currentColor; }

/* En-tête mobile : blanc avec filet, cohérent avec le menu clair */
html:not([data-menu-perso]) body:not(.dark-mode) .mobile-topbar { background: #fff; color: #101828; border-bottom: 1px solid var(--border); box-shadow: none; }
html:not([data-menu-perso]) body:not(.dark-mode) .mobile-menu-btn { background: #F2F4F7; }
html:not([data-menu-perso]) body:not(.dark-mode) .mobile-topbar .brand-mark:not(:has(img)) { background: var(--orange); color: #fff; }
html:not([data-menu-perso]) body:not(.dark-mode) .mobile-menu-btn span { background: #344054; }

/* ===================== MODE SOMBRE : menu plat, état actif discret ===================== */
body.dark-mode .sidebar { box-shadow: none; border-right: 1px solid rgba(255, 255, 255, .05); }
body.dark-mode .sidebar::before { display: none; }
body.dark-mode .nav-item:not(.active):hover, body.dark-mode .nav-group-toggle:not(.active):hover { background: rgba(255, 255, 255, .06); transform: none; }
body.dark-mode .nav-item.active { background: rgba(255, 255, 255, .09); color: #fff; font-weight: 600; border-left-color: transparent; box-shadow: inset 3px 0 0 var(--orange); }
body.dark-mode .nav-group-toggle.active { background: rgba(255, 255, 255, .06); color: #fff; box-shadow: none; }

}