/* ================================
GLOBAL
================================ */

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

body{
font-family:'Inter', sans-serif;
background:#0f0f0f;
color:#fff;
}


/* ================================
LAYOUT
================================ */

.app-container{
display:flex;
min-height:100vh;
}


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

.sidebar{
width:250px;
background:#000;
border-right:1px solid #1e1e1e;
padding:30px 20px;
display:flex;
flex-direction:column;
}

.logo{
text-align:center;
margin-bottom:40px;
}

.logo img{
width:120px;
}


/* MENU */

.menu{
display:flex;
flex-direction:column;
gap:8px;
}

.menu a{
display:flex;
align-items:center;
gap:12px;
padding:12px 16px;
border-radius:10px;
text-decoration:none;
color:#c9c9c9;
font-size:14px;
transition:0.25s;
}

.menu a:hover{
background:#1a1a1a;
color:#ffd700;
}

.menu a.active{
background:#1a1a1a;
color:#ffd700;
}

.menu i{
width:20px;
}


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

.main-content{
flex:1;
display:flex;
flex-direction:column;
width:100%;
overflow-x:hidden;
}


/* ================================
TOPBAR
================================ */

.topbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:25px 40px;
border-bottom:1px solid #1e1e1e;
background:#0f0f0f;
}

.topbar h1{
font-size:20px;
font-weight:500;
}

.brand{
color:#ffd700;
font-weight:500;
}


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

.content{
padding:40px;
max-width:1400px;
margin:auto;
}


/* ================================
KPI CARDS
================================ */

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:25px;
margin-bottom:40px;
}

.card{
background:#121212;
padding:30px;
border-radius:12px;
border:1px solid #1e1e1e;
transition:0.3s;
}

.card:hover{
transform:translateY(-5px);
border-color:#ffd700;
}

.card-title{
font-size:13px;
color:#888;
margin-bottom:8px;
}

.card-value{
font-size:28px;
font-weight:600;
color:#ffd700;
}


/* ================================
FORMS
================================ */

.form-card{
background:#121212;
padding:30px;
border-radius:12px;
border:1px solid #1e1e1e;
max-width:650px;
}

.form-group{
margin-bottom:18px;
}

.form-group label{
display:block;
margin-bottom:6px;
font-size:13px;
color:#888;
}

.form-group input{
width:100%;
padding:10px;
border-radius:8px;
border:1px solid #2a2a2a;
background:#000;
color:#fff;
}

.form-group input:focus{
outline:none;
border-color:#ffd700;
}


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

button{
background:#ffd700;
border:none;
padding:12px 18px;
border-radius:8px;
cursor:pointer;
font-weight:500;
transition:0.2s;
}

button:hover{
background:#e6c200;
}


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

table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

table th{
text-align:left;
font-weight:500;
padding:12px;
border-bottom:1px solid #2a2a2a;
color:#888;
}

table td{
padding:12px;
border-bottom:1px solid #1e1e1e;
}

table tr:hover{
background:#111;
}


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

.btn-edit{
background:#2a2a2a;
padding:6px 10px;
border-radius:6px;
text-decoration:none;
color:#fff;
font-size:13px;
}

.btn-delete{
background:#8b0000;
padding:6px 10px;
border-radius:6px;
text-decoration:none;
color:#fff;
font-size:13px;
}


/* ================================
CHARTS LAYOUT
================================ */

.charts{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:30px;
}

.chart-box{
background:#121212;
padding:25px;
border-radius:12px;
border:1px solid #1e1e1e;
height:350px;
}

.chart-box h3{
margin-bottom:15px;
font-size:16px;
font-weight:500;
}

.chart-box canvas{
width:100% !important;
height:300px !important;
}


/* ================================
DASHBOARD BOTTOM
================================ */

.dashboard-bottom{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:30px;
}

.dashboard-box{
background:#121212;
padding:25px;
border-radius:12px;
border:1px solid #1e1e1e;
}

.dashboard-box h3{
margin-bottom:15px;
font-size:16px;
font-weight:500;
}

.dashboard-table{
width:100%;
border-collapse:collapse;
}

.dashboard-table th{
text-align:left;
padding:10px;
border-bottom:1px solid #2a2a2a;
color:#aaa;
font-size:13px;
}

.dashboard-table td{
padding:10px;
border-bottom:1px solid #1e1e1e;
font-size:14px;
}

.dashboard-table tr:hover{
background:#111;
}


/* ================================
MOBILE MENU BUTTON
================================ */

.mobile-menu-btn{
display:none;
background:none;
border:none;
font-size:22px;
color:#fff;
cursor:pointer;
}


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

@media(max-width:900px){

.mobile-menu-btn{
display:block;
}

.topbar{
padding:20px;
}

/* sidebar */

.sidebar{
position:fixed;
left:-260px;
top:0;
height:100vh;
width:250px;
z-index:999;
transition:0.3s;
}

.sidebar.active{
left:0;
}

/* layout */

.content{
padding:20px;
}

/* cards */

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

/* charts */

.charts{
grid-template-columns:1fr;
}

/* bottom */

.dashboard-bottom{
grid-template-columns:1fr;
}

/* chart size */

.chart-box{
height:280px;
}

.chart-box canvas{
height:220px !important;
}

/* logo */

.logo img{
width:80px;
}

}

/* ================================
PAGE LAYOUT (FORMS + TABLES)
================================ */

.page-layout{
display:grid;
grid-template-columns:420px 1fr;
gap:40px;
margin-top:30px;
align-items:start;
}

/* formular */

.form-card{
width:100%;
}

/* tabel */

.table-card{
background:#121212;
padding:25px;
border-radius:12px;
border:1px solid #1e1e1e;
}

/* responsive */

@media(max-width:1100px){

.page-layout{
grid-template-columns:1fr;
}

}
/* AUTOCOMPLETE */

.autocomplete-results{
background:#121212;
border:1px solid #1e1e1e;
border-radius:8px;
margin-top:5px;
position:absolute;
width:100%;
z-index:1000;
}

.autocomplete-item{
padding:10px;
cursor:pointer;
}

.autocomplete-item:hover{
background:#1a1a1a;
}
/* GLOBAL SEARCH */

.search-box{
position:relative;
width:300px;
}

.search-box input{
width:100%;
padding:8px 10px;
border-radius:6px;
border:1px solid #1e1e1e;
background:#121212;
color:#fff;
}

.search-results{
position:absolute;
top:40px;
width:100%;
background:#121212;
border:1px solid #1e1e1e;
border-radius:8px;
z-index:999;
}

.search-item{
padding:10px;
cursor:pointer;
}

.search-item:hover{
background:#1a1a1a;
}