/* UVU Color Token Lab
   Layout uses guide classes: container-lg, controls, flex-h, responsive-table, btn-*.
   This file only adds scoped tool details that do not exist as guide utilities.
*/

#uvu-color-token-lab {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-lg);
}

#uvu-color-token-lab > section,
#uvu-color-token-lab > header {
  margin-bottom: var(--space-sm);
}

#uvu-color-token-lab .controls input[type="search"] {
  padding: 0.5rem 0.75rem;
  font-size: var(--fs-p);
  border-radius: 0.5rem;
  border: 1px solid var(--color-grey);
  background-color: var(--color-white);
  color: var(--color-dark-grey);
}

#uvu-color-token-lab .controls input[type="search"]:focus {
  border-color: var(--color-uvu-green);
  outline: none;
}

#uvu-color-token-lab .controls input[type="checkbox"] {
  accent-color: var(--color-uvu-green);
}

#uvu-color-token-lab caption {
  text-align: left;
  padding: var(--space-xs);
  font-family: var(--font-primary);
  font-weight: var(--fw-700);
  color: var(--color-uvu-green);
}

#uvu-color-token-lab [data-uvu-col="name"] {
  width: 22%;
}

#uvu-color-token-lab [data-uvu-col="type"] {
  width: 12%;
}

#uvu-color-token-lab [data-uvu-col="swatch"] {
  width: 12%;
}

#uvu-color-token-lab [data-uvu-col="hex"] {
  width: 10%;
}

#uvu-color-token-lab [data-uvu-col="value"] {
  width: 18%;
}

#uvu-color-token-lab [data-uvu-col="selector"] {
  width: 18%;
}

#uvu-color-token-lab [data-uvu-col="related"] {
  width: 8%;
}

#uvu-color-token-lab [data-uvu-main="true"] {
  background-color: var(--color-off-white);
}

#uvu-color-token-lab [data-uvu-extra="true"] {
  background-color: rgba(var(--color-grey-rgb), 0.08);
}

#uvu-color-token-lab [data-uvu-name] {
  display: block;
  font-family: var(--font-primary);
  font-weight: var(--fw-700);
  color: var(--color-uvu-green);
}

#uvu-color-token-lab [data-uvu-friendly] {
  display: block;
  font-size: var(--fs-sm);
}

#uvu-color-token-lab [data-uvu-list] {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-xxs) / 2);
  margin-top: calc(var(--space-xxs) / 2);
}

#uvu-color-token-lab [data-uvu-chip] {
  display: inline-block;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-full);
  background-color: var(--color-white);
  color: var(--color-grey);
  font-size: var(--fs-sm-static);
  line-height: var(--lh-xs);
}

#uvu-color-token-lab [data-uvu-code] {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-bottom: calc(var(--space-xxs) / 2);
  overflow-wrap: anywhere;
  line-height: var(--lh-xs);
}

#uvu-color-token-lab [data-uvu-muted] {
  color: var(--color-grey);
}

#uvu-color-token-lab [data-uvu-swatch-pair] {
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  flex-wrap: wrap;
}

#uvu-color-token-lab [data-uvu-swatch] {
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xxs) / 2);
}

#uvu-color-token-lab [data-uvu-swatch-chip] {
  width: 4.25rem;
  height: 2.75rem;
  border: 1px solid var(--color-grey);
  border-radius: var(--radius-md);
  background-color: transparent;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ddd 75%),
    linear-gradient(-45deg, transparent 75%, #ddd 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}

#uvu-color-token-lab [data-uvu-swatch-label] {
  font-size: var(--fs-sm-static);
  color: var(--color-grey);
}

#uvu-color-token-lab [data-uvu-related] {
  max-width: 16rem;
}

@media (max-width: 900px) {
  #uvu-color-token-lab [data-uvu-col="selector"],
  #uvu-color-token-lab [data-uvu-col="related"] {
    width: auto;
  }
}


#uvu-color-token-lab fieldset {
  border: 1px solid var(--color-light-grey);
  border-radius: var(--radius-md);
  padding: var(--space-xs);
  margin: 0;
}

#uvu-color-token-lab legend {
  font-family: var(--font-primary);
  font-weight: var(--fw-700);
  color: var(--color-uvu-green);
  padding-left: var(--space-xxs);
  padding-right: var(--space-xxs);
}

/* Native checkbox list for the reference-group filters.
   This intentionally keeps real <input type="checkbox"> controls visible. */
#uvu-color-token-lab .uvu-ctl-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

#uvu-color-token-lab .uvu-ctl-check-option {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  width: auto;
  margin: 0;
  padding: 0;
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  color: var(--color-dark-grey);
}

#uvu-color-token-lab .uvu-ctl-check-option input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}

#uvu-color-token-lab .uvu-ctl-check-option span {
  display: inline-flex;
  align-items: baseline;
  gap: calc(var(--space-xxs) / 2);
}

#uvu-color-token-lab .uvu-ctl-check-option small {
  display: inline;
  margin: 0;
  color: var(--color-grey);
  font-size: var(--fs-sm-static);
}


#uvu-color-token-lab [data-uvu-col="compare"] {
  width: 7%;
}

#uvu-color-token-lab .uvu-ctl-compare-check {
  display: flex;
  align-items: center;
  gap: calc(var(--space-xxs) / 2);
}

#uvu-color-token-lab .uvu-ctl-compare-check input {
  accent-color: var(--color-uvu-green);
}

#uvu-color-token-lab .uvu-ctl-modal[hidden] {
  display: none;
}

#uvu-color-token-lab .uvu-ctl-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background-color: rgba(var(--color-black-rgb), 0.55);
  overflow: auto;
}

#uvu-color-token-lab .uvu-ctl-modal-panel {
  width: min(96vw, 86rem);
  max-height: min(86vh, 58rem);
  overflow: auto;
  margin: auto;
  padding: var(--space-sm);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-1);
  background-color: var(--surface-1);
  color: var(--text-1);
  box-shadow: var(--shadow-lg);
}

#uvu-color-token-lab .uvu-ctl-modal-panel > header {
  margin-bottom: var(--space-sm);
}

#uvu-color-token-lab .uvu-ctl-modal-panel table {
  margin-bottom: 0;
}


#uvu-color-token-lab .uvu-ctl-modal-panel-narrow {
  width: min(92vw, 48rem);
}

#uvu-color-token-lab [data-uvu-col="related"] {
  width: 5rem;
}

#uvu-color-token-lab .uvu-ctl-info-button {
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  /* border-radius: var(--radius-full); */
	border:none;
  line-height: 1;
}

#uvu-color-token-lab .uvu-ctl-info-button .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
}

#uvu-color-token-lab .uvu-ctl-related-summary {
  margin-bottom: var(--space-xs);
  padding: var(--space-xs);
  border: 1px solid var(--border-1);
}

#uvu-color-token-lab .uvu-ctl-related-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: 0;
  margin: 0;
  list-style: none;
}

#uvu-color-token-lab .uvu-ctl-related-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-md);
  background-color: var(--surface-2);
}

#uvu-color-token-lab .uvu-ctl-related-item > div:first-child {
  min-width: 0;
}

#uvu-color-token-lab .uvu-ctl-related-item [data-uvu-code] {
  max-width: 100%;
}

#uvu-color-token-lab .responsive-table table {
  table-layout: auto;
}

#uvu-color-token-lab table td:last-child,
#uvu-color-token-lab table th:last-child {
  text-align: center;
}

#uvu-color-token-lab .controls fieldset,
#uvu-color-token-lab section[aria-label="Quick actions"] {
  border-radius: var(--radius-lg);
}

@media (max-width: 720px) {
  #uvu-color-token-lab .uvu-ctl-modal {
    align-items: flex-start;
    padding: var(--space-xs);
  }

  #uvu-color-token-lab .uvu-ctl-related-item {
    align-items: flex-start;
    flex-direction: column;
  }
}

#uvu-color-token-lab .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* v6: keep repeated row actions compact. Table headers provide the visible labels. */
#uvu-color-token-lab .uvu-ctl-compare-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
}

#uvu-color-token-lab .uvu-ctl-compare-check input {
  margin: 0;
}

#uvu-color-token-lab td:first-child,
#uvu-color-token-lab th:first-child,
#uvu-color-token-lab td:last-child,
#uvu-color-token-lab th:last-child {
  text-align: center;
}