:root {
  --themecolor: #373435; /* Primary Color */
  --themecoloropacity: rgba(55, 52, 53, 0.8); /* Primary Color with Opacity */
  
  --secthemecolor: #514D4E; /* Secondary Color */
  --secthemecoloropacity: rgba(81, 77, 78, 0.8); /* Secondary Color with Opacity */
  
  --accent-color: #008080; /* Accent Color */
  --accent-coloropacity: rgba(0, 128, 128, 0.8); /* Accent Color with Opacity */
  
  --text-color: #111111; /* Main Text Color */
  --text-light: #FFFFFF; /* Light Text for Dark Backgrounds */
  
  --background-color: #F3F3F3; /* Light Gray Background */
  --background-dark: #111111; /* Dark Background Color */
  
  --button-bg: var(--themecolor); /* Button Background */
  --button-hover: var(--accent-color); /* Button Hover Color */
  --button-text: #FFFFFF; /* Button Text Color */

  --link-color: var(--accent-color); /* Link Color */
  --link-hover: #004C4C; /* Darker Accent for Link Hover */

  --alert-color: #E63946; /* Alert/Warning Color */
  --success-color: #4CAF50; /* Success/Confirmation Color */
  --info-color: #1DA1F2; /* Informational Color */

  --border-color: #DADADA; /* Default Border Color */
  --card-shadow: rgba(0, 0, 0, 0.1); /* Box Shadow for Cards/Containers */

  --bodyfont: "Inter", sans-serif; /* Body Font */
  --headingfont: "Inter", sans-serif; /* Heading Font */
}

/* General Dashboard Styles */
body.dashboard-page {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: var(--bodyfont);
}

/* Dashboard Sidebar */
.dashboard-sidebar {
  background-color: var(--secthemecolor);
  color: var(--text-light);
}
.dashboard-sidebar a {
  color: var(--text-light);
  text-decoration: none;
}
.dashboard-sidebar a:hover {
  color: var(--accent-color);
}

/* Dashboard Header */
.dashboard-header {
  background-color: var(--themecolor);
  color: var(--text-light);
  border-bottom: 1px solid var(--border-color);
}
.dashboard-header a {
  color: var(--text-light);
}
.dashboard-header a:hover {
  color: var(--link-hover);
}

/* Buttons */
.button {
  background-color: var(--button-bg);
  color: var(--button-text);
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: var(--button-hover);
}

/* Cards and Containers */
.dashboard-card {
  background-color: var(--background-color);
  color: var(--text-color);
  box-shadow: 0px 4px 6px var(--card-shadow);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

/* Alerts and Notifications */
.alert {
  padding: 12px 16px;
  margin: 10px 0;
  border-radius: 4px;
  font-weight: bold;
}
.alert-warning {
  background-color: var(--alert-color);
  color: var(--text-light);
}
.alert-success {
  background-color: var(--success-color);
  color: var(--text-light);
}
.alert-info {
  background-color: var(--info-color);
  color: var(--text-light);
}

/* Tables */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
.dashboard-table th {
  background-color: var(--themecolor);
  color: var(--text-light);
  text-align: left;
  padding: 10px;
}
.dashboard-table td {
  background-color: var(--background-color);
  color: var(--text-color);
  padding: 10px;
  border-bottom: 1px solid var(--border-color);
}
.dashboard-table tr:hover {
  background-color: var(--secthemecoloropacity);
}

/* Forms */
.dashboard-form input,
.dashboard-form select,
.dashboard-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-color: var(--background-color);
  color: var(--text-color);
}
.dashboard-form input:focus,
.dashboard-form select:focus,
.dashboard-form textarea:focus {
  border-color: var(--accent-color);
  outline: none;
  box-shadow: 0px 0px 4px var(--accent-coloropacity);
}

/* Links */
a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  color: var(--link-hover);
}

/* Styles for Hub menu */
.wr-hub {
  background-color: var(--accent-color);
  color: var(--text-light);
}

.wr-hub:hover {
  background-color: var(--accent-coloropacity);
}

/* Styles for Hub submenu */
.wr-hub-overview,
.wr-manage-hub {
  color: var(--accent-color);
}

.wr-hub-overview:hover,
.wr-manage-hub:hover {
  color: var(--link-hover);
}

#floating-menu {
  display: block !important;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  background: yellow; /* Temporary for debugging */
  padding: 10px;
  border-radius: 8px;
}

/* Style for the new Hub menu item */
.wr-hub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px; /* Adjust padding to match other menu items */
  color: var(--text-light); /* Use the same text color as other items */
  font-family: var(--bodyfont);
  font-size: 14px; /* Match font size */
  text-decoration: none;
  border-radius: 4px; /* Slight rounding for consistency */
  transition: background-color 0.3s ease; /* Add hover effect */
}

.wr-hub a:hover {
  background-color: var(--secthemecolor); /* Match hover background of other items */
  color: var(--text-light); /* Ensure text remains visible on hover */
}

.wr-hub i {
  color: var(--text-light); /* Icon color matches text */
}

/* Hub Menu Item Styling */
.wr-dashboard-sidebar-profile-menu li.wr-hub a {
  color: #FFFFFF; /* White text color */
  background-color: var(--accent-color); /* Use the accent color */
  padding: 10px 8px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease;
}

/* Hover Effect for Consistency */
.wr-dashboard-sidebar-profile-menu li.wr-hub a:hover {
  background-color: var(--button-hover); /* Darker hover color */
  color: #FFFFFF; /* Ensure the text stays white on hover */
}