/* =========================================
MARKTRADING DASHBOARD
========================================= */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #07152f;
color: #ffffff;
min-height: 100vh;
}


/* =========================================
SIDEBAR
========================================= */

.sidebar {
position: fixed;
left: 0;
top: 0;

width: 240px;
height: 100vh;

background: #0b1d3a;

padding: 30px 18px;

border-right: 1px solid rgba(255, 255, 255, 0.08);

z-index: 1000;
}

.sidebar h2 {
font-size: 25px;
font-weight: 800;

text-align: center;

color: #ffffff;

margin-bottom: 40px;
}

.sidebar ul {
list-style: none;
}

.sidebar li {
margin-bottom: 10px;

border-radius: 12px;

transition: 0.25s ease;
}

.sidebar li:hover {
background: rgba(255, 255, 255, 0.08);
transform: translateX(3px);
}

.sidebar li a {
display: flex;

align-items: center;

gap: 13px;

width: 100%;

padding: 14px 15px;

color: #d9e4f5;

text-decoration: none;

font-size: 15px;
font-weight: 600;
}

.sidebar li a:hover {
color: #ffffff;
}

.sidebar li i {
width: 20px;

font-size: 17px;

text-align: center;
}

#logoutBtn {
color: #ff8f8f;

padding: 14px 15px;

margin-top: 30px;
}

#logoutBtn:hover {
background: rgba(255, 80, 80, 0.1);

color: #ff5f5f;
}


/* =========================================
MAIN CONTENT
========================================= */

.main {
margin-left: 240px;

min-height: 100vh;

padding: 30px 35px;

background:
radial-gradient(
circle at top right,
rgba(0, 115, 255, 0.12),
transparent 35%
),
#07152f;
}


/* =========================================
TOP BAR
========================================= */

.topbar {
display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

margin-bottom: 35px;
}

.topbar h1 {
font-size: 32px;

font-weight: 800;

color: #ffffff;
}

.user {
display: flex;

align-items: center;

gap: 13px;

padding: 8px 15px;

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(255, 255, 255, 0.08);

border-radius: 50px;
}

.user > img {
width: 48px;

height: 48px;

border-radius: 50%;

object-fit: cover;

border: 3px solid #2d8cff;

background: #17345d;
}

.dashboard-user {
min-width: 120px;
}

.dashboard-user h3 {
font-size: 16px;

font-weight: 700;

color: #ffffff;

margin-bottom: 3px;

max-width: 230px;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;
}

.dashboard-user small {
color: #8fa7c7;

font-size: 12px;
}


/* =========================================
ACCOUNT CARDS
========================================= */

.cards {
display: grid;

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

gap: 20px;

margin-bottom: 25px;
}

.card {
position: relative;

padding: 25px;

min-height: 145px;

border-radius: 18px;

background:
linear-gradient(
145deg,
#173d70,
#102e57
);

border: 1px solid rgba(255, 255, 255, 0.07);

box-shadow:
0 10px 30px rgba(0, 0, 0, 0.18);

overflow: hidden;

transition: 0.25s ease;
}

.card::after {
content: "";

position: absolute;

width: 100px;
height: 100px;

right: -35px;
top: -35px;

border-radius: 50%;

background: rgba(255, 255, 255, 0.04);
}

.card:hover {
transform: translateY(-4px);

border-color: rgba(45, 140, 255, 0.4);
}

.card h3 {
position: relative;

z-index: 2;

color: #c7d7ec;

font-size: 15px;

font-weight: 600;

margin-bottom: 15px;
}

.card h2 {
position: relative;

z-index: 2;

color: #ffffff;

font-size: 28px;

font-weight: 800;
}

#accountBalance,
#totalProfit,
#totalDeposits {
color: #ffd500;
}

#activeInvestments {
color: #4db8ff;
}


/* =========================================
ACTION BUTTONS
========================================= */

.actions {
display: flex;

flex-wrap: wrap;

gap: 15px;

margin-bottom: 40px;
}

.actions a {
text-decoration: none;
}

.actions button {
border: none;

padding: 14px 23px;

border-radius: 10px;

background:
linear-gradient(
135deg,
#1478ff,
#0052d4
);

color: #ffffff;

font-size: 15px;

font-weight: 700;

cursor: pointer;

box-shadow:
0 8px 18px rgba(0, 82, 212, 0.25);

transition: 0.25s ease;
}

.actions button i {
margin-right: 7px;
}

.actions button:hover {
transform: translateY(-2px);

box-shadow:
0 12px 25px rgba(0, 82, 212, 0.4);

background:
linear-gradient(
135deg,
#2585ff,
#0862e8
);
}

.actions button:active {
transform: translateY(0);
}


/* =========================================
SECTION TITLES
========================================= */

.section-title {
font-size: 22px;

font-weight: 800;

color: #ffffff;

margin-bottom: 18px;

margin-top: 15px;
}


/* =========================================
INVESTMENT MARKETS
========================================= */

.markets {
display: grid;

grid-template-columns:
repeat(3, minmax(0, 1fr));

gap: 18px;

margin-bottom: 40px;
}

.market-card {
padding: 23px;

min-height: 120px;

border-radius: 16px;

background:
linear-gradient(
145deg,
#173b6b,
#112d53
);

border: 1px solid rgba(255, 255, 255, 0.07);

transition: 0.25s ease;

cursor: pointer;
}

.market-card:hover {
transform: translateY(-4px);

border-color: rgba(255, 213, 0, 0.4);

box-shadow:
0 10px 25px rgba(0, 0, 0, 0.2);
}

.market-card h3 {
color: #ffd500;

font-size: 19px;

margin-bottom: 10px;
}

.market-card p {
color: #a9bdd7;

font-size: 14px;

font-weight: 600;
}


/* =========================================
TRANSACTIONS
========================================= */

.transaction-container {
width: 100%;

overflow-x: auto;

border-radius: 16px;

background: #102b51;

border: 1px solid rgba(255, 255, 255, 0.07);

margin-bottom: 40px;
}

table {
width: 100%;

border-collapse: collapse;

min-width: 600px;
}

thead {
background: rgba(255, 255, 255, 0.05);
}

th {
padding: 17px 20px;

text-align: left;

color: #9fb6d3;

font-size: 13px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.4px;
}

td {
padding: 17px 20px;

border-top: 1px solid rgba(255, 255, 255, 0.06);

color: #dce7f5;

font-size: 14px;
}

tbody tr {
transition: 0.2s ease;
}

tbody tr:hover {
background: rgba(255, 255, 255, 0.035);
}

tbody td[colspan="4"] {
text-align: center;

color: #8ea6c3;

padding: 30px;
}


/* =========================================
RESPONSIVE - TABLET
========================================= */

@media (max-width: 1100px) {

.sidebar {
width: 210px;
}

.main {
margin-left: 210px;

padding: 25px;
}

.cards {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

.markets {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}

}


/* =========================================
RESPONSIVE - MOBILE
========================================= */

@media (max-width: 760px) {

body {
overflow-x: hidden;
}

.sidebar {
position: relative;

width: 100%;

height: auto;

padding: 18px 15px;

border-right: none;

border-bottom:
1px solid rgba(255, 255, 255, 0.08);
}

.sidebar h2 {
margin-bottom: 15px;

font-size: 22px;
}

.sidebar ul {
display: flex;

overflow-x: auto;

gap: 8px;

padding-bottom: 5px;
}

.sidebar li {
flex: 0 0 auto;

margin-bottom: 0;
}

.sidebar li a,
#logoutBtn {
padding: 10px 13px;

white-space: nowrap;

font-size: 13px;
}

#logoutBtn {
margin-top: 0;
}

.main {
margin-left: 0;

padding: 20px 15px;
}

.topbar {
align-items: flex-start;

flex-direction: column;

margin-bottom: 25px;
}

.topbar h1 {
font-size: 27px;
}

.user {
width: 100%;

border-radius: 15px;

padding: 10px 13px;
}

.user > img {
width: 50px;

height: 50px;
}

.dashboard-user h3 {
max-width: calc(100vw - 120px);
}

.cards {
grid-template-columns: 1fr;

gap: 14px;
}

.card {
min-height: 125px;

padding: 21px;
}

.card h2 {
font-size: 25px;
}

.actions {
display: grid;

grid-template-columns: 1fr;

gap: 10px;
}

.actions a,
.actions button {
width: 100%;
}

.section-title {
font-size: 20px;

margin-top: 28px;
}

.markets {
grid-template-columns: 1fr;

gap: 12px;
}

.market-card {
min-height: 100px;
}

}


/* =========================================
SMALL PHONES
========================================= */

@media (max-width: 420px) {

.main {
padding: 18px 12px;
}

.topbar h1 {
font-size: 24px;
}

.user > img {
width: 45px;

height: 45px;
}

.dashboard-user h3 {
font-size: 14px;
}

.dashboard-user small {
font-size: 11px;
}

.card {
padding: 18px;
}

.card h3 {
font-size: 14px;
}

.card h2 {
font-size: 23px;
}

.actions button {
padding: 13px 15px;

font-size: 14px;
}

.market-card {
padding: 19px;
}

}