/* ==============================
   GOOGLE FONT
============================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');


/* ==============================
   ROOT DESIGN SYSTEM (LIGHT)
============================== */
:root{
--bg:#ffffff;
--text:#0f172a;

--card:#f8fafc;
--card-hover:#f1f5f9;

--accent:#2563eb;
--accent-hover:#1d4ed8;

--border:rgba(0,0,0,0.08);

--table-header:#1e293b;
--table-row-hover:rgba(37,99,235,0.08);

--success:#16a34a;
--danger:#dc2626;

--radius:10px;
--radius-sm:6px;

--transition:0.2s ease;
}

/* LEFT SIDE (LOGO) */
.logo{
display:flex;
align-items:center;
gap:8px;
}

/* LOGO IMAGE */
.logo img{
height:62px;
width:auto;
}

.toggle{
/*margin-left:15px;*/
cursor:pointer;
font-size:18px;
}


/* NAV LINKS */
/* NAV */
nav{
display:flex;
align-items:center;
gap:20px;
flex-wrap:nowrap;   /* 🔥 keep in one line */
margin:0 auto; 
}

/* NAV LINKS */
nav a{
text-decoration:none;
color:var(--text);
font-weight:500;
padding:6px 10px;
border-radius:var(--radius-sm);
white-space:nowrap;
}

/* HOVER EFFECT */
nav a:hover{
background:var(--card-hover);
color:var(--accent);
}

/* ACTIVE LINK (OPTIONAL) */
nav a.active{
background:var(--accent);
color:#fff;
}

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

padding:10px 20px;
background:var(--card);
border-bottom:1px solid var(--border);

flex-wrap:nowrap;   /* 🔥 prevent line break */
}

/* ==============================
   DARK THEME
============================== */
body.dark{
--bg:#0b1220;
--text:#e2e8f0;

--card:#111827;
--card-hover:#1f2937;

--accent:#38bdf8;
--accent-hover:#0ea5e9;

--border:rgba(255,255,255,0.08);

--table-header:#020617;
--table-row-hover:rgba(56,189,248,0.12);

--success:#22c55e;
--danger:#ef4444;
}


/* ==============================
   GLOBAL RESET
============================== */
*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{
font-family:'Inter', sans-serif;
background:var(--bg);
color:var(--text);
transition:var(--transition);
}


/* ==============================
   LAYOUT
============================== */
.app-container{
display:flex;
height:100vh;
}

.main-content{
flex:1;
padding:20px;
overflow-y:auto;
}


/* ==============================
   SIDEBAR
============================== */
.sidebar{
width:220px;
background:var(--card);
padding:20px;
border-right:1px solid var(--border);
}

.sidebar a{
display:block;
margin:10px 0;
text-decoration:none;
color:var(--text);
padding:8px;
border-radius:var(--radius-sm);
transition:var(--transition);
}

.sidebar a:hover{
background:var(--accent);
color:#fff;
}


/* ==============================
   TOPBAR
============================== */
.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
background:var(--card);
border-bottom:1px solid var(--border);
}


/* ==============================
   BUTTONS
============================== */
.btn{
padding:10px 16px;
border:none;
background:var(--accent);
color:#fff;
border-radius:var(--radius-sm);
cursor:pointer;
transition:var(--transition);
font-weight:500;
}

.btn:hover{
background:var(--accent-hover);
}

.btn-outline{
background:transparent;
border:1px solid var(--border);
color:var(--text);
}

.btn-outline:hover{
background:var(--card-hover);
}


/* ==============================
   CARD
============================== */
.card{
background:var(--card);
padding:20px;
border-radius:var(--radius);
border:1px solid var(--border);
transition:var(--transition);
}

.card:hover{
background:var(--card-hover);
}


/* ==============================
   GRID
============================== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
}


/* ==============================
   TABLE (TRADING READY)
============================== */
.table{
width:100%;
border-collapse:separate;
border-spacing:0;
background:var(--card);
border-radius:var(--radius);
overflow:hidden;
border:1px solid var(--border);
}

.table th{
background:var(--table-header);
color:#fff;
padding:12px;
text-align:left;
font-weight:500;
}

.table td{
padding:12px;
border-bottom:1px solid var(--border);
}

.table tbody tr{
transition:var(--transition);
}

.table tbody tr:hover{
background:var(--table-row-hover);
cursor:pointer;
}

.table tr:last-child td{
border-bottom:none;
}


/* ==============================
   STATUS COLORS
============================== */
.success{
color:var(--success);
font-weight:500;
}

.error{
color:var(--danger);
font-weight:500;
}


/* ==============================
   INPUTS
============================== */
input, select{
padding:10px;
border-radius:var(--radius-sm);
border:1px solid var(--border);
background:var(--card);
color:var(--text);
transition:var(--transition);
margin-bottom:12px; 
}

input:focus, select:focus{
outline:none;
border-color:var(--accent);
}


/* ==============================
   FILTER BOX
============================== */
.filter-box{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:20px;
}


/* ==============================
   AUTH FORM
============================== */
.auth-container{
max-width:400px;
margin:80px auto;
padding:30px;
background:var(--card);
border-radius:var(--radius);
text-align:center;
border:1px solid var(--border);
}


/* ==============================
   TRADING LAYOUT
============================== */
.trading-container{
height:100vh;
display:flex;
flex-direction:column;
background:var(--bg);
color:var(--text);
}

.main-grid{
display:grid;
grid-template-columns:300px 1fr 300px;
height:60%;
}

.panel{
border-right:1px solid var(--border);
background:var(--bg);
overflow:auto;
}

.panel-header{
padding:10px;
border-bottom:1px solid var(--border);
font-weight:500;
}


/* ==============================
   WATCHLIST
============================== */
.watchlist-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1; 
    overflow-y: auto;
    height: 100%;
    padding: 8px;
}


.wl-card{
position: relative;
display:flex;
justify-content:space-between;
align-items:center;

padding:12px;
border-radius:var(--radius-sm);

background:var(--card);
color:var(--text);

height:60px;
border:1px solid var(--border);

transition:var(--transition);
/*border-bottom: 1px solid #eee;*/
cursor: pointer;
}


.wl-card:hover{
background:var(--card-hover);
}

.wl-symbol{
font-weight:600;
}

.wl-ltp{
color:var(--success);
}


/* Hidden by default */
.wl-actions {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    gap: 5px;
}

/* Show only when active */
.wl-card.active .wl-actions {
    display: flex;
}

.wl-select {
    display: none;
    margin-right: 8px;
}

/* Show in delete mode */
.wl-card.select-mode .wl-select {
    display: inline-block;
}

.wl-card {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
}

.wl-actions button {
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
}

/* ==============================
   OPTION CHAIN
============================== */
.option-chain-panel{
height:40%;
border-top:1px solid var(--border);
overflow-y:auto;
}

/* ==============================
   HOME PAGE (FIX RESTORED UI)
============================== */

/* HERO */
.hero{
text-align:center;
padding:80px 20px;
max-width:900px;
margin:auto;
}

.hero h1{
font-size:42px;
font-weight:600;
margin-bottom:15px;
}

.hero p{
opacity:0.8;
font-size:16px;
margin-bottom:25px;
}


/* FEATURES GRID */
.features{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
padding:50px 20px;
max-width:1100px;
margin:auto;
}

/* FEATURE CARD */
.feature{
background:var(--card);
padding:25px;
border-radius:var(--radius);
border:1px solid var(--border);
transition:var(--transition);
text-align:left;
}

.feature:hover{
background:var(--card-hover);
transform:translateY(-3px);
}

.feature h3{
margin-bottom:10px;
font-size:18px;
}

.feature p{
opacity:0.8;
font-size:14px;
}


/* ABOUT */
.about{
padding:60px 20px;
text-align:center;
max-width:800px;
margin:auto;
}

.about h2{
margin-bottom:15px;
}

.about p{
opacity:0.8;
}


/* CTA */
.cta{
text-align:center;
padding:60px 20px;
background:var(--card);
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
}

.cta h2{
margin-bottom:20px;
}


/* ==============================
   BROKER PAGE
============================== */

.container {
    padding: 20px;
}

.index-box {
    display: flex;
    gap: 40px;
    margin-bottom: 20px;
}

.group-box {
    margin-bottom: 15px;
}

.search-section {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pagination {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

#results {
    margin-top: 15px;
}

.result-item {
    padding: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    cursor: pointer;
    transition: var(--transition);
}

.result-item:hover {
    background: var(--card-hover);
}

/* Table (if used later) */
.watchlist table {
    width: 100%;
    border-collapse: collapse;
}

.watchlist th,
.watchlist td {
    border: 1px solid var(--border);
    padding: 10px;
    text-align: center;
}

.action-buttons {
    display: none;
}

tr:hover .action-buttons {
    display: flex;
    justify-content: center;
    gap: 5px;
}


/* ==============================
   BROKER SPLIT LAYOUT
============================== */

.broker-layout {
    display: flex;
    gap: 15px;
    height: calc(100vh - 140px);
}

/* LEFT PANEL */
.watchlist-panel {
    width: 30%;
    flex: 0 0 30%;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);

    display: flex;
    flex-direction: column;
    overflow: hidden;
}



/* LEFT SIDE (symbol container) */
.wl-symbol {
    flex: 1;                  /* take remaining space */
    min-width: 0;             /* 🔥 IMPORTANT for ellipsis */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* RIGHT SIDE (ltp fixed width) */
.wl-ltp {
    width: 70px;              /* fixed width = alignment */
    text-align: right;
    flex-shrink: 0;
}

/* RIGHT PANEL */
/*.market-panel {*/
/*    width: 50%;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/* RESULTS */
.result-item {
    font-size: 13px;
    padding: 8px;
}

/* ==============================
   LEFT PANEL (SEARCH + WATCHLIST)
============================== */

.search-panel {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    flex-shrink: 0;
}

.search-header {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* COLLAPSE */
.search-panel.collapsed {
    display: none;
}

/* ==============================
   RIGHT PANEL (TABS)
============================== */

.right-panel {
    width: 50%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* TABS */
.tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}

.tab {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text);
}

.tab.active {
    background: var(--accent);
    color: #fff;
}

/* CONTENT */
.tab-content {
    flex: 1;
    overflow: auto;
}

.tab-content.active {
    display: block;
}

.user-info p {
    margin: 4px 0;
}

.auth-container input,
.auth-container select {
    margin-bottom: 10px;
}


.input-group {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
}

.form-label {
    width: 140px;   /* fixed label width */
    font-weight: 500;
}

.input-wrapper {
    position: relative;
    flex: 1;
}

.input-wrapper input {
    width: 100%;
    padding: 10px 40px 10px 10px;
}


.input-group input {
    width: 100%;
    padding: 10px 40px 10px 10px;
    font-size: 14px;
}

.eye-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    user-select: none;
}

.order-panel {
    position: fixed;
    top: 100px;
    left: 100px;
    width: 260px;
    background: #1e1e2f;
    color: #fff;
    border-radius: 10px;
    z-index: 9999;
    box-shadow: 0 0 15px rgba(0,0,0,0.4);
}

.hidden {
    display: none;
}

.panel-header {
    padding: 10px;
    background: #2a2a40;
    cursor: move;
    display: flex;
    justify-content: space-between;
}

.panel-body {
    padding: 10px;
}

.panel-body input,
.panel-body select {
    width: 100%;
    margin-bottom: 8px;
}

.order-list {
    max-height: 400px;
    overflow-y: auto;
    font-size: 13px;
}


.order-row {
    display: grid;
    grid-template-columns: 1.5fr 0.8fr 0.6fr 1fr; 
    align-items: center;
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.col-price {
    text-align: right;
    font-variant-numeric: tabular-nums; /* 🔥 KEY FIX */
}

.position-row {
    display: grid;
    grid-template-columns: 1.5fr 0.6fr 1fr 1fr;
    padding: 6px;
    border-bottom: 1px solid #eee;
}

.profit { color: #2ecc71; }
.loss { color: #e74c3c; }

.col-qty, .col-realized, .col-mtm {
    text-align: right;
    font-variant-numeric: tabular-nums;
}


.order-buy {
    color: #2ecc71;
}

.order-sell {
    color: #e74c3c;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ==============================
   FOOTER
============================== */
footer{
padding:20px;
text-align:center;
opacity:0.7;
border-top:1px solid var(--border);
}