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

/* ===============================
LARGE DESKTOP
=============================== */

@media (max-width:1600px){

.overview-grid{

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

}

}

/* ===============================
LAPTOP
=============================== */

@media (max-width:1400px){

.dashboard-grid{

grid-template-columns:1fr;

}

.left-column,
.right-column{

width:100%;

}

#trading-chart{

height:520px;

}

}

/* ===============================
TABLET
=============================== */

@media (max-width:1100px){

.overview-grid{

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

}

.top-header{

flex-direction:column;
align-items:flex-start;

}

.header-right{

width:100%;

display:grid;

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

}

.sidebar{

width:230px;

}

.main-content{

padding:18px;

}

}

/* ===============================
MOBILE
=============================== */

@media (max-width:768px){

.app{

flex-direction:column;

}

.sidebar{

width:100%;

min-height:auto;

position:relative;

border-right:none;

border-bottom:1px solid #293548;

}

.sidebar nav{

display:grid;

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

gap:10px;

}

.logo{

justify-content:center;

}

.main-content{

padding:15px;

}

.overview-grid{

grid-template-columns:1fr;

}

.header-right{

grid-template-columns:1fr;

}

.signal-main{

flex-direction:column;

gap:25px;

align-items:flex-start;

}

.signal-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.position-grid{

grid-template-columns:1fr;

}

.footer{

flex-direction:column;

gap:12px;

text-align:center;

}

.watch-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

.market-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

#trading-chart{

height:420px;

}

}

/* ===============================
SMALL MOBILE
=============================== */

@media (max-width:520px){

.top-header h1{

font-size:22px;

}

.market-pill{

width:100%;

}

.market-pill span{

font-size:16px;

}

.signal-buy,
.signal-sell,
.signal-hold{

width:100%;

text-align:center;

font-size:28px;

padding:15px;

}

.confidence-box{

width:100%;

text-align:center;

}

.confidence-box h1{

font-size:42px;

}

.panel{

padding:16px;

}

.panel-header{

flex-direction:column;

align-items:flex-start;

gap:10px;

}

.news-item h4{

font-size:15px;

}

.coin-price{

font-size:20px;

}

.stat-box h2{

font-size:24px;

}

}

/* ===============================
ULTRA SMALL
=============================== */

@media (max-width:380px){

.sidebar nav{

grid-template-columns:1fr;

}

.logo{

flex-direction:column;

}

.logo img{

margin-bottom:10px;

}

.market-pill{

padding:10px;

}

.top-header{

padding:15px;

}

.main-content{

padding:10px;

}

.panel{

border-radius:14px;

}

.signal-item{

padding:14px;

}

}

/* ===============================
LANDSCAPE PHONE
=============================== */

@media (max-height:600px){

.sidebar{

overflow-y:auto;

}

#trading-chart{

height:350px;

}

}

/* ===============================
PRINT
=============================== */

@media print{

.sidebar,
.footer,
button{

display:none;

}

.main-content{

padding:0;

}

body{

background:#fff;

color:#000;

}

.panel{

box-shadow:none;

border:1px solid #ccc;

page-break-inside:avoid;

}

}