/* assets/sentiment.css

   =========================================================

   GETICK — Sentiment Screener (scoped)

   Put in: /assets/sentiment.css

   ========================================================= */



.gt-sentiment{

  --bg0: #06070a;

  --bg1: #0b0b10;

  --stroke: rgba(255,255,255,.10);

  --muted: rgba(255,255,255,.70);

  --muted2: rgba(255,255,255,.55);

  --brand: #2ecc71;

  --brand-soft: rgba(46,204,113,.14);

}



/* header row */

.gt-sentiment .sent-head{

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:14px;

  margin: 6px 0 14px 0;

}



.gt-sentiment .sent-left{

  min-width: 260px;

}



.gt-sentiment .sent-title{

  font-weight: 800;

  letter-spacing: .8px;

  font-size: 20px;

  line-height: 1.1;

  color: rgba(255,255,255,.92);

}



.gt-sentiment .sent-sub{

  margin-top: 4px;

  font-size: 12px;

  color: rgba(255,255,255,.62);

}



.gt-sentiment .sent-actions{

  display:flex;

  gap:10px;

  align-items:center;

}



/* Buttons (match your screener vibe) */

.gt-sentiment .gt-btn{

  border-radius: 12px;

  padding: 9px 12px;

  font-weight: 700;

  font-size: 12px;

  letter-spacing: .2px;

}



.gt-sentiment .gt-btn-primary{

  background: linear-gradient(180deg, rgba(46,204,113,.95), rgba(46,204,113,.70));

  border: 1px solid rgba(46,204,113,.35);

  box-shadow: 0 10px 22px rgba(0,0,0,.35);

}



.gt-sentiment .gt-btn-primary:hover{

  filter: brightness(1.05);

}



.gt-sentiment .gt-btn-ghost{

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.12);

  color: rgba(255,255,255,.86);

}



.gt-sentiment .gt-btn-ghost:hover{

  background: rgba(255,255,255,.08);

}



/* Error banner */

.gt-sentiment .sent-error{

  margin: 0 0 12px 0;

  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid rgba(239,68,68,.35);

  background: rgba(127,29,29,.20);

  color: rgba(254,202,202,.95);

}



/* Graph sizing (keeps it crisp inside cards) */

.gt-sentiment .sent-graph{

  width: 100%;

  height: 72vh;

  min-height: 720px;

}



/* Modal styling (similar to your About modals) */

.gt-sentiment .sent-about-modal .modal-content{

  background: rgba(10,12,16,.96);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow: 0 22px 60px rgba(0,0,0,.65);

  border-radius: 18px;

}



.gt-sentiment .sent-about-modal .modal-header{

  border-bottom: 1px solid rgba(255,255,255,.10);

}



.gt-sentiment .sent-about-modal .modal-title{

  font-weight: 800;

  letter-spacing: .3px;

}



.gt-sentiment .sent-about-modal .modal-body{

  padding: 14px 14px 16px 14px;

}



/* inner card in modal */

.gt-sentiment .sent-about-card{

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 16px;

  padding: 14px 14px;

}



.gt-sentiment .sent-about-h{

  font-weight: 800;

  margin: 6px 0 8px 0;

  color: rgba(255,255,255,.92);

}



.gt-sentiment .sent-about-ul{

  margin: 0 0 10px 18px;

  color: rgba(255,255,255,.72);

  font-size: 13px;

  line-height: 1.45;

}

.gt-sentiment .sent-about-title{

  font-weight: 900;

  letter-spacing: .4px;

  font-size: 18px;

  color: rgba(255,255,255,.92);

  margin-bottom: 6px;

}



.gt-sentiment .sent-about-lead{

  color: rgba(255,255,255,.70);

  font-size: 13px;

  line-height: 1.45;

  margin-bottom: 10px;

}



.gt-sentiment .sent-about-hr{

  border: none;

  height: 1px;

  background: rgba(255,255,255,.10);

  margin: 10px 0 12px 0;

}



.gt-sentiment .sent-about-k{

  font-weight: 800;

  color: rgba(255,255,255,.88);

}



.gt-sentiment .sent-about-line{

  color: rgba(255,255,255,.72);

  font-size: 13px;

  line-height: 1.45;

  margin: 6px 0;

}



.gt-sentiment .sent-about-cheat{

  background: rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.10);

  border-radius: 14px;

  padding: 10px 12px;

}

.gt-sentiment .sent-graph{

  width: 100%;

  height: calc(100vh - 170px);  /* tweak 150–210 depending on your topbar */

  min-height: 520px;            /* ✅ lower than 720 */

}

/* Taller plot/card */

.gt-sentiment .sent-graph{

  width: 100%;

  height: 88vh;        /* taller */

  min-height: 1100px;  /* ensures big card even on server */

}

.gt-sentiment .ui-card-body{

  overflow: visible;   /* don’t clip the tall plot */

}

/* Extra bottom air for tall sentiment card */

.gt-sentiment .ui-card-body{

  padding-bottom: 28px;   /* was effectively tight */

}

.gt-sentiment .ui-card-body{

  padding: 12px 14px 32px 14px;

}

.gt-sentiment .sent-graph{

  margin-bottom: 10px;

}