/* 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 */
/* ✅ MOBILE – COMPACT METRIC CARDS */
@media (max-width: 768px) {

  .metrics-grid {
    gap: 10px;
  }

  .metric-box {
    padding: 12px 10px;      /* 🔥 height kam */
    border-radius: 10px;
  }

  .metric-value {
    font-size: 1.05rem;     /* 🔥 bada kam */
    line-height: 1.2;
  }

  .metric-label {
    font-size: 0.75rem;
    margin-top: 2px;
  }

  .cap-badge {
    margin-top: 6px;
    font-size: 0.7rem;
    padding: 3px 8px;
  }
}


/* ===============================================
   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;
	}

	.financial-table thead .sticky-left {
		z-index: 60;
		font-size: 14px;
		padding: 10px 12px;
	}
}

/* ===============================================
   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: 360px;
	/* 🔥 430 → 360 */
	height: 560px;
	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
========================================= */
/* ✅ FINAL FIX – METRIC COLUMN WIDTH */
@media (max-width: 768px) {

	.financial-table {
		min-width: 100% !important;
	}

	.financial-table .sticky-left {
		min-width: 160px !important;
		max-width: 180px !important;
		font-size: 13px !important;
		font-weight: 700 !important;
		white-space: normal !important;
		line-height: 1.3;
	}

	.financial-table td {
		font-size: 14px !important;
		padding: 12px 14px !important;
	}

	.financial-table th {
		font-size: 14px !important;
		padding: 12px 14px !important;
	}
}

/* ✅ MOBILE CHAT ICON SIZE FIX */
@media (max-width: 600px) {

	#side-chatbot-toggle {
		font-size: 18px !important;
		padding: 10px 12px !important;
		border-radius: 12px !important;
		top: auto !important;
		bottom: 20px !important;
		right: 15px !important;
	}
}

/* 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;
	}
}

/* =========================================
   ✅ MOBILE – SCORE SNAPSHOT COMPACT (FINAL)
========================================= */
@media (max-width: 768px) {

  .score-section {
    padding: 14px 12px !important;
  }

  .score-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;   /* 🔥 2 cards per row */
    gap: 10px !important;
  }

  .score-card {
    padding: 10px 8px !important;
    border-radius: 10px;
    min-height: auto !important;
  }

  .score-card.total {
    grid-column: span 2;              /* 🔥 Total full width */
  }

  .score-value {
    font-size: 0.95rem !important;
    line-height: 1.2;
  }

  .score-label {
    font-size: 0.72rem !important;
    margin-top: 2px;
  }
}

/* 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; }