/* assets/css/app.css */

/* =========================
   THEME / BASE
========================= */
:root{
  --bg:#0b1220;
  --panel:#101a2f;
  --text:#e8eefc;
  --muted:#a9b6d3;
  --line:rgba(255,255,255,.10);
  --btn:#1f6fff;
  --btn2:#23314f;
  --radius:16px;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #070b14 0%, #0b1220 100%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}

.container{max-width:1100px;margin:0 auto;padding:18px}

/* =========================
   TOP BAR
========================= */
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(11,18,32,.85);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-dot{width:12px;height:12px;border-radius:99px;background:var(--btn)}
.brand-title{font-weight:700}
.brand-sub{font-size:12px;color:var(--muted)}

.nav a{padding:10px 12px;border-radius:10px}
.nav a.active, .nav a:hover{background:rgba(255,255,255,.06)}

/* =========================
   DASHBOARD
========================= */
.hero{padding:18px 0}
.hero h1{margin:0 0 8px;font-size:26px}
.hero p{margin:0;color:var(--muted)}

.search-row{margin-top:14px}
.search-row input{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}

.grid{
  display:grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap:14px;
  padding-bottom:30px;
}
@media (min-width: 640px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (min-width: 1000px){
  .grid{grid-template-columns: repeat(3, minmax(0, 1fr));}
}

.card{
  display:block;
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  transition: transform .12s ease, background .12s ease;
}
.card:hover{transform: translateY(-2px); background:rgba(255,255,255,.07)}
.card-title{font-weight:700;margin-bottom:6px}
.card-desc{color:var(--muted);font-size:13px;line-height:1.4}
.card-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
.tag{
  font-size:12px;
  padding:6px 8px;
  border-radius:999px;
  background:rgba(31,111,255,.16);
  border:1px solid rgba(31,111,255,.25);
}

/* =========================
   GENERIC CALCULATOR LAYOUT
========================= */
.calc-header h1{margin:14px 0 6px;font-size:24px}
.calc-header p{margin:0;color:var(--muted)}

.calc-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:14px;
  margin-top:14px;
  padding-bottom:30px;
}
@media (min-width: 900px){
  .calc-layout{grid-template-columns: 1fr 1fr;}
}

.panel{
  padding:16px;
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
}
.panel h2{margin:0 0 12px;font-size:16px}

.field{display:block;margin-bottom:12px}
.label{display:block;margin-bottom:6px;font-weight:600}
.field input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.hint{display:block;margin-top:6px;font-size:12px;color:var(--muted)}

.btn-row{display:flex;gap:10px;margin-top:10px}
button{
  border:0;
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;
  background:var(--btn);
  color:white;
  font-weight:700;
}
button.secondary{background:var(--btn2)}
.error{
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
}

.result-table{display:flex;flex-direction:column;gap:10px}
.result-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.result-label{color:var(--muted)}
.result-value{font-weight:800}
.note{margin-top:12px;color:var(--muted);font-size:13px}
.muted{color:var(--muted)}
.btn{display:inline-block;margin-top:10px;padding:12px 14px;border-radius:12px;background:var(--btn);font-weight:800}

/* =========================================================
   BN EXPIRY SPECIAL (BNX) - exact table style
========================================================= */
.bnx { max-width: 920px; margin: 18px auto 30px; }
.bnx-title {
  background: #ffd400;
  color: #000;
  font-weight: 900;
  text-align: center;
  padding: 16px 12px;
  border-radius: 14px 14px 0 0;
  letter-spacing: .5px;
  font-size: 28px;
}
.bnx-footer {
  background: #ffd400;
  color: #000;
  font-weight: 900;
  text-align: center;
  padding: 14px 12px;
  border-radius: 0 0 14px 14px;
  font-size: 24px;
}
.bnx-table {
  border-left: 2px solid rgba(255,255,255,.25);
  border-right: 2px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.15);
}
.bnx-row { display: grid; grid-template-columns: 1fr 1fr; }
.bnx-cell {
  padding: 14px 12px;
  border-top: 2px solid rgba(0,0,0,.25);
  border-right: 2px solid rgba(0,0,0,.25);
  text-align: center;
  font-weight: 900;
}
.bnx-row .bnx-cell:last-child { border-right: 0; }

.bnx-head .bnx-cell { background: #00a6d6; color:#000; font-size: 22px; }
.bnx-label .bnx-cell { background: #ff5aa6; color:#000; font-size: 18px; }
.bnx-input .bnx-cell { background: #bfbfbf; }
.bnx-input input {
  width: 100%;
  max-width: 260px;
  padding: 12px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.35);
  outline: none;
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}

.bnx-strike-label .bnx-cell { background:#ff5aa6; color:#000; font-size:18px; }
.bnx-strike-value .bnx-cell { background:#8fd14f; color:#000; font-size:22px; }

.bnx-premium-head .bnx-cell { background:#00a6d6; color:#000; font-size:18px; }
.bnx-premium-label .bnx-cell { background:#ff7bb9; color:#000; font-size:16px; }

.bnx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px;
  border-top: 2px solid rgba(0,0,0,.25);
  background: rgba(255,255,255,.05);
}
.bnx-actions button { min-width: 160px; }
.bnx-error {
  width: 100%;
  max-width: 700px;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,0,0,.12);
  border: 1px solid rgba(255,0,0,.20);
  margin-top: 6px;
}

/* BNX: BUY/SL/TARGET 4 columns (Label|Value|Label|Value) */
.bnx-row4{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bnx-row4 .bnx-cell{
  border-top: 2px solid rgba(0,0,0,.25);
  border-right: 2px solid rgba(0,0,0,.25);
  text-align:center;
  font-weight:900;
  padding: 14px 12px;
}
.bnx-row4 .bnx-cell:nth-child(4){ border-right:0; }

.bnx-buy4 .bnx-cell{ background:#00a6d6; color:#000; font-size:20px; }
.bnx-sl4 .bnx-cell{ background:#c79bff; color:#000; font-size:20px; }
.bnx-target4 .bnx-cell{ background:#9ad05d; color:#000; font-size:20px; }

.bnx-row4 .bnx-val span{ font-size:22px; font-weight:900; }

/* BNX: remove number spinners */
.bnx-input input[type="number"]::-webkit-outer-spin-button,
.bnx-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
.bnx-input input[type="number"]{ -moz-appearance: textfield; }

@media (max-width: 520px) {
  .bnx-title { font-size: 20px; }
  .bnx-footer { font-size: 18px; }
  .bnx-head .bnx-cell { font-size: 18px; }
  .bnx-label .bnx-cell, .bnx-strike-label .bnx-cell { font-size: 14px; }
  .bnx-strike-value .bnx-cell { font-size: 16px; }
  .bnx-row4 .bnx-val span{ font-size:16px; }
  .bnx-buy4 .bnx-cell,
  .bnx-sl4 .bnx-cell,
  .bnx-target4 .bnx-cell{ font-size:14px; padding:10px 6px; }
}

/* =========================================================
   BTST UI
========================================================= */
.btst-wrap{max-width:720px;margin:18px auto 30px}
.btst-title{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:16px 12px;
  border-radius:14px 14px 0 0;
  font-size:26px;
}
.btst-footer{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  border-radius:0 0 14px 14px;
  font-size:22px;
}
.btst-table{
  border-left:2px solid rgba(255,255,255,.25);
  border-right:2px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.15);
}
.btst-row{display:grid}
.btst-row.btst-head2{grid-template-columns:1fr 1fr}
.btst-out{grid-template-columns:1fr 1fr}

.btst-cell{
  padding:14px 12px;
  border-top:2px solid rgba(0,0,0,.25);
  border-right:2px solid rgba(0,0,0,.25);
  text-align:center;
  font-weight:900;
}
.btst-row.btst-head2 .btst-cell:last-child,
.btst-row.btst-out .btst-cell:last-child{border-right:0}

.btst-label .btst-cell{background:#ff5aa6;color:#000;font-size:18px}
.btst-input .btst-cell{background:#bfbfbf}
.btst-input input{
  width:100%;
  max-width:320px;
  padding:12px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.35);
  outline:none;
  font-size:18px;
  font-weight:900;
  text-align:center;
}
.btst-head2 .btst-cell{background:#00a6d6;color:#000;font-size:20px}
.btst-out .btst-cell{background:#8fd14f;color:#000;font-size:22px}

.btst-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:2px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.05);
}
.btst-actions button{min-width:160px}
.btst-error{
  width:100%;
  max-width:600px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
  margin-top:6px;
}

/* BTST: remove number spinners */
.btst-input input[type="number"]::-webkit-outer-spin-button,
.btst-input input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.btst-input input[type="number"]{ -moz-appearance:textfield; }

/* =========================================================
   NIFTY & BANKNIFTY FUTURE CALCULATOR (NF)
========================================================= */
.nf-wrap{max-width:1200px;margin:18px auto 30px}
.nf-title{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:18px 12px;
  border-radius:14px 14px 0 0;
  font-size:34px;
  letter-spacing:.5px;
  margin-bottom:18px;
}
.nf-footer{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  border-radius:0 0 14px 14px;
  font-size:34px;
}

.nf-table{
  border-left:2px solid rgba(0,0,0,.25);
  border-right:2px solid rgba(0,0,0,.25);
  background:rgba(255,255,255,.02);
}

.nf-row{
  display:grid;
  grid-template-columns: minmax(0,2.2fr) minmax(0,1.8fr) minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,1.1fr);
}
.nf-cell{
  padding:18px 12px;
  border-top:2px solid rgba(0,0,0,.35);
  border-right:2px solid rgba(0,0,0,.35);
  text-align:center;
  font-weight:900;
  color:#000;
  font-size:22px;
}

/* GRID FIX: prevent any column from stretching due to long text */
.nf-row > .nf-cell{min-width:0;}

.nf-row .nf-cell:last-child{border-right:0}

.nf-head .nf-cell{background:#fff8c6;display:flex;align-items:center;justify-content:center;text-align:center}
.nf-h1,.nf-h2{font-size:26px;line-height:1.2}

.nf-left-buy,
.nf-left-sell{
  background:#a6ff9c;
  text-align:center;
  white-space:nowrap;         /* keep single line */
  overflow:hidden;            /* avoid stretching columns */
  text-overflow:clip;         /* no ... */
  font-size:20px;             /* helps fit full text */
}

.nf-left-sell{
  background:#ff7f7f;
}

.nf-ash{background:#d8d8d8}
.nf-ash input{
  width:100%;
  max-width:420px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.35);
  font-size:22px;
  font-weight:900;
  text-align:center;
  outline:none;
  background:#fff;
}

/* outputs */
.nf-out-buy{background:#a6ff9c}
.nf-out-sell{background:#ff7f7f}

/* output row contents */
.nf-out-line{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.nf-label{font-weight:900}
.nf-val{font-weight:900}

/* NF: remove number spinners */
.nf-ash input[type="number"]::-webkit-outer-spin-button,
.nf-ash input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.nf-ash input[type="number"]{-moz-appearance:textfield}

.nf-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:2px solid rgba(0,0,0,.35);
  background:rgba(255,255,255,.06);
}
.nf-error{
  width:100%;
  max-width:700px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
  margin-top:6px;
}

/* IMPORTANT: disable any old pseudo-labels from previous edits */
#nfBuyEntry::before,
#nfBuyTarget::before,
#nfBuySL::before,
#nfSellEntry::before,
#nfSellTarget::before,
#nfSellSL::before{
  content:none !important;
  display:none !important;
}

/* Desktop/tablet tweaks */
@media (max-width: 900px){
  .nf-title,.nf-footer{font-size:22px}
  .nf-row{grid-template-columns: 1.7fr 1.3fr 1fr 1fr 1fr;}
  .nf-cell{font-size:16px;padding:12px 8px}
  .nf-h1,.nf-h2{font-size:18px}
}
@media (min-width: 601px){
  /* hide labels inside output cells on desktop */
  .nf-out-line .nf-label{display:none;}
  /* center value */
  .nf-out-line{
    justify-content:center;
  }
  .nf-out-line .nf-val{
    display:block;
    width:100%;
    text-align:center;
    font-size:22px;
  }
}

/* Mobile: stacked cards + table-like Label|Value with divider */
@media (max-width: 600px){
  .nf-head{display:none;}
  .nf-row{grid-template-columns:1fr;}
  .nf-wrap{padding:0 10px;}
  .nf-title,.nf-footer{font-size:22px;padding:14px 10px;}

  .nf-buy, .nf-sell{
    border:2px solid rgba(0,0,0,.35);
    border-radius:18px;
    overflow:hidden;
    margin-bottom:16px;
  }

  .nf-cell{
    border-right:0 !important;
    font-size:20px;
    padding:12px 10px;
  }

  /* table row look */
  .nf-out-line{
    display:grid !important;
    grid-template-columns: 1fr 1fr;
    align-items:center;
    padding:0 !important;
    border-top:2px solid rgba(0,0,0,.35);
    gap:0;
  }

  /* left column */
  .nf-out-line .nf-label{
    display:block;
    text-align:center;
    font-weight:900;
    font-size:18px;
    padding:18px 10px;
    border-right:2px solid rgba(0,0,0,.35);
  }

  /* right column */
  .nf-out-line .nf-val{
    display:block;
    text-align:center;
    font-weight:900;
    font-size:18px;
    padding:18px 10px;
    min-width:72px;
  }

  .nf-actions{
    flex-direction:column;
    gap:10px;
  }
  .nf-actions button{
    width:100%;
    max-width:360px;
  }
}
/* ===== FIX: Vertically center BUY/SELL left labels (desktop) ===== */
.nf-cell.nf-left-buy,
.nf-cell.nf-left-sell{
  display:flex !important;
  align-items:center !important;      /* vertical center */
  justify-content:center !important;  /* horizontal center */
  text-align:center !important;

  /* keeps the row height consistent */
  padding: 0 12px !important;
  line-height: 1.15 !important;
  min-height: 72px;                   /* adjust if needed */
}
/* =========================================================
   INTRADAY LEVELS UI (Excel-style)
========================================================= */
.intra-wrap{max-width:780px;margin:18px auto 30px;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.intra-title{
  background:#ffd400;
  color:#000;
  font-weight:900;
  text-align:center;
  padding:14px 12px;
  font-size:34px;
  letter-spacing:.5px;
}
.intra-table{background:#ffffff}
.intra-cell{
  border:1px solid rgba(0,0,0,.35);
  padding:14px 12px;
  font-weight:900;
  color:#000;
  text-align:center;
}
.intra-rowline{display:grid}
.intra-grid1{grid-template-columns:1fr}
.intra-grid2{grid-template-columns:1fr 1fr}
.intra-grid3{grid-template-columns:1fr 1fr 1fr}

.intra-blue-head{background:#4aa3df;font-size:18px}
.intra-logo-cell{background:#9ea6ff;position:relative;padding:10px 12px}
.intra-logo{
  width:140px;height:140px;border-radius:999px;
  background:rgba(255,255,255,.70);
  margin:6px auto 6px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.15);
}
.intra-logo img{max-width:85%;max-height:85%}
.intra-logo-text{font-size:12px;letter-spacing:.4px;text-decoration:underline;margin-top:4px}
.intra-empty{background:#9ea6ff}

.intra-ash{background:#bfbfbf}
.intra-ash input{
  width:100%;
  max-width:360px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.35);
  background:#fff;
  font-size:22px;
  font-weight:900;
  text-align:center;
  outline:none;
}

.intra-orange-head{background:#f2b200;font-size:16px}
.intra-green-head{background:#93d050;font-size:16px}
.intra-red-head{background:#ff7f7f;font-size:16px}
.intra-yellow-sub{background:#fff8c6;font-size:18px}
.intra-white-val{background:#fff;font-size:20px}

.intra-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border-top:2px solid rgba(0,0,0,.35);
  background:rgba(0,0,0,.06);
}
.intra-actions button{min-width:140px}
.intra-error{
  width:100%;
  max-width:520px;
  text-align:center;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,0,0,.12);
  border:1px solid rgba(255,0,0,.20);
}

/* Remove number spinners */
.intra-ash input[type="number"]::-webkit-outer-spin-button,
.intra-ash input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.intra-ash input[type="number"]{ -moz-appearance:textfield; }

@media (max-width: 560px){
  .intra-title{font-size:22px}
  .intra-grid2{grid-template-columns:1fr}
  .intra-logo-cell{order:2}
  .intra-blue-head{order:1}
  .intra-empty{display:none}
  .intra-logo{width:120px;height:120px}
}


/* ===== INTRADAY FINAL OVERRIDES (do not affect other pages) ===== */
.intra-wrap{
  max-width:520px !important;   /* keep same size as other calculators */
  width:100% !important;
}
.intra-actions{
  background:#141c2b !important; /* dark button row like your reference */
}
.intra-actions .btn-primary{
  background:#1f6fff !important;
  color:#fff !important;
}
.intra-actions .btn-secondary{
  background:#27324a !important; /* RESET must be dark */
  color:#fff !important;
}
/* Force Bullish/Bearish side-by-side on mobile also */
@media (max-width: 520px){
  .intra-wrap .intra-grid2{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
  }
}
/* Footer: full yellow bar */
.intra-footer{
  background:#ffd400 !important;
  color:#000 !important;
  font-weight:900 !important;
  text-align:center !important;
  padding:18px 12px !important;
  font-size:20px !important;
  letter-spacing:.6px !important;
  text-transform:uppercase !important;
  border-radius:0 0 16px 16px !important;
  margin:0 !important;
}
/* =============================================================== */
/* ===== Mobile Header Perfect Fix ===== */
.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;                 /* allows text to shrink properly */
}

.brand-logo{
  height:54px;                 /* desktop */
  width:auto;
  display:block;
  object-fit:contain;
}

/* If you also show a title text near logo, make it ellipsis instead of cut */
.brand-title{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 60vw;
}

/* Mobile: center + wrap so nothing cuts */
@media (max-width: 640px){
  .topbar-inner{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:10px 0;
  }

  .brand{
    justify-content:center;
    width:100%;
  }

  .brand-logo{
    height:50px;               /* mobile bigger */
  }

  .nav{
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:6px;
  }
}