@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  --ff-ink: #06141f;
  --ff-panel: #0b2231;
  --ff-panel-raised: #103044;
  --ff-panel-soft: #0f2a3a;
  --ff-line: rgba(139, 207, 220, 0.17);
  --ff-line-strong: rgba(114, 215, 226, 0.48);
  --ff-text: #edf7f8;
  --ff-muted: #9bb5bf;
  --ff-cyan: #72d7e2;
  --ff-brass: #d2c187;
  --ff-gold: #d2c187;
  --ff-mint: #9ad8c0;
  --ff-green: #9ad8c0;
  --ff-danger: #f1a49a;
}

html { background: var(--ff-ink); }

body,
#root {
  color: var(--ff-text);
  font-family: "Manrope", sans-serif !important;
}

body {
  background-color: var(--ff-ink) !important;
  background-image:
    linear-gradient(90deg, rgba(114, 215, 226, 0.035) 1px, transparent 1px),
    linear-gradient(rgba(114, 215, 226, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 85% -8%, rgba(32, 104, 123, 0.32), transparent 32rem),
    radial-gradient(circle at -10% 74%, rgba(32, 94, 92, 0.17), transparent 30rem),
    linear-gradient(155deg, #0b2030, #06141f 56%) !important;
  background-size: 84px 84px, 84px 84px, auto, auto, auto !important;
}

#root h1,
#root h2,
#root h3,
#root h4,
#root .ff-section-title,
#root .ff-dashboard-card > div:nth-last-child(2) {
  font-family: "Barlow Condensed", sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.015em;
}

#root .ff-dashboard-content {
  background:
    radial-gradient(circle at 92% -4%, rgba(64, 170, 186, 0.17), transparent 28rem),
    radial-gradient(circle at -7% 72%, rgba(70, 151, 120, 0.11), transparent 24rem),
    var(--ff-ink) !important;
}

#root .ff-dashboard-header {
  border-color: var(--ff-line) !important;
  background: rgba(6, 20, 31, 0.92) !important;
  backdrop-filter: blur(16px);
}

#root .ff-dashboard-header > div:first-child,
#root .ff-dashboard-card > div:nth-last-child(2) {
  color: var(--ff-text) !important;
}

#root .ff-dashboard-header > div:first-child span,
#root .ff-dashboard-label,
#root .ff-dashboard-card--1 .ff-dashboard-card-icon,
#root .ff-dashboard-card--4 .ff-dashboard-card-icon,
#root .ff-dashboard-card--7 .ff-dashboard-card-icon {
  color: var(--ff-cyan) !important;
}

#root .ff-dashboard-header button,
#root .ff-dashboard-card,
#root .ff-dashboard-card > div:first-child {
  border-color: var(--ff-line) !important;
}

#root .ff-dashboard-card {
  background: linear-gradient(145deg, rgba(18, 58, 75, 0.92), rgba(10, 31, 45, 0.98)) !important;
  box-shadow: 0 13px 28px rgba(0, 8, 16, 0.17) !important;
}

#root .ff-dashboard-card:hover,
#root .ff-dashboard-card:focus-visible {
  border-color: var(--ff-line-strong) !important;
  box-shadow: 0 18px 34px rgba(0, 8, 16, 0.28) !important;
}

#root .ff-dashboard-card > div:first-child {
  background: rgba(114, 215, 226, 0.09) !important;
}

#root .ff-dashboard-card > div:last-child,
#root .ff-dashboard-card > div:nth-last-child(1) {
  color: var(--ff-muted) !important;
}

/* Standardize the legacy inline dashboard and every app workspace. */
#root [style*="background:#ffffff"],
#root [style*="background: #ffffff"] { background: var(--ff-panel) !important; }

#root [style*="background:#0a1628"],
#root [style*="background: #0a1628"] { background: var(--ff-ink) !important; }

#root [style*="background:#f97316"],
#root [style*="background: #f97316"] {
  background: var(--ff-cyan) !important;
  color: #08212b !important;
}

#root [style*="background:rgba(249,115,22"],
#root [style*="background: rgba(249,115,22"] { background: rgba(114, 215, 226, 0.11) !important; }

#root [style*="border:2px solid rgba(249,115,22"],
#root [style*="border: 2px solid rgba(249,115,22"],
#root [style*="border:1px solid rgba(249,115,22"],
#root [style*="border: 1px solid rgba(249,115,22"] { border-color: rgba(114, 215, 226, 0.3) !important; }

#root [style*="color:#ffffff"],
#root [style*="color: #ffffff"] { color: var(--ff-text) !important; }

#root [style*="color:#0f172a"],
#root [style*="color: #0f172a"] { color: var(--ff-text) !important; }

#root [style*="color:#94a3b8"],
#root [style*="color: #94a3b8"],
#root [style*="color:#64748b"],
#root [style*="color: #64748b"] { color: var(--ff-muted) !important; }

#root [style*="color:#f97316"],
#root [style*="color: #f97316"] { color: var(--ff-cyan) !important; }

#root [style*="color:#06b6d4"],
#root [style*="color: #06b6d4"] { color: var(--ff-mint) !important; }

#root [style*="box-shadow:0 2px 12px"],
#root [style*="box-shadow: 0 2px 12px"] { box-shadow: 0 16px 35px rgba(0, 8, 16, 0.24) !important; }

#root .card,
#root .stats,
#root .alert,
#root .collapse,
#root .dropdown-content,
#root .modal-box,
#root .menu,
#root .ff-detail-section,
.ff-material-card {
  border-color: var(--ff-line) !important;
  background: linear-gradient(140deg, rgba(21, 60, 76, 0.62), rgba(8, 27, 40, 0.92)) !important;
  box-shadow: 0 16px 34px rgba(0, 8, 16, 0.16);
}

#root .btn,
#root .button,
#root button:not(.ff-dashboard-card) {
  border-color: var(--ff-line) !important;
  background-color: rgba(114, 215, 226, 0.055) !important;
  color: var(--ff-text) !important;
}

#root .btn-primary,
#root button.bg-orange-500,
#root .bg-orange-500 {
  border-color: var(--ff-cyan) !important;
  background: var(--ff-cyan) !important;
  color: #08212b !important;
}

#root .input,
#root .select,
#root .textarea,
#root input,
#root select,
#root textarea,
.ff-material-input-wrap {
  border-color: var(--ff-line) !important;
  background: rgba(3, 17, 27, 0.68) !important;
  color: var(--ff-text) !important;
}

#root .badge,
.ff-material-density {
  border-color: rgba(114, 215, 226, 0.27) !important;
  background: rgba(114, 215, 226, 0.1) !important;
  color: var(--ff-cyan) !important;
}

#root ::-webkit-scrollbar { width: 0.55rem; height: 0.55rem; }
#root ::-webkit-scrollbar-track { background: rgba(3, 14, 23, 0.58); }
#root ::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(114, 215, 226, 0.34); }

@media (max-width: 640px) {
  #root .ff-dashboard-header { min-height: 68px !important; }
  #root .ff-dashboard-home { padding-bottom: 42px !important; }
  #root .ff-dashboard-grid { gap: 11px !important; }
  #root .ff-dashboard-card { min-height: 178px !important; }
}