body{
margin:0;
font-family:'Roboto',sans-serif;
display:flex;
background:linear-gradient(135deg,#eef2ff,#f8fafc);
}


/* Sidebar */

.sidebar{
width:240px;
background:#1e293b;
color:white;
height:100vh;
position:fixed;
}


.sidebar-menu li{
padding:8px 12px;
}

.sidebar-icon{
font-size:18px;
line-height:18px;
color:#4f46e5;
}

.logo{
text-align:center;
padding:20px;
font-size:20px;
font-weight:bold;
}

.menu a{
display:flex;
align-items:center;
padding:14px 20px;
color:white;
text-decoration:none;
}

.menu a:hover{
background:#334155;
}

.menu a.active{
background:#4f46e5;
}

.material-icons{
font-size:20px;
line-height:20px;
vertical-align:middle;
}

/* Dashboard cards */
.main-content{
    margin-top: 30px;

    padding: 10px;
}


.report-form {
  display: flex;
  gap: 16px; /* space between items */
  align-items: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin: 20px 0;
}

.report-form select,
.report-form input[type="date"] {
  padding: 8px 12px;
  margin-left:70px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  min-width: 100px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.report-form select:focus,
.report-form input[type="date"]:focus {
  border-color: #0078d7;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 120, 215, 0.5);
}

.report-form button {
  padding: 10px 20px;
  background-color: #0078d7;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.report-form button:hover {
  background-color: #005a9e;
}


/* Main */

.main{
margin-left:240px;
width:100%;
}

/* Header */
.header{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:10px 30px;
box-shadow:0 2px 6px rgba(0,0,0,0.05);
margin-bottom:10px;
}



.user-info{
display:flex;
align-items:center;
gap:10px;
}

.logout-btn{
background:#ef4444;
color:white;
border:none;
padding:8px 14px;
border-radius:6px;
cursor:pointer;
display:flex;
align-items:center;
gap:6px;
}

.logout-btn:hover{
background:#dc2626;
}

/* Employee Section - Search  */
.search-container{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
   
}

.search-container input{
    padding:10px;
    width:300px;
    border:1px solid #ccc;
    border-radius:6px;
}

.search-container button{
    padding:10px 18px;
    border:none;
    background:#4f46e5;
    color:white;
    border-radius:6px;
    cursor:pointer;
}

.search-container button:hover{
    background:#4338ca;
}



/* Attendance Search Button */

.attendance-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.attendance-search select {
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  min-width: 150px;
  box-sizing: border-box;
  transition: border-color 0.3s ease;
}

.attendance-search select:focus {
  border-color: #0078d7;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 120, 215, 0.5);
}

.attendance-search .search-btn {
  padding: 9px 18px;
  background-color: #0078d7;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.attendance-search .search-btn:hover {
  background-color: #005a9e;
}



/* Content */

.content{
max-width:1200px;
margin:auto;
padding:25px;
}

/* Cards */

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

.card{
flex:1;
background:white;
padding:25px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
box-shadow:0 10px 24px rgba(0,0,0,0.15);
}

.card h3{
color:#64748b;
font-weight:500;
margin-top:10px;
}

.card h1{
font-size:38px;
margin-top:10px;
font-weight:700;
}


/* Sidebar animation */

.sidebar{
transition: all 0.3s ease;
}

.menu a{
transition: all 0.2s ease;
}

.menu a:hover{
background:#4f46e5;
padding-left:25px;
}


/* Tables */

table{
width:100%;
border-collapse:collapse;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

th{
background:#4f46e5;
color:white;
padding:14px;
text-align:left;
}

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

tr:hover{
background:#f8fafc;
}

.analytics{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
margin-top:10px;
}

.chart-card{
background:white;
padding:15px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
height:300px;
}

.chart-card h3{
margin-bottom:10px;
font-size:16px;
}

#attendanceChart,
#deptChart{
height:260px;
}

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

.table-card,
.activity-card{
background:white;
padding:18px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.activity-card ul{
list-style:none;
padding:0;
}

.activity-card li{
padding:8px 0;
border-bottom:1px solid #eee;
}