/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* ===============================================
   BASE
=============================================== */
body {
  font-family: 'Inter', sans-serif;
  background: #f5f7fb;
  color: #0f172a;
  margin: 0;
  line-height: 1.5;
}
img {
  max-width: 100%;
  height: auto;
}
/* ===============================================
   PAGE CONTAINER (FULLY RESPONSIVE)
=============================================== */
.page-container {
  width: 95%;
  max-width: 1600px;
  margin: 25px auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* Tablet */
@media(max-width:1024px) {
  .page-container {
    padding: 0 25px;
  }
}
/* Mobile */
@media(max-width:768px) {
  .page-container {
    width: 100%;
    max-width: 100%;
    padding: 0 12px !important;
    margin: 12px auto;
  }
}
/* Small Mobile */
@media(max-width:480px) {
  .page-container {
    padding: 0 8px !important;
    margin-top: 10px;
  }
}
/* ===============================================
   METRIC CARDS
=============================================== */
.metrics-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.metric-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-align: center;
  padding: 16px;
  flex: 1 1 180px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  transition: .25s;
}
.metric-box:hover {
  background: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.metric-value {
  font-size: 1.25rem;
  font-weight: 600;
}
.metric-label {
  font-size: .85rem;
  margin-top: 4px;
}
.cap-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: .75rem;
  font-weight: 600;
}
.cap-badge.large-cap { background:#e0f2fe; color:#0369a1; }
.cap-badge.mid-cap   { background:#fef9c3; color:#854d0e; }
.cap-badge.small-cap { background:#fee2e2; color:#b91c1c; }
/* Mobile */
@media(max-width:768px) {
  .metrics-grid {
    flex-direction: column;
    gap: 12px;
  }
  .metric-box {
    width: 100%;
  }
  .chart-box {
    height: 300px;
  }
}
/* ===============================================
   SCORE SECTION
=============================================== */
.score-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 26px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.section-title {
  font-size: 1.15rem;
  font-weight: 600;
  border-left: 4px solid #1a73e8;
  padding-left: 10px;
  margin-bottom: 16px;
}
.score-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.score-card {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  flex: 1 1 160px;
}
.score-card.total {
  background: #fff;
}
.score-value {
  font-size: 1.15rem;
  font-weight: 600;
}
.score-label {
  font-size: .83rem;
  color: #64748b;
}
/* Mobile */
@media(max-width:768px) {
  .score-grid {
    flex-direction: column;
  }
  .score-card {
    width: 100%;
  }
}
/* ===============================================
   AI SECTIONS
=============================================== */
.ai-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px 24px;
}
.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ai-header h2 {
  font-size: 1.1rem;
  border-left: 4px solid #1a73e8;
  padding-left: 10px;
  margin: 0;
}
.ai-btn {
  background: #1a73e8;
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: .25s;
}
.ai-btn:hover {
  background: #155ac8;
}
.ai-content {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  margin-top: 12px;
  padding: 16px;
  border-radius: 10px;
}
/* ===============================================
   FINANCIAL TABLES (DESKTOP + MOBILE FIXED)
=============================================== */
.financial-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 18px;
}
/* Scroll container */
.table-scroll {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 75vh;
  -webkit-overflow-scrolling: touch;
  position: relative;
  border-radius: 10px;
}
/* Base table */
.financial-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;        /* forces horizontal scroll */
  width: 100%;
  background: #fff;
}
/* Header row (TOP FIXED) */
.financial-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  font-weight: 700;
  color: #1e3a8a;
  z-index: 20;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 14px;
  border-bottom: 1px solid #e5e7eb;
}
/* Data cells */
.financial-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  white-space: nowrap;
}
/* LEFT metric column (FIXED) */
.financial-table .sticky-left {
  position: sticky;
  left: 0;
  background: #ffffff;
  z-index: 30;
  font-weight: 700;
  min-width: 180px;
}
/* TOP + LEFT intersection */
.financial-table thead .sticky-left {
  z-index: 40;
  background: #e5e7eb;
}
/* Metric name */
.metric-name {
  font-weight: 700;
  color: #0f172a;
}
/* Value colors */
.financial-table td.positive {
  color: #16a34a;
  font-weight: 600;
}
.financial-table td.negative {
  color: #dc2626;
  font-weight: 600;
}
.financial-table td.neutral {
  color: #64748b;
}
/* ===============================
   MOBILE OVERRIDES (IMPORTANT)
=============================================== */
/* ===============================================
   SCREENER-LIKE MOBILE ZOOM TABLE
=============================================== */
@media (max-width: 768px) {
  .table-scroll {
    width: 100%;
    overflow-x: auto;
  }

  .financial-table th {
    font-size: 17px;
    padding: 16px 18px;
    font-weight: 700;
  }
  .financial-table td {
    font-size: 17px;
    padding: 16px 18px;
    line-height: 1.45;
  }
  /* Metric column */
  .financial-table .sticky-left {
    min-width: 280px;       /* 🔥 KEY DIFFERENCE */
    font-size: 17px;
    font-weight: 800;
  }
  .financial-table thead .sticky-left {
    z-index: 60;
  }
}
/* ===============================================
   CHARTS
=============================================== */
.chart-grid-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.chart-box {
  background: #fff;
  border: 1px solid #e5e7eb;
  height: 360px;
  padding: 20px;
  border-radius: 12px;
}
.chart-box canvas {
  width: 100% !important;
  height: 100% !important;
}
/* Mobile */
@media(max-width:900px) {
  .chart-grid-2x2 {
    grid-template-columns: 1fr;
  }
  .chart-box {
    padding: 14px;
    height: 300px;
  }
}
/* ===============================================
   CHATBOT (BOTTOM)
=============================================== */
#chatbot-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2563eb;
  color: #fff;
  padding: 14px;
  border-radius: 50px;
  cursor: pointer;
  font-size: 20px;
  z-index: 9999;
}
#chatbot-box {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 330px;
  height: 420px;
  background: #fff;
  border-radius: 12px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
/* Mobile */
@media(max-width:500px){
  #chatbot-box {
    width: 90%;
    height: 65vh;
    right: 5%;
    bottom: 90px;
  }
  #chatbot-toggle {
    right: 15px;
    bottom: 15px;
  }
}
/* ===============================================
   SIDE CHATBOT (RIGHT SIDE)
=============================================== */
#side-chatbot-box {
  position: fixed;
  top: 80px;
  right: 25px;
  width: 430px;
  height: 620px;
  background: white;
  border-radius: 14px;
  border: 1px solid #d1d5db;
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 9999;
}
/* FULL SCREEN CHATBOX ON MOBILE */
@media(max-width:600px){
  #side-chatbot-box {
    width: 100% !important;
    height: 100vh !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    z-index: 999999 !important;
  }
  #side-chatbot-header {
    padding: 16px !important;
    font-size: 18px !important;
  }
  #side-chatbot-messages {
    height: calc(100vh - 140px) !important;
    padding: 16px !important;
  }
  #side-chatbot-input-area {
    padding: 14px !important;
  }
  #side-chatbot-input {
    font-size: 16px !important;
  }
  #side-chatbot-send {
    font-size: 16px !important;
    padding: 12px 16px !important;
  }
  #side-chatbot-toggle {
    right: 15px !important;
    bottom: 80px !important;
  }
}
/* =========================================
   MOBILE – BIG READABLE FINANCIAL TABLE
   NO ZOOM REQUIRED
========================================= */
@media (max-width: 768px) {

  /* Scroll wrapper */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* IMPORTANT: table ko shrink hone se roko */
  .financial-table {
    width: max-content;   /* 🔥 magic */
    min-width: 1400px;    /* 🔥 ensures big table */
  }

  /* Header cells */
  .financial-table th {
    font-size: 18px;      /* 🔥 clearly readable */
    padding: 18px 20px;
    font-weight: 700;
  }

  /* Data cells */
  .financial-table td {
    font-size: 18px;
    padding: 18px 20px;
    line-height: 1.5;
  }

  /* Left metric column */
  .financial-table .sticky-left {
    min-width: 300px;     /* 🔥 metric names clear */
    font-size: 18px;
    font-weight: 800;
  }
}
.financial-table {
  table-layout: auto;
}
/* END OF styles.css */
/* =========================================
   🔥 MOBILE FULL-WIDTH OVERRIDE (CRITICAL)
========================================= */
@media (max-width: 768px) {

  /* Kill desktop container behaviour */
  .container,
  .main-content {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Financial sections edge-to-edge */
  .financial-section {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* TOGGLE */
#trade-toggle{
  position:fixed;
  right:25px;
  bottom:120px;
  background:linear-gradient(135deg,#2563eb,#1e40af);
  color:#fff;
  padding:14px 18px;
  border-radius:14px;
  cursor:pointer;
  font-weight:600;
  z-index:9999;
}

/* PANEL */
#trade-panel{
  position:fixed;
  top:0;
  right:-360px;
  width:360px;
  height:100%;
  background:#fff;
  box-shadow:-6px 0 30px rgba(0,0,0,.25);
  transition:.35s;
  z-index:10000;
}
#trade-panel.active{ right:0; }

.trade-header{
  background:#1e40af;
  color:#fff;
  padding:16px;
  display:flex;
  justify-content:space-between;
  font-weight:600;
}

.trade-body{ padding:20px; }

.trade-info{
  display:flex;
  justify-content:space-between;
  background:#f1f5f9;
  padding:12px;
  border-radius:12px;
  margin-bottom:15px;
}
.trade-info small{ font-size:12px;color:#64748b; }
.balance{ font-weight:700; }
.price{ font-weight:700;color:#2563eb; }

.total-box{
  margin:10px 0;
  padding:12px;
  background:#ecfeff;
  border-radius:12px;
  text-align:center;
  font-weight:700;
  color:#0f766e;
}

.trade-buttons{
  display:flex;
  gap:12px;
}
.buy-btn{
  flex:1;
  background:#16a34a;
  color:white;
  padding:14px;
  border:none;
  border-radius:12px;
  font-weight:700;
}
.sell-btn{
  flex:1;
  background:#dc2626;
  color:white;
  padding:14px;
  border:none;
  border-radius:12px;
  font-weight:700;
}

/* POPUP */
#trade-popup{
  position:fixed;
  inset:0;
  display:none;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,.45);
  z-index:20000;
}
.popup-box{
  background:white;
  padding:26px;
  border-radius:16px;
  width:280px;
  text-align:center;
}
#popup-icon{ font-size:42px;margin-bottom:10px; }
/* ==========================
   🤖 CARL INSIGHTS – PREMIUM
========================== */

.carl-wrap{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* PROS */
.carl-pros{
  background:#ecfdf5;
  border-left:6px solid #16a34a;
  padding:16px 18px;
  border-radius:12px;
}

.carl-pros h3{
  margin:0 0 10px;
  font-size:1rem;
  color:#065f46;
}

/* CONS */
.carl-cons{
  background:#fef2f2;
  border-left:6px solid #dc2626;
  padding:16px 18px;
  border-radius:12px;
}

.carl-cons h3{
  margin:0 0 10px;
  font-size:1rem;
  color:#7f1d1d;
}

/* LISTS */
.carl-wrap ul{
  margin:0;
  padding-left:18px;
}

.carl-wrap li{
  margin-bottom:8px;
  font-size:0.95rem;
  line-height:1.55;
}

/* NOTE */
.carl-note{
  background:#fffbeb;
  border-left:6px solid #f59e0b;
  padding:14px 18px;
  border-radius:12px;
  font-size:0.9rem;
  color:#92400e;
}
/* header  */

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: linear-gradient(90deg,#0f172a,#020617);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 10000;
}
.header-left .logo {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}


.app-header a {
  color: #fff;
  text-decoration: none;
  margin-left: 12px;
}

.logo {
  font-size: 18px;
  font-weight: bold;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-email {
  font-size: 14px;
  opacity: 0.9;
}

.btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.btn-login { background:#2563eb;color:#fff; }
.btn-signup{ background:#16a34a;color:#fff; }
.btn-logout{ background:#dc2626;color:#fff; }

/* ===============================
   🔥 WATCHLIST – BOTTOM TO TOP
================================ */

/* BASE (HIDDEN) */
.watchlist-drawer{
  position: fixed;
  left: 0;
  bottom: -100%;
  width: 100%;
  height: 75vh;
  background: #ffffff;
  box-shadow: 0 -12px 30px rgba(0,0,0,0.25);
  border-radius: 18px 18px 0 0;
  transition: bottom 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 50000;

  display: flex;
  flex-direction: column;
}

/* OPEN STATE */
.watchlist-drawer.open{
  bottom: 0;
}

/* HEADER */
.watchlist-header{
  height: 56px;
  flex-shrink: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0 16px;
  background: linear-gradient(90deg,#0f172a,#020617);
  color: #fff;

  border-radius: 18px 18px 0 0;
}

.watchlist-header h3{
  margin:0;
  font-size:1rem;
  font-weight: 700;
}

/* ❌ CLOSE BUTTON (FIXED) */
.watchlist-header button{
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;

  width: 34px;
  height: 34px;
  border-radius: 50%;

  font-size: 18px;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}
.watchlist-header button:hover{
  background: rgba(255,255,255,0.25);
}

/* CONTENT */
.watchlist-content{
  padding: 14px;
  overflow-y: auto;
  flex: 1;
}

.watch-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px;
  border-radius:10px;
  margin-bottom:8px;
  background:#f9fafb;
}

.watch-row a{
  text-decoration:none;
  color:#1e1b4b;
  font-weight:600;
}

.watch-row button{
  background:none;
  border:none;
  cursor:pointer;
  font-size:.9rem;
  color:#ef4444;
}

.watchlist-link{
  /* margin-right:16px; */
  font-weight:600;
  cursor:pointer;
}
.watch-name{
  font-weight:700;
  font-size:.95rem;
}

.watch-price{
  font-size:.9rem;
  color:#16a34a;
  margin-top:4px;
}
/* price base */
.watch-price{
  font-size:.9rem;
  font-weight:600;
  transition: color .3s ease;
}

/* price up */
.price-up{
  color:#16a34a;
  animation: priceUp .4s ease;
}

/* price down */
.price-down{
  color:#dc2626;
  animation: priceDown .4s ease;
}

@keyframes priceUp{
  0%{transform:translateY(3px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}

@keyframes priceDown{
  0%{transform:translateY(-3px);opacity:.4}
  100%{transform:translateY(0);opacity:1}
}
.trade-body.minimal{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ROWS */
.row{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.label{
  font-size:.8rem;
  color:#64748b;
}

.value{
  font-size:1.1rem;
  font-weight:700;
}

.value.green{ color:#16a34a }
.value.blue{ color:#2563eb }

/* DIVIDER */
.divider{
  height:1px;
  background:#e5e7eb;
  margin:6px 0;
}

/* FIELD */
.field label{
  font-size:.75rem;
  color:#64748b;
}

.field input{
  width:100%;
  margin-top:6px;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  font-size:1rem;
}

/* TOTAL */
.total-minimal{
  background:#f8fafc;
  border-radius:12px;
  padding:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.9rem;
}

.total-minimal strong{
  font-size:1.25rem;
  color:#0f172a;
}

/* BUTTONS */
.trade-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.buy-btn{
  background:#16a34a;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:14px;
  font-weight:700;
}

.sell-btn{
  background:#dc2626;
  color:#fff;
  border:none;
  border-radius:12px;
  padding:14px;
  font-weight:700;
}

/* NOTE */
.trade-note{
  text-align:center;
  font-size:.7rem;
  color:#64748b;
}
/* Menu */
.nav-menu { position: relative; }

.menu-btn {
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

/* Dropdown */
.menu-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  background: #fff;
  min-width: 190px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.menu-dropdown a {
  padding: 14px 16px;
  font-weight: 600;
  text-decoration: none;
  color: #0f172a;
}

.menu-dropdown a:hover {
  background: #f1f5f9;
}

.menu-dropdown.open { display: flex; }

/* =========================
   📱 MOBILE NAVBAR FIX
========================= */
@media (max-width: 768px) {

  .hide-mobile { display: none; }

  .app-header {
    padding: 10px 14px;
  }

  .header-right {
    gap: 8px;
  }

  .btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* =========================
   NAV VISIBILITY CONTROL
========================= */

/* Desktop default */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.mobile-only {
  display: none;
}

.paper-link {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}

/* =========================
   📱 MOBILE MODE
========================= */
@media (max-width: 768px) {

  /* Hide desktop links */
  .desktop-nav {
    display: none;
  }

  /* Show hamburger */
  .mobile-only {
    display: block;
  }

  .hide-mobile {
    display: none;
  }
}
/*back to top */
/* 🔼 BACK TO TOP BUTTON */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;

  background: linear-gradient(135deg, #2563eb, #1e40af);
  color: #fff;
  border: none;
  outline: none;

  width: 46px;
  height: 46px;
  border-radius: 50%;

  font-size: 18px;
  font-weight: bold;
  cursor: pointer;

  display: none;              /* 👈 initially hidden */
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

#backToTop:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

/* 📱 Mobile adjustment */
@media (max-width: 768px) {
  #backToTop {
    bottom: 90px;   /* trade / chatbot se clash na ho */
    right: 18px;
  }
}
/*end */
/* ================= PAPER TRADING SLIDE FROM RIGHT ================= */

#paperTradingPopup{
  position:fixed;
  inset:0;
  background:#ffffff;
  z-index:50000;
  display:none;
  flex-direction:column;

  /* start off screen */
  transform: translateX(100%);
  will-change: transform;

  /* ✨ PREMIUM easing */
  transition:
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ACTIVE STATE */
#paperTradingPopup.active{
  transform: translateX(0);
}

/* HEADER (same as before) */
.paper-popup-header{
  height:56px;
  background:linear-gradient(90deg,#0f172a,#020617);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  font-size:16px;
  font-weight:700;
  flex-shrink:0;
}

.paper-popup-header button{
  background:none;
  border:none;
  color:#fff;
  font-size:22px;
  cursor:pointer;
}

/* IFRAME */
#paperTradingFrame{
  flex:1;
  width:100%;
  border:none;
}