/* market.css — Chugalkhor शेयर मार्केट dashboard */
:root{
  --mk-pink:#f50057;
  --mk-pink-d:#d1004a;
  --mk-ink:#16162a;
  --mk-sub:#5b5b73;
  --mk-line:#ececf3;
  --mk-bg:#f6f7fb;
  --mk-card:#ffffff;
  --mk-up:#11a36b;
  --mk-up-bg:#e7f7ef;
  --mk-down:#e11d48;
  --mk-down-bg:#fdeaef;
  --mk-flat:#8a8aa0;
  --mk-shadow:0 6px 22px rgba(20,20,45,.07);
  --mk-radius:16px;
}
.market-dash{padding:18px 0 36px;}
.market-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  gap:30px;
  align-items:start;
}
.market-main{min-width:0;}

/* ---------- HERO ---------- */
.market-hero{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-end;
  background:linear-gradient(120deg,#fff 60%,#fff0f6 100%);
  border:1px solid var(--mk-line);border-radius:var(--mk-radius);
  padding:22px 24px;box-shadow:var(--mk-shadow);margin-bottom:22px;position:relative;overflow:hidden;
}
.market-hero::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(245,0,87,.12),transparent 70%);}
.mh-kicker{color:var(--mk-pink);font-weight:800;letter-spacing:.5px;font-size:12px;text-transform:uppercase;}
.market-hero h1{font-size:38px;line-height:1.05;margin:4px 0 6px;font-weight:800;color:var(--mk-ink);}
.mh-sub{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--mk-pink);letter-spacing:1px;font-size:13px;}
.mh-desc{margin:8px 0 0;color:var(--mk-sub);max-width:520px;font-size:14px;}
.mh-right{text-align:right;min-width:200px;}
.live-badge{display:inline-flex;align-items:center;gap:8px;background:var(--mk-pink);color:#fff;font-weight:800;border-radius:999px;padding:6px 14px;font-size:13px;letter-spacing:1px;}
.live-badge .dot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1.4s infinite;}
.live-badge.closed{background:#9aa0ad;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.mkt-status{font-weight:800;margin-top:10px;font-size:15px;color:var(--mk-ink);}
.mkt-status.open{color:var(--mk-up);}
.mkt-status.closed{color:var(--mk-down);}
.ist-clock{margin-top:4px;color:var(--mk-sub);font-weight:700;font-size:14px;}
.ist-clock .ist-tag{background:#16162a;color:#fff;border-radius:6px;padding:1px 6px;font-size:11px;margin-left:4px;}
.updated{margin-top:6px;color:#8a8aa0;font-size:12px;}

/* ---------- SECTIONS ---------- */
.dash-section{margin-bottom:26px;}
.dash-h2{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--mk-ink);margin:0 0 14px;padding-left:12px;border-left:4px solid var(--mk-pink);}
.dash-h2.up{border-color:var(--mk-up);}
.dash-h2.down{border-color:var(--mk-down);}
.dash-h2 i{color:var(--mk-pink);}
.dash-h2.up i,.dash-h2.down i{color:inherit;}

/* ---------- INDEX CARDS ---------- */
.index-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.index-card{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:var(--mk-radius);padding:18px;box-shadow:var(--mk-shadow);position:relative;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease;}
.index-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(20,20,45,.12);}
.index-card .ic-name{font-weight:800;color:var(--mk-ink);font-size:15px;}
.index-card .ic-price{font-size:30px;font-weight:800;margin:8px 0 4px;color:var(--mk-ink);letter-spacing:.5px;}
.index-card .ic-chg{font-weight:800;font-size:15px;display:flex;align-items:center;gap:6px;}
.index-card .ic-meta{margin-top:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:11px;color:var(--mk-sub);}
.index-card .ic-meta b{display:block;color:var(--mk-ink);font-weight:700;font-size:12px;}
.up{color:var(--mk-up);} .down{color:var(--mk-down);} .flat{color:var(--mk-flat);}
.bg-up{background:var(--mk-up-bg);} .bg-down{background:var(--mk-down-bg);}

/* ---------- OVERVIEW ---------- */
.overview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.ov-card{background:var(--mk-card);border:1px solid var(--mk-line);border-radius:14px;padding:16px;box-shadow:var(--mk-shadow);text-align:center;}
.ov-card .ov-label{font-size:12px;color:var(--mk-sub);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.ov-card .ov-val{font-size:26px;font-weight:800;color:var(--mk-ink);margin-top:6px;}
.ov-card .ov-note{font-size:11px;color:#9aa0ad;margin-top:2px;}
.ov-card.ac .ov-val{color:var(--mk-up);} .ov-card.dc .ov-val{color:var(--mk-down);}

/* ---------- TABLES ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--mk-line);border-radius:14px;box-shadow:var(--mk-shadow);background:#fff;}
.mkt-table{width:100%;border-collapse:collapse;font-size:14px;min-width:420px;}
.mkt-table thead th{background:#fafafe;color:var(--mk-sub);font-weight:800;text-align:left;padding:11px 14px;border-bottom:1px solid var(--mk-line);font-size:12px;text-transform:uppercase;letter-spacing:.4px;position:sticky;top:0;}
.mkt-table tbody td{padding:11px 14px;border-bottom:1px solid #f3f3f8;color:var(--mk-ink);}
.mkt-table tbody tr:last-child td{border-bottom:none;}
.mkt-table tbody tr:hover{background:#fff6fa;}
.mkt-table .rank{color:#9aa0ad;font-weight:800;width:34px;}
.mkt-table .stock-name{font-weight:700;}
.mkt-table .stock-sym{color:#9aa0ad;font-size:11px;font-weight:600;}
.mkt-table .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;}
.chg-pill{display:inline-flex;align-items:center;gap:4px;font-weight:800;padding:3px 9px;border-radius:999px;font-size:13px;}
.chg-pill.up{background:var(--mk-up-bg);color:var(--mk-up);}
.chg-pill.down{background:var(--mk-down-bg);color:var(--mk-down);}
.clickable{cursor:pointer;}

/* ---------- POPULAR STOCKS ---------- */
.popular-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.pop-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--mk-line);border-radius:14px;padding:13px 15px;box-shadow:var(--mk-shadow);cursor:pointer;transition:transform .12s ease,border-color .12s ease;}
.pop-card:hover{transform:translateY(-2px);border-color:var(--mk-pink);}
.pop-logo{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--mk-pink),#ff7aa8);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:0 0 auto;}
.pop-info{flex:1;min-width:0;}
.pop-name{font-weight:700;color:var(--mk-ink);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pop-sym{font-size:11px;color:#9aa0ad;font-weight:600;}
.pop-price{text-align:right;}
.pop-price .pp{font-weight:800;color:var(--mk-ink);font-size:15px;font-variant-numeric:tabular-nums;}
.pop-price .pc{font-size:12px;font-weight:800;}

/* ---------- SEARCH ---------- */
.search-box-lg{display:flex;align-items:center;gap:10px;background:#fff;border:2px solid var(--mk-line);border-radius:999px;padding:12px 18px;box-shadow:var(--mk-shadow);}
.search-box-lg:focus-within{border-color:var(--mk-pink);}
.search-box-lg i{color:var(--mk-pink);font-size:16px;}
.search-box-lg input{flex:1;border:none;outline:none;font-size:15px;color:var(--mk-ink);background:transparent;font-family:inherit;}
.search-results{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;}
.sr-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--mk-line);border-radius:12px;padding:10px 12px;cursor:pointer;transition:border-color .12s ease;}
.sr-item:hover{border-color:var(--mk-pink);}
.sr-item .sr-sym{font-weight:800;color:var(--mk-pink);font-size:13px;}
.sr-item .sr-name{font-size:12px;color:var(--mk-sub);}
.sr-empty{padding:14px;color:#9aa0ad;font-size:13px;}

/* ---------- STOCK DETAIL + CHART ---------- */
.stock-detail{background:#fff;border:1px solid var(--mk-line);border-radius:var(--mk-radius);box-shadow:var(--mk-shadow);padding:22px;position:relative;}
.detail-close{position:absolute;right:16px;top:14px;border:none;background:#f3f3f8;width:34px;height:34px;border-radius:50%;cursor:pointer;color:var(--mk-ink);font-size:15px;}
.detail-close:hover{background:var(--mk-pink);color:#fff;}
.detail-head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:6px;}
.detail-title{font-size:24px;font-weight:800;color:var(--mk-ink);}
.detail-sub{color:#9aa0ad;font-weight:700;font-size:13px;}
.detail-price{font-size:34px;font-weight:800;color:var(--mk-ink);font-variant-numeric:tabular-nums;}
.detail-chg{font-size:16px;font-weight:800;}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0;}
.detail-grid .dg{background:var(--mk-bg);border-radius:10px;padding:10px 12px;}
.detail-grid .dg .l{font-size:11px;color:var(--mk-sub);font-weight:700;text-transform:uppercase;}
.detail-grid .dg .v{font-weight:800;color:var(--mk-ink);font-size:15px;margin-top:2px;font-variant-numeric:tabular-nums;}
.range-tabs{display:flex;gap:8px;margin:14px 0 6px;flex-wrap:wrap;}
.range-tab{border:1px solid var(--mk-line);background:#fff;border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer;color:var(--mk-sub);font-size:13px;}
.range-tab.active{background:var(--mk-pink);color:#fff;border-color:var(--mk-pink);}
.chart-box{width:100%;height:280px;background:var(--mk-bg);border-radius:12px;padding:10px;}
.chart-box svg{width:100%;height:100%;display:block;}
.detail-note{color:#9aa0ad;font-size:12px;margin-top:8px;}

/* ---------- SECTORS ---------- */
.sector-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.sector-card{background:#fff;border:1px solid var(--mk-line);border-radius:14px;padding:14px;box-shadow:var(--mk-shadow);}
.sector-card .sc-name{font-weight:800;color:var(--mk-ink);font-size:14px;}
.sector-card .sc-pct{font-size:20px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;}
.sector-bar{height:6px;border-radius:4px;background:#eee;margin-top:10px;overflow:hidden;}
.sector-bar > i{display:block;height:100%;border-radius:4px;}

/* ---------- HEATMAP ---------- */
.heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;}
.hm-cell{border-radius:12px;padding:12px 10px;color:#fff;font-weight:800;cursor:pointer;transition:transform .12s ease;min-height:74px;display:flex;flex-direction:column;justify-content:space-between;}
.hm-cell:hover{transform:scale(1.04);}
.hm-cell .hm-name{font-size:12px;line-height:1.15;}
.hm-cell .hm-pct{font-size:16px;font-variant-numeric:tabular-nums;}

/* ---------- MARKET NEWS ---------- */
.market-news{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
.news-card{display:flex;gap:12px;background:#fff;border:1px solid var(--mk-line);border-radius:14px;padding:12px;box-shadow:var(--mk-shadow);text-decoration:none;transition:transform .12s ease;}
.news-card:hover{transform:translateY(-2px);}
.news-card img{width:96px;height:72px;object-fit:cover;border-radius:10px;flex:0 0 auto;background:#eee;}
.news-card .nc-body{min-width:0;}
.news-card .nc-title{font-weight:700;color:var(--mk-ink);font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.news-card .nc-cat{font-size:11px;color:var(--mk-pink);font-weight:800;margin-top:4px;text-transform:uppercase;}

/* ---------- DISCLAIMER ---------- */
.disclaimer{display:flex;gap:10px;align-items:flex-start;background:#fff7fa;border:1px solid #ffd9e6;border-radius:12px;padding:14px 16px;color:#8a4a64;font-size:12.5px;line-height:1.5;}
.disclaimer i{color:var(--mk-pink);margin-top:2px;}

/* ---------- STATES ---------- */
.mkt-msg{padding:26px;text-align:center;color:#9aa0ad;font-size:14px;background:#fff;border:1px dashed var(--mk-line);border-radius:14px;}
.mkt-msg.err{color:var(--mk-down);border-color:#f3c2cf;background:#fff5f8;}
.skeleton{background:linear-gradient(90deg,#f1f1f6 25%,#e8e8f0 37%,#f1f1f6 63%);background-size:400% 100%;animation:sk 1.4s infinite;border-radius:8px;}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1000px){
  .market-layout{grid-template-columns:1fr;}
  .market-sidebar{order:2;}
}
@media (max-width:760px){
  .market-hero{padding:18px;}
  .market-hero h1{font-size:30px;}
  .mh-right{text-align:left;width:100%;}
  .index-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .overview-grid{grid-template-columns:repeat(2,1fr);}
  .sector-grid{grid-template-columns:repeat(2,1fr);}
  .popular-grid{grid-template-columns:1fr;}
  .market-news{grid-template-columns:1fr;}
  .detail-grid{grid-template-columns:repeat(2,1fr);}
  .dash-h2{font-size:16px;}
}
@media (max-width:420px){
  .index-grid{grid-template-columns:repeat(2,1fr);}
  .index-card .ic-price{font-size:24px;}
}