/*!
 * zipfile-edit.css — flaten for «Rediger ZIP».
 * Laget av ebizapple.no for zipfile.no.
 *
 * Bygger paa zipfile-archive.css, som eier .zt-ark-*, .zt-handlinger,
 * .zt-varsler, .zt-fremdrift og .zt-resultat. Her staar bare det som er
 * saerskilt for redigeringsflaten.
 */

[data-zipfile-tool='edit'] {
  container-type: inline-size;
}

/* [hidden] er en brukeragentregel og taper mot flex/grid (skillen § 30). */
[data-zipfile-tool='edit'] [hidden] {
  display: none !important;
}

.zt-ed-boks,
.zt-ed-nyboks {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zt-ed-hode {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.zt-ed-sum {
  margin: 0;
  flex: 1 1 auto;
  font-size: 0.9375rem;
  color: var(--ink-soft, #4a5a70);
  font-variant-numeric: tabular-nums;
}

.zt-ed-knapprad {
  display: flex;
  gap: 16px;
  flex: 0 0 auto;
}

.zt-ed-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 30rem;
  overflow-y: auto;
}

.zt-ed-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border: 1px solid var(--line, #dce3ed);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

/* En fjernet fil skal fortsatt vaere lesbar — den er ikke borte, bare valgt
   bort, og brukeren maa kunne angre. Derfor demping, ikke skjuling. */
.zt-ed-rad.er-fjernet {
  opacity: 0.55;
  background: var(--bg, #f7f9fc);
}

.zt-ed-rad.er-fjernet .zt-ed-navn {
  text-decoration: line-through;
}

/* Hele avkryssingen er en label med padding, saa trykkmaalet er stort nok
   selv om selve boksen er 18x18 (skillen § 15). */
.zt-ed-behold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 0.875rem;
  color: var(--ink-soft, #4a5a70);
  white-space: nowrap;
}

.zt-ed-navn {
  flex: 1 1 14rem;
  min-width: 0;
  min-height: 44px;
  font-family: inherit;
  font-size: 0.9375rem;
}

.zt-ed-navn:disabled {
  background: var(--bg, #f7f9fc);
  color: var(--ink-soft, #4a5a70);
}

.zt-ed-ny {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--privacy, #16a36a) 45%, var(--line, #dce3ed));
}

.zt-ed-rad .zt-lenkeknapp {
  flex: 0 0 auto;
  min-height: 44px;
}

/* Deaktivert lagreknapp: navnekollisjon eller tomt navn maa rettes foerst. */
.zt-handlinger .zt-knapp:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@container (max-width: 34rem) {
  .zt-ed-rad {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .zt-ed-behold {
    min-height: 44px;
  }

  .zt-ed-navn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-ed-rad {
    transition: none;
  }
}