/*!
 * RDS — Finance CSS (PRO STACK UI)
 * Version: 2026-01-23-pro-stack-v1
 * Objectif:
 *  - Thème cohérent + composants de base (cards, boutons, tables)
 *  - Layout pleine largeur en 1 colonne (stack)
 *  - Sections avec scroll vertical (max-height) pour éviter une page trop longue
 *  - Stripe panel pleine largeur (tabs) + tables lisibles + badges + copier ID
 */

/* =========================
   Base theme
   ========================= */
:root{
  --bg:#0b0c12;
  --card:#141826;
  --muted:#9aa4b2;
  --text:#e7eef7;
  --acc:#23c7ff;
  --ok:#3ddc97;
  --warn:#ffcc66;
  --bad:#ff6b6b;
  --line:rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{ color:var(--acc); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* Plus large pour respirer */
.wrap{ max-width:1440px; margin:0 auto; padding:16px; }

.header{
  position:sticky;
  top:0;
  background:rgba(11,12,18,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:10;
}

.row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.spacer{ flex:1; }

.title{ font-weight:800; }
.small{ font-size:12px; }
.muted{ color:var(--muted); }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; }

.gap{ height:10px; }
.m0{ margin:0; }

/* Cards / Buttons */
.card{
  background:var(--card);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;
  margin-bottom:12px;
  box-shadow: 0 12px 35px rgba(0,0,0,.28);
}

.btn{
  background:#1b2236;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover{ border-color:rgba(255,255,255,.20); }

.btn.primary{
  background:linear-gradient(135deg,#1b2236,#0f2a38);
  border-color:rgba(35,199,255,.35);
}
.btn.ok{ border-color:rgba(61,220,151,.45); }
.btn.warn{ border-color:rgba(255,204,102,.45); }
.btn.bad{ border-color:rgba(255,107,107,.45); }

/* Inputs */
input,select{
  background:#0f1320;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  outline:none;
  min-width:180px;
}
input:focus,select:focus{ border-color:rgba(35,199,255,.45); }

/* KPI grid */
.kpis{ display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
.kpi{
  grid-column:span 3;
  background:#0f1320;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  padding:12px;
}
.kpiVal{ font-size:18px; font-weight:800; margin-top:6px; }
@media (max-width:1000px){ .kpi{ grid-column:span 6; } }
@media (max-width:640px){ .kpi{ grid-column:span 12; } }

/* Tables (base) */
.tableWrap{ overflow:auto; border:1px solid rgba(255,255,255,.06); border-radius:12px; }
table{ width:100%; border-collapse:collapse; }
th,td{
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}
th{ color:var(--muted); font-weight:600; }
.right{ text-align:right; }

.pre{
  white-space:pre-wrap;
  margin:0;
  background:#0f1320;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  padding:10px;
}

/* =========================
   RDSFX — Full-width stack layout
   ========================= */
body.rdsfx-finance-page #rdsfx-finance-stack{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:16px;
}

body.rdsfx-finance-page #rdsfx-finance-stack > .card{
  width:100%;
  margin-bottom:0; /* gap géré par le stack */
}

/* Sections scrollables (évite une page infinie)
   - On met le scroll sur la section, et on laisse les wrappers de table gérer l'overflow X uniquement.
*/
body.rdsfx-finance-page .rdsfx-section.rdsfx-scroll{
  overflow:auto;
  overscroll-behavior: contain;
  max-height: var(--rdsfx-maxh, 520px);
  padding-right: 6px; /* place scrollbar */
}
body.rdsfx-finance-page .rdsfx-section[data-section="filters"]{
  overflow:visible;
  max-height:none;
  padding-right:0;
}

/* Hauteurs par section (ajustables) */
body.rdsfx-finance-page .rdsfx-section[data-section="summary"]{ --rdsfx-maxh: 380px; }
body.rdsfx-finance-page .rdsfx-section[data-section="stripe"]{ --rdsfx-maxh: 560px; }
body.rdsfx-finance-page .rdsfx-section[data-section="vat"]{ --rdsfx-maxh: 480px; }
body.rdsfx-finance-page .rdsfx-section[data-section="ledger"]{ --rdsfx-maxh: 640px; }

/* Scrollbar (webkit) */
body.rdsfx-finance-page .rdsfx-section.rdsfx-scroll::-webkit-scrollbar{ width:10px; }
body.rdsfx-finance-page .rdsfx-section.rdsfx-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 10px;
}
body.rdsfx-finance-page .rdsfx-section.rdsfx-scroll::-webkit-scrollbar-track{
  background: rgba(0,0,0,.10);
  border-radius: 10px;
}

/* =========================
   RDSFX — Stripe full-width panel
   ========================= */
.rdsfx-stripe-panel{ padding:14px; }

.rdsfx-stripe-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:12px;
}

.rdsfx-stripe-title{
  font-weight:800;
  font-size:16px;
  letter-spacing:.2px;
}

/* Tabs */
.rdsfx-tabs{
  display:flex;
  gap:8px;
  padding:8px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:14px;
}

.rdsfx-tab{
  flex:1;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:650;
}

.rdsfx-tab:hover{ background:rgba(255,255,255,.07); }

.rdsfx-tab.is-active{
  border-color: rgba(35,199,255,.45);
  background: rgba(35,199,255,.10);
}

.rdsfx-panes{ margin-top:12px; }
.rdsfx-pane{ display:none; }
.rdsfx-pane.is-active{ display:block; }

.rdsfx-pane-head{ margin-bottom:10px; }
.rdsfx-pane-title{
  font-weight:800;
  font-size:15px;
}

/* Actions / toolbar / metrics */
.rdsfx-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.rdsfx-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin:10px 0;
}

.rdsfx-input{
  height:38px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit;
  outline:none;
  min-width: 180px;
}

.rdsfx-input:focus{ border-color:rgba(35,199,255,.45); }

.rdsfx-metrics{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }

.rdsfx-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:12px;
  white-space:nowrap;
}
.rdsfx-chip b{ font-size:12px; }

/* =========================
   RDSFX — Tables (within scroll sections)
   - Vertical scroll is on the card; table wrap handles horizontal scroll only
   ========================= */
.rdsfx-table-wrap{
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  overflow-x:auto;
  overflow-y:visible;
}

.rdsfx-table{
  width:100%;
  border-collapse:collapse;
}

.rdsfx-table th,
.rdsfx-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  font-size:13px;
  vertical-align:top;
}

.rdsfx-table th{
  font-size:12px;
  font-weight:650;
  opacity:.75;
}

/* Sticky header works inside the scrollable card */
.rdsfx-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(12,12,14,.92);
  backdrop-filter: blur(6px);
}

/* Fixed layouts for our Stripe tables */
.rdsfx-table--payouts,
.rdsfx-table--monthly{
  table-layout: fixed;
}

/* Payouts columns */
.rdsfx-table--payouts th:nth-child(1){ width:170px; }
.rdsfx-table--payouts th:nth-child(2){ width:320px; }
.rdsfx-table--payouts th:nth-child(3){ width:120px; }
.rdsfx-table--payouts th:nth-child(4){ width:140px; }
.rdsfx-table--payouts th:nth-child(5){ width:90px; }
.rdsfx-table--payouts th:nth-child(6){ width:140px; }

/* Monthly columns */
.rdsfx-table--monthly th:nth-child(1){ width:90px; }
.rdsfx-table--monthly th:nth-child(2){ width:120px; }
.rdsfx-table--monthly th:nth-child(3){ width:120px; }
.rdsfx-table--monthly th:nth-child(4){ width:120px; }
.rdsfx-table--monthly th:nth-child(5){ width:120px; }
.rdsfx-table--monthly th:nth-child(6){ width:120px; }
.rdsfx-table--monthly th:nth-child(7){ width:120px; }
.rdsfx-table--monthly th:nth-child(8){ width:140px; }

/* ID cell: ellipsis + copy */
.rdsfx-idcell{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.rdsfx-idtext{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  opacity:.95;
}

.rdsfx-copy{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.rdsfx-copy:hover{ background:rgba(255,255,255,.10); }
.rdsfx-copy.is-ok{
  border-color: rgba(61,220,151,.45);
  background: rgba(61,220,151,.10);
}

/* Badges */
.rdsfx-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-size:12px;
  text-transform:lowercase;
}
.rdsfx-badge.is-paid{
  border-color:rgba(0,200,120,.35);
  background:rgba(0,200,120,.10);
}
.rdsfx-badge.is-pending{
  border-color:rgba(255,200,0,.35);
  background:rgba(255,200,0,.10);
}
.rdsfx-badge.is-failed{
  border-color:rgba(255,70,70,.35);
  background:rgba(255,70,70,.10);
}

/* Reconcile box */
.rdsfx-reconbox{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.03);
}

.rdsfx-reconmeta{ margin-bottom:10px; }

.rdsfx-recongrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 720px){
  .rdsfx-recongrid{ grid-template-columns: 1fr; }
}

.rdsfx-kv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  font-size:12px;
}
.rdsfx-kv span{ opacity:.85; }
.rdsfx-kv b{
  font-variant-numeric: tabular-nums;
  white-space:nowrap;
}

/* Debug pre / details */
.rdsfx-details summary{
  cursor:pointer;
  user-select:none;
  opacity:.9;
  margin-top:10px;
}

.rdsfx-pre{
  margin-top:8px;
  padding:10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.25);
  overflow:auto;
  max-height:260px;
  font-size:12px;
  white-space:pre-wrap;
  word-break:break-word;
}

/* Negative highlight */
.rdsfx-neg{
  border-color:rgba(255,70,70,.25) !important;
  background:rgba(255,70,70,.08) !important;
}

/* Manual entry merged into ledger (collapsible) */
.rdsfx-manual-details{
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(255,255,255,.02);
  padding: 10px 12px;
}

.rdsfx-manual-details summary{
  margin: 0;
  font-weight: 700;
}

.rdsfx-manual-content{
  margin-top: 10px;
}

/* Lisibilité des <option> (Firefox / thème sombre) */
select option{
  color:#0b0c12 !important;
  background:#ffffff !important;
}

/* =========================================================
   RDS THEME OVERRIDE — Palette:
   #000000 (noir) | #806b64 (taupe) | #ffe6b5 (sable) | #ffffff (blanc)
   À coller en bas de app.css ET finance.css
   ========================================================= */

: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;
}

/* 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 (si présent) */
#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” (si tu as des classes accent/ok/warn/etc.) */
.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{
  border: 1px solid var(--line2) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.90) !important;
  border-radius: 999px !important;
}
.pill.ok{ border-color: rgba(255,230,181,.28) !important; }
.pill.warn{ border-color: rgba(128,107,100,.55) !important; }
.pill.bad{ border-color: rgba(128,107,100,.70) !important; }

/* 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; }
}