@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

:root {
  --global-gap: 5px;

  /* ── Design tokens ─────────────────────────────────────────────────── */
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12px;
  --fs-md: 13px;
  --fs-lg: 14px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  --duration-fast: 0.2s;
  --duration-normal: 0.3s;

  /* Legacy aliases (kept for backward compatibility) */
  --font_size_table_head: var(--fs-sm);
  --font_size_table_body: var(--fs-md);
  --font_weight: 100;
  /* https://www.iamsajid.com/ui-colors/ */
  /* Light theme colors */
  --color-text-primary: #1F2936;
  --color-text-placeholder: #798EAE;
  --color-bg-primary: #f9fafb;
  --color-bg-secondary: #ECECFD;
  --color-bg-sidebar: #FFFFFF;
  --color-border-hr: #E2E8F0;
  --color-hover-primary: hsl(220, 90%, 70%);
  --color-hover-secondary: #e2e2fb;
  --color-shadow: rgba(0, 0, 0, 0.05);
  --size-sidebar-opened: 160px;
  --size-sidebar-closed: 60px;

  --background: #f9fafb;
  --table_bg: #ffffff;
  --table_header_bg: #f1f5f9;
  --table_row_odd_bg: #f8fafc;
  --table_row_even_bg: #ffffff;
  --table_hover_bg: #f1f5f9;
  --table_text_color: #1e293b;
  --table_border: #e2e8f0;
  
  --select_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231e293b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  
  --green_arrow_color: hsl(140, 80%, 40%);
  --red_arrow_color: hsl(350, 90%, 40%);

  --color-accent: #ff4500;
  --color-accent-hover: #e63e00;
  --color-accent-shadow: rgba(255, 69, 0, 0.3);
  --color-accent-10: rgba(255, 69, 0, 0.1);
  --color-accent-20: rgba(255, 69, 0, 0.2);
  --color-accent-30: rgba(255, 69, 0, 0.3);
  --color-link: #4a90e2;
  --color-focus: #58a6ff;
  --color-positive: #3fb950;
  --color-negative: #f85149;
  --color-muted: #64748b;
  --color-icon-fallback-bg: #e2e8f0;
  --color-icon-fallback-text: #798EAE;
  --color-chain-gradient: linear-gradient(135deg, #627eea, #b8add2);
}

body.dark-theme {
  /* Dark theme colors */
  --color-text-primary: hsl(220, 20%, 95%);
  --color-text-placeholder: hsl(220, 20%, 70%);
  --color-bg-secondary: hsl(220, 20%, 30%);
  --color-bg-sidebar: hsl(220, 20%, 10%);
  --color-border-hr: hsl(220, 20%, 30%);
  --color-hover-secondary: hsl(220, 20%, 40%);
  --color-shadow: rgba(0, 0, 0, 0.3);

  --background: hsl(220, 20%, 10%);
  --table_bg: hsl(220, 20%, 8%);
  --table_header_bg: hsl(220, 20%, 14%);
  --table_row_odd_bg: hsl(220, 20%, 11%);
  --table_row_even_bg: hsl(220, 20%, 8%);
  --table_hover_bg: hsl(220, 20%, 16%);
  --table_text_color: hsl(220, 20%, 95%);
  --table_border: hsl(220, 20%, 20%);
  
  --select_arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f1f5f9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  
  --green_arrow_color: hsl(140, 80%, 70%);
  --red_arrow_color: hsl(350, 90%, 70%);

  --color-accent: #ff4500;
  --color-accent-hover: #e63e00;
  --color-accent-shadow: rgba(255, 69, 0, 0.3);
  --color-accent-10: rgba(255, 69, 0, 0.1);
  --color-accent-20: rgba(255, 69, 0, 0.2);
  --color-accent-30: rgba(255, 69, 0, 0.3);
  --color-link: #4a90e2;
  --color-focus: #58a6ff;
  --color-positive: #3fb950;
  --color-negative: #f85149;
  --color-muted: #94a3b8;
  --color-icon-fallback-bg: #30363d;
  --color-icon-fallback-text: #8b949e;
  --color-chain-gradient: linear-gradient(135deg, #627eea, #b8add2);
}

/* Scrollbar hiding utility — apply to any container that should hide scrollbars */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

html, body {
  min-height: 100vh;
  overflow-y: auto;
  background-color: var(--background);
}

/* ── Shared button bases ──────────────────────────────────────────── */

/* Icon-only buttons (expand, copy, chart) */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-placeholder);
  transition: all var(--duration-fast);
}
.btn-icon:hover {
  color: var(--color-hover-primary);
}

/* Pill/toggle selector buttons (period, time filter) */
.btn-pill {
  border: 1px solid var(--table_border);
  background: transparent;
  color: var(--color-text-placeholder);
  cursor: pointer;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-family: inherit;
  transition: all var(--duration-fast);
}
.btn-pill:hover {
  border-color: var(--color-hover-primary);
  color: var(--color-hover-primary);
}
.btn-pill.active {
  background: var(--color-hover-primary);
  border-color: var(--color-hover-primary);
  color: #fff;
}

/* Action buttons (apply, cancel in modals) */
.btn-primary, .btn-secondary {
  padding: 6px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--duration-fast);
}
.btn-primary {
  background-color: var(--color-accent);
  color: white;
  border: none;
}
.btn-primary:hover {
  background-color: var(--color-accent-hover);
}
.btn-secondary {
  background-color: var(--table_bg);
  color: var(--table_text_color);
  border: 1px solid var(--table_border);
}
.btn-secondary:hover {
  background-color: var(--table_hover_bg);
}

/* ── Shared search input base ───────────────────────────────────────── */
.search-input, .token-search-input, .top-bar-search-input {
  width: 100%;
  border: 1px solid var(--table_border);
  color: var(--table_text_color);
  font-family: inherit;
  transition: all var(--duration-fast) ease;
}
.search-input:focus, .token-search-input:focus, .top-bar-search-input:focus {
  outline: none;
  border-color: var(--color-hover-primary);
  box-shadow: 0 0 0 2px rgba(110, 142, 251, 0.2);
}