/* GLOBAL RESET */

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

body{
font-family:Arial, Helvetica, sans-serif;
background:#f6f7fb;
color:#333;
}

/* HEADER */

.header{
background:#1976d2;
color:white;
padding:12px;
font-size:18px;
display:flex;
align-items:center;
justify-content:flex-start;
}


/* menu button */

.menu-toggle{
display:none;
background:none;
border:none;
font-size:22px;
color:white;
margin-right:10px;
cursor:pointer;
}

/* MENU DESKTOP */

.menu{
background:#f5f5f5;
display:flex;
flex-wrap:wrap;
gap:10px;
padding:10px;
}

.menu a{
    font-size:12px;
text-decoration:none;
padding:6px 10px;
color:#333;
border-radius:4px;
}

.menu a:hover{
background:#1976d2;
color:white;
}



/******/
.btn-link{
    max-width:200px;
display:inline-block;
margin:10px;
padding:8px 16px;
background:#2c7be5;
color:#fff;
text-decoration:none;
border-radius:6px;
font-size:14px;
font-weight:500;
transition:all .2s ease;
box-shadow:0 2px 6px rgba(0,0,0,0.15);
}

.btn-link:hover{
background:#1d4ed8;
transform:translateY(-1px);
box-shadow:0 4px 10px rgba(0,0,0,0.2);
}

/* MOBILE */

@media (max-width:768px){

.menu-toggle{
display:block;
}

.menu{
display:none;
flex-direction:column;
background:white;
}

.menu.show{
display:flex;
}

.menu a{
padding:12px;
border-bottom:1px solid #eee;
}

}

/* PAGE CONTAINER */

.container{
padding:15px;
word-break: break-word;
}

/* TABLE */

table{
width:100%;
border-collapse:collapse;
background:white;
}

table th{
background:#f0f0f0;
}

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

/* FORM */

input, select, textarea{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}

button{
background:#2c7be5;
color:white;
border:none;
padding:8px 12px;
border-radius:4px;
cursor:pointer;
}

button:hover{
background:#1b5fd1;
}

/* DASHBOARD CARDS */

.dashboard{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:15px;
margin-top:15px;
}

.card{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 1px 4px rgba(0,0,0,0.1);
}

.card b{
font-size:16px;
display:inline-block;
margin-top:6px;
}

/* CHAT */

#chatbox{
height:400px;
overflow:auto;
background:#fafafa;
padding:10px;
border:1px solid #ddd;
}

.msg{
margin-bottom:8px;
padding:6px;
background:#e9f2ff;
border-radius:6px;
max-width:80%;
}

.me{
background:#d7ffd7;
margin-left:auto;
}

/* SIDEBAR CHAT */

#container{
display:flex;
height:90vh;
}

#clients{
width:280px;
border-right:1px solid #ddd;
overflow:auto;
background:#fafafa;
}

.client{
padding:10px;
border-bottom:1px solid #eee;
cursor:pointer;
}

.client:hover{
background:#f0f0f0;
}

#chatArea{
flex:1;
display:flex;
flex-direction:column;
}

/* MOBILE RESPONSIVE */

@media (max-width:900px){

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

#container{
flex-direction:column;
}

#clients{
width:100%;
height:200px;
}

#chatbox{
height:250px;
}

}

@media (max-width:600px){

.menu{
flex-direction:column;
}

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

table th, table td{
font-size:12px;
}

button{
width:100%;
}

}