/*
 * FR Apex — surcharges mode clair pour le plugin FR Estimations Frontend
 * Ce fichier est chargé en complément du CSS du plugin.
 * Il suffit d'ajouter html.fr-light pour surcharger toutes les variables CSS.
 */

html.fr-light {
  /* Variables plugin */
  --bg:     #f0ece3;
  --panel:  #ffffff;
  --panel2: #f7f3ec;
  --text:   #1a1510;
  --muted:  #6b5c40;
  --line:   #ddd5c4;
  --accent: #9a742e;
  --accent2:#7a5820;
  --gold:   #8c6a34;
}

/* ── Body & fond général ──────────────────── */
html.fr-light body {
  background: linear-gradient(180deg, #f0ece3, #ece6da);
  color: var(--text);
}

/* ── Sidebar ──────────────────────────────── */
html.fr-light .frf-sidebar {
  background: rgba(255, 252, 246, .98);
  border-right-color: rgba(139, 103, 52, .16);
}
html.fr-light .frf-brand {
  border-bottom-color: rgba(139, 103, 52, .14);
}
html.fr-light .frf-nav-link {
  color: #6b5c40;
}
html.fr-light .frf-nav-link:hover {
  background: rgba(139, 103, 52, .10);
  color: #1a1510;
  border-color: rgba(139, 103, 52, .20);
}
html.fr-light .frf-nav-link.is-active {
  background: rgba(139, 103, 52, .14);
  color: #1a1510;
  border-color: rgba(139, 103, 52, .28);
}
html.fr-light .frf-subnav {
  border-left-color: rgba(139, 103, 52, .20);
}
html.fr-light .frf-subnav-link { color: #8a7455; }
html.fr-light .frf-subnav-link:hover,
html.fr-light .frf-subnav-link.is-active {
  background: rgba(139, 103, 52, .10);
  color: #1a1510;
}
html.fr-light .frf-nav-logout { color: rgba(139, 103, 52, .50); }

/* ── Overlay mobile ───────────────────────── */
html.fr-light body.frf-menu-open .frf-overlay {
  background: rgba(30, 20, 10, .38);
}

/* ── Main ─────────────────────────────────── */
html.fr-light .frf-topbar-title p { color: var(--muted); }

/* ── Cards & panels ───────────────────────── */
html.fr-light .frf-card,
html.fr-light .frf-panel {
  background: #ffffff;
  border-color: rgba(139, 103, 52, .14);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .07);
}
html.fr-light .frf-kpi { color: var(--accent); }

/* ── Buttons ──────────────────────────────── */
html.fr-light .frf-btn {
  background: #f5f0e8;
  border-color: rgba(139, 103, 52, .22);
  color: #1a1510;
}
html.fr-light .frf-btn:hover {
  background: #ede8de;
  border-color: rgba(139, 103, 52, .38);
}
html.fr-light .frf-btn-primary {
  background: linear-gradient(135deg, #b8893a, #8c6a2a);
  color: #fff5e6;
  border: none;
}
html.fr-light .frf-btn-nouvelles {
  background: rgba(59, 130, 246, .08);
  border-color: rgba(59, 130, 246, .24);
  color: #1d4ed8;
}
html.fr-light .frf-btn-nouvelles:hover {
  background: rgba(59, 130, 246, .14);
}
html.fr-light .frf-badge-count {
  background: rgba(59, 130, 246, .18);
  color: #1d4ed8;
}

/* ── Forms ────────────────────────────────── */
html.fr-light .frf-form label,
html.fr-light .frf-filter-field { color: #5a4a30; }
html.fr-light .frf-checkbox-label { color: #1a1510; }
html.fr-light .frf-form input,
html.fr-light .frf-form textarea,
html.fr-light .frf-form select,
html.fr-light .frf-filters input,
html.fr-light .frf-filters select {
  background: #f8f4ed;
  color: #1a1510;
  border-color: rgba(139, 103, 52, .20);
}
html.fr-light .frf-form input:focus,
html.fr-light .frf-form textarea:focus,
html.fr-light .frf-form select:focus,
html.fr-light .frf-filters input:focus,
html.fr-light .frf-filters select:focus {
  border-color: rgba(139, 103, 52, .50);
}
html.fr-light .frf-helper { color: var(--muted); }

/* ── Tables ───────────────────────────────── */
html.fr-light .frf-table-wrap {
  background: rgba(255, 252, 246, .6);
  border-color: rgba(139, 103, 52, .12);
}
html.fr-light .frf-table thead th {
  background: rgba(0, 0, 0, .02);
  color: var(--muted);
}
html.fr-light .frf-table th,
html.fr-light .frf-table td { border-bottom-color: #e8e0d0; }
html.fr-light .frf-table tbody tr:hover { background: rgba(0, 0, 0, .018); }
html.fr-light .frf-table a { color: #6b4e1a; }
html.fr-light .frf-table a:hover { color: #1a1510; }

/* Responsive cards tables */
html.fr-light .frf-table-responsive tr {
  background: rgba(255, 252, 246, .7);
  border-color: rgba(139, 103, 52, .12);
}
html.fr-light .frf-table-responsive td::before { color: var(--muted); }

/* Miniatures */
html.fr-light .frf-thumb {
  border-color: rgba(139, 103, 52, .22);
}
html.fr-light .frf-thumb-empty {
  border-color: rgba(139, 103, 52, .18);
  color: var(--muted);
}

/* ── Historique ───────────────────────────── */
html.fr-light .frf-history-date { color: var(--muted); }
html.fr-light .frf-text-block {
  background: rgba(0, 0, 0, .03);
  border-color: #e2d9c8;
}
html.fr-light .frf-text-notes { border-color: rgba(139, 103, 52, .18); }

/* ── Code block ───────────────────────────── */
html.fr-light .frf-code-block {
  background: #f0ece3;
  border-color: #ddd5c4;
}

/* ── Preview expert ───────────────────────── */
html.fr-light .frf-preview-box {
  background: rgba(0, 0, 0, .025);
  border-color: #ddd5c4;
}
html.fr-light .frf-preview-text {
  background: #f5f0e8;
  border-color: #ddd5c4;
  color: #1a1510;
}
html.fr-light .frf-preview-meta { color: var(--muted); }
html.fr-light .frf-preview-meta span { color: #1a1510; }
html.fr-light .frf-preview-thumbs img { border-color: #ddd5c4; }

/* ── Topbar ───────────────────────────────── */
html.fr-light .frf-mobile-toggle {
  background: rgba(240, 236, 227, .96);
  border-color: rgba(139, 103, 52, .22);
}
html.fr-light .frf-mobile-toggle span { background: #1a1510; }

/* ── Login ────────────────────────────────── */
html.fr-light .frf-login-wrap {
  background: radial-gradient(circle at top, #ede8df, #f0ece3);
}
html.fr-light .frf-login-card {
  background: rgba(255, 252, 248, .98);
  border-color: rgba(139, 103, 52, .20);
  box-shadow: 0 12px 36px rgba(0, 0, 0, .08);
}
html.fr-light .frf-login-card h1 { color: #1a1510; }
html.fr-light .frf-login-card p,
html.fr-light .frf-login-card label,
html.fr-light .frf-login-kicker { color: var(--muted); }
html.fr-light .frf-login-card input[type=text],
html.fr-light .frf-login-card input[type=password] {
  background: #f5f1ea;
  color: #1a1510;
  border-color: rgba(139, 103, 52, .20);
}
html.fr-light .login-remember { color: var(--muted); }

/* ── Lightbox ─────────────────────────────── */
html.fr-light .frf-lightbox { background: rgba(240, 236, 227, .94); }
html.fr-light .frf-lightbox__btn {
  background: rgba(255, 252, 246, .88);
  border-color: rgba(139, 103, 52, .18);
  color: #1a1510;
}
html.fr-light .frf-lightbox__counter,
html.fr-light .frf-lightbox__hint {
  background: rgba(255, 252, 246, .82);
  color: #1a1510;
}

/* ── Toggle lui-même en mode clair (brandbar) ─ */
html.fr-light .fr-theme-toggle__track {
  background: rgba(139, 103, 52, .18);
  border-color: rgba(139, 103, 52, .32);
}

/* ── Logo en mode clair ───────────────────────────────────────────────────────
 * Le logo est blanc (sur fond sombre), il devient invisible sur fond beige clair.
 * On applique un filtre CSS pour l'assombrir et lui donner une teinte dorée/brune
 * cohérente avec le branding Fabien Robaldo en version claire.
 *
 * Décomposition du filter :
 *   brightness(0)        → rend le logo entièrement noir
 *   sepia(1)             → applique une teinte sépia chaude
 *   saturate(1.4)        → renforce la saturation dorée
 *   hue-rotate(5deg)     → légère rotation vers le doré/brun
 *   brightness(0.55)     → ajuste la luminosité finale pour un brun doré lisible
 *
 * Résultat : logo dans les tons #6b4e1a (brun doré) — lisible sur fond beige.
 */

/* Logo sidebar (web-app) */
html.fr-light .frf-brand-logo {
    filter: brightness(0) sepia(1) saturate(1.4) hue-rotate(5deg) brightness(0.55);
}

/* Logo page de connexion */
html.fr-light .frf-login-logo {
    filter: brightness(0) sepia(1) saturate(1.4) hue-rotate(5deg) brightness(0.55);
}

/* Logo brandbar du thème (pages non-app) */
html.fr-light .fr-site-brand img {
    filter: brightness(0) sepia(1) saturate(1.4) hue-rotate(5deg) brightness(0.55);
}

/* "Fabien Robaldo" en noir dans la sidebar en mode clair */
html.fr-light .frf-brand-copy strong {
    color: #1a1510;
}