/*--------------------------------------------------------------
# employee dashboard Section
--------------------------------------------------------------*/
#employeedashboard {
  padding-top: 140px;
  position: relative;
  overflow: hidden;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

#employeedashboard .card {
  border: none;
  height: auto;
}

#employeedashboard .employee-name {
  padding: 0;
  font-family: var(--nav-font);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--default-color);
  transition: all 0.3s ease;
}

#employeedashboard .employee-name:hover,
#employeedashboard .employee-name.active {
  color: var(--accent-color);
  padding-left: 10px;
}

#employeedashboard .card {
  min-height: 405.375px;
  height: 100%;
}

#employeedashboard .sidebar-menu a {
  color: var(--default-color);
  font-family: var(--nav-font);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s ease;
}

#employeedashboard .sidebar-menu a:hover,
#employeedashboard .sidebar-menu a.active {
  color: var(--accent-color);
}

/* Responsive Sidebar — hide on mobile */
@media (max-width: 991px) {
  #employeedashboard .sidebar-col {
      display: none !important;
  }
}


/* Modern Mobile Navbar */
.mobile-nav {
  position: fixed;
  bottom: 10px; /* slightly above bottom */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px); /* padding from sides */
  max-width: 500px;
  background: white;
  padding: 10px 0;
  border-radius: 30px; /* rounded pill shape */
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* subtle shadow */
  z-index: 9999;
}

/* Icons and labels */
.mobile-nav a,
.mobile-nav .mobile-profile > a {
  text-align: center;
  color: var(--default-color);
  text-decoration: none;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mobile-nav i {
  font-size: 24px;
}

.mobile-nav span {
  font-size: 10px;
  margin-top: 2px;
}

/* Active icon */
.mobile-nav a.active i {
  color: var(--accent-color);
}

/* Profile dropdown */
.mobile-profile .dropdown-menu {
  margin-bottom: 60px; /* show above navbar */
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Optional: add hover effect for icons */
.mobile-nav a:hover i {
  transform: scale(1.2);
  transition: transform 0.2s ease;
}
/* Make profile icon bigger */
.mobile-profile > a i {
  font-size: 24px; /* increase size */
  color: var(--default-color);
}

/* Optional: active state color */
.mobile-profile.active > a i,
.mobile-profile > a.active i {
  color: var(--accent-color);
}
.mobile-profile .dropdown-toggle::after {
  display: none;
}

/*--------------------------------------------------------------
# Report Issue Section
--------------------------------------------------------------*/
#reportissue{
  padding: 0;
}
#reportissue .card-header{
  background-color: var(--accent-color);
}
#reportissue .card-header h5{
  color: var(--background-color);
}

/*--------------------------------------------------------------
# Account Profile Section
--------------------------------------------------------------*/
#accountprofile{
  padding: 0;
}
#accountprofile .card-header{
  background-color: var(--accent-color);
}
#accountprofile .card-header h5{
  color: var(--background-color);
}
/*--------------------------------------------------------------
# Employee Dashboard Section
--------------------------------------------------------------*/
#dashboard {
  padding: 0;
}

/* Cards */
#dashboard .card {
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: transform 0.2s, box-shadow 0.2s;
  background: var(--card-bg, #fff);
}

/* Card hover effect */
#dashboard .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Card headers */
#dashboard .card-header {
  background: linear-gradient(135deg, var(--accent-color), var(--accent-color-light, #6fb1fc));
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  border-radius: 0.5rem 0.5rem 0 0;
}

#dashboard .card-header h6 {
  color: var(--background-color);
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
}

/* Card body */
#dashboard .card-body {
  padding: 1rem;
}

#dashboard .card h4 {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--accent-color);
}

#dashboard .card p, 
#dashboard .card div {
  color: var(--text-color);
  font-size: 0.875rem;
}

/* List groups (Announcements / Events) */
#dashboard .list-group-item {
  border: none;
  padding: 0.75rem 1rem;
  border-radius: 0.25rem;
  margin-bottom: 0.25rem;
  background: var(--list-bg, #f9f9f9);
  transition: background 0.2s;
}

#dashboard .list-group-item:hover {
  background: var(--accent-color-light, #e6f0ff);
}

#dashboard .list-group-item strong {
  font-weight: 500;
}

#dashboard .list-group-item small {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Badges */
#dashboard .badge {
  font-size: 0.75rem;
  background-color: var(--accent-color);
  color: var(--background-color);
}

/* Rows */
#dashboard .row.g-4 {
  margin-bottom: 1rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #dashboard .col-md-4,
  #dashboard .col-md-8 {
    margin-bottom: 1rem;
  }
}


/*--------------------------------------------------------------
# Online Services Section
--------------------------------------------------------------*/
#online-services{
  padding:0;

}
#online-services .card-header{
  background-color: var(--accent-color);
}
#online-services .card-header h5{
  color: var(--background-color);
}

#online-services .service-card {
  border: 1px solid #eee;
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #fff;
}

#online-services .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

#online-services .service-card i {
  transition: transform 0.2s, color 0.2s;
}

#online-services .service-card:hover i {
  transform: scale(1.2);
}


/*--------------------------------------------------------------
# Employee Documents Section
--------------------------------------------------------------*/
#employee-documents{
  padding:0;

}
#employee-documents .card-header{
  background-color: var(--accent-color);
}
#employee-documents .card-header h5{
  color: var(--background-color);
}

#employee-documents .service-card {
  border: 1px solid #eee;
  border-radius: 0.5rem;
  transition: transform 0.2s, box-shadow 0.2s;
  background-color: #fff;
}

#employee-documents .service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

#employee-documents .service-card i {
  transition: transform 0.2s, color 0.2s;
}

#employee-documents .service-card:hover i {
  transform: scale(1.2);
}