/* ========== Base ========== */
:root{ color-scheme:dark; --page-min:1280px; }
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:ui-sans-serif,system-ui;
  background:#0b0f13; color:#e7edf3;
}
a{ color:#7bd4ff; text-decoration:none; }
.small{ font-size:.9rem; color:#a9b7c6; }
.right{ text-align:right; }

.container{
  max-width:min(1680px,96vw);
  margin:0 auto;
  padding:16px;
}
/* Auth form (reuses your style language) */
.auth-form .row{ margin:10px 0; }
.auth-form label{ display:block; font-weight:600; margin-bottom:4px; }
.auth-form input{
  width:100%; padding:10px 12px; border-radius:10px;
  background:#121a24; color:#e7edf3; border:1px solid #2a3b52;
}
@media (max-width:520px){
  .card{ padding:14px; }
}

/* Utility visibility helpers */
.desktop-only { display:inline-flex; }
.mobile-only  { display:none; }
@media (max-width:768px){
  .desktop-only { display:none !important; }
  .mobile-only  { display:inline-flex !important; }
}

/* ========== Header / Navbar ========== */
.header{
  display:flex; align-items:center; gap:.5rem;
  padding:10px 12px; border-bottom:1px solid #1d2630;
  overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:none;
}
.header::-webkit-scrollbar{ display:none; }
.header > *{ flex:0 0 auto; }
.header .pill{ white-space:nowrap; }
.header input[type="text"],
.header input[type="search"]{ max-width:min(52vw,420px); }

/* Header responsive sizes */
@media (max-width:1200px){ .header .pill{ padding:6px 10px; font-size:14px; } }
@media (max-width:992px){
  .header{ gap:.4rem; padding:8px 10px; }
  .header .pill{ padding:5px 9px; font-size:13px; }
}
@media (max-width:900px){
  .header .nav-quick .label{ display:none; }
  .header .nav-demo{ display:none; }
}
@media (max-width:820px){
  .header .pill{ padding:4px 8px; font-size:12px; }
  .header input[type="text"], .header input[type="search"]{ max-width:60vw; }
}
@media (max-width:480px){
  .header .pill{ padding:4px 7px; }
  .header select{ max-width:36vw; }
  .header .tz{ display:none; }
}

/* ========== UI building blocks ========== */
.pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:6px 10px; border-radius:999px;
  border:1px solid #2a3b52; background:#121a24;
  font-weight:600; line-height:1; white-space:nowrap;
}
.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem; border-radius:10px; cursor:pointer;
  border:1px solid #2a3a4e; background:#15202b; color:#e7edf3;
}
.btn:disabled{ opacity:.6; cursor:not-allowed; }

.card{ background:#0f141b; border:1px solid #1d2630; border-radius:14px; padding:16px; }
.grid{ display:grid; gap:16px; }
.grid-3{ grid-template-columns:repeat(3,1fr); }

/* Badges */
.badge-wait{ padding:3px 8px; border-radius:999px; background:#222; border:1px dashed #555; }
.badge-low { background:#0f2b1f; border-color:#1e8f55; }
.badge-mid { background:#2a2a0f; border-color:#b3a31e; }
.badge-high{ background:#301c1c; border-color:#c76262; }
.badge-crit{ background:#3a101a; border-color:#ff3860; }

/* Hero */
.hero{
  overflow:hidden; background:#0f141b; border:1px solid #1d2630; border-radius:14px;
  padding:18px; display:grid; grid-template-columns:1fr 1fr auto; gap:16px;
}

/* Pager / Quick filters active state */
.pager a.pill.active,
#quickFilters .pill.active{ background:#1e2a3a; border-color:#3a5c8a; color:#cfe5ff; }

/* აქტიური ტაბის სტილი (ALL / Top Picks / New Only და pagination) */
.pill.active {
  background: #111827;   /* ოდნავ მუქი ფონია */
  border-color: #3b82f6; /* ლურჯი კონტური */
  color: #dbeafe;        /* ღია ტექსტი */
}


/* ========== Wide wrappers (screener) ========== */
.wide-wrap{ position:relative; overflow-x:auto; overflow-y:hidden; }
.wide-inner{ min-width:var(--page-min); padding-bottom:1px; }
.wide-scroll-top{ height:12px; overflow-x:auto; overflow-y:hidden; margin-bottom:8px; }
.wide-scroll-top .shim{ width:var(--page-min); height:1px; }

/* ========== Table (desktop baseline) ========== */
.table-wrap{ width:100%; overflow:auto; }
#screenerTable{
  table-layout:auto;
}

.table{
  width:max(900px,100%);
  border-collapse:collapse;
  table-layout:fixed;
  white-space:nowrap;
}
.table th,.table td{
  vertical-align:middle;
  border-bottom:1px solid #1d2630;
  /* ბევრად უფრო კომპაქტური spacing */
  padding:4px 6px;
  text-overflow:ellipsis; overflow:hidden;
  text-align:left;
}

/* sticky header + first col */
.table thead th{ position:sticky; top:0; z-index:3; background:#0f141b; }
.table th:first-child,.table td:first-child{
  position:sticky; left:0; z-index:2; background:#0f141b;
  width:48px; min-width:48px; text-align:right;
}

/* Named column widths */
._rownum{ width:44px; }
.col-last   { width:120px; }
.col-pct    { width:90px;  }
.col-vol    { width:130px; }
.col-score  { width:90px;  }
.col-upside { width:90px;  }
.col-onchain{ width:160px; }
.col-conf   { width:110px; }
.col-fprisk { width:110px; }
.col-age    { width:90px;  }
.col-link   { width:80px;  }

/* უფრო მჭიდრო პირველი სვეტები (#, Symbol, First seen) კონკრეტულად screener table-ზე */
@media (min-width: 768px){
  /* # column */
  #screenerTable th:nth-child(1),
  #screenerTable td:nth-child(1){
    width: 40px;
  }

  /* Symbol – ზომიერი სიგანე, რომ სახელების უმრავლესობა სრულად ჩანდეს */
  #screenerTable th:nth-child(2),
  #screenerTable td:nth-child(2){
    width: 120px;
  }

  /* First seen – კომპაქტური თარიღისთვის */
  #screenerTable th:nth-child(3),
  #screenerTable td:nth-child(3){
    width: 110px;
  }
}



/* Desktop spacing tweaks */
@media (min-width:1400px){
  .table th,.table td{ padding:6px 8px; }
  .pill{ padding:6px 10px; }
}
@media (max-width:1200px){
  .table{ font-size:13px; }
  .table th,.table td{ padding:4px 4px; }
  .pill{ padding:4px 8px; font-size:12px; }
}

/* Progressive hiding (tablet → phone) */
@media (max-width:992px){
  .table .col-age,
  .table .col-link{ display:none; }
}
@media (max-width:820px){
  .table .col-fprisk{ display:none; }
}
@media (max-width:760px){
  .table .col-onchain{ display:none; }
}

/* ========== Mobile sort bar (single, clean) ========== */
/* Hidden on desktop */
.mob-sort{ display:none; }

/* Show + style on mobile (sticky, full-width) */
@media (max-width:768px){
  .mob-sort{
    display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    position:sticky; top:0; z-index:6;
    padding:8px 10px; margin:8px 0 10px;
    background:#0f141b;
    border-bottom:1px solid #1d2630;
    backdrop-filter:blur(3px);
  }
  .mob-sort label{ display:flex; gap:6px; align-items:center; }
  .mob-sort select{
    -webkit-appearance:menulist; appearance:auto;
    background:#121a24; color:#e7edf3;
    border:1px solid #2a3b52; border-radius:999px; padding:6px 10px;
    font-weight:600; line-height:1;
  }
  #mobApply{ padding:6px 10px; }
}

/* ========== Mobile table behavior ========== */
/* Keep horizontal table up to 768px; hide heavy cols */
@media (max-width:768px){
  /* prevent right-shift of mob-sort / content */
  .wide-inner{ min-width:0 !important; }
  .wide-scroll-top{ display:none !important; }

  .table-wrap{ overflow-x:auto !important; }
  .table{ min-width:980px; font-size:13px; }
  .table th,.table td{ padding:8px 8px; }
.table { table-layout: auto; width: 100%; }
.table th, .table td { white-space: nowrap; }
.table th:first-child, .table td:first-child { min-width: 44px; }
.table td .pill { max-width: none; }
  #screenerTable th.col-onchain, #screenerTable td:nth-child(9),
  #screenerTable th.col-conf,    #screenerTable td:nth-child(10){ display:none; }
}

/* Stacked cards only on very narrow screens */
@media (max-width:560px){
  .table{ width:100%; table-layout:auto; white-space:normal; border:0; min-width:0; }
  .table thead{ display:none; }
  .table tbody, .table tr, .table td{ display:block; width:100%; }
  .table tr{
    background:#0f141b; border:1px solid #1d2630;
    border-radius:12px; margin:10px 0; padding:10px 12px;
  }
  .table td{ border:0; padding:6px 0; }
  .table td::before{
    content:attr(data-th);
    display:block; font-size:11px; opacity:.7; margin-bottom:3px;
  }
  .table td._rownum{ display:none; }
  .table .t-num{ text-align:left; }
}

/* Narrowest tweaks */
@media (max-width:420px){
  .container{ padding:12px; }
  .pill{ padding:5px 8px; }
}

/* ========== Extra mobile fit: header & filters ========== */
@media (max-width:860px){
  .header{ flex-wrap:wrap; row-gap:.4rem; }
  .header .tz, .header .nav-demo{ display:none !important; }
  .header .nav-quick .label{ display:none !important; }
  #nav-scan input[name="a"]{ width:min(60vw,220px); }
  #nav-scan select{ max-width:28vw; }
  #nav-scan .btn{ padding:5px 8px; }
}
@media (max-width:520px){
  #nav-scan input[name="a"]{ width:min(65vw,200px); }
  .header a.pill[href*="/portfolio"],
  .header a.pill[href*="/alerts"]{ display:none !important; }
}

/* Quote + On-chain + Apply form wraps nicely on mobile */
@media (max-width:860px){
  form[action*="screener"]{
    flex-wrap:wrap !important;
    gap:6px !important;
  }
  form[action*="screener"] select[name="quote"]{
    flex:1 1 200px; max-width:260px;
  }
  form[action*="screener"] label.pill{
    min-width:fit-content; padding:5px 8px;
  }
  form[action*="screener"] .pill[type="submit"],
  form[action*="screener"] button.pill{ padding:6px 10px; }
}

/* --- Mobile toolbar layout hard fixes (single version) --- */
@media (max-width:860px){
  /* force wrap on top tools wrapper (inline style="display:flex") */
  .card > div[style*="display:flex"]{
    flex-wrap:wrap !important;
    align-content:flex-start;
    width:100%;
    gap:6px !important;
  }
  .card > div[style*="display:flex"] > *{
    flex:0 1 auto;
    min-width:0;            /* critical for iOS/Android text shrink */
    max-width:100%;
  }
  /* mobile sort bar takes full row and comes first */
  #mobileSortBar,
  .mob-sort{
    order:0;
    flex:0 0 100%;
    width:100%;
  }
  /* inputs stretch nicely */
  #liveSearch,
  #serverSearchForm input[name="q"]{
    flex:1 1 240px;
    min-width:160px;
    width:auto;
  }
  /* quote select keeps sane width */
  form[action*="screener"] select[name="quote"]{
    flex:1 1 200px;
    max-width:260px;
  }
  /* allow checkbox label wrapping */
  label.pill{ white-space:normal !important; }
}

/* Final mobile polishing */
@media (max-width:768px){
  .pill{ white-space:normal; }  /* allow wrap on long pills */
}
.col-watch{
  width:40px;
  text-align:center;
}

/* Watchlist star button */
.watch-btn{
  background:none;
  border:none;
  color:#fbbf24;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:0;
}
.watch-btn:hover{
  transform:scale(1.1);
}
.table .snap-cell {
  white-space: normal;   /* დავარღვიოთ global nowrap მხოლოდ ამ სვეტში */
  max-width: 220px;
}

.snap-metrics {
  font-size: 11px;
  line-height: 1.25;
}

#aiInsightTooltip {
  position: fixed;
  max-width: 360px;
  padding: 10px 12px;
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);
  color: #e5e7eb;
  font-size: 15px;
  line-height: 1.4;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  white-space: normal;
  overflow-wrap: break-word;
}
#aiInsightTooltip b {
  display:block;
  margin-bottom:4px;
}

.ai-pill {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #374151;
  font-size:11px;
}

.ai-pill-icon {
  font-size:13px;
}

/* Bullish – მწვანე */
.ai-pill-bull {
  background:#064e3b;
  border-color:#22c55e;
  color:#bbf7d0;
}

/* Bearish – წითელი */
.ai-pill-bear {
  background:#7f1d1d;
  border-color:#f97373;
  color:#fee2e2;
}

/* Caution – ყვითელ-ნარინჯისფერი */
.ai-pill-caution {
  background:#78350f;
  border-color:#facc15;
  color:#fef9c3;
}

/* Neutral – ნაცრისფერი */
.ai-pill-neutral {
  background:#111827;
  border-color:#4b5563;
  color:#e5e7eb;
}

/* No info / No AI data – უფრო "გაცივებული" ბაცა ფერი */
.ai-pill-none {
  background:#020617;
  border-color:#334155;
  color:#9ca3af;
  font-style: italic;
}
/* === Stock table fixes === */
#stockTable { table-layout: auto !important; }

#stockTable th,
#stockTable td {
  text-overflow: clip;      /* აღარ “…” */
}

#stockTable th:nth-child(1),
#stockTable td:nth-child(1){
  width: 60px !important;
  min-width: 60px !important;
}

#stockTable th:nth-child(14),
#stockTable td:nth-child(14){
  width: 140px !important;     /* Signal */
  min-width: 140px !important;
}

#stockTable td:nth-child(14) .pill{
  max-width: none !important;
}

/* === Tokengauge tooltip === */
/* === TG tooltip (data-tip) === */
#tgTooltip{
  position: fixed;
  z-index: 99999;
  max-width: 420px;
  padding: 10px 12px;

  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.55);

  color: #e5e7eb;
  font-size: 13px;
  line-height: 1.35;

  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;

  /* ეს აუცილებელია შენს data-tip-ში newline-ებისთვის */
  white-space: pre-line;
  overflow-wrap: break-word;
}

#tgTooltip.on{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}


/* ზოგადად ცოტა შევკუმშოთ ცხრილი საშუალო ეკრანებზე */
@media (max-width: 1200px) {
  .table {
    font-size: 12px;
  }
  .table th,
  .table td {
    padding: 4px 6px;
  }
}

/* 1400px-ზე ქვემოთ — დავმალოთ ყველაზე ნაკლებად მნიშვნელოვანი: Link + Facts age */
@media (max-width: 1400px) {
  .table th:nth-child(15),
  .table td:nth-child(15), /* Link */
  .table th:nth-child(14),
  .table td:nth-child(14)  /* Facts age */
  {
    display: none;
  }
}

/* 1250px-ზე ქვემოთ — FP Risk და Confidence წაიშალოს ტაბულარული ხედიდან */
@media (max-width: 1250px) {
  .table th:nth-child(13),
  .table td:nth-child(13), /* FP Risk */
  .table th:nth-child(12),
  .table td:nth-child(12)  /* Confidence */
  {
    display: none;
  }
}

/* 1100px-ზე ქვემოთ — AI Score და AI Sentiment ავიღოთ ქვემოთ (მოკვეთა) */
@media (max-width: 1100px) {
  .table th:nth-child(10),
  .table td:nth-child(10), /* AI Sentiment */
  .table th:nth-child(9),
  .table td:nth-child(9)   /* AI Score */
  {
    display: none;
  }
}

/* 950px-ზე ქვემოთ — Quote Vol ($) უკვე შეიძლება რომ მოიჭრას */
@media (max-width: 950px) {
  .table th:nth-child(6),
  .table td:nth-child(6)   /* Quote Vol ($) */
  {
    display: none;
  }
}