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

/* ---------- 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: rgba(10,10,11,.88);
  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);
}

/* 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: #ff6b6b !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 rgba(110,91,255,.3);
}
.msgrex-trial-banner.urgent {
  background: rgba(255,107,107,.12);
  color: #ff9999;
  border-bottom-color: rgba(255,107,107,.3);
}
.msgrex-trial-banner.active {
  background: rgba(110,91,255,.1);
  color: var(--accent-300);
}
.msgrex-trial-banner a {
  color: var(--accent);
  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 rgba(110,91,255,.2);
}

.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: rgba(110,91,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--accent);
  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: rgba(110,91,255,.18); color: var(--accent-300); }
.rex-badge-success   { background: rgba(0,209,122,.12);  color: #00D17A; }
.rex-badge-warning   { background: rgba(255,196,0,.12);  color: #FFC400; }
.rex-badge-danger    { background: rgba(255,77,46,.12);  color: #FF4D2E; }
.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) !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;
}