/* ===========================================================
KANA Capital Crypto Professional v2
dashboard.css
=========================================================== */

/* ==============================
LEFT & RIGHT COLUMNS
==============================*/

.left-column,
.right-column{

display:flex;
flex-direction:column;
gap:25px;

}

/* ==============================
SIGNAL PANEL
==============================*/

.signal-panel{

background:linear-gradient(
180deg,
#182438,
#111827
);

border:1px solid #29405d;

}

.signal-main{

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

margin:25px 0;

}

.signal-buy{

background:#00d084;
color:#000;

font-size:38px;
font-weight:800;

padding:16px 40px;

border-radius:14px;

}

.signal-sell{

background:#ff4d4f;
color:#fff;

font-size:38px;
font-weight:800;

padding:16px 40px;

border-radius:14px;

}

.signal-hold{

background:#ffb020;
color:#000;

font-size:38px;
font-weight:800;

padding:16px 40px;

border-radius:14px;

}

.confidence-box{

text-align:right;

}

.confidence-box span{

display:block;

font-size:14px;

color:#94a3b8;

margin-bottom:8px;

}

.confidence-box h1{

font-size:52px;

font-weight:800;

color:#00d084;

}

/* ==============================
SIGNAL GRID
==============================*/

.signal-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-top:20px;

}

.signal-item{

background:#0f1726;

padding:18px;

border-radius:14px;

border:1px solid #293446;

}

.signal-item label{

display:block;

font-size:13px;

color:#94a3b8;

margin-bottom:8px;

}

.signal-item span{

font-size:18px;

font-weight:700;

}

/* ==============================
CONFIRMATION LIST
==============================*/

.reason-list{

margin-top:30px;

}

.reason-list h4{

margin-bottom:12px;

}

.reason-list ul{

list-style:none;

}

.reason-list li{

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.06);

font-size:15px;

}

/* ==============================
CHART PANEL
==============================*/

.chart-panel{

padding:20px;

}

#trading-chart{

width:100%;
height:600px;

border-radius:14px;

background:#0c1320;

}

/* ==============================
WATCHLIST
==============================*/

.watch-table{

width:100%;

border-collapse:collapse;

}

.watch-table th{

text-align:left;

padding:14px;

font-size:13px;

font-weight:700;

color:#94a3b8;

border-bottom:1px solid #273548;

}

.watch-table td{

padding:16px 14px;

font-size:15px;

border-bottom:1px solid rgba(255,255,255,.05);

}

.watch-table tbody tr{

transition:.25s;

cursor:pointer;

}

.watch-table tbody tr:hover{

background:#1b2638;

}

/* ==============================
MARKET TABLES
==============================*/

.market-table{

width:100%;

border-collapse:collapse;

}

.market-table th{

padding:14px;

text-align:left;

font-size:13px;

color:#94a3b8;

border-bottom:1px solid #293446;

}

.market-table td{

padding:14px;

font-size:15px;

border-bottom:1px solid rgba(255,255,255,.05);

}

.market-table tr:hover{

background:#1a2636;

}

/* ==============================
MARKET STATS
==============================*/

.stats-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:16px;

}

.stat-card{

background:#101826;

padding:20px;

border-radius:14px;

border:1px solid #2a374b;

}

.stat-card label{

display:block;

font-size:13px;

color:#94a3b8;

margin-bottom:10px;

}

.stat-card h3{

font-size:22px;

}

/* ==============================
SENTIMENT
==============================*/

.sentiment-box{

display:flex;

flex-direction:column;

gap:18px;

}

.sentiment-item{

display:flex;

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

padding:18px;

background:#101826;

border-radius:14px;

border:1px solid #293548;

}

.sentiment-item label{

font-size:15px;

color:#94a3b8;

}

.sentiment-item h2{

font-size:22px;

}

/* ==============================
NEWS
==============================*/

.news-section{

margin-top:5px;

}

.news-card{

background:#101826;

padding:18px;

margin-bottom:14px;

border-radius:14px;

border-left:4px solid #00d084;

transition:.25s;

cursor:pointer;

}

.news-card:hover{

transform:translateX(6px);

}

.news-title{

font-size:17px;

font-weight:700;

margin-bottom:10px;

}

.news-source{

font-size:13px;

color:#94a3b8;

}

.news-time{

font-size:12px;

color:#64748b;

margin-top:8px;

}

/* ==============================
TIMEFRAME
==============================*/

#timeframe{

background:#101826;

color:white;

border:1px solid #2a374b;

padding:10px 14px;

border-radius:10px;

outline:none;

}

/* ==============================
ANIMATIONS
==============================*/

.panel{

transition:.25s;

}

.panel:hover{

transform:translateY(-4px);

box-shadow:0 15px 40px rgba(0,0,0,.35);

}