/* Column view edit/new modal. Floats over the contact list when a user
   opens the "New view" link or clicks Edit on an existing view. */

#column-view-modal:empty {
  display: none;
}

.cv-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 35%, transparent);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.cv-modal__card {
  background: var(--md-sys-color-surface-container-low);
  border-radius: var(--md-sys-shape-corner-large);
  box-shadow: var(--md-sys-elevation-level3);
  width: min(720px, 100%);
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cv-modal__header {
  padding: 1rem 1.25rem 0.5rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.cv-modal__header h2 {
  margin: 0;
  font: 500 var(--md-sys-typescale-title-large-size)/var(--md-sys-typescale-title-large-line-height) var(--md-sys-typescale-title-large-font);
  color: var(--md-sys-color-on-surface);
}

.cv-modal__form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  /* Form fills the card; only the columns list scrolls so the
     header / name / lens / checks stay above and the action bar
     stays anchored below. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.cv-modal__error {
  background: var(--md-sys-color-error-container);
  color: var(--md-sys-color-on-error-container);
  padding: 0.5rem 0.75rem;
  border-radius: var(--md-sys-shape-corner-small);
  margin: 0.5rem 1.25rem 0;
}

.cv-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cv-modal__field-label {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}

.cv-modal__field input[type="text"],
.cv-modal__field select {
  font: inherit;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
}

.cv-modal__columns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-small);
  padding: 0.75rem;
  /* Take all leftover vertical space so the rows list can scroll
     while name/lens/checks above + action bar below stay put. */
  flex: 1 1 auto;
  min-height: 0;
}

.cv-modal__columns-legend {
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0 0.25rem;
}

.cv-modal__columns-hint {
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0 0 0.5rem;
}

.cv-modal__columns-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  align-items: stretch;
  /* Grid grows to fill .cv-modal__columns; the rows ul handles its
     own scroll so the arrows column on the right stays anchored. */
  flex: 1 1 auto;
  min-height: 0;
}

.cv-modal__columns-arrows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-self: center;
}

.cv-modal__checks {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.25rem 0;
}

.cv-modal__lens-note {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.6rem;
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  background: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent);
  border-radius: var(--md-sys-shape-corner-small);
}

.cv-modal__lens-note .material-symbols-outlined {
  font-size: 1.1rem;
  color: var(--md-sys-color-primary);
}

.cv-modal__lens-note strong {
  color: var(--md-sys-color-on-surface);
}

[x-cloak] {
  display: none !important;
}

.cv-modal__col-size {
  /* Native <select> skinned to match MD3 outlined-field. md-outlined-
     select carries a 210px+ internal min-width that blows out the
     row, so we draw the field ourselves: outline, rounded corners,
     custom chevron (SVG data URI), MD3 typography. Stays compact
     enough that "Sm/Md/Lg" + chevron fits in ~5rem. */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 1;
  padding: 0.4rem 1.5rem 0.4rem 0.6rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5' width='10' height='5'><polygon points='0,0 10,0 5,5' fill='%231a1d1f'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 8px 4px;
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 0;
  transition: border-color 120ms, background-color 120ms;
}

.cv-modal__col-size:hover {
  border-color: var(--md-sys-color-on-surface);
}

.cv-modal__col-size:focus {
  outline: none;
  border-color: var(--md-sys-color-primary);
  border-width: 2px;
  padding: calc(0.4rem - 1px) calc(1.5rem - 1px) calc(0.4rem - 1px) calc(0.6rem - 1px);
}

.cv-modal__rows {
  list-style: none;
  padding: 0 2px;            /* tiny inset so the focus outline on a row doesn't get clipped */
  margin: 0;
  display: grid;
  gap: 0.25rem;
  /* Internal scroll keeps long catalogs usable without pushing the
     action bar off-screen or making the arrows drift away. */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  /* Slim, hover-visible scrollbar. Firefox + Chromium 121+ honor
     scrollbar-width / scrollbar-color; webkit gets the ::-webkit
     rules below. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.cv-modal__rows:hover,
.cv-modal__rows:focus-within {
  scrollbar-color: color-mix(in srgb, var(--md-sys-color-on-surface) 35%, transparent) transparent;
}

.cv-modal__rows::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.cv-modal__rows::-webkit-scrollbar-track {
  background: transparent;
}

.cv-modal__rows::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
  transition: background 120ms;
}

.cv-modal__rows:hover::-webkit-scrollbar-thumb,
.cv-modal__rows:focus-within::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 35%, transparent);
}

.cv-modal__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: var(--md-sys-shape-corner-small);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 2%, transparent);
  cursor: pointer;
}

.cv-modal__row-label {
  flex: 1;
}

.cv-modal__row--on {
  background: color-mix(in srgb, var(--md-sys-color-primary) 6%, transparent);
}

.cv-modal__row:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent);
}

.cv-modal__row--selected {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: -2px;
}

.cv-modal__row-drag {
  cursor: grab;
  user-select: none;
  color: var(--md-sys-color-on-surface-variant);
  font-size: 1rem;
  letter-spacing: -0.15em;
}

.cv-modal__row-drag:active {
  cursor: grabbing;
}

.cv-modal__row-arrow {
  font: inherit;
  border: 1px solid var(--md-sys-color-outline-variant);
  background: var(--md-sys-color-surface);
  color: var(--md-sys-color-on-surface);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: var(--md-sys-shape-corner-small);
  cursor: pointer;
  line-height: 1;
}

.cv-modal__row-arrow:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
}


.cv-modal__row-lens {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--md-sys-color-on-surface-variant);
}

.cv-modal__row-kind {
  font-size: var(--md-sys-typescale-label-small-size);
  color: var(--md-sys-color-on-surface-variant);
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent);
  padding: 0.1rem 0.4rem;
  border-radius: var(--md-sys-shape-corner-extra-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cv-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem 1rem;
  border-top: 1px solid var(--md-sys-color-outline-variant);
  /* Negative inline margin cancels the form padding so the divider
     spans the full width of the card. */
  margin: 0 -1.25rem -1rem;
  flex: 0 0 auto;
}