/* =========================================================
   RDS THEME — Palette:
   #000000 (noir) | #806b64 (taupe) | #ffe6b5 (sable) | #ffffff (blanc)
   Fichier: backend/public/app.css  (UI CRM en #/…)
   ========================================================= */

:root{
  --rds-black:#000000;
  --rds-taupe:#806b64;
  --rds-sand:#ffe6b5;
  --rds-white:#ffffff;

  /* Surfaces */
  --bg: var(--rds-black);
  --surface: rgba(255,255,255,.03);
  --card: rgba(255,255,255,.04);

  /* Texte */
  --text: var(--rds-white);
  --muted: rgba(255,255,255,.72);
  --muted2: rgba(255,255,255,.55);

  /* Accents */
  --acc: var(--rds-sand);          /* primaire */
  --acc2: var(--rds-taupe);        /* secondaire */
  --on-acc: var(--rds-black);      /* texte sur sable */

  /* Bordures / ombres */
  --line: rgba(255,230,181,.14);
  --line2: rgba(128,107,100,.34);
  --shadow: 0 18px 70px rgba(0,0,0,.55);

  --radius: 18px;

  /* Semantic status colors (Stock: OK/BAS/RUPTURE) */
  --status-ok: #2ecc71;
  --status-warn: #ffb020;
  --status-bad: #ff4d4f;
  --status-ok-bg: rgba(46, 204, 113, .16);
  --status-warn-bg: rgba(255, 176, 32, .16);
  --status-bad-bg: rgba(255, 77, 79, .16);
}

/* Fond global (subtil, premium) */
html, body{
  background:
    radial-gradient(1100px 520px at 18% 10%, rgba(128,107,100,.18), transparent 55%),
    radial-gradient(900px 520px at 82% 18%, rgba(255,230,181,.10), transparent 55%),
    var(--bg) !important;
  color: var(--text) !important;
}

/* Typo / lisibilité */
body{
  letter-spacing: .1px;
  text-rendering: geometricPrecision;
}

/* Sidebar */
#sidebar{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.0)) !important;
  border-right: 1px solid var(--line2) !important;
}
#sidebar a{
  color: rgba(255,255,255,.86) !important;
  border-radius: 12px;
  transition: background .16s ease, transform .16s ease, color .16s ease, box-shadow .16s ease;
}
#sidebar a:hover{
  background: rgba(255,230,181,.08) !important;
  color: var(--rds-white) !important;
  transform: translateX(2px);
}
#sidebar a.active,
#sidebar a[aria-current="page"]{
  background: rgba(255,230,181,.14) !important;
  color: var(--rds-white) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Cartes (Dashboard, Settings, blocs, KPI…) */
.card, .kpi, .panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease;
}
.card:hover, .kpi:hover{
  transform: translateY(-2px);
  border-color: rgba(255,230,181,.26) !important;
  box-shadow: var(--shadow);
  filter: brightness(1.02);
}

/* KPI “tones” */
.kpi.accent{ border-color: rgba(255,230,181,.30) !important; }
.kpi.ok{     border-color: rgba(255,230,181,.20) !important; }
.kpi.warn{   border-color: rgba(128,107,100,.45) !important; }
.kpi.info{   border-color: rgba(255,230,181,.18) !important; }
.kpi.danger{ border-color: rgba(128,107,100,.60) !important; }

/* Titres / textes */
.h, h1, h2, h3{
  color: var(--text) !important;
}
.p, .muted, .sub{
  color: var(--muted) !important;
}

/* Boutons */
.btn, button.btn, a.btn{
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--line2) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,230,181,.24) !important;
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.btn:active{ transform: translateY(0px); }

/* Bouton primaire = sable + texte noir */
.btn-primary{
  background: linear-gradient(180deg, rgba(255,230,181,1), rgba(255,230,181,.86)) !important;
  border-color: rgba(255,230,181,.55) !important;
  color: var(--on-acc) !important;
  box-shadow: 0 14px 45px rgba(0,0,0,.45);
}
.btn-primary:hover{
  background: linear-gradient(180deg, rgba(255,230,181,1), rgba(255,230,181,.92)) !important;
  border-color: rgba(255,230,181,.70) !important;
}

/* Inputs / selects */
.input, input.input, select.input, textarea.input{
  background: rgba(0,0,0,.28) !important;
  border: 1px solid var(--line2) !important;
  color: var(--text) !important;
  border-radius: 14px !important;
  outline: none !important;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.input::placeholder{
  color: rgba(255,255,255,.45) !important;
}
.input:focus{
  border-color: rgba(255,230,181,.40) !important;
  box-shadow: 0 0 0 4px rgba(255,230,181,.10);
}

/* Tables */
.table{
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: var(--radius);
}
.table th{
  color: rgba(255,255,255,.82) !important;
  background: rgba(255,255,255,.03) !important;
  border-bottom: 1px solid var(--line) !important;
}
.table td{
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.86) !important;
}
.table tr:hover td{
  background: rgba(255,230,181,.06) !important;
}

/* Pills / badges */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;font-size:12px;line-height:1;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.90);
}
.pill.ok{
  border-color: rgba(46, 204, 113, .45);
  background: var(--status-ok-bg);
  color: #eafff3;
}
.pill.warn{
  border-color: rgba(255, 176, 32, .45);
  background: var(--status-warn-bg);
  color: #fff5e2;
}
.pill.bad{
  border-color: rgba(255, 77, 79, .45);
  background: var(--status-bad-bg);
  color: #ffe9ea;
}

/* Liens */
a{ color: rgba(255,230,181,.95); }
a:hover{ color: rgba(255,230,181,1); }

/* Sélection de texte */
::selection{
  background: rgba(255,230,181,.28);
  color: var(--rds-white);
}

/* Motion safe */
@media (prefers-reduced-motion: reduce){
  .card, .kpi, .btn, #sidebar a{ transition: none !important; }
  .card:hover, .kpi:hover, .btn:hover, #sidebar a:hover{ transform:none !important; }
}