/* =====================================================================
   Charte THE CIRCLE MANAGEMENT (12/10/2026)
   Activée par <html data-theme="circle"> : FACTUROS ouvert depuis le dashboard
   des villas prend sa charte — fond gris clair, cartes blanches à bord fin,
   or #c9a227 en accent, pictogrammes au trait, rubriques en onglets dans la
   barre du haut. Le violet reste la charte de la plateforme pour les autres
   accès : tout passe par les variables, rien n'est touché dans styles.css.
   <html data-embed="1"> = affiché dans le cadre du dashboard : FACTUROS
   s'efface (plus de menu latéral, de compte, de langue ni de déconnexion —
   le dashboard les porte déjà).
   ===================================================================== */

:root[data-theme="circle"] {
  --v-50:  #fffaeb;
  --v-100: #f0e3bb;
  --v-200: #ecdcae;
  --v-300: #e8cd74;
  --v-400: #c9a227;
  --v-500: #c9a227;
  --v-600: #8f6f14;
  --v-700: #6b520e;

  --bg: #eef1f6;
  --panel: #ffffff;
  --line: #e6e9f0;
  --line-soft: #f2f4f8;
  --text: #101828;
  --text-soft: #475467;
  --muted: #667085;

  --green: #12b76a;
  --green-bg: #e7f8ef;
  --amber: #f79009;
  --amber-bg: #fff4e0;
  --red: #f04438;
  --red-bg: #fdeceb;
  --sky: #2f6bff;
  --sky-bg: #eef4ff;

  --gold: #c9a227;
  --gold-lt: #e8cd74;
  --gold-dk: #8f6f14;
  --gold-grad: linear-gradient(135deg, #e9cf7c 0%, #c9a227 46%, #a3801a 100%);
  --gold-soft: rgba(201,162,39,.14);
  --gold-glow: 0 6px 20px rgba(201,162,39,.38), 0 1px 0 rgba(255,255,255,.55) inset;

  --radius: 16px;
  --radius-sm: 12px;
  --shadow-sm: none;
  --shadow-md: 0 10px 30px rgba(16, 24, 40, .10);
  --glow: var(--gold-glow);
  --accent: var(--gold);
}

/* Fond plat, comme le dashboard : pas de halos derrière l'interface */
:root[data-theme="circle"] body::before { display: none; }
:root[data-theme="circle"] h1 { font-weight: 750; letter-spacing: -.5px; }
:root[data-theme="circle"] h2 { font-weight: 700; }

/* --- Boutons : or pour l'action principale, blanc à bord fin pour le reste --- */
:root[data-theme="circle"] .btn-primary {
  background: var(--gold-grad); border: 1px solid #b8941f; color: #2a1f00;
  box-shadow: var(--gold-glow); text-shadow: 0 1px 0 rgba(255,255,255,.35); font-weight: 700;
}
:root[data-theme="circle"] .btn-primary:hover { transform: none; box-shadow: 0 8px 24px rgba(201,162,39,.48), 0 1px 0 rgba(255,255,255,.55) inset; filter: brightness(1.03); }
:root[data-theme="circle"] .btn-soft, :root[data-theme="circle"] .mini, :root[data-theme="circle"] .close-x,
:root[data-theme="circle"] .icon-btn, :root[data-theme="circle"] .doc-dl { color: var(--text); font-weight: 600; }
:root[data-theme="circle"] .btn-soft:hover, :root[data-theme="circle"] .mini:hover, :root[data-theme="circle"] .doc-dl:hover,
:root[data-theme="circle"] .close-x:hover { border-color: var(--gold-lt); background: #fffdf6; color: var(--gold-dk); box-shadow: none; }
:root[data-theme="circle"] .link-btn { color: var(--gold-dk); }
:root[data-theme="circle"] input:focus, :root[data-theme="circle"] select:focus, :root[data-theme="circle"] textarea:focus {
  border-color: var(--gold); box-shadow: 0 0 0 3.5px rgba(201,162,39,.16);
}
:root[data-theme="circle"] label { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text-soft); }

/* --- Barre du haut : blanche, bord fin, sans flou --- */
:root[data-theme="circle"] .topbar { background: var(--panel); backdrop-filter: none; padding: 11px 24px; }
:root[data-theme="circle"] .brand-menu-btn { box-shadow: none; font-weight: 700; }
:root[data-theme="circle"] .brand-menu-btn:hover, :root[data-theme="circle"] .brand-menu-btn.open { border-color: var(--gold-lt); box-shadow: none; }
:root[data-theme="circle"] .badge-admin { background: var(--gold-soft); color: var(--gold-dk); border-color: #ecdcae; letter-spacing: .6px; }
:root[data-theme="circle"] .lang-switch { background: #f2f4f7; border-radius: 9px; padding: 2px; gap: 2px; border-color: var(--line); }
:root[data-theme="circle"] .lang-switch button { border-radius: 7px; font-weight: 700; font-size: 11.5px; padding: 4px 9px; }
:root[data-theme="circle"] .lang-switch button.on { background: #fff; color: var(--gold-dk); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* --- Rubriques en onglets (remplacent le menu latéral) --- */
:root[data-theme="circle"] .sidebar, :root[data-theme="circle"] .side-backdrop, :root[data-theme="circle"] .menu-btn,
:root[data-theme="circle"] .tabbar { display: none !important; }
:root[data-theme="circle"] .topbar-left { gap: 14px; }
.ctabs {
  display: flex; align-items: center; gap: 2px; min-width: 0; flex: 1;
  background: #f2f4f7; border: 1px solid var(--line); border-radius: 11px; padding: 3px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ctabs::-webkit-scrollbar { display: none; }
.ctab {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  border: 0; background: none; border-radius: 8px; padding: 7px 13px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text-soft); cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s; white-space: nowrap;
}
.ctab svg { width: 15px; height: 15px; flex: none; }
.ctab:hover { color: var(--text); }
.ctab.on { background: #fff; color: var(--gold-dk); box-shadow: 0 1px 3px rgba(16,24,40,.12); }

/* --- Contenu : la largeur du dashboard --- */
:root[data-theme="circle"] .content { max-width: 1340px; padding: 26px 30px 70px; }
:root[data-theme="circle"] .page-head p { color: var(--text-soft); }
:root[data-theme="circle"] .chip, :root[data-theme="circle"] .insight span { background: #fff; border-color: var(--line); color: var(--text-soft); box-shadow: none; }
:root[data-theme="circle"] .chip { color: var(--gold-dk); border-color: #ecdcae; background: #fffdf5; font-weight: 700; }
:root[data-theme="circle"] .clear-brand { background: var(--gold-dk); color: #fff; border-color: transparent; }
:root[data-theme="circle"] .clear-brand:hover { background: #6b520e; }
:root[data-theme="circle"] .period-btn { font-weight: 700; }
:root[data-theme="circle"] button.select { border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: #fff; }
:root[data-theme="circle"] button.select:hover { border-color: var(--gold-lt); background: #fffdf6; color: var(--gold-dk); }
:root[data-theme="circle"] .period-months button.on { background: var(--gold-grad); color: #2a1f00; }
:root[data-theme="circle"] .period-quick button.on { background: var(--gold-soft); border-color: var(--gold-lt); color: var(--gold-dk); }

/* --- KPI : cartes blanches à bord fin, chiffre large, picto au trait --- */
:root[data-theme="circle"] .kpi { box-shadow: none; }
:root[data-theme="circle"] .kpi:hover { transform: none; box-shadow: none; }
:root[data-theme="circle"] .kpi::before { opacity: .9; }
:root[data-theme="circle"] .kpi-ico { background: #fff; border: 1px solid var(--line); border-radius: 9px; }
:root[data-theme="circle"] .kpi-ico svg { width: 17px; height: 17px; }
:root[data-theme="circle"] .kpi-label { font-size: 11px; letter-spacing: .6px; color: var(--text-soft); font-weight: 700; }
:root[data-theme="circle"] .kpi-value { font-size: 30px; font-weight: 780; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
:root[data-theme="circle"] .kpi-sub { font-size: 12.5px; color: var(--text-soft); }

/* --- Panneaux, cartes, tableaux --- */
:root[data-theme="circle"] .panel, :root[data-theme="circle"] .bcard, :root[data-theme="circle"] .alert-box,
:root[data-theme="circle"] .dbox, :root[data-theme="circle"] .pay-row { box-shadow: none; }
:root[data-theme="circle"] .bcard:hover { transform: none; box-shadow: none; border-color: var(--gold-lt); }
:root[data-theme="circle"] .bcard-arrow { color: var(--gold); }
:root[data-theme="circle"] .panel-icon.violet { background: var(--gold-soft); color: var(--gold-dk); }
:root[data-theme="circle"] th { background: none; font-size: 11px; letter-spacing: .5px; color: var(--muted); font-weight: 700; border-top: 0; }
:root[data-theme="circle"] .pill.sent { background: var(--gold-soft); color: var(--gold-dk); }
:root[data-theme="circle"] .pill.draft, :root[data-theme="circle"] .pill.cancelled { background: #f1f3f7; }
:root[data-theme="circle"] .bar-fill { background: var(--gold-grad); box-shadow: 0 0 14px rgba(201,162,39,.4); }
:root[data-theme="circle"] .bstat.violet { background: var(--gold-soft); border-color: #f0e3bb; }
:root[data-theme="circle"] .bstat.violet .bstat-v { color: var(--gold-dk); }
:root[data-theme="circle"] .bstat.plain { background: #f7f8fa; }
:root[data-theme="circle"] .pie-total { color: var(--gold-dk); background: var(--gold-soft); border-color: #f0e3bb; }
:root[data-theme="circle"] #pie svg { filter: drop-shadow(0 10px 22px rgba(16,24,40,.16)); }
:root[data-theme="circle"] #donut svg { filter: none; }
:root[data-theme="circle"] .sp-row { background: #f9fafc; }
:root[data-theme="circle"] .sp-row:hover { border-color: var(--gold-lt); background: #fffdf6; }
:root[data-theme="circle"] .items-editor, :root[data-theme="circle"] .inv-sheet input:focus { background: #f8f9fb; }
:root[data-theme="circle"] .doc-date { background: var(--gold-soft); border-color: #f0e3bb; }
:root[data-theme="circle"] .doc-date small { color: var(--gold-dk); }
:root[data-theme="circle"] .doc-dl { color: var(--gold-dk); }
:root[data-theme="circle"] .doc-dl.is-ready, :root[data-theme="circle"] button.is-ready { background: var(--gold); border-color: #b8941f; color: #2a1f00; }
@keyframes pulse-ready-gold { 50% { box-shadow: 0 0 0 5px rgba(201,162,39,.26); } }
:root[data-theme="circle"] .doc-dl.is-ready { animation-name: pulse-ready-gold; }
:root[data-theme="circle"] .tpl.on { box-shadow: none; }
:root[data-theme="circle"] .villa-chip:hover { box-shadow: none; border-color: var(--gold-lt); }

/* --- Bouton flottant, volets, fenêtres, toasts --- */
:root[data-theme="circle"] .fab {
  background: var(--gold-grad); color: #2a1f00; border: 1px solid #b8941f; box-shadow: var(--gold-glow); font-weight: 700;
}
:root[data-theme="circle"] .fab:hover { transform: none; box-shadow: 0 8px 24px rgba(201,162,39,.5); }
:root[data-theme="circle"] .ask-fab { background: #fff; color: var(--gold-dk); border: 1px solid #ecdcae; box-shadow: 0 6px 18px rgba(16,24,40,.12); }
:root[data-theme="circle"] .drawer-backdrop, :root[data-theme="circle"] .modal-backdrop, :root[data-theme="circle"] .html-overlay { background: rgba(16,24,40,.55); }
:root[data-theme="circle"] .drawer-panel { box-shadow: -20px 0 60px rgba(16,24,40,.14); }
:root[data-theme="circle"] .modal-card { box-shadow: 0 30px 70px rgba(16,24,40,.35); border-radius: 18px; }
:root[data-theme="circle"] .modal-card h3 { font-weight: 720; }
:root[data-theme="circle"] .toast { box-shadow: 0 10px 30px rgba(16,24,40,.14); }
:root[data-theme="circle"] .chat { box-shadow: 0 26px 70px rgba(16,24,40,.22); }

/* --- Écran de connexion (si la session du cadre ne peut pas être rouverte) --- */
:root[data-theme="circle"] .login { background: var(--bg); }
:root[data-theme="circle"] .login-card { background: #fff; border: 1px solid var(--line); box-shadow: 0 20px 60px rgba(16,24,40,.12); position: relative; overflow: hidden; }
:root[data-theme="circle"] .login-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold-grad); }
:root[data-theme="circle"] .logo-img { box-shadow: 0 6px 18px rgba(201,162,39,.35); }

/* =====================================================================
   Dans le cadre du dashboard : FACTUROS n'est plus qu'un onglet du logiciel
   ===================================================================== */
:root[data-embed="1"] .topbar { padding: 10px 22px; position: sticky; }
:root[data-embed="1"] .brand-menu, :root[data-embed="1"] .user-name, :root[data-embed="1"] .badge-admin,
:root[data-embed="1"] #logoutBtn, :root[data-embed="1"] .lang-switch, :root[data-embed="1"] .foot,
:root[data-embed="1"] #settingsBtn, :root[data-embed="1"] #scopeChip { display: none !important; }
:root[data-embed="1"] .content { padding: 22px 22px 60px; max-width: none; }
:root[data-embed="1"] .login { min-height: 100vh; }

@media (max-width: 860px) {
  :root[data-theme="circle"] .topbar { padding: 10px 12px; flex-wrap: wrap; }
  :root[data-theme="circle"] .topbar-left { flex-basis: 100%; order: 2; }
  :root[data-theme="circle"] .topbar-right { margin-left: auto; }
  :root[data-theme="circle"] .ctabs { width: 100%; }
  :root[data-theme="circle"] .ctab { padding: 8px 12px; font-size: 12.5px; }
  :root[data-theme="circle"] .content { padding: 16px 14px 90px; }
  :root[data-theme="circle"] .kpi-value { font-size: 23px; }
  :root[data-theme="circle"] .fab { bottom: calc(18px + env(safe-area-inset-bottom)); }
  :root[data-theme="circle"] .ask-fab { bottom: calc(82px + env(safe-area-inset-bottom)); }
  :root[data-theme="circle"] .chat { bottom: 8px; }
  :root[data-theme="circle"] .toast { bottom: 24px; }
  :root[data-theme="circle"] .period-pop { bottom: auto; top: calc(100% + 8px); }
  /* Sur le téléphone, dans le cadre : la barre n'est plus que les onglets */
  :root[data-embed="1"] .topbar-right { display: none; }
  :root[data-embed="1"] .topbar-left { order: 0; }
  :root[data-embed="1"] .content { padding: 14px 12px 90px; }
}