/** 
 * navdd.css
 * Power BI Premium Inspired High-Contrast Dark Dropdown Engine
 */
select.nav-demo-dropdown {
  margin-left: 2rem;
  background-color: #060606; /* Power BI canvas black fallback */
  border: 1px solid #242424; /* Subtle corporate divider line */
  color: #a6a6a6; /* Premium muted platinum typography text */
  font-weight: 600;
  font-size: 0.95rem;
  font-family: inherit;
  padding: 0.4rem 1.8rem 0.4rem 0.8rem;
  border-radius: 4px;
  cursor: pointer;
  outline: none;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* Platinum arrow fill vector indicator token */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='10' height='6' viewBox='0 0 10 6'><path fill='%23a6a6a6' d='M0 0l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

/* Hover and Router Highlight States matching Power BI Yellow Theme */
select.nav-demo-dropdown:hover, 
select.nav-demo-dropdown:focus,
select.nav-demo-dropdown.active {
  color: #f2c811; /* Bright Power BI Yellow accent */
  border-color: #f2c811;
  background-color: #111111; /* Slight luminous elevation tint */
  
  /* Hot-swapped yellow arrow fill vector indicator token */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' width='10' height='6' viewBox='0 0 10 6'><path fill='%23f2c811' d='M0 0l5 5 5-5z'/></svg>");
}

/* Internal Option List Block Formatting Overrides */
select.nav-demo-dropdown option {
  background-color: #0c0c0c; /* Deep solid black option container background */
  color: #e3e3e3; /* High-contrast off-white option typography text */
  font-weight: 500;
  padding: 0.6rem;
}

/* Disabled Placeholder Option State Restyling */
select.nav-demo-dropdown option:disabled {
  color: #555555; /* Dark grayed-out look for 'Fabric Tools ⚡' placeholder text */
}

/* Responsive Mobile Layout Rules matching 768px Breakpoints */
@media (max-width: 768px) {
  select.nav-demo-dropdown {
    margin: 0.75rem 1rem 0 1rem;
    width: calc(100% - 2rem);
    background-position: right 1.25rem center;
    text-align: center;
    text-align-last: center;
    background-color: #0c0c0c; /* Dedicated dark surface isolation padding */
  }
}
