/**
 * CSS styles for the PKND Support menu items form.
 */

/* Global form styles */
form#pknd-support-menu-items-form,
.pknd-support-menu-form {
  max-width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #333;
}

/* Menu items wrapper */
#menu-items-wrapper,
#pknd-support-menu-items-wrapper {
  margin-bottom: 1.5em;
  padding: 0;
}

/* Individual menu item styling */
#menu-items-wrapper details,
#pknd-support-menu-items-wrapper details {
  background-color: #ffffff;
  border-radius: 4px;
  padding: 1em 1.2em;
  margin-bottom: 1em;
  position: relative;
  border: 1px solid #dcdcdc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .05);
  transition: all 0.2s ease;
}

/* Fix for summary styling */
#menu-items-wrapper details summary,
#pknd-support-menu-items-wrapper details summary {
  padding: 0.75rem 1.5rem 0.75rem 0;
  position: relative;
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}

/* Remove default arrow/triangle */
#menu-items-wrapper details summary::-webkit-details-marker,
#pknd-support-menu-items-wrapper details summary::-webkit-details-marker {
  display: none;
}

/* Remove required marker and fix summary elements */
#menu-items-wrapper details summary .required-mark,
#pknd-support-menu-items-wrapper details summary .required-mark,
#menu-items-wrapper details summary .claro-details__summary-summary,
#pknd-support-menu-items-wrapper details summary .claro-details__summary-summary {
  display: none;
}

#menu-items-wrapper details:last-child,
#pknd-support-menu-items-wrapper details:last-child {
  margin-bottom: 0;
}

#menu-items-wrapper details:hover,
#pknd-support-menu-items-wrapper details:hover {
  border-color: #bebdbd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
}

/* Individual menu item styling */
#menu-items-wrapper details summary,
#pknd-support-menu-items-wrapper details summary {
  font-weight: 600;
  font-size: 1em;
  color: #222330;
  margin-bottom: 0.6em;
  cursor: pointer;
  outline: none;
  position: relative;
  list-style: none;
}

/* Remove the default triangle/arrow */
#menu-items-wrapper details summary::-webkit-details-marker,
#pknd-support-menu-items-wrapper details summary::-webkit-details-marker {
  display: none;
}

/* Hide unwanted elements in summary */
#menu-items-wrapper details summary .required-mark,
#pknd-support-menu-items-wrapper details summary .required-mark,
#menu-items-wrapper details summary .claro-details__summary-summary,
#pknd-support-menu-items-wrapper details summary .claro-details__summary-summary {
  display: none;
}

#menu-items-wrapper details summary::marker,
#pknd-support-menu-items-wrapper details summary::marker,
#menu-items-wrapper details summary::-webkit-details-marker,
#pknd-support-menu-items-wrapper details summary::-webkit-details-marker {
  display: none;
}

#menu-items-wrapper details .form-item,
#pknd-support-menu-items-wrapper details .form-item {
  margin-bottom: 1em;
  padding-right: 10px;
}

#menu-items-wrapper .form-checkboxes,
#pknd-support-menu-items-wrapper .form-checkboxes {
  margin-top: 0.8em;
}

/* "Add another item" button styling - scoped to our module */
#menu-items-wrapper input[type="submit"],
form#pknd-support-menu-items-form input[type="submit"] {
  margin-top: 1em;
  background-color: #f5f5f2;
  color: #333333;
  border: 1px solid #b8b8b8;
  border-radius: 2em;
  padding: 0.6em 1.2em;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 1em;
}

#menu-items-wrapper input[type="submit"]:hover,
form#pknd-support-menu-items-form input[type="submit"]:hover {
  background-color: #f9f8f6;
  border-color: #a6a6a6;
}

/* Label styling */
#menu-items-wrapper label,
#pknd-support-menu-items-wrapper label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.3em;
  color: #222330;
  font-size: 0.85em;
  white-space: normal;
  line-height: 1.3;
}

/* Field layout using CSS grid for compact inline display */
@media screen and (min-width: 768px) {
  #menu-items-wrapper details .details-wrapper,
  #pknd-support-menu-items-wrapper details .details-wrapper {
    display: grid;
    grid-template-columns: 3fr 2fr 3fr 4fr 1fr;
    grid-column-gap: 20px;
    grid-row-gap: 0.5em;
    align-items: start;
  }
  
  /* Title field in first column */
  #menu-items-wrapper .form-item-menu-items-wrapper-items-0-title,
  #menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-title"],
  #pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-title"] {
    grid-column: 1;
    margin-bottom: 0;
  }
  
  /* Icon field */
  #menu-items-wrapper .form-item-menu-items-wrapper-items-0-icon,
  #menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-icon"],
  #pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-icon"] {
    grid-column: 2;
  }
  
  /* Description field */
  #menu-items-wrapper .form-item-menu-items-wrapper-items-0-description,
  #menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-description"],
  #pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-description"] {
    grid-column: 3;
  }
  
  /* URL field */
  #menu-items-wrapper .form-item-menu-items-wrapper-items-0-url,
  #menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-url"],
  #pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-url"] {
    grid-column: 4;
  }
  
  /* Weight field */
  #menu-items-wrapper .form-item-menu-items-wrapper-items-0-weight,
  #menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-weight"],
  #pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-weight"] {
    grid-column: 5;
    width: 60px;
    justify-self: end;
  }
  
  /* Remove checkbox at bottom */
  /* Remove checkbox styling */
  #menu-items-wrapper .form-item--menu-items-wrapper-items-0-remove,
  #menu-items-wrapper [class*="form-item--menu-items-wrapper-items-"][class*="-remove"],
  #pknd-support-menu-items-wrapper [class*="form-item--pknd-support-menu-items-wrapper-items-"][class*="-remove"] {
    grid-column: 1 / span 5;
    border-top: 1px solid #e8e8e8;
    padding-top: 0.5em;
    margin-top: 0.5em;
  }
}

/* Adjust form actions - scoped to our module only */
form#pknd-support-menu-items-form .form-actions {
  margin-top: 1.5em;
  padding-top: 1em;
  border-top: 1px solid #e0e0e0;
  display: flex;
  justify-content: flex-end;
}

form#pknd-support-menu-items-form .form-actions input[type="submit"] {
  background-color: #222330;
  color: white;
  border: 1px solid #222330;
  border-radius: 2em;
  padding: 0.6em 1.2em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-size: 1em;
}

form#pknd-support-menu-items-form .form-actions input[type="submit"]:hover {
  background-color: #000000;
  border-color: #000000;
}

/* Add some styling for the remove checkbox */
#menu-items-wrapper .form-checkbox,
#pknd-support-menu-items-wrapper .form-checkbox {
  margin-right: 0.6em;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #919191;
  border-radius: 2px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
}

#menu-items-wrapper .form-checkbox:checked,
#pknd-support-menu-items-wrapper .form-checkbox:checked {
  background-color: #222330;
  border-color: #222330;
}

#menu-items-wrapper .form-checkbox:checked::after,
#pknd-support-menu-items-wrapper .form-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Specific adjustment for icon dropdown to use full width */
#menu-items-wrapper .form-item-menu-items-wrapper-items-0-icon select,
#menu-items-wrapper [class*="form-item-menu-items-wrapper-items-"][class*="-icon"] select,
#pknd-support-menu-items-wrapper [class*="form-item-pknd-support-menu-pknd-support-menu-items-wrapper-"][class*="-icon"] select {
  width: 100%;
}

/* Remove custom checkbox styling to use Drupal defaults */

/* Style for the weight field - more specific selector */
form#pknd-support-menu-items-form #menu-items-wrapper select.form-select,
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper select.form-select {
  width: 70px;
  padding: 0.5em;
  border-radius: 2em;
  border: 1px solid #8e929c;
  background-color: #fff;
  font-size: 0.9em;
}

/* Input field styling - scoped to our module */
form#pknd-support-menu-items-form #menu-items-wrapper input[type="text"],
form#pknd-support-menu-items-form #menu-items-wrapper input[type="url"],
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper input[type="text"],
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper input[type="url"],
form#pknd-support-menu-items-form #menu-items-wrapper select,
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper select {
  width: 100%;
  padding: 0.5em 0.7em;
  border: 1px solid #8e929c;
  border-radius: 2em;
  font-size: 0.9em;
  transition: border-color 0.2s ease;
  min-height: 32px;
  background-color: #fff;
}

form#pknd-support-menu-items-form #menu-items-wrapper input[type="text"]:focus,
form#pknd-support-menu-items-form #menu-items-wrapper input[type="url"]:focus,
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper input[type="text"]:focus,
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper input[type="url"]:focus,
form#pknd-support-menu-items-form #menu-items-wrapper select:focus,
form#pknd-support-menu-items-form #pknd-support-menu-items-wrapper select:focus {
  border-color: #0d77b5;
  outline: none;
  box-shadow: 0 0 0 1px #0d77b5;
}

/* Help text styling */
#menu-items-wrapper .description,
#pknd-support-menu-items-wrapper .description {
  font-size: 0.8em;
  color: #767676;
  margin-top: 0.3em;
  line-height: 1.4;
  display: block;
  white-space: normal;
}

/* Add introduction paragraph styling */
form#pknd-support-menu-items-form p,
.pknd-support-menu-form p {
  font-size: 0.9em;
  line-height: 1.5;
  color: #495057;
  margin-bottom: 1em;
  max-width: 800px;
}