body.page-template-employer-dashboard.hide-site-header .site-header,
body.page-template-employer-dashboard.hide-site-header #masthead,
body.page-template-employer-dashboard.hide-site-header header,
body.page-template-employer-dashboard.hide-site-header .site-header-wrap {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.page-template-employer-dashboard.hide-site-header #page,
body.page-template-employer-dashboard.hide-site-header .hfeed.site,
body.page-template-employer-dashboard.hide-site-header #content,
body.page-template-employer-dashboard.hide-site-header .site-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}



/* CSS for the new Theme Toggle Switch
*/

/* This is the container, the "track" of the slider */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Width of the track */
  height: 26px; /* Height of the track */
  margin-left: 1rem; /* Added some margin to space it out */
  margin:20px;
}

/* This hides the actual, ugly checkbox */
.theme-switch .theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* This is the visual "slider" part - the track */
.theme-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc; /* Track color when "off" (Light Mode) */
  transition: .4s;
  border-radius: 26px; /* Makes it pill-shaped */
}

/* This is the little circle that slides */
.theme-toggle-slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Size of the circle */
  width: 20px;  /* Size of the circle */
  left: 3px;    /* Position from the left */
  bottom: 3px;
  background-color: white; /* Color of the circle */
  transition: .4s;
  border-radius: 50%; /* Makes it a circle */
}

/* THIS IS THE ACTION!
  When the (hidden) checkbox is :checked...
*/

/* 1. Change the track color to blue (or your brand color) */
.theme-toggle-input:checked + .theme-toggle-slider {
  background-color: #38b6ff; /* Your brand-blue color! */
}

/* 2. Move the little circle to the right */
.theme-toggle-input:checked + .theme-toggle-slider:before {
  transform: translateX(24px); /* Moves the circle */
}

/* Optional: Add icons! (Sun/Moon) */
.theme-toggle-slider:after {
  font-size: 14px;
  position: absolute;
  left: 5px;
  top: 4px;
}

.theme-toggle-input:checked + .theme-toggle-slider:after {
  left: auto;
  right: 5px;
}






/* Bonus: Remove any top margin or padding from the body itself */
body.page-template-employer-dashboard.hide-site-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.page-template-employer-dashboard {
  font-family: 'Inter', sans-serif;
}
h1, h2, h3, h4, h5, h6,
.nav-item,
.sidebar-header h1,
.sidebar-header p {
  font-family: 'Inter', sans-serif;
}

.logo-shift img {
  width: 50px; /* increase width as needed */
  height: auto; /* keep aspect ratio */
  display: block; /* optional, remove inline spacing */
}

 .employer-dashboard {
    display: flex;
    height: 100vh;
 


    background-color: #f9fafb; /* Tailwind gray-50 */
  }

  /* Sidebar styling */
  .sidebar {
    width: 16rem; /* 64 in Tailwind */
    background-color: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / 0.1);
    border-right: 1px solid #e5e7eb; /* gray-200 */
    display: flex;
    flex-direction: column;
  }

  .sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #f3f4f6; /* gray-100 */
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }


.logout-container {
  margin-top: 1rem; /* smaller than before */
  padding-top: 1rem;
  border-top: 1px solid #d1d5db; /* gray-300 */
}


  .logo-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: gray;
  }
   .logout-container .logo-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: red;
  }


  .sidebar-header h1 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1f2937; /* gray-800 */
    margin: 0;
    letter-spacing: 0.05em;
  }

  .sidebar-header p {
    font-size: 0.75rem;
    color: #6b7280; /* gray-500 */
    margin: 0;
  }

  /* Navigation styles */
  .nav {
    margin-top: 1.5rem;
    padding: 0 1rem;
    flex-grow: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
  }

  .nav-item {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.5rem;
    color: #4b5563; /* gray-600 */
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-right-color 0.2s ease;
    border-right: 3px solid transparent;
    outline: none;
  }

  .nav-item:hover,
  .nav-item:focus-visible {
    background-color: #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
  }

  .nav-item.active {
    color: #38b6ff; /* brand-blue */
    background-color: #dbedff; /* blue-50 */
    border-right-color: #38b6ff;
    font-weight: 600;
  }

  .nav-item.active:hover,
  .nav-item.active:focus-visible {
    /* Keep same style on hover/focus so it doesn't change */
    background-color: #dbedff;
    color: #38b6ff;
    border-right-color: #38b6ff;
  }

  /* Logout */
  .logout-container {
    margin-top: 1 rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f3f4f6; /* gray-100 */
  }

  .nav-item.logout {
    color: #dc2626; /* red-600 */
  }

  .nav-item.logout:hover,
  .nav-item.logout:focus-visible {
    color: #b91c1c; /* red-700 */
    background-color: #fee2e2; /* red-50 */
  }

  /* Main content */
  .main-content-dashboard{
    flex-grow: 1;
   
    overflow-y: auto;
  }


  /* Hidden content views */
  .view-content.hidden {
    display: none;
  }



.nav-item:focus {
  outline: none;
  color: #38B6FF;
 
}

/*
========================================
=====     DARK MODE STYLES     =========
========================================
*/

/* This is the magic prefix! 
   All your dark mode rules will start with this.
*/

/* 1. Main Background */
body.dark-mode .employer-dashboard {
  background-color: #111827; /* Tailwind gray-900 */
}

/* 2. Sidebar */
body.dark-mode .sidebar {
  background-color: #1f2937; /* Tailwind gray-800 */
  border-right: 1px solid #374151; /* gray-700 */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
}

/* 3. Sidebar Header */
body.dark-mode .sidebar-header {
  border-bottom: 1px solid #374151; /* gray-700 */
}

body.dark-mode .sidebar-header h1 {
  color: #f3f4f6; /* gray-100 */
}

body.dark-mode .sidebar-header p {
  color: #9ca3af; /* gray-400 */
}

/* 4. Navigation Links */
body.dark-mode .nav-item {
  color: #d1d5db; /* gray-300 */
}

body.dark-mode .nav-item:hover,
body.dark-mode .nav-item:focus-visible {
  background-color: #374151; /* gray-700 */
  color: #f9fafb; /* gray-50 */
}

/* 5. Active Nav Link */
body.dark-mode .nav-item.active {
  color: #38b6ff; /* Keep brand-blue */
  background-color: #111827; /* gray-900 */
  border-right-color: #38b6ff; /* Keep brand-blue */
}

body.dark-mode .nav-item.active:hover,
body.dark-mode .nav-item.active:focus-visible {
  /* Keep same style on hover */
  background-color: #111827;
  color: #38b6ff;
  border-right-color: #38b6ff;
}

/* 6. Logout Area */
body.dark-mode .logout-container {
  border-top: 1px solid #374151; /* gray-700 */
}

body.dark-mode .nav-item.logout {
  color: #f87171; /* red-400 (lighter) */
}

body.dark-mode .nav-item.logout:hover,
body.dark-mode .nav-item.logout:focus-visible {
  color: #fca5a5; /* red-300 */
  background-color: #7f1d1d; /* red-900 */
}

/* 7. Any other text on the main content area */
body.dark-mode .main-content-dashboard {
   color: #f3f4f6; /* So default text is light */
}

/* For example, if you add widgets: */
body.dark-mode .your-widget-class {
  background-color: #1f2937; /* gray-800 */
  color: #f3f4f6;
  border: 1px solid #374151;
}