/**
 * Modern Dark WordPress Admin Menu
 *
 * This SCSS file completely modernizes the WordPress admin menu with:
 * - Clean dark mode interface
 * - Minimalist design elements
 * - Updated icon styles
 * - Improved typography and spacing
 * - Subtle animations and transitions
 *
 * To use:
 * 1. Compile this SCSS to CSS
 * 2. Add to your theme or plugin
 * 3. Enqueue on admin pages
 */
/* Admin Menu Base Styles */
#adminmenuback,
#adminmenuwrap {
  background: #1e2025;
  width: 200px !important;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
}

#adminmenu {
  width: 200px !important;
  margin: 0;
  background: transparent;
  clear: both;
  padding-top: 12px;
}
#adminmenu li {
  margin: 0;
  padding: 0;
  opacity: 1;
  transition: all 0.18s ease;
}
#adminmenu li.wp-menu-separator {
  height: 1px;
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
}
#adminmenu li.wp-menu-open > a.menu-top {
  background: #282c34 !important;
  border-left: 3px solid #4f8eff;
  font-weight: 500;
}
#adminmenu li.current > a.menu-top {
  background: #282c34 !important;
  border-left: 3px solid #4f8eff;
  font-weight: 500;
}
#adminmenu li.wp-has-current-submenu > a.menu-top {
  background: #282c34 !important;
  border-left: 3px solid #4f8eff;
  font-weight: 500;
}
#adminmenu a.menu-top {
  height: 40px;
  padding: 0 12px;
  border-left: 3px solid transparent;
  font-size: 14px;
  color: #b9bdc1;
  font-weight: 400;
  line-height: 40px;
  transition: all 0.18s ease;
}
#adminmenu a.menu-top:hover, #adminmenu a.menu-top:focus {
  color: #f1f2f3;
  background: #282c34 !important;
  box-shadow: none;
}
#adminmenu a.menu-top .wp-menu-image {
  width: 24px;
  height: 40px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
#adminmenu a.menu-top .wp-menu-image:before {
  color: #8b8e94;
  font-size: 17px;
  transition: color 0.15s ease;
  padding: 0;
  width: auto;
  height: auto;
}
#adminmenu a.menu-top:hover .wp-menu-image:before {
  color: #4f8eff;
}
#adminmenu a.menu-top .wp-menu-name {
  padding: 0;
  margin-left: 6px;
}
#adminmenu .awaiting-mod,
#adminmenu .update-plugins {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4f8eff;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  min-width: 14px;
  height: 14px;
  padding: 2px;
  border-radius: 10px;
  margin: 0 0 0 6px;
  box-shadow: none;
}
#adminmenu .awaiting-mod .plugin-count,
#adminmenu .awaiting-mod .update-count,
#adminmenu .update-plugins .plugin-count,
#adminmenu .update-plugins .update-count {
  font-size: inherit;
  line-height: inherit;
}
#adminmenu .plugin-update-tr .update-message {
  border-left-color: #ffcc66;
}
#adminmenu .wp-submenu {
  left: 200px;
  width: 200px !important;
  background: #16171b;
  border-radius: 0 4px 4px 0;
  padding: 6px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
  transition: all 0.2s ease;
}
#adminmenu .wp-submenu.wp-submenu-wrap {
  border: 0;
  margin-top: 0;
  padding: 6px 0;
  background: #16171b;
}
#adminmenu .wp-submenu li {
  margin: 0;
  padding: 0;
}
#adminmenu .wp-submenu li a {
  padding: 8px 12px 8px 34px;
  margin: 0;
  font-size: 13px;
  color: #b9bdc1;
  line-height: 1.4;
  transition: all 0.18s ease;
  border-left: 2px solid transparent;
}
#adminmenu .wp-submenu li a:hover, #adminmenu .wp-submenu li a:focus {
  color: #f1f2f3;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}
#adminmenu .wp-submenu li a.current {
  color: #f1f2f3;
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid #4f8eff;
  font-weight: 500;
}
#adminmenu .wp-has-current-submenu .wp-submenu > li > a {
  padding-left: 44px;
}

.folded #adminmenu {
  width: 36px !important;
}
.folded #adminmenu .wp-submenu {
  margin-left: 0;
  /* Needed for proper flyout */
  left: 36px;
  border-top-right-radius: 4px;
}
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
  border-top-right-radius: 4px;
}
.folded #adminmenu li.menu-top .wp-submenu-head {
  display: none;
}
.folded #adminmenu li.opensub > a.menu-top {
  background: #282c34 !important;
}

.folded #adminmenuback,
.folded #adminmenuwrap {
  width: 36px !important;
}

/* Adjust main content area to match new menu */
.folded #wpcontent,
.folded #wpfooter {
  margin-left: 36px;
}

#wpcontent,
#wpfooter {
  margin-left: 200px;
}

/* Make sure auto-folding still works */
@media only screen and (max-width: 960px) {
  .auto-fold #adminmenu,
  .auto-fold #adminmenuback,
  .auto-fold #adminmenuwrap {
    width: 36px !important;
  }
  .auto-fold #wpcontent,
  .auto-fold #wpfooter {
    margin-left: 36px;
  }
}
@media only screen and (max-width: 782px) {
  .auto-fold #adminmenu,
  .auto-fold #adminmenuback,
  .auto-fold #adminmenuwrap {
    width: 0 !important;
  }
  .auto-fold #wpcontent,
  .auto-fold #wpfooter {
    margin-left: 0;
  }
}
/* Modernized Dashicons */
#adminmenu .wp-menu-image:before {
  font-family: dashicons;
  font-weight: 400;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#adminmenu li#menu-dashboard .wp-menu-image:before {
  content: "\f11f";
}
#adminmenu li#menu-posts .wp-menu-image:before {
  content: "\f109";
}
#adminmenu li#menu-media .wp-menu-image:before {
  content: "\f306";
}
#adminmenu li#menu-pages .wp-menu-image:before {
  content: "\f105";
}
#adminmenu li#menu-comments .wp-menu-image:before {
  content: "\f101";
}
#adminmenu li#menu-appearance .wp-menu-image:before {
  content: "\f100";
}
#adminmenu li#menu-plugins .wp-menu-image:before {
  content: "\f106";
}
#adminmenu li#menu-users .wp-menu-image:before {
  content: "\f110";
}
#adminmenu li#menu-tools .wp-menu-image:before {
  content: "\f107";
}
#adminmenu li#menu-settings .wp-menu-image:before {
  content: "\f108";
}

/* Custom menu collapse button */
#collapse-button {
  margin: 0;
  height: 40px;
  width: 100%;
  padding: 0 12px;
  color: #8b8e94;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
#collapse-button:hover, #collapse-button:focus {
  color: #f1f2f3;
  background: transparent;
}
#collapse-button .collapse-button-icon {
  width: 20px;
  height: 20px;
  transition: all 0.18s ease;
  left: 17px;
}
#collapse-button .collapse-button-label {
  margin-left: 8px;
}

/* Update bubble styling */
#adminmenu .update-plugins,
#adminmenu .awaiting-mod {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #4f8eff;
  font-size: 10px;
  font-weight: 600;
  border-radius: 10px;
  margin-left: 6px;
  padding: 0 6px;
  min-width: 18px;
  height: 18px;
}
#adminmenu .update-plugins .update-count,
#adminmenu .update-plugins .plugin-count,
#adminmenu .update-plugins .comment-count,
#adminmenu .awaiting-mod .update-count,
#adminmenu .awaiting-mod .plugin-count,
#adminmenu .awaiting-mod .comment-count {
  font-size: inherit;
}

/* Admin bar compatibility */
#wpadminbar {
  background: #16171b;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
#wpadminbar .ab-item,
#wpadminbar .ab-empty-item {
  color: #b9bdc1;
}
#wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item {
  background: #282c34;
  color: #f1f2f3;
}
#wpadminbar .menupop.hover .ab-item,
#wpadminbar .ab-item:focus,
#wpadminbar .ab-item:hover,
#wpadminbar .ab-item:active {
  background: #282c34;
  color: #f1f2f3;
}
#wpadminbar #wp-admin-bar-site-name > .ab-item {
  font-weight: 500;
}

/* Add subtle animations, but keep submenus instant */
#adminmenu li a {
  transition: all 0.18s ease;
}
#adminmenu li.wp-has-submenu ul.wp-submenu {
  /* Remove submenu animation for instant display */
  transition: opacity 0.1s ease-out;
}

/* Update notification animations */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.update-plugins .update-count,
.awaiting-mod .mod-count {
  animation: pulse 2s infinite;
  animation-delay: 3s;
}

body.rtl #adminmenu a.menu-top {
  border-left: none;
  border-right: 3px solid transparent;
}
body.rtl #adminmenu li.wp-menu-open > a.menu-top,
body.rtl #adminmenu li.current > a.menu-top,
body.rtl #adminmenu li.wp-has-current-submenu > a.menu-top {
  border-left: none;
  border-right: 3px solid #4f8eff;
}
body.rtl #adminmenu .wp-menu-name {
  margin-left: 0;
  margin-right: 10px;
}
body.rtl #adminmenu .wp-submenu {
  left: auto;
  right: 200px;
  border-radius: 4px 0 0 4px;
}
body.rtl #adminmenu .wp-submenu li a {
  padding: 8px 34px 8px 12px;
  border-left: none;
  border-right: 2px solid transparent;
}
body.rtl #adminmenu .wp-submenu li a.current {
  border-left: none;
  border-right: 2px solid #4f8eff;
}
body.rtl.folded #adminmenu .wp-submenu {
  left: auto;
  right: 36px;
  border-radius: 4px 0 0 4px;
}