/* ============================================================
   MSGREX — Design System CSS
   Derived from REXSUITE Brand Book v1.0 by TYREXCO
   Product accent: #6E5BFF · Plasma Violet
   ============================================================ */

/* ---------- Google Fonts (Geist) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=Geist+Mono:wght@400;500;600&display=swap');

/* ---------- Design Tokens ---------- */
:root {
  /* Base Palette */
  --ink:        #0A0A0B;
  --ink-2:      #131316;
  --ink-3:      #1E1E22;
  --ink-4:      #2A2A30;
  --line:       #2E2E34;
  --line-soft:  #1E1E22;
  --paper:      #F4F1EA;
  --paper-2:    #E9E4D9;
  --paper-3:    #D9D3C5;
  --muted:      #6B6B72;
  --muted-2:    #9A9AA1;

  /* MSGREX Accent — Plasma Violet */
  --accent:        #6E5BFF;
  --accent-100:    #EEEBFF;
  --accent-200:    #D8D2FF;
  --accent-300:    #B6ABFF;
  --accent-400:    #9486FF;
  --accent-500:    #806EFF;
  --accent-600:    #6E5BFF;
  --accent-700:    #5440E0;
  --accent-800:    #3E2DAE;
  --accent-900:    #251A6E;
  --accent-950:    #100A33;

  /* Font System */
  --font:     "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:     "Geist Mono", ui-monospace, "SF Mono", monospace;

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
  --shadow-md:   0 4px 12px rgba(0,0,0,.45), 0 2px 4px rgba(0,0,0,.25);
  --shadow-lg:   0 12px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.3);
  --shadow-accent: 0 0 24px rgba(110,91,255,.35);

  /* Component tokens (ex-literais, tokenizados para permitir override por modo/skin) */
  --nav-bg:              rgba(10,10,11,.88);
  --danger-text:         #ff6b6b;
  --trial-border:        rgba(110,91,255,.3);
  --trial-urgent-bg:     rgba(255,107,107,.12);
  --trial-urgent-text:   #ff9999;
  --trial-urgent-border: rgba(255,107,107,.3);
  --trial-active-bg:     rgba(110,91,255,.1);
  --input-focus-ring:    rgba(110,91,255,.2);
  --stat-icon-bg:        rgba(110,91,255,.12);
  --badge-accent-bg:     rgba(110,91,255,.18);
  --badge-success-bg:    rgba(0,209,122,.12);
  --badge-success-text:  #00D17A;
  --badge-warning-bg:    rgba(255,196,0,.12);
  --badge-warning-text:  #FFC400;
  --badge-danger-bg:     rgba(255,77,46,.12);
  --badge-danger-text:   #FF4D2E;

  /* Component tokens (site.css) */
  --badge-info-bg:       rgba(110,91,255,.15);
  --badge-primary-bg:    rgba(110,91,255,.2);
  --form-focus-ring:     rgba(110,91,255,.18);
  --setor-hover-shadow:  rgba(110,91,255,.15);
  --chat-sent-bg:        rgba(110,91,255,.2);

  /* Fundos de .badge.bg-success/warning/danger (site.css) — GAP 1 da
     revisao. Alpha .15, diferente do .12 usado pelos --badge-*-bg de
     .rex-badge-* acima (por isso o sufixo -bs: sao o mesmo tom, mas o
     literal ORIGINAL desta regra especifica era .15, e reaproveitar o
     token de .12 mudaria o pixel do escuro). O texto reaproveita
     --badge-success-text/--badge-warning-text/--badge-danger-text —
     ja tem override valido pro claro e nao precisou de token novo. */
  --badge-success-bg-bs: rgba(0,209,122,.15);
  --badge-warning-bg-bs: rgba(255,196,0,.15);
  --badge-danger-bg-bs:  rgba(255,77,46,.15);

  /* Component tokens (paginas standalone: auth-alert/auth-success de
     _MsgrexHead.cshtml e do .rex-alert proprio de Login.cshtml) */
  --auth-alert-danger-text:  #ff9999;
  --auth-alert-success-text: #00D17A;

  /* .text-white-50 (Atendimento/Index.cshtml, #btnEditarContato/#chatVia
     dentro de .chat-header). Valor = literal nativo do Bootstrap
     (rgba(255,255,255,.5)), so pra existir um token com override possivel
     por modo — no escuro fica idendico ao comportamento anterior (sem
     override nenhum). O claro sobrescreve pra um texto secundario opaco
     (ver modes.css), porque translucido-branco sobre --ink-2 claro
     (quase branco) fica invisivel. */
  --text-white-50: rgba(255,255,255,.5);

  /* Texto de accent (Correcao 7 da revisao, ajustada por decisao do
     usuario): usado onde --accent aparece como COR DE TEXTO (nao
     background) — .text-accent, .rex-suffix (o "REX" do logotipo),
     .rex-stat-icon, link do trial banner, e os titulos das telas de
     paleta legada (Invitations, BillingPage/Plans, Onboarding,
     Onboarding/Tutorial) que passaram a seguir --accent-text.
     Era var(--accent) (step 600), mas isso reprovava AA no ESCURO
     tambem (4,07-4,34:1 no skin default, pior ainda nos outros skins —
     ver tabela do relatorio). Passou pra var(--accent-300): resolve por
     skin automaticamente (themes.css redefine a rampa inteira, incluindo
     --accent-300, dentro de cada bloco [data-theme="X"] escuro), e todo
     skin fica bem acima de 4.5:1 sobre --ink/--ink-2/--ink-3.
     Decisao explicita do usuario: MUDA a aparencia do "REX" do logotipo,
     do link do trial banner e dos icones de estatistica no ESCURO — a
     regra de "zero mudanca no escuro" foi suspensa so pra este token.
     O valor CLARO nao muda: continua sobrescrito por skin nos blocos
     [data-bs-theme="light"][data-theme="X"] de themes.css (que ja
     setavam --accent-text: var(--accent-300) desde a Correcao 7) e pelo
     fallback de modes.css — nenhum dos dois foi tocado aqui. */
  --accent-text: var(--accent-300);

  /* Navbar da Landing (Landing/Index.cshtml nao carrega site.css) */
  --lp-nav-bg: rgba(10,10,11,.85);
}

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--ink);
  color: var(--paper);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-300); }

::selection {
  background: var(--accent);
  color: var(--paper);
}

/* ---------- REX Mark ---------- */
.rex-mark {
  display: inline-block;
  aspect-ratio: 1 / 1;
  background-image: url('/images/rex-mark-silver.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  vertical-align: middle;
  flex-shrink: 0;
}
.rex-mark.msg    { background-image: url('/images/rex-mark-msg.png'); }
.rex-mark.paper  { background-image: url('/images/rex-mark-paper.png'); }
.rex-mark.ink    { background-image: url('/images/rex-mark-ink.png'); }
.rex-mark.silver { background-image: url('/images/rex-mark-silver.png'); }

/* ---------- MSGREX Navbar ---------- */
.msgrex-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  height: 58px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
}

/* Lockup: [REX mark] [MSG][REX] */
.msgrex-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--paper);
}
.msgrex-lockup .rex-mark {
  width: 36px;
  height: 36px;
}
.msgrex-wordmark {
  font-family: var(--font);
  font-size: 22px;
  letter-spacing: -.05em;
  line-height: 1;
  font-weight: 400;
}
.msgrex-wordmark .prefix {
  font-weight: 400;
  color: var(--muted-2);
}
.msgrex-wordmark .rex-suffix {
  font-weight: 800;
  color: var(--accent-text);
}

/* Workspace info below wordmark */
.msgrex-workspace {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 1px;
}

/* Logo do cliente (white-label) no lugar da marca MSGREX */
.msgrex-client-logo {
  height: 34px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Nav links */
.msgrex-nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.msgrex-nav-links a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted-2);
  transition: color .15s, background .15s;
}
.msgrex-nav-links a:hover,
.msgrex-nav-links a.active {
  color: var(--paper);
  background: var(--ink-3);
}
.msgrex-nav-links a .bi {
  font-size: 14px;
}

/* Nav right: user menu + theme */
.msgrex-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.msgrex-nav-right .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted-2);
  cursor: pointer;
  font-size: 15px;
  transition: background .15s, color .15s, border-color .15s;
}
.msgrex-nav-right .btn-icon:hover {
  background: var(--ink-3);
  color: var(--paper);
  border-color: var(--line-soft);
}

/* User avatar button */
.msgrex-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 5px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  font-size: 13px;
  font-weight: 500;
}
.msgrex-user-btn:hover {
  background: var(--ink-3);
  border-color: var(--accent-800);
}
.msgrex-user-avatar {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--paper);
}

/* Dropdown */
.msgrex-dropdown-menu {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--ink-2);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 200px;
}
.msgrex-dropdown-menu .dropdown-item {
  border-radius: var(--radius-sm);
  color: var(--muted-2);
  font-size: 13px;
  padding: 8px 10px;
  transition: background .12s, color .12s;
}
.msgrex-dropdown-menu .dropdown-item:hover {
  background: var(--ink-3);
  color: var(--paper);
}
.msgrex-dropdown-menu .dropdown-item.text-danger {
  color: var(--danger-text) !important;
}
.msgrex-dropdown-menu .dropdown-divider {
  border-color: var(--line-soft);
  margin: 4px 0;
}

/* ---------- Trial Banner ---------- */
.msgrex-trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--trial-border);
}
.msgrex-trial-banner.urgent {
  background: var(--trial-urgent-bg);
  color: var(--trial-urgent-text);
  border-bottom-color: var(--trial-urgent-border);
}
.msgrex-trial-banner.active {
  background: var(--trial-active-bg);
  color: var(--accent-300);
}
.msgrex-trial-banner a {
  color: var(--accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn-rex {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background .15s, box-shadow .15s, transform .1s;
  text-decoration: none;
}
.btn-rex-primary {
  background: var(--accent);
  color: var(--paper);
}
.btn-rex-primary:hover {
  background: var(--accent-700);
  color: var(--paper);
  box-shadow: var(--shadow-accent);
}
.btn-rex-secondary {
  background: var(--ink-3);
  color: var(--paper);
  border: 1px solid var(--line);
}
.btn-rex-secondary:hover {
  background: var(--ink-4);
  color: var(--paper);
  border-color: var(--accent-800);
}
.btn-rex-ghost {
  background: transparent;
  color: var(--muted-2);
  border: 1px solid var(--line);
}
.btn-rex-ghost:hover {
  background: var(--ink-3);
  color: var(--paper);
}

/* ---------- Cards ---------- */
.rex-card {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.rex-card:hover {
  border-color: var(--accent-800);
}

/* ---------- Eyebrow / Label ---------- */
.rex-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Forms ---------- */
.rex-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink-3);
  color: var(--paper);
  font-family: var(--font);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  outline: none;
}
.rex-input::placeholder { color: var(--muted); }
.rex-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.rex-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

/* ---------- Stat Cards ---------- */
.rex-stat {
  background: var(--ink-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  transition: border-color .2s, transform .2s;
}
.rex-stat:hover {
  border-color: var(--accent-800);
  transform: translateY(-1px);
}
.rex-stat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--stat-icon-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.rex-stat-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--paper);
}
.rex-stat-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}
.rex-stat-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ---------- Table ---------- */
.rex-table { width: 100%; border-collapse: collapse; }
.rex-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 500;
}
.rex-table td {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--muted-2);
  border-bottom: 1px solid var(--line-soft);
}
.rex-table tbody tr:hover td { background: var(--ink-2); color: var(--paper); }

/* ---------- Badges ---------- */
.rex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
}
.rex-badge-accent    { background: var(--badge-accent-bg);  color: var(--accent-300); }
.rex-badge-success   { background: var(--badge-success-bg); color: var(--badge-success-text); }
.rex-badge-warning   { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.rex-badge-danger    { background: var(--badge-danger-bg);  color: var(--badge-danger-text); }
.rex-badge-neutral   { background: var(--ink-3); color: var(--muted-2); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ink-2); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ---------- Utilities ---------- */
.text-accent   { color: var(--accent-text) !important; }
.text-muted-rx { color: var(--muted-2) !important; }
.text-paper    { color: var(--paper) !important; }
.text-ink      { color: var(--ink) !important; }
.bg-ink-2      { background: var(--ink-2) !important; }
.border-accent { border-color: var(--accent-800) !important; }

/* Ensure BS overrides inherit Geist */
.dropdown-menu, .navbar, .btn, .form-control, .form-label,
.table, .alert, .badge, .modal, .offcanvas {
  font-family: var(--font) !important;
}