/* STAGING Theme: easy to spot vs PROD */
:root{
  --stg-green: #B7FF7A;   /* внешний салатовый */
  --stg-window: #1C3326;  /* большое "чёрное окно" -> тёмно‑зелёное */
  --stg-card:   #172B20;  /* внутренние панели чуть иначе */
  --stg-text-on-green: #111;
  --stg-text-on-dark:  #EFFFF0;
}

/* STAGING: override dashboard theme variables */
:root{
  --card: #1C3326 !important;   /* главное тёмное окно */
  --panel: #172B20 !important;  /* если используется */
  --bg: #B7FF7A !important;     /* внешний фон */
  --muted: #EFFFF0 !important;  /* светлый текст внутри окна */
}



/* Снаружи */
html, body { background: var(--stg-green) !important; }
body { color: var(--stg-text-on-green) !important; }

/* Рамка-маркер */
html { box-shadow: inset 0 0 0 12px var(--stg-green) !important; }

/* ===== ВАЖНО: ловим Tailwind-классы даже со слэшем (/80) через [class*="..."] ===== */

/* Самые тёмные фоны (900/950/black) -> тёмно‑зелёный */
[class*="bg-black"],
[class*="bg-slate-9"], [class*="bg-gray-9"], [class*="bg-zinc-9"], [class*="bg-neutral-9"]{
  background-color: var(--stg-window) !important;
  background: var(--stg-window) !important;
  color: var(--stg-text-on-dark) !important;
}

/* Чуть менее тёмные (800) -> цвет для внутренних карточек */
[class*="bg-slate-8"], [class*="bg-gray-8"], [class*="bg-zinc-8"], [class*="bg-neutral-8"]{
  background-color: var(--stg-card) !important;
  background: var(--stg-card) !important;
  color: var(--stg-text-on-dark) !important;
}

/* Если где-то прямо в style прописан чёрный/почти чёрный фон — тоже перекрасим */
[style*="background: rgba(0,0,0"],
[style*="background-color: rgba(0,0,0"],
[style*="background: rgb(0, 0, 0"],
[style*="background-color: rgb(0, 0, 0"]{
  background-color: var(--stg-window) !important;
  background: var(--stg-window) !important;
  color: var(--stg-text-on-dark) !important;
}

/* READABILITY inside dark windows */
.card, .lr0-tablewrap{
  color: #F4FFF3 !important;
}
.card h1, .card h2, .card h3, .card b, .card strong{
  color: #FFFFFF !important;
}
.card a{
  color: #BFFFD2 !important;
  text-decoration: none;
}
.card a:hover{
  text-decoration: underline;
}
.card input, .card textarea, .card select{
  background: rgba(0,0,0,.18) !important;
  color: #FFFFFF !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* OUTSIDE (green background): make all text readable */
body, body *{
  color: #111 !important;
}

/* INSIDE dark windows: keep light text */
.card, .card *{
  color: #F4FFF3 !important;
}

/* Links outside */
a{ color:#0B3D2A !important; }
a:hover{ text-decoration: underline; }

/* Fix small dark pills/badges on green background */
.badge, .pill, .tag, .chip, .btn, button, .secure, .secure-area,
a.badge, a.pill, a.tag,
.badge *, .pill *, .tag *, .chip *, .btn *, button *{
  color: #F4FFF3 !important;
}