/* guitar2.css */
:root {
  /* …other vars… */
  --accent-pink:      #e88697;
  --accent-turquoise: #00b4ce;
}
/* Reset margins and set a light background */
body {
  margin: 0;
  padding: 0;
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Wrapper around the diagram */
#diagram-wrapper {
  position: relative;
  background-color: #ffffff;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  overflow: hidden;
}

/* Container for the SVG chord – ensure it fills the wrapper */
#chord-container {
  position: relative;
  width: 100%;
  height: auto;
}

/* Transparent overlay to capture clicks */
.click-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: transparent;
  z-index: 10;
}

/* Inline Dot customization panel */
#dot-menu {
  display: none;
  margin-bottom: 1rem;
  border: 1px solid #dee2e6;
  border-radius: .375rem;
  background-color: #ffffff;
}

#dot-menu .card-header {
  background-color: #f1f3f5;
  border-bottom: 1px solid #dee2e6;
}

#dot-menu .btn-close {
  border: none;
  background: transparent;
  font-size: 1.25rem;
}

/* Inputs inside the menu get full width */
#dot-menu .form-control,
#dot-menu .form-control-color {
  width: 100%;
}

/* Fix for color pickers */
.form-control-color {
  padding: .375rem .75rem;
}

/* Ensure SVG scales responsively */
#chord-container svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Button spacing */
.btn {
  min-width: 120px;
}

/* Small adjustment for form labels */
.form-label {
  font-weight: 500;
}

/* — RESPONSIVE WRAPPER RULES — */

/* Base: fluid width, with JS‐controlled max-width, centered */
.svg-wrapper {
  width: 100%;
  margin: 0 auto;

  /* allow horizontal scroll if contents overflow */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overflow-y: hidden;
}

/* Ensure the inner SVG always fills its parent */
.svg-wrapper svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

/* On very small viewports, remove any side cap entirely */
@media (max-width: 576px) {
  .svg-wrapper {
    padding: 0 0.5rem;
  }
}

/* Slider label styling */
#config-max-width {
  margin-top: 0.25rem;
}
#max-width-value {
  font-weight: bold;
}
@media (max-width: 576px) {
  /* hide the slider input */
  #config-max-width {
    display: none !important;
  }
  /* hide the "600px" live‐value span */
  #max-width-value {
    display: none !important;
  }
  /* hide the label that shows “Diagram Max Width:” */
  label[for="config-max-width"] {
    display: none !important;
  }
}
.btn-secondary {
  background-color: var(--accent-pink) !important;
  border-color:     var(--accent-pink) !important;
  color:            #fff;
}
.btn-secondary:hover {
  background-color: #d37686;  /* a slightly darker hover */
}

.btn-success {
  background-color: var(--accent-turquoise) !important;
  border-color:     var(--accent-turquoise) !important;
  color:            #fff;
}
.btn-success:hover {
  background-color: #00a4bc;  /* a slightly darker hover */
}

.btn-outline-primary {
  color:           var(--accent-turquoise);
  border-color:    var(--accent-turquoise);
}
.btn-outline-primary:hover {
  background-color: var(--accent-turquoise);
  color:            #fff;
}
.accordion .accordion-item::before {
  background: var(--accent-pink);
}
.accordion-button:not(.collapsed) {
  background-color: var(--accent-turquoise);
  color:            #fff;
}
/* allow the open/muted buttons to wrap on small screens */
@media (max-width: 576px) {
  #nut-controls-container {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 0.75rem; /* same as on desktop */
  }
}