*{
box-sizing:border-box;
}

body{
margin:0;
font-family:Segoe UI;
background:#f1f3f6;
}

/* HEADER */
.header{
background:#2c3e50;
color:white;
padding:15px;
font-size:20px;
}

/* LAYOUT */
.wrapper{
display:flex;
min-height:100vh;
}

/* SIDEBAR */
.sidebar{
width:240px;
background:#34495e;
}

.sidebar a{
display:block;
color:white;
padding:14px;
text-decoration:none;
border-bottom:1px solid #465c71;
}

.sidebar a:hover{
background:#1abc9c;
}

/* CONTENT */
.content{
flex:1;
padding:15px;
}

/* CARD */
.card{
background:white;
padding:15px;
margin-bottom:15px;
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,.2);
}

/* TABLE */
table{
width:100%;
border-collapse:collapse;
}

th,td{
border:1px solid #ddd;
padding:8px;
font-size:14px;
}

th{
background:#ecf0f1;
}

/* INPUT */
input,select,button{
width:100%;
padding:8px;
margin-top:5px;
margin-bottom:10px;
}

button{
background:#2c3e50;
color:white;
border:none;
cursor:pointer;
}

button:hover{
background:#1abc9c;
}

/* MOBILE */
@media(max-width:768px){

.wrapper{
flex-direction:column;
}

.sidebar{
width:100%;
display:flex;
overflow-x:auto;
}

.sidebar a{
flex:1;
text-align:center;
font-size:13px;
}

}